react-native-windows 0.76.2 → 0.77.0-preview.1

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

@@ -6,6 +6,7 @@
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ContentIslandComponentView.h>
 #include <strsafe.h>
+#include "CompositionContextHelper.h"
 #include "DynamicWriter.h"
 #include "ReactHost/MsoUtils.h"
 
@@ -21,8 +22,10 @@ void ReactCompositionViewComponentBuilder::SetCreateProps(ViewPropsFactory impl)
   m_propsFactory = impl;
 }
 
-IComponentProps ReactCompositionViewComponentBuilder::CreateProps(ViewProps props) noexcept {
-  return m_propsFactory(props);
+IComponentProps ReactCompositionViewComponentBuilder::CreateProps(
+    ViewProps props,
+    const IComponentProps &cloneFrom) noexcept {
+  return m_propsFactory(props, cloneFrom);
 }
 
 void ReactCompositionViewComponentBuilder::CreateShadowNode(ShadowNode shadowNode) noexcept {
@@ -50,34 +53,20 @@ LayoutHandler ReactCompositionViewComponentBuilder::LayoutHandler() const noexce
 void ReactCompositionViewComponentBuilder::InitializeComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
   auto self = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view);
-  self->MarkAsCustomComponent();
-  if (m_customCommandHandler)
-    self->CustomCommandHandler(m_customCommandHandler);
-  if (m_finalizeUpdateHandler)
-    self->FinalizeUpdateHandler(m_finalizeUpdateHandler);
-  if (m_updatePropsHandler)
-    self->UpdatePropsHandler(m_updatePropsHandler);
-  if (m_updateStateHandler)
-    self->UpdateStateHandler(m_updateStateHandler);
-  if (m_updateEventEmitterHandler)
-    self->UpdateEventEmitterHandler(m_updateEventEmitterHandler);
-  if (m_mountChildComponentViewHandler)
-    self->MountChildComponentViewHandler(m_mountChildComponentViewHandler);
-  if (m_unmountChildComponentViewHandler)
-    self->UnmountChildComponentViewHandler(m_unmountChildComponentViewHandler);
-  if (m_createVisualHandler)
-    view.as<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>()->CreateVisualHandler(
-        m_createVisualHandler);
 }
 
 void ReactCompositionViewComponentBuilder::SetComponentViewInitializer(
     const ComponentViewInitializer &initializer) noexcept {
-  m_fnCreateView =
-      [initializer](const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context) {
-        auto view = winrt::make<winrt::Microsoft::ReactNative::implementation::ComponentView>(tag, reactContext);
-        initializer(view);
-        return view;
-      };
+  m_fnCreateView = [initializer](
+                       const IReactContext &reactContext,
+                       int32_t tag,
+                       const Experimental::ICompositionContext &context,
+                       ComponentViewFeatures,
+                       ReactCompositionViewComponentBuilder &builder) {
+    auto view = winrt::make<winrt::Microsoft::ReactNative::implementation::ComponentView>(tag, reactContext, &builder);
+    initializer(view);
+    return view;
+  };
   m_descriptorConstructorFactory = []() {
     return &facebook::react::concreteComponentDescriptorConstructor<::Microsoft::ReactNative::AbiComponentDescriptor>;
   };
@@ -85,14 +74,17 @@ void ReactCompositionViewComponentBuilder::SetComponentViewInitializer(
 
 void ReactCompositionViewComponentBuilder::SetViewComponentViewInitializer(
     const ViewComponentViewInitializer &initializer) noexcept {
-  m_fnCreateView =
-      [initializer](const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context) {
-        auto view = winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView::Create(
-                        context, tag, reactContext)
-                        .as<winrt::Microsoft::ReactNative::Composition::ViewComponentView>();
-        initializer(view);
-        return view;
-      };
+  m_fnCreateView = [initializer](
+                       const IReactContext &reactContext,
+                       int32_t tag,
+                       const Experimental::ICompositionContext &context,
+                       ComponentViewFeatures features,
+                       ReactCompositionViewComponentBuilder &builder) {
+    auto view = winrt::make<implementation::ViewComponentView>(
+        implementation::ViewComponentView::defaultProps(), context, tag, reactContext, features, &builder);
+    initializer(view);
+    return view;
+  };
   m_descriptorConstructorFactory = []() {
     return &facebook::react::concreteComponentDescriptorConstructor<
         ::Microsoft::ReactNative::AbiViewComponentDescriptor>;
@@ -102,10 +94,14 @@ void ReactCompositionViewComponentBuilder::SetViewComponentViewInitializer(
 void ReactCompositionViewComponentBuilder::SetContentIslandComponentViewInitializer(
     const ComponentIslandComponentViewInitializer &initializer) noexcept {
   m_fnCreateView = [initializer](
-                       const IReactContext &reactContext, int32_t tag, const Experimental::ICompositionContext &context)
+                       const IReactContext &reactContext,
+                       int32_t tag,
+                       const Experimental::ICompositionContext &context,
+                       ComponentViewFeatures /*features*/,
+                       ReactCompositionViewComponentBuilder &builder)
       -> winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView {
     auto view = winrt::make<winrt::Microsoft::ReactNative::Composition::implementation::ContentIslandComponentView>(
-        context, tag, reactContext);
+        context, tag, reactContext, &builder);
     initializer(view);
     return view;
   };
@@ -156,42 +152,108 @@ void ReactCompositionViewComponentBuilder::SetCustomCommandHandler(HandleCommand
   m_customCommandHandler = impl;
 }
 
+const HandleCommandDelegate &ReactCompositionViewComponentBuilder::CustomCommandHandler() const noexcept {
+  return m_customCommandHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetFinalizeUpdateHandler(UpdateFinalizerDelegate impl) noexcept {
   m_finalizeUpdateHandler = impl;
 }
 
+const UpdateFinalizerDelegate &ReactCompositionViewComponentBuilder::FinalizeUpdateHandler() const noexcept {
+  return m_finalizeUpdateHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetUpdatePropsHandler(UpdatePropsDelegate impl) noexcept {
   m_updatePropsHandler = impl;
 }
 
+const winrt::Microsoft::ReactNative::UpdatePropsDelegate &ReactCompositionViewComponentBuilder::UpdatePropsHandler()
+    const noexcept {
+  return m_updatePropsHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetUpdateStateHandler(UpdateStateDelegate impl) noexcept {
   m_updateStateHandler = impl;
 }
 
+const winrt::Microsoft::ReactNative::UpdateStateDelegate &ReactCompositionViewComponentBuilder::UpdateStateHandler()
+    const noexcept {
+  return m_updateStateHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetUpdateEventEmitterHandler(UpdateEventEmitterDelegate impl) noexcept {
   m_updateEventEmitterHandler = impl;
 }
 
+const UpdateEventEmitterDelegate &ReactCompositionViewComponentBuilder::UpdateEventEmitterHandler() const noexcept {
+  return m_updateEventEmitterHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetMountChildComponentViewHandler(
     MountChildComponentViewDelegate impl) noexcept {
   m_mountChildComponentViewHandler = impl;
 }
 
+const MountChildComponentViewDelegate &ReactCompositionViewComponentBuilder::MountChildComponentViewHandler()
+    const noexcept {
+  return m_mountChildComponentViewHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetUnmountChildComponentViewHandler(
     UnmountChildComponentViewDelegate impl) noexcept {
   m_unmountChildComponentViewHandler = impl;
 }
 
+const UnmountChildComponentViewDelegate &ReactCompositionViewComponentBuilder::UnmountChildComponentViewHandler()
+    const noexcept {
+  return m_unmountChildComponentViewHandler;
+}
+
 void ReactCompositionViewComponentBuilder::SetCreateVisualHandler(CreateVisualDelegate impl) noexcept {
   m_createVisualHandler = impl;
 }
 
+const CreateVisualDelegate &ReactCompositionViewComponentBuilder::CreateVisualHandler() const noexcept {
+  return m_createVisualHandler;
+}
+
+void ReactCompositionViewComponentBuilder::SetViewFeatures(ComponentViewFeatures viewFeatures) noexcept {
+  m_features = viewFeatures;
+}
+
+void ReactCompositionViewComponentBuilder::SetVisualToMountChildrenIntoHandler(
+    VisualToMountChildrenIntoDelegate impl) noexcept {
+  m_visualToMountChildrenIntoHandler = [impl](const winrt::Microsoft::ReactNative::ComponentView &view) {
+    return winrt::Microsoft::ReactNative::Composition::Experimental::implementation::MicrosoftCompositionContextHelper::
+        CreateVisual(impl(view));
+  };
+}
+
+void ReactCompositionViewComponentBuilder::SetIVisualToMountChildrenIntoHandler(
+    winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate impl) noexcept {
+  m_visualToMountChildrenIntoHandler = impl;
+}
+
+const winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate &
+ReactCompositionViewComponentBuilder::VisualToMountChildrenIntoHandler() const noexcept {
+  return m_visualToMountChildrenIntoHandler;
+}
+
+void ReactCompositionViewComponentBuilder::SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl) noexcept {
+  m_updateLayoutMetricsHandler = impl;
+}
+
+const UpdateLayoutMetricsDelegate &ReactCompositionViewComponentBuilder::UpdateLayoutMetricsHandler() const noexcept {
+  return m_updateLayoutMetricsHandler;
+}
+
 winrt::Microsoft::ReactNative::ComponentView ReactCompositionViewComponentBuilder::CreateView(
     const IReactContext &reactContext,
     int32_t tag,
     const Experimental::ICompositionContext &context) noexcept {
   assert(m_fnCreateView);
-  auto view = m_fnCreateView(reactContext, tag, context);
+  auto view = m_fnCreateView(reactContext, tag, context, m_features, *this);
   InitializeComponentView(view);
   return view;
 }

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

@@ -42,11 +42,15 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
  public: // Composition::IReactCompositionViewComponentBuilder
   void SetViewComponentViewInitializer(const ViewComponentViewInitializer &initializer) noexcept;
   void SetContentIslandComponentViewInitializer(const ComponentIslandComponentViewInitializer &initializer) noexcept;
-
   void SetCreateVisualHandler(CreateVisualDelegate impl) noexcept;
+  void SetViewFeatures(ComponentViewFeatures viewFeatures) noexcept;
+  void SetVisualToMountChildrenIntoHandler(VisualToMountChildrenIntoDelegate impl) noexcept;
+  void SetIVisualToMountChildrenIntoHandler(
+      winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate impl) noexcept;
+  void SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl) noexcept;
 
  public:
-  IComponentProps CreateProps(ViewProps props) noexcept;
+  IComponentProps CreateProps(ViewProps props, const IComponentProps &cloneFrom) noexcept;
   void CreateShadowNode(ShadowNode shadowNode) noexcept;
   void CloneShadowNode(ShadowNode shadowNode, ShadowNode sourceShadowNode) noexcept;
   winrt::Windows::Foundation::IInspectable InitialStateData(
@@ -60,6 +64,18 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
       facebook::react::Tag tag,
       const Experimental::ICompositionContext &context) noexcept;
 
+  const UpdateFinalizerDelegate &FinalizeUpdateHandler() const noexcept;
+  const HandleCommandDelegate &CustomCommandHandler() const noexcept;
+  const winrt::Microsoft::ReactNative::UpdatePropsDelegate &UpdatePropsHandler() const noexcept;
+  const winrt::Microsoft::ReactNative::UpdateStateDelegate &UpdateStateHandler() const noexcept;
+  const UpdateEventEmitterDelegate &UpdateEventEmitterHandler() const noexcept;
+  const MountChildComponentViewDelegate &MountChildComponentViewHandler() const noexcept;
+  const UnmountChildComponentViewDelegate &UnmountChildComponentViewHandler() const noexcept;
+  const UpdateLayoutMetricsDelegate &UpdateLayoutMetricsHandler() const noexcept;
+  const CreateVisualDelegate &CreateVisualHandler() const noexcept;
+  const winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate &
+  VisualToMountChildrenIntoHandler() const noexcept;
+
  private:
   void InitializeComponentView(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
 
@@ -69,10 +85,13 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
   InitialStateDataFactory m_initialStateDataFactory;
   winrt::Microsoft::ReactNative::MeasureContentHandler m_measureContent;
   winrt::Microsoft::ReactNative::LayoutHandler m_layoutHandler;
+  ComponentViewFeatures m_features{ComponentViewFeatures::Default};
   std::function<winrt::Microsoft::ReactNative::ComponentView(
       const IReactContext &reactContext,
       int32_t tag,
-      const Experimental::ICompositionContext &context)>
+      const Experimental::ICompositionContext &context,
+      ComponentViewFeatures features,
+      ReactCompositionViewComponentBuilder &builder)>
       m_fnCreateView;
   std::function<facebook::react::ComponentDescriptorConstructor *()> m_descriptorConstructorFactory;
   winrt::Microsoft::ReactNative::HandleCommandDelegate m_customCommandHandler;
@@ -84,6 +103,9 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
   winrt::Microsoft::ReactNative::UnmountChildComponentViewDelegate m_unmountChildComponentViewHandler;
 
   winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate m_createVisualHandler;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisualToMountChildrenIntoDelegate
+      m_visualToMountChildrenIntoHandler;
+  UpdateLayoutMetricsDelegate m_updateLayoutMetricsHandler;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition

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

@@ -127,6 +127,20 @@ ReactNativeIsland::ReactNativeIsland(const winrt::Microsoft::UI::Composition::Co
   InitTextScaleMultiplier();
 }
 
+// Constructor to initialize ReactNativeIsland with context and componentView
+ReactNativeIsland::ReactNativeIsland(
+    const winrt::Microsoft::UI::Composition::Compositor &compositor,
+    winrt::Microsoft::ReactNative::IReactContext context,
+    winrt::Microsoft::ReactNative::ComponentView componentView) noexcept
+    : m_compositor(compositor),
+      m_context(context),
+      m_layoutConstraints({{0, 0}, {0, 0}, winrt::Microsoft::ReactNative::LayoutDirection::Undefined}),
+      m_isFragment(true) {
+  m_rootTag = componentView.Tag();
+  InitTextScaleMultiplier();
+  AddFragmentCompositionEventHandler(context, componentView);
+}
+
 ReactNativeIsland::ReactNativeIsland() noexcept : ReactNativeIsland(nullptr) {}
 
 ReactNativeIsland::~ReactNativeIsland() noexcept {
@@ -152,6 +166,7 @@ ReactNative::IReactViewHost ReactNativeIsland::ReactViewHost() noexcept {
 }
 
 void ReactNativeIsland::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept {
+  assert(!m_isFragment); // make sure this isn't a FragmentIsalnd
   if (m_reactViewHost == value) {
     return;
   }
@@ -345,6 +360,29 @@ winrt::IInspectable ReactNativeIsland::GetUiaProvider() noexcept {
   return m_uiaProvider;
 }
 
+winrt::Windows::Foundation::Point ReactNativeIsland::ConvertScreenToLocal(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (m_island) {
+    auto pp = m_island.CoordinateConverter().ConvertScreenToLocal(
+        winrt::Windows::Graphics::PointInt32{static_cast<int32_t>(pt.X), static_cast<int32_t>(pt.Y)});
+    return {static_cast<float>(pp.X), static_cast<float>(pp.Y)};
+  }
+  POINT p{static_cast<LONG>(pt.X), static_cast<LONG>(pt.Y)};
+  ScreenToClient(m_hwnd, &p);
+  return {static_cast<float>(p.x) / m_scaleFactor, static_cast<float>(p.y) / m_scaleFactor};
+}
+
+winrt::Windows::Foundation::Point ReactNativeIsland::ConvertLocalToScreen(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (m_island) {
+    auto pp = m_island.CoordinateConverter().ConvertLocalToScreen(pt);
+    return {static_cast<float>(pp.X), static_cast<float>(pp.Y)};
+  }
+  POINT p{static_cast<LONG>(pt.X * m_scaleFactor), static_cast<LONG>(pt.Y * m_scaleFactor)};
+  ClientToScreen(m_hwnd, &p);
+  return {static_cast<float>(p.x), static_cast<float>(p.y)};
+}
+
 void ReactNativeIsland::SetWindow(uint64_t hwnd) noexcept {
   m_hwnd = reinterpret_cast<HWND>(hwnd);
 }
@@ -404,7 +442,7 @@ void ReactNativeIsland::InitRootView(
 
   m_context = winrt::Microsoft::ReactNative::ReactContext(std::move(context));
   m_reactViewOptions = std::move(viewOptions);
-  m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this);
+  m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this, -1);
   m_CompositionEventHandler->Initialize();
 
   UpdateRootViewInternal();
@@ -412,6 +450,27 @@ void ReactNativeIsland::InitRootView(
   m_isInitialized = true;
 }
 
+void ReactNativeIsland::AddFragmentCompositionEventHandler(
+    winrt::Microsoft::ReactNative::IReactContext context,
+    winrt::Microsoft::ReactNative::ComponentView componentView) noexcept {
+  m_uiDispatcher = context.Properties()
+                       .Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
+                       .try_as<IReactDispatcher>();
+  VerifyElseCrash(m_uiDispatcher.HasThreadAccess());
+  VerifyElseCrash(m_rootTag != -1);
+  auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+      winrt::Microsoft::ReactNative::ReactPropertyBag(context.Properties()));
+
+  if (!m_CompositionEventHandler) {
+    // Create CompositionEventHandler if not already created
+    m_context = winrt::Microsoft::ReactNative::ReactContext(context);
+    m_CompositionEventHandler =
+        std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this, componentView.Tag());
+    m_CompositionEventHandler->Initialize();
+    m_isInitialized = true;
+  }
+}
+
 void ReactNativeIsland::UpdateRootView() noexcept {
   VerifyElseCrash(m_uiDispatcher.HasThreadAccess());
   VerifyElseCrash(m_isInitialized);
@@ -518,7 +577,7 @@ facebook::react::AttributedStringBox CreateLoadingAttributedString() noexcept {
   auto fragment = facebook::react::AttributedString::Fragment{};
   fragment.string = "Loading";
   fragment.textAttributes.fontSize = loadingBarFontSize;
-  attributedString.appendFragment(fragment);
+  attributedString.appendFragment(std::move(fragment));
   return facebook::react::AttributedStringBox{attributedString};
 }
 
@@ -834,7 +893,9 @@ void ReactNativeIsland::OnMounted() noexcept {
     return;
   m_mounted = true;
   if (auto componentView = GetComponentView()) {
-    componentView->onMounted();
+    if (!componentView->isMounted()) {
+      componentView->onMounted();
+    }
   }
 }
 

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

@@ -48,6 +48,10 @@ struct ReactNativeIsland
   ~ReactNativeIsland() noexcept;
 
   ReactNativeIsland(const winrt::Microsoft::UI::Composition::Compositor &compositor) noexcept;
+  ReactNativeIsland(
+      const winrt::Microsoft::UI::Composition::Compositor &compositor,
+      winrt::Microsoft::ReactNative::IReactContext context,
+      winrt::Microsoft::ReactNative::ComponentView componentView) noexcept;
   winrt::Microsoft::UI::Content::ContentIsland Island();
 
   // property ReactViewHost
@@ -110,6 +114,9 @@ struct ReactNativeIsland
   void SetWindow(uint64_t hwnd) noexcept;
   int64_t SendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept;
 
+  winrt::Windows::Foundation::Point ConvertScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept;
+  winrt::Windows::Foundation::Point ConvertLocalToScreen(winrt::Windows::Foundation::Point pt) noexcept;
+
   bool CapturePointer(
       const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
       facebook::react::Tag tag) noexcept;
@@ -117,6 +124,10 @@ struct ReactNativeIsland
       const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
       facebook::react::Tag tag) noexcept;
 
+  void AddFragmentCompositionEventHandler(
+      winrt::Microsoft::ReactNative::IReactContext context,
+      winrt::Microsoft::ReactNative::ComponentView componentView) noexcept;
+
  public: // IReactViewInstance UI-thread implementation
   void InitRootView(
       winrt::Microsoft::ReactNative::IReactContext &&context,
@@ -136,6 +147,7 @@ struct ReactNativeIsland
 #endif
 
   HWND m_hwnd{0};
+  bool m_isFragment{false};
   bool m_isInitialized{false};
   bool m_isJSViewAttached{false};
   bool m_hasRenderedVisual{false};

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

@@ -7,6 +7,7 @@
 #include "RootComponentView.h"
 
 #include <Fabric/FabricUIManagerModule.h>
+#include <winrt/Microsoft.UI.Input.h>
 #include "CompositionRootAutomationProvider.h"
 #include "ReactNativeIsland.h"
 #include "Theme.h"
@@ -24,7 +25,7 @@ RootComponentView::RootComponentView(
           reactContext,
           ComponentViewFeatures::Default &
               ~(ComponentViewFeatures::Background | ComponentViewFeatures::ShadowProps |
-                ComponentViewFeatures::NativeBorder)) {}
+                ComponentViewFeatures::NativeBorder | ComponentViewFeatures::FocusVisual)) {}
 
 RootComponentView::~RootComponentView() {
   if (auto rootView = m_wkRootView.get()) {
@@ -106,7 +107,10 @@ bool RootComponentView::TrySetFocusedComponent(
   auto target = view;
   auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   if (selfView && !selfView->focusable()) {
-    target = FocusManager::FindFirstFocusableElement(target);
+    target = (direction == winrt::Microsoft::ReactNative::FocusNavigationDirection::Last ||
+              direction == winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous)
+        ? FocusManager::FindLastFocusableElement(target)
+        : FocusManager::FindFirstFocusableElement(target);
     if (!target)
       return false;
     selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
@@ -147,6 +151,9 @@ bool RootComponentView::TryMoveFocus(bool next) noexcept {
       [currentlyFocused = m_focusedComponent, next](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
         if (view == currentlyFocused)
           return false;
+        auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view);
+        if (!selfView->focusable())
+          return false;
 
         return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view)
             ->rootComponentView()
@@ -156,7 +163,28 @@ bool RootComponentView::TryMoveFocus(bool next) noexcept {
                      : winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous);
       };
 
-  return winrt::Microsoft::ReactNative::implementation::walkTree(m_focusedComponent, next, fn);
+  if (winrt::Microsoft::ReactNative::implementation::walkTree(m_focusedComponent, next, fn)) {
+    return true;
+  }
+
+  // We reached the end of the focus loop.  Notify the island in case the host wants to move focus somewhere outside the
+  // island.
+  auto island = parentContentIsland();
+  if (island) {
+    auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(island);
+    auto request = winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(
+        next ? winrt::Microsoft::UI::Input::FocusNavigationReason::Last
+             : winrt::Microsoft::UI::Input::FocusNavigationReason::First);
+    auto result = focusController.DepartFocus(request);
+    if (result == winrt::Microsoft::UI::Input::FocusNavigationResult::Moved) {
+      return true;
+    }
+  }
+
+  // Wrap focus around if nothing outside the island takes focus
+  return NavigateFocus(winrt::Microsoft::ReactNative::FocusNavigationRequest(
+      next ? winrt::Microsoft::ReactNative::FocusNavigationReason::First
+           : winrt::Microsoft::ReactNative::FocusNavigationReason::Last));
 }
 
 HRESULT RootComponentView::GetFragmentRoot(IRawElementProviderFragmentRoot **pRetVal) noexcept {
@@ -220,6 +248,26 @@ float RootComponentView::FontSizeMultiplier() const noexcept {
   return 1.0f;
 }
 
+winrt::Windows::Foundation::Point RootComponentView::ConvertScreenToLocal(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (auto rootView = m_wkRootView.get()) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)
+        ->ConvertScreenToLocal(pt);
+  }
+  assert(false);
+  return {};
+}
+
+winrt::Windows::Foundation::Point RootComponentView::ConvertLocalToScreen(
+    winrt::Windows::Foundation::Point pt) noexcept {
+  if (auto rootView = m_wkRootView.get()) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)
+        ->ConvertLocalToScreen(pt);
+  }
+  assert(false);
+  return {};
+}
+
 winrt::Microsoft::UI::Content::ContentIsland RootComponentView::parentContentIsland() noexcept {
   if (auto rootView = m_wkRootView.get()) {
     return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)->Island();

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

@@ -38,6 +38,9 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
 
   RootComponentView *rootComponentView() const noexcept override;
 
+  winrt::Windows::Foundation::Point ConvertScreenToLocal(winrt::Windows::Foundation::Point pt) noexcept;
+  winrt::Windows::Foundation::Point ConvertLocalToScreen(winrt::Windows::Foundation::Point pt) noexcept;
+
   winrt::Microsoft::UI::Content::ContentIsland parentContentIsland() noexcept;
 
   // Index that visuals can be inserted into OuterVisual for debugging UI

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

@@ -1112,9 +1112,9 @@ void ScrollViewComponentView::StartBringIntoView(
         options.TargetRect->origin.y > m_scrollVisual.ScrollPosition().y) {
       needsScroll = true;
       if (options.TargetRect->size.height > viewerHeight) {
-        scrollToVertical = options.TargetRect->origin.y + options.VerticalOffset;
+        scrollToVertical = options.TargetRect->origin.y + options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToVertical = (targetBottom - viewerHeight) + options.VerticalOffset;
+        scrollToVertical = (targetBottom - viewerHeight) + options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       }
       // Scroll Up
     } else if (
@@ -1122,9 +1122,9 @@ void ScrollViewComponentView::StartBringIntoView(
         targetBottom < (m_scrollVisual.ScrollPosition().y + viewerHeight)) {
       needsScroll = true;
       if (options.TargetRect->size.height > viewerHeight) {
-        scrollToVertical = targetBottom - viewerHeight - options.VerticalOffset;
+        scrollToVertical = targetBottom - viewerHeight - options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToVertical = options.TargetRect->origin.y - options.VerticalOffset;
+        scrollToVertical = options.TargetRect->origin.y - options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       }
     }
   } else {
@@ -1138,9 +1138,9 @@ void ScrollViewComponentView::StartBringIntoView(
         options.TargetRect->origin.x > m_scrollVisual.ScrollPosition().x) {
       needsScroll = true;
       if (options.TargetRect->size.width > viewerWidth) {
-        scrollToHorizontal = options.TargetRect->origin.x + options.HorizontalOffset;
+        scrollToHorizontal = options.TargetRect->origin.x + options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToHorizontal = (targetRight - viewerWidth) + options.HorizontalOffset;
+        scrollToHorizontal = (targetRight - viewerWidth) + options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       }
       // Scroll Left
     } else if (
@@ -1148,9 +1148,9 @@ void ScrollViewComponentView::StartBringIntoView(
         targetRight < (m_scrollVisual.ScrollPosition().x + viewerWidth)) {
       needsScroll = true;
       if (options.TargetRect->size.width > viewerWidth) {
-        scrollToHorizontal = targetRight - viewerWidth - options.HorizontalOffset;
+        scrollToHorizontal = targetRight - viewerWidth - options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToHorizontal = options.TargetRect->origin.x - options.HorizontalOffset;
+        scrollToHorizontal = options.TargetRect->origin.x - options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       }
     }
   } else {
@@ -1262,4 +1262,14 @@ std::string ScrollViewComponentView::DefaultControlType() const noexcept {
   return "scrollbar";
 }
 
+winrt::com_ptr<ComponentView> ScrollViewComponentView::focusVisualRoot(
+    const facebook::react::Rect &focusRect) noexcept {
+  return get_strong();
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
+ScrollViewComponentView::visualToHostFocus() noexcept {
+  return m_scrollVisual;
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -110,6 +110,9 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool lineRight(bool animate) noexcept;
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept override;
 
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept override;
+  winrt::com_ptr<ComponentView> focusVisualRoot(const facebook::react::Rect &focusRect) noexcept override;
+
  private:
   void updateContentVisualSize() noexcept;
   bool scrollToEnd(bool animate) noexcept;

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h

@@ -97,26 +97,24 @@ virtual State::Shared createInitialState(
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
         style.setPadding(
-            YGEdgeStart, yoga::CompactValue::of<YGUnitPoint>(theme.start));
+            yoga::Edge::Start, yoga::StyleLength::points(theme.start));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd &&
           !textInputProps.hasPaddingRight &&
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeEnd, yoga::CompactValue::of<YGUnitPoint>(theme.end));
+        style.setPadding(yoga::Edge::End, yoga::StyleLength::points(theme.end));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop &&
           !textInputProps.hasPaddingVertical) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(theme.top));
+        style.setPadding(yoga::Edge::Top, yoga::StyleLength::points(theme.top));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom &&
           !textInputProps.hasPaddingVertical) {
         changedPadding = true;
         style.setPadding(
-            YGEdgeBottom, yoga::CompactValue::of<YGUnitPoint>(theme.bottom));
+            yoga::Edge::Bottom, yoga::StyleLength::points(theme.bottom));
       }
 
       // If the TextInput initially does not have paddingLeft or paddingStart, a
@@ -127,12 +125,12 @@ virtual State::Shared createInitialState(
       if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft ||
            textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingStart) {
-        style.setPadding(YGEdgeStart, yoga::CompactValue::ofUndefined());
+        style.setPadding(yoga::Edge::Start, yoga::StyleLength::undefined());
       }
       if ((textInputProps.hasPadding || textInputProps.hasPaddingRight ||
            textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingEnd) {
-        style.setPadding(YGEdgeEnd, yoga::CompactValue::ofUndefined());
+        style.setPadding(yoga::Edge::End, yoga::StyleLength::undefined());
       }
 
       // Note that this is expensive: on every adopt, we need to set the Yoga