react-native-windows 0.82.0-preview.10 → 0.82.0-preview.12

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -154,6 +154,9 @@ namespace Microsoft.ReactNative.Composition
   [webhosthidden]
   [default_interface]
   runtimeclass ScrollViewComponentView : ViewComponentView {
+    // Issue #15557: Event fired when scroll position changes.
+    // ContentIslandComponentView uses this to update LocalToParentTransformMatrix.
+    event Windows.Foundation.EventHandler<IInspectable> ViewChanged;
   };
 
   [experimental]

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -45,9 +45,16 @@ enum SnapPointsAlignment {
   void Opacity(Single value);
   void BlurRadius(Single value);
   void Color(Windows.UI.Color value);
+  void Mask(IBrush mask);
+  void SourcePolicy(CompositionDropShadowSourcePolicy policy);
 }
 
-    [webhosthidden][experimental] interface IVisual {
+[webhosthidden][experimental] enum CompositionDropShadowSourcePolicy {
+  Default = 0,
+  InheritedOnly = 1
+};
+
+[webhosthidden][experimental] interface IVisual {
   void InsertAt(IVisual visual, Int32 index);
   void Remove(IVisual visual);
   IVisual GetAt(UInt32 index);

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

@@ -50,6 +50,7 @@ struct CompositionTypeTraits<WindowsTypeTag> {
   using CompositionStretch = winrt::Windows::UI::Composition::CompositionStretch;
   using CompositionStrokeCap = winrt::Windows::UI::Composition::CompositionStrokeCap;
   using CompositionSurfaceBrush = winrt::Windows::UI::Composition::CompositionSurfaceBrush;
+  using CompositionDropShadowSourcePolicy = winrt::Windows::UI::Composition::CompositionDropShadowSourcePolicy;
   using Compositor = winrt::Windows::UI::Composition::Compositor;
   using ContainerVisual = winrt::Windows::UI::Composition::ContainerVisual;
   using CubicBezierEasingFunction = winrt::Windows::UI::Composition::CubicBezierEasingFunction;
@@ -122,6 +123,7 @@ struct CompositionTypeTraits<MicrosoftTypeTag> {
   using CompositionStretch = winrt::Microsoft::UI::Composition::CompositionStretch;
   using CompositionStrokeCap = winrt::Microsoft::UI::Composition::CompositionStrokeCap;
   using CompositionSurfaceBrush = winrt::Microsoft::UI::Composition::CompositionSurfaceBrush;
+  using CompositionDropShadowSourcePolicy = winrt::Microsoft::UI::Composition::CompositionDropShadowSourcePolicy;
   using Compositor = winrt::Microsoft::UI::Composition::Compositor;
   using ContainerVisual = winrt::Microsoft::UI::Composition::ContainerVisual;
   using CubicBezierEasingFunction = winrt::Microsoft::UI::Composition::CubicBezierEasingFunction;
@@ -218,6 +220,19 @@ struct CompDropShadow : public winrt::implements<
     m_shadow.Color(color);
   }
 
+  void Mask(winrt::Microsoft::ReactNative::Composition::Experimental::IBrush const &mask) noexcept {
+    if (mask) {
+      m_shadow.Mask(mask.as<typename TTypeRedirects::IInnerCompositionBrush>()->InnerBrush());
+    } else {
+      m_shadow.Mask(nullptr);
+    }
+  }
+
+  void SourcePolicy(
+      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionDropShadowSourcePolicy policy) noexcept {
+    m_shadow.SourcePolicy(static_cast<typename TTypeRedirects::CompositionDropShadowSourcePolicy>(policy));
+  }
+
  private:
   typename TTypeRedirects::DropShadow m_shadow;
 };

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

@@ -36,10 +36,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
-//   |
 //   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
 //            |
 //            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
+//            ----- <children> (default: directly in m_visual after border visuals)
+//            ----- m_childrenContainer (created on demand when overflow:hidden, children moved here)
 //   ------Focus Visual Container (created when hosting focus visuals)
 //           |
 //           |------Inner Focus Visual
@@ -708,7 +709,86 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
       shadow.Color(theme()->Color(*viewProps.shadowColor));
   }
 
-  Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
+  // 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);
+  }
 }
 
 void ComponentView::updateTransformProps(
@@ -892,23 +972,26 @@ void ComponentView::updateClippingPath(
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
-  if (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) {
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
-  } else {
+  bool hasRoundedCorners = 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;
+
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  // Apply clipping to m_visual only for rounded corners
+  // overflow:hidden clipping is handled separately via m_childrenContainer in ViewComponentView
+  if (hasRoundedCorners) {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
-        m_compContext,
-        borderMetrics.borderRadii,
-        {0, 0, 0, 0},
-        {0,
-         0,
-         layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
 
     Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
         pathGeometry.get());
+  } else {
+    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   }
 }
 
@@ -1083,6 +1166,11 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
 ViewComponentView::VisualToMountChildrenInto() noexcept {
   if (m_builder && m_builder->VisualToMountChildrenIntoHandler())
     return m_builder->VisualToMountChildrenIntoHandler()(*this);
+  // When overflow:hidden, children are hosted in m_childrenContainer (child of m_visual)
+  // so we can apply clipping without affecting borders/background.
+  // Otherwise children go directly into Visual() (the original behavior).
+  if (m_childrenContainer)
+    return m_childrenContainer;
   return Visual();
 }
 
@@ -1091,9 +1179,14 @@ void ViewComponentView::MountChildComponentView(
     uint32_t index) noexcept {
   base_type::MountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   ensureVisual();
 
+  // When children are in Visual() directly, offset past border visuals.
+  // When children are in m_childrenContainer, no offset needed.
+  if (!m_childrenContainer) {
+    indexOffsetForBorder(index);
+  }
+
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     auto visualIndex = index;
     // Most of the time child index will align with visual index.
@@ -1105,6 +1198,7 @@ void ViewComponentView::MountChildComponentView(
         }
       }
     }
+
     VisualToMountChildrenInto().InsertAt(compositionChild->OuterVisual(), visualIndex);
   } else {
     m_hasNonVisualChildren = true;
@@ -1116,7 +1210,6 @@ void ViewComponentView::UnmountChildComponentView(
     uint32_t index) noexcept {
   base_type::UnmountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     VisualToMountChildrenInto().Remove(compositionChild->OuterVisual());
   }
@@ -1316,6 +1409,57 @@ void ViewComponentView::updateLayoutMetrics(
   Visual().Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+
+  // Update children container clipping for overflow:hidden
+  updateChildrenClippingPath(layoutMetrics, *viewProps());
+}
+
+void ViewComponentView::updateChildrenClippingPath(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    const facebook::react::ViewProps &viewProps) noexcept {
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  if (viewProps.getClipsContentToBounds()) {
+    // Create m_childrenContainer on demand (like iOS _containerView pattern)
+    // m_childrenContainer is a child of m_visual, placed after border visuals.
+    if (!m_childrenContainer) {
+      m_childrenContainer = m_compContext.CreateSpriteVisual();
+
+      // Insert at the end of m_visual's children (after border visuals + existing children)
+      // Then move existing children from m_visual into m_childrenContainer
+      uint32_t borderCount = 0;
+      indexOffsetForBorder(borderCount);
+
+      // Move existing child visuals from m_visual to m_childrenContainer
+      uint32_t childVisualIndex = 0;
+      for (auto it = m_children.begin(); it != m_children.end(); ++it) {
+        if (auto compositionChild = (*it).try_as<ComponentView>()) {
+          Visual().Remove(compositionChild->OuterVisual());
+          m_childrenContainer.InsertAt(compositionChild->OuterVisual(), childVisualIndex++);
+        }
+      }
+
+      // Insert m_childrenContainer after border visuals in m_visual
+      Visual().InsertAt(m_childrenContainer, borderCount);
+
+      // Use relative sizing so container automatically tracks parent's size
+      m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1});
+    }
+
+    // Clip children to view bounds using outer border radii (matches iOS default behavior)
+    auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
+    winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
+
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        pathGeometry.get());
+  } else if (m_childrenContainer) {
+    // overflow changed from hidden to visible. Keep container, just remove clip.
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        nullptr);
+  }
 }
 
 void ViewComponentView::prepareForRecycle() noexcept {}

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

@@ -233,11 +233,15 @@ struct ViewComponentView : public ViewComponentViewT<
 
  protected:
   virtual winrt::Microsoft::ReactNative::ViewProps ViewPropsInner() noexcept;
+  virtual void updateChildrenClippingPath(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      const facebook::react::ViewProps &viewProps) noexcept;
 
  private:
   bool m_hasNonVisualChildren{false};
   facebook::react::SharedViewProps m_props;
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_childrenContainer{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate m_createInternalVisualHandler{
       nullptr};
 };

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

@@ -14,6 +14,7 @@
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "RootComponentView.h"
+#include "ScrollViewComponentView.h"
 
 #include "Composition.ContentIslandComponentView.g.cpp"
 
@@ -49,6 +50,14 @@ void ContentIslandComponentView::OnMounted() noexcept {
           .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
   m_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.
+  // Note: getClientRect() returns physical pixels, but LocalToParentTransformMatrix expects DIPs.
+  auto clientRect = getClientRect();
+  float scaleFactor = m_layoutMetrics.pointScaleFactor;
+  m_childSiteLink.LocalToParentTransformMatrix(winrt::Windows::Foundation::Numerics::make_float4x4_translation(
+      static_cast<float>(clientRect.left) / scaleFactor, static_cast<float>(clientRect.top) / scaleFactor, 0.0f));
+
   m_navigationHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteLink(m_childSiteLink);
 
   m_navigationHostDepartFocusRequestedToken =
@@ -80,12 +89,34 @@ void ContentIslandComponentView::OnMounted() noexcept {
             strongThis->ParentLayoutChanged();
           }
         }));
+
+    // Issue #15557: Register for ViewChanged on parent ScrollViews to update transform
+    // when scroll position changes, ensuring correct XAML popup positioning.
+    if (auto scrollView = view.try_as<winrt::Microsoft::ReactNative::Composition::ScrollViewComponentView>()) {
+      auto token =
+          scrollView.ViewChanged([wkThis = get_weak()](const winrt::IInspectable &, const winrt::IInspectable &) {
+            if (auto strongThis = wkThis.get()) {
+              strongThis->ParentLayoutChanged();
+            }
+          });
+      m_viewChangedSubscriptions.push_back({scrollView, token});
+    }
+
     view = view.Parent();
   }
 }
 
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
+
+  // Issue #15557: Unsubscribe from parent ScrollView events
+  for (auto &subscription : m_viewChangedSubscriptions) {
+    if (auto scrollView = subscription.scrollView.get()) {
+      scrollView.ViewChanged(subscription.token);
+    }
+  }
+  m_viewChangedSubscriptions.clear();
+
   if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
     m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
     m_navigationHostDepartFocusRequestedToken = {};
@@ -93,21 +124,25 @@ void ContentIslandComponentView::OnUnmounted() noexcept {
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {
-  if (m_layoutChangePosted)
-    return;
-
-  m_layoutChangePosted = true;
-  ReactContext().UIDispatcher().Post([wkThis = get_weak()]() {
-    if (auto strongThis = wkThis.get()) {
-      auto clientRect = strongThis->getClientRect();
-
-      strongThis->m_childSiteLink.LocalToParentTransformMatrix(
-          winrt::Windows::Foundation::Numerics::make_float4x4_translation(
-              static_cast<float>(clientRect.left), static_cast<float>(clientRect.top), 0.0f));
-
-      strongThis->m_layoutChangePosted = false;
-    }
-  });
+  // Issue #15557: Update transform synchronously to ensure correct popup position
+  // when user clicks. Async updates via UIDispatcher().Post() were causing the
+  // popup to open with stale transform values.
+  //
+  // Note: The original async approach was for batching notifications during layout passes.
+  // However, LocalToParentTransformMatrix is a cheap call (just sets a matrix), and
+  // synchronous updates are required to ensure correct popup position when clicked.
+  //
+  // getClientRect() returns values in physical pixels (scaled by pointScaleFactor),
+  // but LocalToParentTransformMatrix expects logical pixels (DIPs). We need to divide
+  // by the scale factor to convert.
+  auto clientRect = getClientRect();
+  float scaleFactor = m_layoutMetrics.pointScaleFactor;
+
+  float x = static_cast<float>(clientRect.left) / scaleFactor;
+  float y = static_cast<float>(clientRect.top) / scaleFactor;
+
+  m_childSiteLink.LocalToParentTransformMatrix(
+      winrt::Windows::Foundation::Numerics::make_float4x4_translation(x, y, 0.0f));
 }
 
 winrt::Windows::Foundation::IInspectable ContentIslandComponentView::CreateAutomationProvider() noexcept {

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

@@ -68,6 +68,13 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   winrt::Microsoft::UI::Input::InputFocusNavigationHost m_navigationHost{nullptr};
   winrt::event_token m_navigationHostDepartFocusRequestedToken{};
 
+  // Issue #15557: Store ViewChanged subscriptions to parent ScrollViews for transform updates
+  struct ViewChangedSubscription {
+    winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::ScrollViewComponentView> scrollView;
+    winrt::event_token token;
+  };
+  std::vector<ViewChangedSubscription> m_viewChangedSubscriptions;
+
   // Automation
   void ConfigureChildSiteLinkAutomation() noexcept;
 };

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

@@ -6,6 +6,7 @@
 
 #include "ScrollViewComponentView.h"
 
+#include <Fabric/ComponentView.h>
 #include <Utils/ValueUtils.h>
 
 #pragma warning(push)
@@ -19,6 +20,8 @@
 #include <AutoDraw.h>
 #include <Fabric/DWriteHelpers.h>
 #include <unicode.h>
+#include <functional>
+#include "ContentIslandComponentView.h"
 #include "JSValueReader.h"
 #include "RootComponentView.h"
 
@@ -884,6 +887,13 @@ void ScrollViewComponentView::updateContentVisualSize() noexcept {
 
 void ScrollViewComponentView::prepareForRecycle() noexcept {}
 
+void ScrollViewComponentView::updateChildrenClippingPath(
+    facebook::react::LayoutMetrics const & /*layoutMetrics*/,
+    const facebook::react::ViewProps & /*viewProps*/) noexcept {
+  // No-op: ScrollView mounts children into m_scrollVisual (not Visual()),
+  // and scroll visuals inherently clip their content.
+}
+
 /*
 ScrollViewComponentView::ScrollInteractionTrackerOwner::ScrollInteractionTrackerOwner(
     ScrollViewComponentView *outer)
@@ -1325,6 +1335,10 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
             m_allowNextScrollNoMatterWhat = false;
           }
         }
+
+        // Issue #15557: Notify listeners that scroll position has changed,
+        // so ContentIslandComponentView can update LocalToParentTransformMatrix
+        FireViewChanged();
       });
 
   m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag(
@@ -1332,6 +1346,9 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
       [this](
           winrt::IInspectable const & /*sender*/,
           winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) {
+        // Issue #15557: Notify listeners that scroll position has changed
+        FireViewChanged();
+
         m_allowNextScrollNoMatterWhat = true; // Ensure next scroll event is recorded, regardless of throttle
         updateStateWithContentOffset();
         auto eventEmitter = GetEventEmitter();
@@ -1478,4 +1495,20 @@ void ScrollViewComponentView::updateShowsVerticalScrollIndicator(bool value) noe
 void ScrollViewComponentView::updateDecelerationRate(float value) noexcept {
   m_scrollVisual.SetDecelerationRate({value, value, value});
 }
+
+// Issue #15557: Notify listeners that scroll position has changed.
+// ContentIslandComponentView subscribes to this to update LocalToParentTransformMatrix.
+void ScrollViewComponentView::FireViewChanged() noexcept {
+  m_viewChangedEvent(*this, nullptr);
+}
+
+// Issue #15557: Event accessors for ViewChanged
+winrt::event_token ScrollViewComponentView::ViewChanged(
+    winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable> const &handler) noexcept {
+  return m_viewChangedEvent.add(handler);
+}
+
+void ScrollViewComponentView::ViewChanged(winrt::event_token const &token) noexcept {
+  m_viewChangedEvent.remove(token);
+}
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -118,6 +118,18 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   double getVerticalSize() noexcept;
   double getHorizontalSize() noexcept;
 
+  // Issue #15557: Event accessors for ViewChanged (used by ContentIslandComponentView for transform update)
+  winrt::event_token ViewChanged(
+      winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable> const &handler) noexcept;
+  void ViewChanged(winrt::event_token const &token) noexcept;
+
+ protected:
+  // ScrollView mounts children into m_scrollVisual (not Visual()), and scroll visuals
+  // inherently clip their content, so we skip the children container clipping logic.
+  void updateChildrenClippingPath(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      const facebook::react::ViewProps &viewProps) noexcept override;
+
  private:
   void updateDecelerationRate(float value) noexcept;
   void updateContentVisualSize() noexcept;
@@ -129,6 +141,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool scrollRight(float delta, bool animate) noexcept;
   void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
   void updateStateWithContentOffset() noexcept;
+  // Issue #15557: Notify listeners that scroll position has changed
+  void FireViewChanged() noexcept;
   facebook::react::ScrollViewEventEmitter::Metrics getScrollMetrics(
       facebook::react::SharedViewEventEmitter const &eventEmitter,
       winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) noexcept;
@@ -160,6 +174,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool m_allowNextScrollNoMatterWhat{false};
   std::chrono::steady_clock::time_point m_lastScrollEventTime{};
   std::shared_ptr<facebook::react::ScrollViewShadowNode::ConcreteState const> m_state;
+
+  // Issue #15557: Event for notifying listeners when scroll position changes
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable>> m_viewChangedEvent;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -1227,8 +1227,11 @@ void WindowsTextInputComponentView::updateState(
   if (m_mostRecentEventCount == m_state->getData().mostRecentEventCount) {
     m_comingFromState = true;
     auto &fragments = m_state->getData().attributedStringBox.getValue().getFragments();
-    UpdateText(fragments.size() ? fragments[0].string : "");
-
+    {
+      // DrawBlock defers DrawText() until after UpdateText completes
+      DrawBlock db(*this);
+      UpdateText(fragments.size() ? fragments[0].string : "");
+    }
     m_comingFromState = false;
   }
 }
@@ -1377,7 +1380,7 @@ void WindowsTextInputComponentView::EmitOnScrollEvent() noexcept {
 }
 
 void WindowsTextInputComponentView::OnSelectionChanged(LONG start, LONG end) noexcept {
-  if (m_eventEmitter && !m_comingFromState /* && !m_comingFromJS ?? */) {
+  if (m_eventEmitter && !m_comingFromState && !m_comingFromJS) {
     auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
     facebook::react::WindowsTextInputEventEmitter::OnSelectionChange onSelectionChangeArgs;
     onSelectionChangeArgs.selection.start = start;

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.82.0-preview.10</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.82.0-preview.12</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>82</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>8dab2200781d9264a8a3ad08005d3a04b44e7c18</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>5c806505f373a3b5161faef635f560ebb53fa2a1</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/PropertySheets/WinUI.props

@@ -10,7 +10,7 @@
     <WinUI3ExperimentalVersion Condition="'$(WinUI3ExperimentalVersion)'==''">2.0.0-experimental3</WinUI3ExperimentalVersion>
     <!-- This value is also used by the CLI, see /packages/@react-native-windows/cli/.../autolinkWindows.ts -->
     <WinUI3Version Condition="'$(WinUI3Version)'=='' AND '$(UseExperimentalWinUI3)'=='true'">$(WinUI3ExperimentalVersion)</WinUI3Version>
-    <WinUI3Version Condition="'$(WinUI3Version)'==''">1.8.251106002</WinUI3Version>
+    <WinUI3Version Condition="'$(WinUI3Version)'==''">1.8.260209005</WinUI3Version>
     <!-- This is needed to prevent build errors with WinAppSDK >= 1.7 trying to double build WindowsAppRuntimeAutoInitializer.cpp -->
     <WindowsAppSdkAutoInitialize Condition="'$(WindowsAppSdkAutoInitialize)'=='' And $([MSBuild]::VersionGreaterThan('$(WinUI3Version)', '1.7.0'))">false</WindowsAppSdkAutoInitialize>
   </PropertyGroup>

package/Scripts/NuGetRestoreForceEvaluateAllSolutions.ps1

@@ -20,23 +20,17 @@ try {
     $packagesSolutions = (Get-ChildItem -File -Recurse -Path $RepoRoot\packages -Filter *.sln ) | Where-Object { !$_.FullName.Contains('node_modules') -and !$_.FullName.Contains('e2etest') }
     $vnextSolutions = (Get-ChildItem -File -Path $RepoRoot\vnext -Filter *.sln)
 
-    # Run all solutions for each platform to ensure all projects are restored
-    # (some projects are only configured for specific platforms)
-    $platforms = @("x64","x86","ARM64")
+    # Run all solutions with their defaults
     $($packagesSolutions; $vnextSolutions) | Foreach-Object {
-        foreach ($platform in $platforms) {
-            Write-Host Restoring $_.FullName with Platform=$platform
-            & msbuild /t:Restore /p:RestoreForceEvaluate=true /p:Platform=$platform $_.FullName
-        }
+        Write-Host Restoring $_.FullName with defaults
+        & msbuild /t:Restore /p:RestoreForceEvaluate=true $_.FullName
     }
 
     # Re-run solutions that build with UseExperimentalWinUI3
     $experimentalSolutions = @("playground-composition.sln", "Microsoft.ReactNative.NewArch.sln", "ReactWindows-Desktop.sln");
     $($packagesSolutions; $vnextSolutions) | Where-Object { $experimentalSolutions -contains $_.Name } | Foreach-Object {
-        foreach ($platform in $platforms) {
-            Write-Host Restoring $_.FullName with UseExperimentalWinUI3=true Platform=$platform
-            & msbuild /t:Restore /p:RestoreForceEvaluate=true /p:UseExperimentalWinUI3=true /p:Platform=$platform $_.FullName
-        }
+        Write-Host Restoring $_.FullName with UseExperimentalWinUI3=true
+        & msbuild /t:Restore /p:RestoreForceEvaluate=true /p:UseExperimentalWinUI3=true $_.FullName
     }
 }
 finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.82.0-preview.10",
+  "version": "0.82.0-preview.12",
   "license": "MIT",
   "repository": {
     "type": "git",