react-native-windows 0.74.25 → 0.74.27

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

@@ -12,15 +12,18 @@
 #include <Views/ShadowNodeBase.h>
 #include <windows.h>
 #include <windowsx.h>
+#include <winrt/Windows.UI.Core.h>
 #include <winrt/Windows.UI.Input.h>
 #include "Composition.Input.h"
 #include "CompositionViewComponentView.h"
 #include "ReactNativeIsland.h"
 #include "RootComponentView.h"
 
-#ifdef USE_WINUI3
-#include <winrt/Microsoft.UI.Input.h>
-#endif
+namespace ABI::Microsoft::UI::Input {
+struct IInputCursor;
+}
+
+#include <Microsoft.UI.Input.InputCursor.Interop.h>
 
 namespace Microsoft::ReactNative {
 
@@ -328,6 +331,11 @@ CompositionEventHandler::~CompositionEventHandler() {
     }
   }
 #endif
+
+  if (m_hcursorOwned) {
+    ::DestroyCursor(m_hcursor);
+    m_hcursor = nullptr;
+  }
 }
 
 facebook::react::SurfaceId CompositionEventHandler::SurfaceId() const noexcept {
@@ -507,6 +515,10 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
       }
       break;
     }
+    case WM_SETCURSOR: {
+      UpdateCursor();
+      return 1;
+    }
   }
 
   return 0;
@@ -753,6 +765,155 @@ void CompositionEventHandler::HandleIncomingPointerEvent(
     hoveredViews.emplace_back(ReactTaggedView(componentViewDescriptor.view));
   }
   m_currentlyHoveredViewsPerPointer[pointerId] = std::move(hoveredViews);
+
+  if (IsMousePointerEvent(event)) {
+    UpdateCursor();
+  }
+}
+
+void CompositionEventHandler::UpdateCursor() noexcept {
+  for (auto &taggedView : m_currentlyHoveredViewsPerPointer[MOUSE_POINTER_ID]) {
+    if (auto view = taggedView.view()) {
+      if (auto viewcomponent =
+              view.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()) {
+        auto cursorInfo = viewcomponent->cursor();
+        if (cursorInfo.first != facebook::react::Cursor::Auto || cursorInfo.second != nullptr) {
+          SetCursor(cursorInfo.first, cursorInfo.second);
+          return;
+        }
+      }
+    }
+  }
+
+  SetCursor(facebook::react::Cursor::Auto, nullptr);
+}
+
+void CompositionEventHandler::SetCursor(facebook::react::Cursor cursor, HCURSOR hcur) noexcept {
+  if (m_currentCursor == cursor && m_hcursor == hcur)
+    return;
+
+  if (auto strongRootView = m_wkRootView.get()) {
+    if (auto island = strongRootView.Island()) {
+      auto pointerSource = winrt::Microsoft::UI::Input::InputPointerSource::GetForIsland(island);
+
+      if (!hcur) {
+        winrt::Windows::UI::Core::CoreCursorType type = winrt::Windows::UI::Core::CoreCursorType::Arrow;
+        switch (cursor) {
+          case facebook::react::Cursor::Pointer:
+            type = winrt::Windows::UI::Core::CoreCursorType::Hand;
+            break;
+            /* -- Additional cursors not added in core until later version
+              case facebook::react::Cursor::Help:
+                type = winrt::Windows::UI::Core::CoreCursorType::Help;
+                break;
+              case facebook::react::Cursor::NotAllowed:
+                type = winrt::Windows::UI::Core::CoreCursorType::UniversalNo;
+                break;
+              case facebook::react::Cursor::Wait:
+                type = winrt::Windows::UI::Core::CoreCursorType::Wait;
+                break;
+              case facebook::react::Cursor::Move:
+                type = winrt::Windows::UI::Core::CoreCursorType::SizeAll;
+                break;
+              case facebook::react::Cursor::NESWResize:
+                type = winrt::Windows::UI::Core::CoreCursorType::SizeNortheastSouthwest;
+                break;
+              case facebook::react::Cursor::NSResize:
+                type = winrt::Windows::UI::Core::CoreCursorType::SizeNorthSouth;
+                break;
+              case facebook::react::Cursor::NWSEResize:
+                type = winrt::Windows::UI::Core::CoreCursorType::SizeNorthwestSoutheast;
+                break;
+              case facebook::react::Cursor::EWResize:
+                type = winrt::Windows::UI::Core::CoreCursorType::SizeWestEast;
+                break;
+              case facebook::react::Cursor::Text:
+                type = winrt::Windows::UI::Core::CoreCursorType::IBeam;
+                break;
+              case facebook::react::Cursor::Progress:
+                type = winrt::Windows::UI::Core::CoreCursorType::Wait; // IDC_APPSTARTING not mapped to CoreCursor?
+                break;
+              case facebook::react::Cursor::Crosshair:
+                type = winrt::Windows::UI::Core::CoreCursorType::Cross;
+                break;
+                */
+          default:
+            break;
+        }
+
+        m_inputCursor = winrt::Microsoft::UI::Input::InputCursor::CreateFromCoreCursor(
+            winrt::Windows::UI::Core::CoreCursor(type, 0));
+        m_hcursor = hcur;
+      } else {
+        auto cursorInterop = winrt::get_activation_factory<
+            winrt::Microsoft::UI::Input::InputCursor,
+            ABI::Microsoft::UI::Input::IInputCursorStaticsInterop>();
+        winrt::com_ptr<IUnknown> spunk;
+        winrt::check_hresult(cursorInterop->CreateFromHCursor(
+            hcur, reinterpret_cast<ABI::Microsoft::UI::Input::IInputCursor **>(spunk.put_void())));
+        m_hcursor = hcur;
+        m_inputCursor = spunk.as<winrt::Microsoft::UI::Input::InputCursor>();
+      }
+
+      pointerSource.Cursor(m_inputCursor);
+    } else {
+      if (m_hcursorOwned) {
+        ::DestroyCursor(m_hcursor);
+        m_hcursorOwned = false;
+      }
+      if (hcur == nullptr) {
+        const WCHAR *idc = IDC_ARROW;
+        switch (cursor) {
+          case facebook::react::Cursor::Pointer:
+            idc = IDC_HAND;
+            break;
+            /* -- Additional cursors not added in core until later version
+          case facebook::react::Cursor::Help:
+            idc = IDC_HELP;
+            break;
+          case facebook::react::Cursor::NotAllowed:
+            idc = IDC_NO;
+            break;
+          case facebook::react::Cursor::Wait:
+            idc = IDC_WAIT;
+            break;
+          case facebook::react::Cursor::Move:
+            idc = IDC_SIZEALL;
+            break;
+          case facebook::react::Cursor::NESWResize:
+            idc = IDC_SIZENESW;
+            break;
+          case facebook::react::Cursor::NSResize:
+            idc = IDC_SIZENS;
+            break;
+          case facebook::react::Cursor::NWSEResize:
+            idc = IDC_SIZENWSE;
+            break;
+          case facebook::react::Cursor::EWResize:
+            idc = IDC_SIZEWE;
+            break;
+          case facebook::react::Cursor::Text:
+            idc = IDC_IBEAM;
+            break;
+          case facebook::react::Cursor::Progress:
+            idc = IDC_APPSTARTING;
+            break;
+          case facebook::react::Cursor::Crosshair:
+            idc = IDC_CROSS;
+            break;
+            */
+          default:
+            break;
+        }
+        m_hcursor = ::LoadCursor(nullptr, idc);
+        m_hcursorOwned = true;
+      } else {
+        m_hcursor = hcur;
+      }
+      ::SetCursor(m_hcursor);
+    }
+    m_currentCursor = cursor;
+  }
 }
 
 void CompositionEventHandler::UpdateActiveTouch(

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

@@ -147,6 +147,9 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   static void
   UpdateActiveTouch(ActiveTouch &activeTouch, facebook::react::Point ptScaled, facebook::react::Point ptLocal) noexcept;
 
+  void UpdateCursor() noexcept;
+  void SetCursor(facebook::react::Cursor cursor, HCURSOR hcur) noexcept;
+
   std::map<PointerId, ActiveTouch> m_activeTouches; // iOS is map of touch event args to ActiveTouch..?
   PointerId m_touchId = 0;
   int m_fragmentTag = -1;
@@ -157,6 +160,10 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
 
   facebook::react::Tag m_pointerCapturingComponentTag{-1}; // Component that has captured input
   std::vector<PointerId> m_capturedPointers;
+  HCURSOR m_hcursor{nullptr};
+  bool m_hcursorOwned{false}; // If we create the cursor, so we need to destroy it
+  facebook::react::Cursor m_currentCursor{facebook::react::Cursor::Auto};
+  winrt::Microsoft::UI::Input::InputCursor m_inputCursor{nullptr};
 
 #ifdef USE_WINUI3
   winrt::event_token m_pointerPressedToken;

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

@@ -40,7 +40,7 @@ constexpr float FOCUS_VISUAL_WIDTH = 2.0f;
 //   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
 //            |
 //            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
-//   ------Focus Visual Container
+//   ------Focus Visual Container (created when hosting focus visuals)
 //           |
 //           |------Inner Focus Visual
 //                     |
@@ -53,13 +53,11 @@ ComponentView::ComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-    ComponentViewFeatures flags)
-    : base_type(tag, reactContext), m_compContext(compContext), m_flags(flags) {
+    ComponentViewFeatures flags,
+    winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder *builder)
+    : base_type(tag, reactContext, builder), m_compContext(compContext), m_flags(flags) {
   m_outerVisual = compContext.CreateSpriteVisual(); // TODO could be a raw ContainerVisual if we had a
                                                     // CreateContainerVisual in ICompositionContext
-  m_focusVisual = compContext.CreateSpriteVisual(); // TODO could be a raw ContainerVisual if we had a
-                                                    // CreateContainerVisual in ICompositionContext
-  m_outerVisual.InsertAt(m_focusVisual, 0);
 }
 
 ComponentView::~ComponentView() {
@@ -90,13 +88,17 @@ void ComponentView::onThemeChanged() noexcept {
     m_borderPrimitive->onThemeChanged(
         m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps()));
   }
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->onThemeChanged(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusOuterPrimitive->onThemeChanged(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+  if (m_componentHostingFocusVisual) {
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->onThemeChanged(
+          innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      auto outerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->onThemeChanged(
+          outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    }
   }
 
   if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
@@ -160,14 +162,18 @@ void ComponentView::updateProps(
   if (m_borderPrimitive) {
     m_borderPrimitive->updateProps(oldViewProps, newViewProps);
   }
-  if (!newViewProps.enableFocusRing) {
-    showFocusVisual(false);
-  }
-  if (m_focusInnerPrimitive) {
-    m_focusInnerPrimitive->updateProps(oldViewProps, newViewProps);
-  }
-  if (m_focusOuterPrimitive) {
-    m_focusOuterPrimitive->updateProps(oldViewProps, newViewProps);
+
+  if (m_componentHostingFocusVisual) {
+    if (!newViewProps.enableFocusRing) {
+      m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
+    }
+
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->updateProps(oldViewProps, newViewProps);
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->updateProps(oldViewProps, newViewProps);
+    }
   }
   if ((m_flags & ComponentViewFeatures::ShadowProps) == ComponentViewFeatures::ShadowProps) {
     updateShadowProps(oldViewProps, newViewProps);
@@ -200,44 +206,70 @@ void ComponentView::updateLayoutMetrics(
     });
   }
 
-  updateFocusLayoutMetrics(layoutMetrics);
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
 
   if (layoutMetrics != oldLayoutMetrics) {
     if (m_borderPrimitive) {
       m_borderPrimitive->markNeedsUpdate();
     }
-    if (m_focusInnerPrimitive) {
-      m_focusInnerPrimitive->markNeedsUpdate();
-    }
-    if (m_focusOuterPrimitive) {
-      m_focusOuterPrimitive->markNeedsUpdate();
+
+    if (m_componentHostingFocusVisual) {
+      m_componentHostingFocusVisual->updateFocusLayoutMetrics();
     }
   }
 
-  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
   UpdateCenterPropertySet();
 }
 
-void ComponentView::updateFocusLayoutMetrics(facebook::react::LayoutMetrics const &layoutMetrics) noexcept {
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->RootVisual().Size(
-        {innerFocusMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         innerFocusMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-    m_focusInnerPrimitive->RootVisual().Offset(
-        {-FOCUS_VISUAL_WIDTH * layoutMetrics.pointScaleFactor,
-         -FOCUS_VISUAL_WIDTH * layoutMetrics.pointScaleFactor,
-         0.0f});
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-    m_focusOuterPrimitive->RootVisual().Size(
-        {outerFocusMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         outerFocusMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-    m_focusOuterPrimitive->RootVisual().Offset(
-        {-(FOCUS_VISUAL_WIDTH * 2 * m_layoutMetrics.pointScaleFactor),
-         -(FOCUS_VISUAL_WIDTH * 2 * m_layoutMetrics.pointScaleFactor),
-         0.0f});
+void ComponentView::updateFocusLayoutMetrics() noexcept {
+  facebook::react::RectangleEdges<bool> nudgeEdges;
+  auto scaleFactor = m_focusPrimitive->m_focusVisualComponent->m_layoutMetrics.pointScaleFactor;
+  if (m_focusPrimitive) {
+    if (m_focusPrimitive->m_focusOuterPrimitive) {
+      auto outerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(false /*inner*/);
+
+      if (outerFocusMetrics.frame.origin.x < 0) {
+        nudgeEdges.left = true;
+      }
+      if (outerFocusMetrics.frame.origin.y < 0) {
+        nudgeEdges.top = true;
+      }
+      if (outerFocusMetrics.frame.getMaxX() > m_layoutMetrics.frame.getMaxX()) {
+        nudgeEdges.right = true;
+      }
+      if (outerFocusMetrics.frame.getMaxY() > m_layoutMetrics.frame.getMaxY()) {
+        nudgeEdges.bottom = true;
+      }
+
+      m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Size(
+          {outerFocusMetrics.frame.size.width * scaleFactor -
+               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
+               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0),
+           outerFocusMetrics.frame.size.height * scaleFactor -
+               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0) -
+               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * 2 * scaleFactor) : 0)});
+      m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Offset(
+          {nudgeEdges.left ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
+           nudgeEdges.top ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
+           0.0f});
+      m_focusPrimitive->m_focusOuterPrimitive->markNeedsUpdate();
+    }
+
+    if (m_focusPrimitive->m_focusInnerPrimitive) {
+      auto innerFocusMetrics = m_focusPrimitive->m_focusVisualComponent->focusLayoutMetrics(true /*inner*/);
+      m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Size(
+          {innerFocusMetrics.frame.size.width * scaleFactor -
+               (nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
+               (nudgeEdges.right ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0),
+           innerFocusMetrics.frame.size.height * scaleFactor -
+               (nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0) -
+               (nudgeEdges.bottom ? (FOCUS_VISUAL_WIDTH * scaleFactor) : 0)});
+      m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Offset(
+          {nudgeEdges.left ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+           nudgeEdges.top ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+           0.0f});
+      m_focusPrimitive->m_focusInnerPrimitive->markNeedsUpdate();
+    }
   }
 }
 
@@ -288,13 +320,17 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView
     }
   }
 
-  if (m_focusInnerPrimitive) {
-    auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-    m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-  }
-  if (m_focusOuterPrimitive) {
-    auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-    m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+  if (m_componentHostingFocusVisual) {
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
+      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive->finalize(
+          innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+    }
+    if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive) {
+      auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
+      m_componentHostingFocusVisual->m_focusPrimitive->m_focusOuterPrimitive->finalize(
+          outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    }
   }
 
   if (m_FinalizeTransform) {
@@ -308,7 +344,12 @@ void ComponentView::onLostFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   if (args.OriginalSource() == Tag()) {
     m_eventEmitter->onBlur();
-    showFocusVisual(false);
+
+    if (m_componentHostingFocusVisual) {
+      auto s = get_strong();
+
+      m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
+    }
     if (m_uiaProvider) {
       winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
           m_uiaProvider, UIA_HasKeyboardFocusPropertyId, true, false);
@@ -317,12 +358,47 @@ void ComponentView::onLostFocus(
   base_type::onLostFocus(args);
 }
 
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::visualToHostFocus() noexcept {
+  return OuterVisual();
+}
+
+// We want to host focus visuals as close to the focused component as possible.  However since the focus visuals extend
+// past the bounds of the component, in cases where additional components are positioned directly next to this one, we'd
+// get zorder issues causing most of the focus rect to be obscured. So we go up the tree until we find a component who's
+// bounds will fix the entire focus rect.
+winrt::com_ptr<ComponentView> ComponentView::focusVisualRoot(const facebook::react::Rect &focusRect) noexcept {
+  auto compVisual =
+      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(OuterVisual());
+  if (!compVisual) {
+    return get_strong();
+    // When not using lifted composition, force the focus visual to host within its own component, as we do not support
+    // ParentForTransform
+  }
+
+  if (facebook::react::Rect::intersect(focusRect, m_layoutMetrics.frame) == focusRect) {
+    return get_strong();
+  }
+
+  if (!m_parent) {
+    return get_strong();
+  }
+
+  return m_parent.as<ComponentView>()->focusVisualRoot(
+      {{focusRect.origin.x + m_layoutMetrics.frame.origin.x, focusRect.origin.y + m_layoutMetrics.frame.origin.y},
+       focusRect.size});
+}
+
 void ComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   if (args.OriginalSource() == Tag()) {
     m_eventEmitter->onFocus();
     if (viewProps()->enableFocusRing) {
-      showFocusVisual(true);
+      facebook::react::Rect focusRect = m_layoutMetrics.frame;
+      focusRect.origin.x -= (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.origin.y -= (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.size.width += (FOCUS_VISUAL_WIDTH * 2);
+      focusRect.size.height += (FOCUS_VISUAL_WIDTH * 2);
+      focusVisualRoot(focusRect)->hostFocusVisual(true, get_strong());
     }
     if (m_uiaProvider) {
       auto spProviderSimple = m_uiaProvider.try_as<IRawElementProviderSimple>();
@@ -493,39 +569,70 @@ facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
   return metrics;
 }
 
-void ComponentView::showFocusVisual(bool show) noexcept {
-  if ((m_flags & ComponentViewFeatures::FocusVisual) == ComponentViewFeatures::FocusVisual) {
-    if (show && !m_showingFocusVisual) {
-      m_showingFocusVisual = true;
-
-      m_focusVisual.IsVisible(true);
-      assert(viewProps()->enableFocusRing);
-      if (!m_focusInnerPrimitive) {
-        m_focusInnerPrimitive = std::make_shared<BorderPrimitive>(*this);
-        m_focusVisual.InsertAt(m_focusInnerPrimitive->RootVisual(), 0);
+void ComponentView::hostFocusVisual(bool show, winrt::com_ptr<ComponentView> view) noexcept {
+  if ((view->m_flags & ComponentViewFeatures::FocusVisual) == ComponentViewFeatures::FocusVisual) {
+    // Any previous view showing focus visuals should have removed them before another shows it
+    assert(
+        !m_focusPrimitive || !m_focusPrimitive->m_focusVisualComponent ||
+        m_focusPrimitive->m_focusVisualComponent == view);
+    assert(
+        !m_focusPrimitive || !m_focusPrimitive->m_focusVisualComponent ||
+        view->m_componentHostingFocusVisual.get() == this);
+    if (show && !view->m_componentHostingFocusVisual) {
+      view->m_componentHostingFocusVisual = get_strong();
+
+      if (!m_focusPrimitive) {
+        m_focusPrimitive = std::make_unique<FocusPrimitive>();
       }
-      if (!m_focusOuterPrimitive) {
-        m_focusOuterPrimitive = std::make_shared<BorderPrimitive>(*this);
-        m_focusVisual.InsertAt(m_focusOuterPrimitive->RootVisual(), 0);
+      m_focusPrimitive->m_focusVisualComponent = view;
+
+      if (!m_focusPrimitive->m_focusVisual) {
+        m_focusPrimitive->m_focusVisual = m_compContext.CreateSpriteVisual();
+        auto hostingVisual =
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                visualToHostFocus())
+                .as<winrt::Microsoft::UI::Composition::ContainerVisual>();
+        if (hostingVisual) {
+          hostingVisual.Children().InsertAtTop(
+              winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                  m_focusPrimitive->m_focusVisual));
+        } else {
+          assert(
+              view.get() ==
+              this); // When not using lifted comp, focus visuals should always host within their own component
+          OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, 1);
+        }
       }
-      updateFocusLayoutMetrics(m_layoutMetrics);
-      auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-      m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
-      auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-      m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
-    } else if (!show && m_showingFocusVisual) {
-      m_showingFocusVisual = false;
-      m_focusVisual.IsVisible(false);
-      if (m_focusInnerPrimitive) {
-        m_focusInnerPrimitive->markNeedsUpdate();
-        auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
-        m_focusInnerPrimitive->finalize(innerFocusMetrics, focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+
+      m_focusPrimitive->m_focusVisual.IsVisible(true);
+      assert(view->viewProps()->enableFocusRing);
+      if (!m_focusPrimitive->m_focusInnerPrimitive) {
+        m_focusPrimitive->m_focusInnerPrimitive = std::make_shared<BorderPrimitive>(*this);
+        m_focusPrimitive->m_focusVisual.InsertAt(m_focusPrimitive->m_focusInnerPrimitive->RootVisual(), 0);
+      }
+      if (!m_focusPrimitive->m_focusOuterPrimitive) {
+        m_focusPrimitive->m_focusOuterPrimitive = std::make_shared<BorderPrimitive>(*this);
+        m_focusPrimitive->m_focusVisual.InsertAt(m_focusPrimitive->m_focusOuterPrimitive->RootVisual(), 0);
       }
-      if (m_focusOuterPrimitive) {
-        m_focusOuterPrimitive->markNeedsUpdate();
-        auto outerFocusMetrics = focusLayoutMetrics(false /*inner*/);
-        m_focusOuterPrimitive->finalize(outerFocusMetrics, focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+      if (auto focusVisual =
+              winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                  m_focusPrimitive->m_focusVisual)) {
+        auto outerVisual =
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(
+                view->OuterVisual());
+        focusVisual.ParentForTransform(outerVisual);
       }
+      updateFocusLayoutMetrics();
+      auto innerFocusMetrics = view->focusLayoutMetrics(true /*inner*/);
+      m_focusPrimitive->m_focusInnerPrimitive->finalize(
+          innerFocusMetrics, view->focusBorderMetrics(true /*inner*/, innerFocusMetrics));
+      auto outerFocusMetrics = view->focusLayoutMetrics(false /*inner*/);
+      m_focusPrimitive->m_focusOuterPrimitive->finalize(
+          outerFocusMetrics, view->focusBorderMetrics(false /*inner*/, outerFocusMetrics));
+    } else if (!show && view->m_componentHostingFocusVisual && m_focusPrimitive) {
+      m_focusPrimitive->m_focusVisualComponent = nullptr;
+      m_focusPrimitive->m_focusVisual.IsVisible(false);
+      view->m_componentHostingFocusVisual = nullptr;
     }
   }
 }
@@ -685,6 +792,10 @@ void ComponentView::updateClippingPath(
   }
 }
 
+std::pair<facebook::react::Cursor, HCURSOR> ComponentView::cursor() const noexcept {
+  return {viewProps()->cursor, nullptr};
+}
+
 void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
   if (m_borderPrimitive) {
     index += m_borderPrimitive->numberOfVisuals();
@@ -806,24 +917,15 @@ ViewComponentView::ViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-    ComponentViewFeatures flags)
-    : base_type(compContext, tag, reactContext, flags),
+    ComponentViewFeatures flags,
+    winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder *builder)
+    : base_type(compContext, tag, reactContext, flags, builder),
       m_props(defaultProps ? defaultProps : ViewComponentView::defaultProps()) {}
 
 winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ViewComponentView::createVisual() noexcept {
   return m_compContext.CreateSpriteVisual();
 }
 
-void ViewComponentView::CreateVisualHandler(
-    const winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate &handler) {
-  m_createVisualHandler = handler;
-}
-
-winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate ViewComponentView::CreateVisualHandler()
-    const noexcept {
-  return m_createVisualHandler;
-}
-
 void ViewComponentView::CreateInternalVisualHandler(
     const winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate &handler) {
   m_createInternalVisualHandler = handler;
@@ -838,10 +940,10 @@ void ViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     if (m_createInternalVisualHandler) {
       m_visual = m_createInternalVisualHandler(*this);
-    } else if (m_createVisualHandler) {
+    } else if (m_builder && m_builder->CreateVisualHandler()) {
       m_visual =
           winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
-              m_createVisualHandler(*this));
+              m_builder->CreateVisualHandler()(*this));
     } else {
       m_visual = createVisual();
     }
@@ -859,6 +961,8 @@ winrt::Microsoft::ReactNative::ComponentView ViewComponentView::Create(
 
 winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
 ViewComponentView::VisualToMountChildrenInto() noexcept {
+  if (m_builder && m_builder->VisualToMountChildrenIntoHandler())
+    return m_builder->VisualToMountChildrenIntoHandler()(*this);
   return Visual();
 }
 
@@ -1106,7 +1210,7 @@ winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewProps() noexcept
 
 winrt::Microsoft::ReactNative::ViewProps ViewComponentView::ViewPropsInner() noexcept {
   // If we have AbiViewProps, then we dont need to new up a props wrapper
-  if (m_customComponent) {
+  if (m_builder) {
     const auto &abiViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(m_props);
     return abiViewProps.ViewProps();
   }