Rework modal to be implemented entirely using public APIs

change/react-native-windows-f295c471-5165-440a-a5d5-4d9b2d9c84d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Rework modal implementation to use public APIs",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/CompositionComponentView.idl

@@ -7,6 +7,7 @@ import "ViewProps.idl";
 import "Composition.Input.idl";
 import "CompositionSwitcher.idl";
 import "IReactContext.idl";
+import "ReactNativeIsland.idl";
 
 #include "DocString.h"
 
@@ -110,6 +111,8 @@ namespace Microsoft.ReactNative.Composition
   [default_interface]
   runtimeclass RootComponentView : ViewComponentView {
     Microsoft.ReactNative.ComponentView GetFocusedComponent();
+
+    Microsoft.ReactNative.ReactNativeIsland ReactNativeIsland { get; };
   };
 
   [experimental]

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

@@ -15,8 +15,6 @@
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/DebuggingOverlayComponentView.h>
 #include <Fabric/Composition/ImageComponentView.h>
-#include <Fabric/Composition/Modal/WindowsModalHostViewComponentView.h>
-#include <Fabric/Composition/Modal/WindowsModalHostViewShadowNode.h>
 #include <Fabric/Composition/ParagraphComponentView.h>
 #include <Fabric/Composition/RootComponentView.h>
 #include <Fabric/Composition/ScrollViewComponentView.h>
@@ -59,9 +57,6 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
   } else if (componentHandle == facebook::react::ImageShadowNode::Handle()) {
     view = winrt::Microsoft::ReactNative::Composition::implementation::ImageComponentView::Create(
         compContext, tag, m_context);
-  } else if (componentHandle == facebook::react::WindowsModalHostViewShadowNode::Handle()) {
-    view = winrt::Microsoft::ReactNative::Composition::implementation::WindowsModalHostComponentView::Create(
-        compContext, tag, m_context);
   } else if (componentHandle == facebook::react::WindowsTextInputShadowNode::Handle()) {
     view = winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView::Create(
         compContext, tag, m_context);

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

@@ -192,8 +192,6 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
   if (props == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
-  auto accessibilityRole =
-      props->accessibilityRole.empty() ? compositionView->DefaultControlType() : props->accessibilityRole;
   // Invoke control pattern is used to support controls that do not maintain state
   // when activated but rather initiate or perform a single, unambiguous action.
   if (patternId == UIA_InvokePatternId && (props->onAccessibilityTap)) {

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

@@ -142,9 +142,8 @@ struct CompositionInputKeyboardSource : winrt::implements<
 
 CompositionEventHandler::CompositionEventHandler(
     const winrt::Microsoft::ReactNative::ReactContext &context,
-    const winrt::Microsoft::ReactNative::ReactNativeIsland &reactNativeIsland,
-    const int fragmentTag)
-    : m_fragmentTag(fragmentTag), m_context(context), m_wkRootView(reactNativeIsland) {}
+    const winrt::Microsoft::ReactNative::ReactNativeIsland &reactNativeIsland)
+    : m_context(context), m_wkRootView(reactNativeIsland) {}
 
 void CompositionEventHandler::Initialize() noexcept {
 #ifdef USE_WINUI3
@@ -365,6 +364,9 @@ void CompositionEventHandler::onPointerWheelChanged(
     facebook::react::Point ptLocal;
     facebook::react::Point ptScaled = {static_cast<float>(position.X), static_cast<float>(position.Y)};
 
+    // In the case of a sub rootview, we may have a non-zero origin.  hitTest takes a pt in the parent coords, so we
+    // need to apply the current origin
+    ptScaled += RootComponentView().layoutMetrics().frame.origin;
     auto tag = RootComponentView().hitTest(ptScaled, ptLocal);
 
     if (tag == -1)
@@ -977,6 +979,11 @@ void CompositionEventHandler::getTargetPointerArgs(
   tag = -1;
 
   ptScaled = {position.X, position.Y};
+
+  // In the case of a sub rootview, we may have a non-zero origin.  hitTest takes a pt in the parent coords, so we need
+  // to apply the current origin
+  ptScaled += RootComponentView().layoutMetrics().frame.origin;
+
   if (std::find(m_capturedPointers.begin(), m_capturedPointers.end(), pointerId) != m_capturedPointers.end()) {
     assert(m_pointerCapturingComponentTag != -1);
     tag = m_pointerCapturingComponentTag;
@@ -989,30 +996,7 @@ void CompositionEventHandler::getTargetPointerArgs(
       ptLocal.y = ptScaled.y - (clientRect.top / strongRootView.ScaleFactor());
     }
   } else {
-    if (m_fragmentTag == -1) {
-      tag = RootComponentView().hitTest(ptScaled, ptLocal);
-      return;
-    }
-
-    // check if the fragment tag exists
-    if (!fabricuiManager->GetViewRegistry().findComponentViewWithTag(m_fragmentTag)) {
-      return;
-    }
-
-    auto fagmentView = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(m_fragmentTag).view;
-    auto fagmentchildren = fagmentView.Children();
-
-    // call the hitTest with the fargment as the RootComponent
-    for (auto index = fagmentchildren.Size(); index > 0; index--) {
-      auto childView = fagmentchildren.GetAt(index - 1);
-      auto targetTag =
-          winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(childView)->hitTest(
-              ptScaled, ptLocal);
-      if (targetTag != -1) {
-        tag = targetTag;
-        break;
-      }
-    }
+    tag = RootComponentView().hitTest(ptScaled, ptLocal);
   }
 }
 

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h

@@ -31,8 +31,7 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
  public:
   CompositionEventHandler(
       const winrt::Microsoft::ReactNative::ReactContext &context,
-      const winrt::Microsoft::ReactNative::ReactNativeIsland &ReactNativeIsland,
-      const int fragmentTag);
+      const winrt::Microsoft::ReactNative::ReactNativeIsland &ReactNativeIsland);
   virtual ~CompositionEventHandler();
 
   void Initialize() noexcept;
@@ -152,7 +151,6 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
 
   std::map<PointerId, ActiveTouch> m_activeTouches; // iOS is map of touch event args to ActiveTouch..?
   PointerId m_touchId = 0;
-  int m_fragmentTag = -1;
 
   std::map<PointerId, std::vector<ReactTaggedView>> m_currentlyHoveredViewsPerPointer;
   winrt::weak_ref<winrt::Microsoft::ReactNative::ReactNativeIsland> m_wkRootView;

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

@@ -468,7 +468,7 @@ bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composit
   if (!root)
     return false;
 
-  auto rootView{uiManager->GetReactNativeIsland(root->Tag())};
+  auto rootView{root->ReactNativeIsland()};
   if (!rootView) {
     return false;
   }
@@ -487,7 +487,7 @@ void ComponentView::ReleasePointerCapture(
   if (!root)
     return;
 
-  auto rootView{uiManager->GetReactNativeIsland(root->Tag())};
+  auto rootView{root->ReactNativeIsland()};
   if (!rootView) {
     return;
   }
@@ -913,10 +913,13 @@ bool ComponentView::anyHitTestHelper(
   if (auto index = m_children.Size()) {
     do {
       index--;
-      targetTag = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_children.GetAt(index))
-                      ->hitTest(ptContent, localPt);
-      if (targetTag != -1) {
-        return true;
+      auto child =
+          winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_children.GetAt(index));
+      if (child->rootComponentView() == rootComponentView()) {
+        targetTag = child->hitTest(ptContent, localPt);
+        if (targetTag != -1) {
+          return true;
+        }
       }
     } while (index != 0);
   }
@@ -1330,7 +1333,7 @@ winrt::Microsoft::ReactNative::ComponentView lastDeepChild(
 }
 
 // Walks the tree calling the function fn on each node.
-// If fn returns true, then walkTree stops itterating over the tree, and returns true.
+// If fn returns true, then walkTree stops iterating over the tree, and returns true.
 // If the tree walk completes without fn returning true, then walkTree returns false.
 bool walkTree(
     const winrt::Microsoft::ReactNative::ComponentView &view,

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

@@ -124,8 +124,17 @@ winrt::Microsoft::ReactNative::implementation::ComponentView *NavigateFocusHelpe
       [reason, &toFocus](::winrt::Microsoft::ReactNative::implementation::ComponentView &v) noexcept
       -> bool { return (toFocus = NavigateFocusHelper(v, reason)); };
 
-  if (view.runOnChildren(reason == winrt::Microsoft::ReactNative::FocusNavigationReason::First, fn)) {
-    return toFocus;
+  // Do not iterate through sub rootviews when looking for somewhere to put focus.
+  // If the root view is focusable, we can set focus directly on that, and it can put focus in the  appropriate place.
+  if (view.Children().Size()) {
+    auto firstChild = view.Children().GetAt(0);
+    if (view.rootComponentView() ==
+        winrt::get_self<::winrt::Microsoft::ReactNative::implementation::ComponentView>(firstChild)
+            ->rootComponentView()) {
+      if (view.runOnChildren(reason == winrt::Microsoft::ReactNative::FocusNavigationReason::First, fn)) {
+        return toFocus;
+      }
+    }
   }
 
   if (reason == winrt::Microsoft::ReactNative::FocusNavigationReason::Last) {