react-native-windows 0.77.6 → 0.77.8

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

@@ -17,7 +17,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 RootComponentView::RootComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
-    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+    ReactCompositionViewComponentBuilder *builder)
     : base_type(
           {}, // default viewProps
           compContext,
@@ -25,20 +26,34 @@ RootComponentView::RootComponentView(
           reactContext,
           ComponentViewFeatures::Default &
               ~(ComponentViewFeatures::Background | ComponentViewFeatures::ShadowProps |
-                ComponentViewFeatures::NativeBorder | ComponentViewFeatures::FocusVisual)) {}
+                ComponentViewFeatures::NativeBorder | ComponentViewFeatures::FocusVisual),
+          builder) {}
+
+RootComponentView::RootComponentView(
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : base_type(
+          {}, // default viewProps
+          compContext,
+          -1,
+          reactContext,
+          ComponentViewFeatures::Default &
+              ~(ComponentViewFeatures::Background | ComponentViewFeatures::ShadowProps |
+                ComponentViewFeatures::NativeBorder | ComponentViewFeatures::FocusVisual),
+          nullptr // builder,
+          ),
+      m_wkPortal(portal) {}
 
 RootComponentView::~RootComponentView() {
-  if (auto rootView = m_wkRootView.get()) {
-    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->RemoveRenderedVisual(
-        OuterVisual());
-  }
+  stop();
 }
 
 winrt::Microsoft::ReactNative::ComponentView RootComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
-  return winrt::make<RootComponentView>(compContext, tag, reactContext);
+  return winrt::make<RootComponentView>(compContext, tag, reactContext, nullptr);
 }
 
 RootComponentView *RootComponentView::rootComponentView() const noexcept {
@@ -61,6 +76,7 @@ void RootComponentView::updateLayoutMetrics(
 winrt::Microsoft::ReactNative::ComponentView RootComponentView::GetFocusedComponent() noexcept {
   return m_focusedComponent;
 }
+
 void RootComponentView::SetFocusedComponent(const winrt::Microsoft::ReactNative::ComponentView &value) noexcept {
   if (m_focusedComponent == value)
     return;
@@ -75,22 +91,21 @@ void RootComponentView::SetFocusedComponent(const winrt::Microsoft::ReactNative:
     if (auto rootView = m_wkRootView.get()) {
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->TrySetFocus();
     }
+    m_focusedComponent = value;
     auto args = winrt::make<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>(value);
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(value)->onGotFocus(args);
   }
-
-  m_focusedComponent = value;
 }
 
 bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept {
   if (request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::Restore) {
-    // No-op for now
-    return m_focusedComponent != nullptr;
+    if (m_focusedComponent)
+      return true;
   }
 
-  auto view = (request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::First)
-      ? FocusManager::FindFirstFocusableElement(*this)
-      : FocusManager::FindLastFocusableElement(*this);
+  auto view = (request.Reason() == winrt::Microsoft::ReactNative::FocusNavigationReason::Last)
+      ? FocusManager::FindLastFocusableElement(*this)
+      : FocusManager::FindFirstFocusableElement(*this);
   if (view) {
     TrySetFocusedComponent(
         view,
@@ -116,8 +131,10 @@ bool RootComponentView::TrySetFocusedComponent(
     selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   }
 
-  if (selfView && selfView->rootComponentView() != this)
+  if (selfView && selfView->rootComponentView() != this) {
+    assert(false);
     return false;
+  }
 
   auto losingFocusArgs = winrt::make<winrt::Microsoft::ReactNative::implementation::LosingFocusEventArgs>(
       target, direction, m_focusedComponent, target);
@@ -197,7 +214,7 @@ HRESULT RootComponentView::GetFragmentRoot(IRawElementProviderFragmentRoot **pRe
   if (uiManager == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
 
-  auto rootView{uiManager->GetReactNativeIsland(Tag())};
+  auto rootView = m_wkRootView.get();
   if (!rootView) {
     return UIA_E_ELEMENTNOTAVAILABLE;
   }
@@ -214,10 +231,43 @@ uint32_t RootComponentView::overlayIndex() noexcept {
   return 1;
 }
 
-void RootComponentView::start(const winrt::Microsoft::ReactNative::ReactNativeIsland &rootView) noexcept {
-  winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->AddRenderedVisual(
+void RootComponentView::start(const winrt::Microsoft::ReactNative::ReactNativeIsland &island) noexcept {
+  theme(winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(island.Theme()));
+
+  winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(island)->AddRenderedVisual(
       OuterVisual());
-  m_wkRootView = rootView;
+  m_visualAddedToIsland = true;
+  ReactNativeIsland(island);
+}
+
+void RootComponentView::stop() noexcept {
+  SetFocusedComponent(nullptr);
+  if (m_visualAddedToIsland) {
+    if (auto rootView = m_wkRootView.get()) {
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->RemoveRenderedVisual(
+          OuterVisual());
+    }
+    m_visualAddedToIsland = false;
+  }
+  // Disconnect from the Island.  In case of an instance reload, the island may now
+  // be attached to a new RootComponentView, so we should stop interacting with it.
+  ReactNativeIsland(nullptr);
+}
+
+void RootComponentView::ReactNativeIsland(const winrt::Microsoft::ReactNative::ReactNativeIsland &island) noexcept {
+  m_wkRootView = island;
+}
+
+winrt::Microsoft::ReactNative::ReactNativeIsland RootComponentView::ReactNativeIsland() noexcept {
+  return m_wkRootView.get();
+}
+
+winrt::Microsoft::ReactNative::Composition::PortalComponentView RootComponentView::Portal() const noexcept {
+  return m_wkPortal.get();
+}
+
+facebook::react::Point RootComponentView::getClientOffset() const noexcept {
+  return {};
 }
 
 winrt::IInspectable RootComponentView::UiaProviderFromPoint(const POINT &ptPixels) noexcept {
@@ -226,6 +276,10 @@ winrt::IInspectable RootComponentView::UiaProviderFromPoint(const POINT &ptPixel
       static_cast<facebook::react::Float>(ptPixels.y) / m_layoutMetrics.pointScaleFactor};
 
   facebook::react::Point localPt;
+
+  // 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
+  ptDips += m_layoutMetrics.frame.origin;
   auto tag = hitTest(ptDips, localPt, true);
 
   auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_reactContext.Properties());

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

@@ -46,6 +46,12 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   // Index that visuals can be inserted into OuterVisual for debugging UI
   uint32_t overlayIndex() noexcept;
   void start(const winrt::Microsoft::ReactNative::ReactNativeIsland &rootView) noexcept;
+  void stop() noexcept;
+
+  void ReactNativeIsland(const winrt::Microsoft::ReactNative::ReactNativeIsland &rootView) noexcept;
+  winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland() noexcept;
+
+  facebook::react::Point getClientOffset() const noexcept override;
 
   HRESULT GetFragmentRoot(IRawElementProviderFragmentRoot **pRetVal) noexcept;
   winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept override;
@@ -60,8 +66,16 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   RootComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+      ReactCompositionViewComponentBuilder *builder);
+
+  RootComponentView(
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portal,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
+  winrt::Microsoft::ReactNative::Composition::PortalComponentView Portal() const noexcept;
+
   virtual ~RootComponentView();
 
   winrt::Microsoft::ReactNative::ComponentView FindFirstFocusableElement() noexcept;
@@ -75,6 +89,8 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   // happening.
   winrt::Microsoft::ReactNative::ComponentView m_focusedComponent{nullptr};
   winrt::weak_ref<winrt::Microsoft::ReactNative::ReactNativeIsland> m_wkRootView{nullptr};
+  winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::PortalComponentView> m_wkPortal{nullptr};
+  bool m_visualAddedToIsland{false};
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -1147,10 +1147,10 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
     emitter->onChange(onChangeArgs);
   }
 
-  if (m_uiaProvider) {
+  if (UiaClientsAreListening()) {
     auto text = GetTextFromRichEdit();
     winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
-        m_uiaProvider, UIA_ValueValuePropertyId, text, text);
+        EnsureUiaProvider(), UIA_ValueValuePropertyId, text, text);
   }
 }
 

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

@@ -42,44 +42,59 @@ HRESULT UiaNavigateHelper(
       }
     } break;
 
-    case NavigateDirection_LastChild:
-      __fallthrough;
-
+    case NavigateDirection_LastChild: {
+      auto children = view.Children();
+      if (children.Size() != 0) {
+        uint32_t index = children.Size() - 1;
+        do {
+          auto child = children.GetAt(index).as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
+          if (uiaProvider = child->EnsureUiaProvider()) {
+            break;
+          }
+        } while (index-- != 0);
+      }
+    } break;
     case NavigateDirection_FirstChild: {
       auto children = view.Children();
-      auto index = direction == NavigateDirection_FirstChild ? 0 : children.Size() - 1;
-      if (!children.Size() == 0) {
-        uiaProvider = children.GetAt(index)
-                          .as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()
-                          ->EnsureUiaProvider();
+      if (children.Size() != 0) {
+        uint32_t index = 0;
+        do {
+          auto child = children.GetAt(index).as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
+          if (uiaProvider = child->EnsureUiaProvider()) {
+            break;
+          }
+        } while (++index != children.Size());
       }
     } break;
-
     case NavigateDirection_NextSibling: {
-      auto parentCV = view.Parent().as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
+      auto parentCV = view.Parent().as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
       if (parentCV != nullptr) {
         auto children = parentCV->Children();
         auto it = std::find(children.begin(), children.end(), view);
-        if (++it != children.end()) {
-          uiaProvider = (*it)
-                            .as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()
-                            ->EnsureUiaProvider();
+
+        while (++it != children.end()) {
+          auto nextchild = (*it).as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
+          if (uiaProvider = nextchild->EnsureUiaProvider()) {
+            break;
+          }
         }
       }
     } break;
 
     case NavigateDirection_PreviousSibling: {
-      auto parentCV = view.Parent().as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
+      auto parentCV = view.Parent().as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
       if (parentCV != nullptr) {
         auto children = parentCV->Children();
-        for (auto i = children.Size() - 1; i > 0; i--) {
-          auto child = children.GetAt(i);
-          if (child == view) {
-            uiaProvider = children.GetAt(i - 1)
-                              .as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()
-                              ->EnsureUiaProvider();
-            break;
-          }
+        auto it = std::find(children.begin(), children.end(), view);
+
+        if (it != children.begin()) {
+          do {
+            it--;
+            auto prevchild = (*it).as<winrt::Microsoft::ReactNative::implementation::ComponentView>();
+            if (uiaProvider = prevchild->EnsureUiaProvider()) {
+              break;
+            }
+          } while (it != children.begin());
         }
       }
     } break;

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -134,7 +134,6 @@ void FabricUIManager::startSurface(
 
     auto root = rootComponentViewDescriptor.view
                     .as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>();
-    root->theme(winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(rootView.Theme()));
     root->start(rootView);
   });
 
@@ -154,15 +153,11 @@ void FabricUIManager::startSurface(
 void FabricUIManager::stopSurface(facebook::react::SurfaceId surfaceId) noexcept {
   m_surfaceManager->stopSurface(surfaceId);
   auto &rootDescriptor = m_registry.componentViewDescriptorWithTag(surfaceId);
+  rootDescriptor.view.as<winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView>()->stop();
   m_registry.enqueueComponentViewWithComponentHandle(
       facebook::react::RootShadowNode::Handle(), surfaceId, rootDescriptor);
 }
 
-winrt::Microsoft::ReactNative::ReactNativeIsland FabricUIManager::GetReactNativeIsland(
-    facebook::react::SurfaceId surfaceId) const noexcept {
-  return m_surfaceRegistry.at(surfaceId).wkRootView.get();
-}
-
 facebook::react::Size FabricUIManager::measureSurface(
     facebook::react::SurfaceId surfaceId,
     const facebook::react::LayoutConstraints &layoutConstraints,

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.h

@@ -49,9 +49,6 @@ struct FabricUIManager final : public std::enable_shared_from_this<FabricUIManag
 
   const IComponentViewRegistry &GetViewRegistry() const noexcept;
 
-  winrt::Microsoft::ReactNative::ReactNativeIsland GetReactNativeIsland(
-      facebook::react::SurfaceId surfaceId) const noexcept;
-
   static winrt::Microsoft::ReactNative::ReactNotificationId<facebook::react::SurfaceId> NotifyMountedId() noexcept;
 
  private:

package/Microsoft.ReactNative/Fabric/WindowsComponentDescriptorRegistry.cpp

@@ -6,7 +6,6 @@
 
 #include <Fabric/AbiComponentDescriptor.h>
 #include <Fabric/AbiViewComponentDescriptor.h>
-#include <Fabric/Composition/Modal/WindowsModalHostViewComponentDescriptor.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h>
 #include <react/components/rnwcore/ComponentDescriptors.h>
 #include <react/renderer/components/image/ImageComponentDescriptor.h>
@@ -37,7 +36,6 @@ WindowsComponentDescriptorRegistry::WindowsComponentDescriptorRegistry()
       facebook::react::ActivityIndicatorViewComponentDescriptor>());
   add(facebook::react::concreteComponentDescriptorProvider<facebook::react::DebuggingOverlayComponentDescriptor>());
   add(facebook::react::concreteComponentDescriptorProvider<facebook::react::ImageComponentDescriptor>());
-  add(facebook::react::concreteComponentDescriptorProvider<facebook::react::WindowsModalHostViewComponentDescriptor>());
   add(facebook::react::concreteComponentDescriptorProvider<facebook::react::ParagraphComponentDescriptor>());
   add(facebook::react::concreteComponentDescriptorProvider<facebook::react::RawTextComponentDescriptor>());
   add(facebook::react::concreteComponentDescriptorProvider<facebook::react::ScrollViewComponentDescriptor>());

package/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl

@@ -21,6 +21,10 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   delegate void ComponentIslandComponentViewInitializer(ContentIslandComponentView view);
 
+  [webhosthidden]
+  [experimental]
+  delegate void PortalComponentViewInitializer(PortalComponentView view);
+
   [experimental]
   [webhosthidden]
   delegate Microsoft.UI.Composition.Visual CreateVisualDelegate(Microsoft.ReactNative.ComponentView view);
@@ -48,6 +52,15 @@ namespace Microsoft.ReactNative.Composition
     };
   }
 
+  [webhosthidden]
+  [experimental]
+  DOC_STRING("StateData type to be used with a PortalComponentView. The LayoutConstraints and PointScaleFactor will be used to layout the content of the Portal")
+  interface IPortalStateData
+  {
+    Microsoft.ReactNative.LayoutConstraints LayoutConstraints { get; };
+    Single PointScaleFactor { get; };
+  };
+
   [webhosthidden]
   [experimental]
   DOC_STRING(".")
@@ -55,10 +68,11 @@ namespace Microsoft.ReactNative.Composition
   {
     void SetViewComponentViewInitializer(ViewComponentViewInitializer initializer);
     void SetContentIslandComponentViewInitializer(ComponentIslandComponentViewInitializer initializer);
+    void SetPortalComponentViewInitializer(PortalComponentViewInitializer initializer);
     void SetCreateVisualHandler(CreateVisualDelegate impl);
     void SetViewFeatures(ComponentViewFeatures viewFeatures);
     void SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl);
     void SetVisualToMountChildrenIntoHandler(VisualToMountChildrenIntoDelegate impl);
   };
 
-} // namespace Microsoft.ReactNative
+} // namespace Microsoft.ReactNative.Composition

package/Microsoft.ReactNative/ReactNativeHost.cpp

@@ -15,6 +15,7 @@
 #include "ReactInstanceSettings.h"
 
 #ifdef USE_FABRIC
+#include <Fabric/Composition/Modal/WindowsModalHostViewComponentView.h>
 #include <Fabric/WindowsComponentDescriptorRegistry.h>
 #include <ReactPackageBuilder.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
@@ -115,6 +116,10 @@ IAsyncAction ReactNativeHost::ReloadInstance() noexcept {
 #endif
       m_instanceSettings.UseWebDebugger());
 
+#ifdef USE_FABRIC
+  winrt::Microsoft::ReactNative::Composition::implementation::RegisterWindowsModalHostNativeComponent(m_packageBuilder);
+#endif
+
   if (auto packageProviders = InstanceSettings().PackageProviders()) {
     for (auto const &packageProvider : packageProviders) {
       packageProvider.CreatePackage(m_packageBuilder);

package/Microsoft.ReactNative/ReactNativeIsland.idl

@@ -6,6 +6,8 @@ import "ReactCoreInjection.idl";
 import "ReactNativeHost.idl";
 import "Theme.idl";
 import "IReactViewComponentBuilder.idl";
+import "CompositionComponentView.idl";
+
 #include "NamespaceRedirect.h"
 #include "DocString.h"
 
@@ -83,7 +85,9 @@ namespace Microsoft.ReactNative
 
 #ifdef USE_WINUI3
     ReactNativeIsland(Microsoft.UI.Composition.Compositor compositor);
-    ReactNativeIsland(Microsoft.UI.Composition.Compositor compositor, Microsoft.ReactNative.IReactContext context, Microsoft.ReactNative.ComponentView componentView);
+
+    DOC_STRING("Used to create react portals, such as a native modal component.")
+    static ReactNativeIsland CreatePortal(Microsoft.ReactNative.Composition.PortalComponentView portal);
 #endif
 
     DOC_STRING(

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.77.6</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.77.8</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>77</ReactNativeWindowsMinor>
-    <ReactNativeWindowsPatch>6</ReactNativeWindowsPatch>
+    <ReactNativeWindowsPatch>8</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>faf22821e34fd9786923c6241e445b2f9fb530bd</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>2d5d4403e856e1c3862117ce5e30c39781eeb69d</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/Shared/Networking/WinRTWebSocketResource.cpp

@@ -290,6 +290,10 @@ fire_and_forget WinRTWebSocketResource2::PerformWrite(string &&message, bool isB
 }
 
 IAsyncAction WinRTWebSocketResource2::SendPendingMessages() noexcept {
+  // Enforcing execution in the background queue.
+  // Awaiting of this coroutine will schedule its execution in the thread pool, ignoring the intended dispatch queue.
+  co_await resume_in_queue(m_backgroundQueue);
+
   auto self = shared_from_this();
 
   while (!self->m_outgoingMessages.empty()) {
@@ -334,6 +338,7 @@ IAsyncAction WinRTWebSocketResource2::SendPendingMessages() noexcept {
     auto result = async.ErrorCode();
     if (result < 0) {
       Fail(std::move(result), ErrorType::Send);
+      co_return;
     }
   }
 }

package/Shared/Shared.vcxitems

@@ -117,10 +117,10 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewComponentView.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
-    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewShadowNode.cpp">
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\ParagraphComponentView.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
-    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\ParagraphComponentView.cpp">
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\PortalComponentView.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\RootComponentView.cpp">
@@ -171,9 +171,6 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiComponentDescriptor.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
-    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewComponentDescriptor.cpp">
-      <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
-    </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiEventEmitter.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
@@ -183,6 +180,9 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiShadowNode.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiPortalShadowNode.cpp">
+      <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
+    </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewShadowNode.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
@@ -323,6 +323,7 @@
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewSate.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\ParagraphComponentView.h" />
+    <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\PortalComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\RootComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\ScrollViewComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\SwitchComponentView.h" />

package/Shared/Shared.vcxitems.filters

@@ -179,9 +179,6 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewComponentView.cpp">
       <Filter>Source Files\Fabric\Composition</Filter>
     </ClCompile>
-    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\Modal\WindowsModalHostViewShadowNode.cpp">
-      <Filter>Source Files\Fabric\Composition</Filter>
-    </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\ParagraphComponentView.cpp">
       <Filter>Source Files\Fabric\Composition</Filter>
     </ClCompile>
@@ -245,9 +242,9 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\platform\react\renderer\textlayoutmanager\TextLayoutManager.cpp">
       <Filter>Source Files\Fabric\platform\react\renderer\textlayoutmanager</Filter>
     </ClCompile>
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\PortalComponentView.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\RootComponentView.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\UnimplementedNativeViewComponentView.cpp" />
-    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewComponentDescriptor.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewProps.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\WindowsComponentDescriptorRegistry.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\UiaHelpers.cpp" />
@@ -301,6 +298,7 @@
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\runtimescheduler\Task.cpp" />
     <ClCompile Include="$(ReactNativeDir)\ReactCommon\react\renderer\components\scrollview\ScrollEvent.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\platform\react\renderer\graphics\PlatformColorUtils.cpp" />
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiPortalShadowNode.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewShadowNode.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiState.cpp" />
     <ClCompile Include="$(ReactNativeWindowsDir)Microsoft.ReactNative\Utils\ThemeUtils.cpp" />
@@ -794,6 +792,7 @@
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\platform\react\renderer\textlayoutmanager\TextLayoutManager.h">
       <Filter>Header Files\Fabric\platform\react\renderer\textlayoutmanager</Filter>
     </ClInclude>
+    <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\PortalComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\Composition\RootComponentView.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewProps.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\AbiViewComponentDescriptor.h" />