react-native-windows 0.82.3 → 0.83.0-preview.1

package/Libraries/Utilities/DevLoadingView.js

@@ -14,29 +14,37 @@ import NativeDevLoadingView from './NativeDevLoadingView';
 
 const COLOR_SCHEME = {
   dark: {
+    load: {
+      backgroundColor: '#fafafa',
+      textColor: '#242526',
+    },
     refresh: {
       backgroundColor: '#2584e8',
       textColor: '#ffffff',
     },
-    load: {
-      backgroundColor: '#fafafa',
-      textColor: '#242526',
+    error: {
+      backgroundColor: '#1065AF',
+      textColor: '#ffffff',
     },
   },
   default: {
+    load: {
+      backgroundColor: '#404040',
+      textColor: '#ffffff',
+    },
     refresh: {
       backgroundColor: '#2584e8',
       textColor: '#ffffff',
     },
-    load: {
-      backgroundColor: '#404040',
+    error: {
+      backgroundColor: '#1065AF',
       textColor: '#ffffff',
     },
   },
 };
 
 export default {
-  showMessage(message: string, type: 'load' | 'refresh') {
+  showMessage(message: string, type: 'load' | 'refresh' | 'error') {
     if (NativeDevLoadingView) {
       const colorScheme =
         getColorScheme() === 'dark' ? COLOR_SCHEME.dark : COLOR_SCHEME.default;

package/Libraries/Utilities/HMRClient.js

@@ -211,7 +211,9 @@ Error: ${e.message}`;
       setHMRUnavailableReason(error);
     });
 
+    let pendingUpdatesCount = 0;
     client.on('update-start', ({isInitialUpdate}) => {
+      pendingUpdatesCount++;
       currentCompileErrorMessage = null;
       didConnect = true;
 
@@ -228,12 +230,13 @@ Error: ${e.message}`;
     });
 
     client.on('update-done', () => {
-      DevLoadingView.hide();
+      pendingUpdatesCount--;
+      if (pendingUpdatesCount === 0) {
+        DevLoadingView.hide();
+      }
     });
 
     client.on('error', data => {
-      DevLoadingView.hide();
-
       if (data.type === 'GraphNotFoundError') {
         client.close();
         setHMRUnavailableReason(
@@ -253,8 +256,6 @@ Error: ${e.message}`;
     });
 
     client.on('close', closeEvent => {
-      DevLoadingView.hide();
-
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
       const isNormalOrUnsetCloseReason =
@@ -296,10 +297,17 @@ function setHMRUnavailableReason(reason: string) {
   }
   hmrUnavailableReason = reason;
 
+  const DevLoadingView = require('./DevLoadingView').default;
+  DevLoadingView.hide();
+
   // We only want to show a warning if Fast Refresh is on *and* if we ever
   // previously managed to connect successfully. We don't want to show
   // the warning to native engineers who use cached bundles without Metro.
   if (hmrClient.isEnabled() && didConnect) {
+    DevLoadingView.showMessage(
+      'Fast Refresh disconnected. Reload app to reconnect.',
+      'error',
+    );
     console.warn(reason);
     // (Not using the `warning` module to prevent a Buck cycle.)
   }

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -93,6 +93,8 @@ namespace Microsoft.ReactNative.Composition
   [webhosthidden]
   runtimeclass ContentIslandComponentView : ViewComponentView { 
     void Connect(Microsoft.UI.Content.ContentIsland contentIsland);
+    DOC_STRING("The ChildSiteLink will be unavailable until after the ContentIslandComponentView is mounted")
+    Microsoft.UI.Content.ChildSiteLink ChildSiteLink { get; };
   };
 
   [experimental]

package/Microsoft.ReactNative/CompositionHwndHost.idl

@@ -13,6 +13,7 @@ namespace Microsoft.ReactNative
   [default_interface]
   [webhosthidden]
   [experimental]
+  [deprecated("Use @ReactNativeWindow instead", deprecate, 1)]
   DOC_STRING("An HWND based host of RNW running on windows composition."
   "Provided as an ease of use function - most of the time HWND-less hosting would be preferable."
   "In the long term this is likely to be replaced with a more modern hosting interface.")

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -72,7 +72,7 @@ void ComponentView::onMounted() noexcept {
   m_mountedEvent(*this, *this);
 }
 
-bool ComponentView::isMounted() noexcept {
+bool ComponentView::isMounted() const noexcept {
   return m_mounted;
 }
 

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -121,7 +121,7 @@ struct ComponentView
   virtual void onLostFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
   virtual void onGotFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
   virtual void onMounted() noexcept;
-  bool isMounted() noexcept;
+  bool isMounted() const noexcept;
   virtual void onUnmounted() noexcept;
   void onDestroying() noexcept;
 

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

@@ -30,50 +30,20 @@ CompositionHwndHost::CompositionHwndHost() noexcept {}
 void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
   m_hwnd = (HWND)hwnd;
 
-  auto compositionContext =
-      winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
-          ReactViewHost().ReactNativeHost().InstanceSettings().Properties());
-  if (auto liftedCompositor =
-          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
-              compositionContext)) {
-    m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(liftedCompositor);
+  auto compositor = winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositor(
+      ReactViewHost().ReactNativeHost().InstanceSettings().Properties());
+  m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(compositor);
 
-    auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
-        liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
+  auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
+      compositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
 
-    auto island = m_compRootView.Island();
+  auto island = m_compRootView.Island();
 
-    bridge.Connect(island);
-    bridge.Show();
+  bridge.Connect(island);
+  bridge.Show();
 
-    m_compRootView.ScaleFactor(ScaleFactor());
-    bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-  } else {
-    m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland();
-    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-        .SetWindow(reinterpret_cast<uint64_t>(m_hwnd));
-
-    auto compositor =
-        winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
-            compositionContext);
-    auto interop = compositor.as<ABI::Windows::UI::Composition::Desktop::ICompositorDesktopInterop>();
-    winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget target{nullptr};
-    check_hresult(interop->CreateDesktopWindowTarget(
-        m_hwnd,
-        false,
-        reinterpret_cast<ABI::Windows::UI::Composition::Desktop::IDesktopWindowTarget **>(put_abi(target))));
-
-    auto root = compositor.CreateContainerVisual();
-    root.RelativeSizeAdjustment({1.0f, 1.0f});
-    root.Offset({0, 0, 0});
-    root.Comment(L"Root Visual");
-    target.Root(root);
-
-    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-        .InternalRootVisual(
-            winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::CreateVisual(
-                target.Root()));
-  }
+  m_compRootView.ScaleFactor(ScaleFactor());
+  bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
 
   m_compRootView.ReactViewHost(std::move(m_reactViewHost));
   m_compRootView.ScaleFactor(ScaleFactor());

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

@@ -709,86 +709,9 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
       shadow.Color(theme()->Color(*viewProps.shadowColor));
   }
 
-  // Check if any border radius is set
-  auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, viewProps);
-  bool hasBorderRadius = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
-      borderMetrics.borderRadii.topRight.horizontal != 0 || borderMetrics.borderRadii.bottomLeft.horizontal != 0 ||
-      borderMetrics.borderRadii.bottomRight.horizontal != 0 || borderMetrics.borderRadii.topLeft.vertical != 0 ||
-      borderMetrics.borderRadii.topRight.vertical != 0 || borderMetrics.borderRadii.bottomLeft.vertical != 0 ||
-      borderMetrics.borderRadii.bottomRight.vertical != 0;
-
-  if (hasBorderRadius) {
-    // When borderRadius is set, we need to create a shadow mask that follows the rounded rectangle shape.
-    // Use CompositionVisualSurface to capture the clipped visual's appearance as the shadow mask.
-    bool maskSet = false;
-
-    // Try Microsoft (WinUI3) Composition first
-    auto msCompositor =
-        winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
-            m_compContext);
-    if (msCompositor) {
-      auto innerVisual =
-          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
-              Visual());
-      if (innerVisual) {
-        // Create a VisualSurface that captures the visual (with its clip applied)
-        auto visualSurface = msCompositor.CreateVisualSurface();
-        visualSurface.SourceVisual(innerVisual);
-        visualSurface.SourceSize(
-            {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
-             m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});
-
-        // Create a brush from the visual surface to use as shadow mask
-        auto maskBrush = msCompositor.CreateSurfaceBrush(visualSurface);
-        maskBrush.Stretch(winrt::Microsoft::UI::Composition::CompositionStretch::Fill);
-
-        // Get the inner shadow and set the mask
-        auto innerShadow = winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::
-            InnerDropShadow(shadow);
-        if (innerShadow) {
-          innerShadow.Mask(maskBrush);
-          maskSet = true;
-        }
-      }
-    }
-
-    // Fallback to System (Windows.UI) Composition if Microsoft Composition is not available
-    if (!maskSet) {
-      auto sysCompositor =
-          winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
-              m_compContext);
-      if (sysCompositor) {
-        auto innerVisual =
-            winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerVisual(
-                Visual());
-        if (innerVisual) {
-          auto visualSurface = sysCompositor.CreateVisualSurface();
-          visualSurface.SourceVisual(innerVisual);
-          visualSurface.SourceSize(
-              {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
-               m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});
-
-          auto maskBrush = sysCompositor.CreateSurfaceBrush(visualSurface);
-          maskBrush.Stretch(winrt::Windows::UI::Composition::CompositionStretch::Fill);
-
-          auto innerShadow =
-              winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerDropShadow(
-                  shadow);
-          if (innerShadow) {
-            innerShadow.Mask(maskBrush);
-          }
-        }
-      }
-    }
-
-    // Apply shadow to OuterVisual (which is not clipped) so the shadow can extend beyond the clip
-    OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
-    Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
-  } else {
-    // No border radius - apply shadow directly to Visual (original behavior)
-    Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
-    OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
-  }
+  // Apply shadow to OuterVisual (not Visual) because Visual may have a rounded-corner clip
+  // from updateClippingPath, which would clip the shadow. OuterVisual is not clipped.
+  OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
 }
 
 void ComponentView::updateTransformProps(

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

@@ -43,12 +43,30 @@ ContentIslandComponentView::ContentIslandComponentView(
       });
 }
 
-void ContentIslandComponentView::OnMounted() noexcept {
-  m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
-      rootComponentView()->parentContentIsland(),
-      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});
+winrt::Microsoft::UI::Content::ContentIsland ContentIslandComponentView::ParentContentIsland() noexcept {
+  auto root = rootComponentView();
+  if (!root)
+    return nullptr;
+  return root->parentContentIsland();
+}
+
+winrt::Microsoft::UI::Content::ChildSiteLink ContentIslandComponentView::ChildSiteLink() noexcept {
+  if (!isMounted())
+    return nullptr;
+  if (!m_childSiteLink) {
+    m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
+        m_parentContentIsland,
+        winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
+            .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
+  }
+  return m_childSiteLink;
+}
+
+void ContentIslandComponentView::ConnectInternal() noexcept {
+  if (!m_islandToConnect)
+    return;
+
+  ChildSiteLink().ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
 
   // Issue #15557: Set initial LocalToParentTransformMatrix synchronously before Connect.
   // This fixes popup position being wrong even without scrolling.
@@ -74,10 +92,19 @@ void ContentIslandComponentView::OnMounted() noexcept {
   ConfigureChildSiteLinkAutomation();
 
   if (m_islandToConnect) {
+    Assert(m_childSiteLink.SiteView().IsConnected());
+    Assert(!m_islandToConnect.IsConnected());
+
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
   }
 
+  if (m_pendingNavigateFocus) {
+    m_navigationHost.NavigateFocus(
+        winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(*m_pendingNavigateFocus));
+    m_pendingNavigateFocus.reset();
+  }
+
   ParentLayoutChanged();
   auto view = Parent();
   while (view) {
@@ -106,6 +133,11 @@ void ContentIslandComponentView::OnMounted() noexcept {
   }
 }
 
+void ContentIslandComponentView::OnMounted() noexcept {
+  m_parentContentIsland = ParentContentIsland();
+  ConnectInternal();
+}
+
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
 
@@ -198,7 +230,10 @@ void ContentIslandComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   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));
+  if (m_navigationHost)
+    m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(navigationReason));
+  else
+    m_pendingNavigateFocus = navigationReason;
 }
 
 ContentIslandComponentView::~ContentIslandComponentView() noexcept {
@@ -239,6 +274,9 @@ void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::Co
     m_childSiteLink.Connect(contentIsland);
   } else {
     m_islandToConnect = contentIsland;
+    if (isMounted()) {
+      ConnectInternal();
+    }
   }
 }
 
@@ -247,13 +285,8 @@ void ContentIslandComponentView::prepareForRecycle() noexcept {
 }
 
 void ContentIslandComponentView::ConfigureChildSiteLinkAutomation() noexcept {
-  // Use FrameworkBased to let the XamlIsland manage its own framework-level accessibility tree
-  // and raise focus events naturally. This tells the system that the child island has its own
-  // framework (WinUI/XAML) that manages automation.
   m_childSiteLink.AutomationOption(winrt::Microsoft::UI::Content::ContentAutomationOptions::FrameworkBased);
 
-  // When using FrameworkBased mode, we don't register automation callbacks - let the XamlIsland handle its own UIA
-  // tree.
   if (m_innerAutomationProvider) {
     m_innerAutomationProvider->SetChildSiteLink(m_childSiteLink);
   }

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

@@ -32,6 +32,8 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
       uint32_t index) noexcept override;
   void Connect(const winrt::Microsoft::UI::Content::ContentIsland &contentIsland) noexcept;
 
+  winrt::Microsoft::UI::Content::ChildSiteLink ChildSiteLink() noexcept;
+
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept;
@@ -58,15 +60,21 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   void OnMounted() noexcept;
   void OnUnmounted() noexcept;
   void ParentLayoutChanged() noexcept;
+  void ConnectInternal() noexcept;
+  winrt::Microsoft::UI::Content::ContentIsland ParentContentIsland() noexcept;
 
   bool m_layoutChangePosted{false};
+  winrt::Microsoft::UI::Content::ContentIsland m_parentContentIsland{nullptr};
   winrt::Microsoft::UI::Content::ContentIsland m_islandToConnect{nullptr};
+  std::optional<winrt::Microsoft::UI::Input::FocusNavigationReason> m_pendingNavigateFocus;
+
   winrt::event_token m_mountedToken;
   winrt::event_token m_unmountedToken;
   std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
   winrt::Microsoft::UI::Input::InputFocusNavigationHost m_navigationHost{nullptr};
   winrt::event_token m_navigationHostDepartFocusRequestedToken{};
+  std::optional<winrt::Microsoft::UI::Input::FocusNavigationReason> m_pendingFocus;
 
   // Issue #15557: Store ViewChanged subscriptions to parent ScrollViews for transform updates
   struct ViewChangedSubscription {