react-native-windows 0.75.8 → 0.75.10

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);
@@ -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/WindowsTextInputComponentView.cpp

@@ -165,6 +165,10 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the caret
   BOOL TxShowCaret(BOOL fShow) override {
+    // Only show the caret if we have focus
+    if (fShow && !m_outer->m_hasFocus) {
+      return false;
+    }
     m_outer->ShowCaret(m_outer->windowsTextInputProps().caretHidden ? false : fShow);
     return true;
   }
@@ -237,14 +241,20 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Converts screen coordinates of a specified point to the client coordinates
   BOOL TxScreenToClient(LPPOINT lppt) override {
-    assert(false);
-    return {};
+    winrt::Windows::Foundation::Point pt{static_cast<float>(lppt->x), static_cast<float>(lppt->y)};
+    auto localpt = m_outer->ScreenToLocal(pt);
+    lppt->x = static_cast<LONG>(localpt.X);
+    lppt->y = static_cast<LONG>(localpt.Y);
+    return true;
   }
 
   //@cmember Converts the client coordinates of a specified point to screen coordinates
   BOOL TxClientToScreen(LPPOINT lppt) override {
-    assert(false);
-    return {};
+    winrt::Windows::Foundation::Point pt{static_cast<float>(lppt->x), static_cast<float>(lppt->y)};
+    auto screenpt = m_outer->LocalToScreen(pt);
+    lppt->x = static_cast<LONG>(screenpt.X);
+    lppt->y = static_cast<LONG>(screenpt.Y);
+    return true;
   }
 
   //@cmember Request host to activate text services
@@ -870,6 +880,7 @@ void WindowsTextInputComponentView::OnCharacterReceived(
   emitter->onKeyPress(onKeyPressArgs);
 
   WPARAM wParam = static_cast<WPARAM>(args.KeyCode());
+
   LPARAM lParam = 0;
   lParam = args.KeyStatus().RepeatCount; // bits 0-15
   lParam |= args.KeyStatus().ScanCode << 16; // bits 16-23
@@ -908,6 +919,7 @@ void WindowsTextInputComponentView::UnmountChildComponentView(
 
 void WindowsTextInputComponentView::onLostFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_hasFocus = false;
   Super::onLostFocus(args);
   if (m_textServices) {
     LRESULT lresult;
@@ -919,6 +931,7 @@ void WindowsTextInputComponentView::onLostFocus(
 
 void WindowsTextInputComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_hasFocus = true;
   Super::onGotFocus(args);
   if (m_textServices) {
     LRESULT lresult;
@@ -1022,6 +1035,10 @@ void WindowsTextInputComponentView::updateProps(
     m_submitKeyEvents.clear();
   }
 
+  if (oldTextInputProps.autoCapitalize != newTextInputProps.autoCapitalize) {
+    autoCapitalizeOnUpdateProps(oldTextInputProps.autoCapitalize, newTextInputProps.autoCapitalize);
+  }
+
   UpdatePropertyBits();
 }
 
@@ -1476,4 +1493,29 @@ winrt::Microsoft::ReactNative::ComponentView WindowsTextInputComponentView::Crea
   return winrt::make<WindowsTextInputComponentView>(compContext, tag, reactContext);
 }
 
+// This function assumes that previous and new capitalization types are different.
+void WindowsTextInputComponentView::autoCapitalizeOnUpdateProps(
+    const std::string &previousCapitalizationType,
+    const std::string &newCapitalizationType) noexcept {
+  /*
+    Possible values are:
+     Characters - All characters.
+     Words - First letter of each word.
+     Sentences - First letter of each sentence.
+     None - Do not autocapitalize anything.
+
+     For now, only characters and none are supported.
+  */
+
+  if (previousCapitalizationType == "characters") {
+    winrt::check_hresult(m_textServices->TxSendMessage(
+        EM_SETEDITSTYLE, 0 /* disable */, SES_UPPERCASE /* flag affected */, nullptr /* LRESULT */));
+  }
+
+  if (newCapitalizationType == "characters") {
+    winrt::check_hresult(m_textServices->TxSendMessage(
+        EM_SETEDITSTYLE, SES_UPPERCASE /* enable */, SES_UPPERCASE /* flag affected */, nullptr /* LRESULT */));
+  }
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -104,6 +104,10 @@ struct WindowsTextInputComponentView
   void InternalFinalize() noexcept;
   void UpdatePropertyBits() noexcept;
 
+  void autoCapitalizeOnUpdateProps(
+      const std::string &previousCapitalizationType,
+      const std::string &newcapitalizationType) noexcept;
+
   winrt::Windows::UI::Composition::CompositionSurfaceBrush m_brush{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ICaretVisual m_caretVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface{nullptr};
@@ -124,6 +128,7 @@ struct WindowsTextInputComponentView
   int m_cDrawBlock{0};
   bool m_needsRedraw{false};
   bool m_drawing{false};
+  bool m_hasFocus{false};
   bool m_clearTextOnSubmit{false};
   bool m_multiline{false};
   DWORD m_propBitsMask{0};

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

@@ -330,7 +330,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"AcrylicInAppFillColorDefault", {0x9E, 0xFF, 0xFF, 0xFF}},
           {"SystemChromeMediumLowColor", {0xFF, 0xF2, 0xF2, 0xF2}},
           {"SystemControlForegroundBaseHighColor", {0xFF, 0x00, 0x00, 0x00}},
-          {"SystemControlTransientBorderColor", {0x24, 0x00, 0x00, 0x00}}};
+          {"SystemControlTransientBorderColor", {0x24, 0x00, 0x00, 0x00}},
+          {"FocusVisualPrimary", {0xFF, 0x00, 0x00, 0x00}},
+          {"FocusVisualSecondary", {0x99, 0xFF, 0xFF, 0xFF}}};
 
   static std::unordered_map<std::string, winrt::Windows::UI::Color, std::hash<std::string_view>, std::equal_to<>>
       s_darkColors = {
@@ -362,7 +364,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"AcrylicInAppFillColorDefault", {0x9E, 0x00, 0x00, 0x00}},
           {"SystemChromeMediumLowColor", {0xFF, 0x2B, 0x2B, 0x2B}},
           {"SystemControlForegroundBaseHighColor", {0xFF, 0xFF, 0xFF, 0xFF}},
-          {"SystemControlTransientBorderColor", {0x5C, 0x00, 0x00, 0x00}}};
+          {"SystemControlTransientBorderColor", {0x5C, 0x00, 0x00, 0x00}},
+          {"FocusVisualPrimary", {0xFF, 0xFF, 0xFF, 0xFF}},
+          {"FocusVisualSecondary", {0x99, 0x00, 0x00, 0x00F}}};
 
   static std::unordered_map<
       std::string,
@@ -399,7 +403,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"ControlStrongFillColorDisabled", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
           {"SystemChromeMediumLowColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
           {"SystemControlForegroundBaseHighColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}},
-          {"SystemControlTransientBorderColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}}};
+          {"SystemControlTransientBorderColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}},
+          {"FocusVisualPrimary", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}},
+          {"FocusVisualSecondary", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}}};
 
   auto alias = s_xamlAliasedColors.find(platformColor);
   if (alias != s_xamlAliasedColors.end()) {

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

@@ -214,4 +214,15 @@ ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept {
   }
 }
 
+ToggleState GetToggleState(const std::optional<facebook::react::AccessibilityState> &state) noexcept {
+  if (state.has_value()) {
+    if (state->checked == facebook::react::AccessibilityState::Checked) {
+      return ToggleState::ToggleState_On;
+    } else if (state->checked == facebook::react::AccessibilityState::Mixed) {
+      return ToggleState::ToggleState_Indeterminate;
+    }
+  }
+  return ToggleState::ToggleState_Off;
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -36,4 +36,6 @@ std::string extractAccessibilityValue(const facebook::react::AccessibilityValue
 void DispatchAccessibilityAction(::Microsoft::ReactNative::ReactTaggedView &view, const std::string &action) noexcept;
 
 ExpandCollapseState GetExpandCollapseState(const bool &expanded) noexcept;
+
+ToggleState GetToggleState(const std::optional<facebook::react::AccessibilityState> &state) noexcept;
 } // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -26,7 +26,7 @@ UnimplementedNativeViewComponentView::UnimplementedNativeViewComponentView(
               ~(ComponentViewFeatures::Background | ComponentViewFeatures::ShadowProps |
                 ComponentViewFeatures::NativeBorder)) {
   m_labelVisual = compContext.CreateSpriteVisual();
-  OuterVisual().InsertAt(m_labelVisual, 1);
+  OuterVisual().InsertAt(m_labelVisual, 0);
 }
 
 winrt::Microsoft::ReactNative::ComponentView UnimplementedNativeViewComponentView::Create(

package/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl

@@ -33,6 +33,7 @@ namespace Microsoft.ReactNative.Composition
     void SetViewComponentViewInitializer(ViewComponentViewInitializer initializer);
     void SetContentIslandComponentViewInitializer(ComponentIslandComponentViewInitializer initializer);
     void SetCreateVisualHandler(CreateVisualDelegate impl);
+    void SetViewFeatures(ComponentViewFeatures viewFeatures);
   };
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/IReactViewComponentBuilder.idl

@@ -56,7 +56,7 @@ namespace Microsoft.ReactNative
 
   [experimental]
   DOC_STRING("A delegate that creates a @IComponentProps object for an instance of @ViewProps. See @IReactViewComponentBuilder.SetCreateProps")
-  delegate IComponentProps ViewPropsFactory(ViewProps props);
+  delegate IComponentProps ViewPropsFactory(ViewProps props, IComponentProps cloneFrom);
 
   [experimental]
   delegate Windows.Foundation.Size MeasureContentHandler(ShadowNode shadowNode, LayoutContext layoutContext, LayoutConstraints layoutConstraints);