react-native-windows 0.74.32 → 0.74.34

package/Libraries/Modal/Modal.windows.js

@@ -274,8 +274,11 @@ class Modal extends React.Component<Props, State> {
       }
     }
 
+    // [Windows] - apply empty rootViewStyle to AppContainer to prevent modal from always expanding to fill available space
     const innerChildren = __DEV__ ? (
-      <AppContainer rootTag={this.context}>{this.props.children}</AppContainer>
+      <AppContainer rootTag={this.context} rootViewStyle={{}}>
+        {this.props.children}
+      </AppContainer>
     ) : (
       this.props.children
     );

package/Microsoft.ReactNative/Fabric/AbiPortalShadowNode.cpp

@@ -0,0 +1,97 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "AbiPortalShadowNode.h"
+
+#include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/core/conversions.h>
+
+#include <utility>
+
+namespace Microsoft::ReactNative {
+
+extern const char AbiPortalComponentName[] = "AbiPortal";
+
+facebook::react::Size AbiPortalShadowNode::measureContent(
+    const facebook::react::LayoutContext &layoutContext,
+    const facebook::react::LayoutConstraints &layoutConstraints) const {
+  return {0, 0}; // The portal placeholder node shouldn't take up any space
+}
+
+void AbiPortalShadowNode::layout(facebook::react::LayoutContext layoutContext) {
+  ensureUnsealed();
+  auto layoutMetrics = getLayoutMetrics();
+
+  auto portalOwningShadowNode = ShadowNode::Unshared{};
+
+  if (getChildren().empty()) {
+    return;
+  }
+
+  // A Portal should only have a single child
+  react_native_assert(getChildren().size() == 1);
+
+  const auto &childNode = getChildren()[0];
+
+  auto clonedShadowNode = ShadowNode::Unshared{};
+
+  portalOwningShadowNode = cloneTree(childNode->getFamily(), [&](const ShadowNode &oldShadowNode) {
+    clonedShadowNode = oldShadowNode.clone({});
+    return clonedShadowNode;
+  });
+  auto portalShadowNode = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get());
+
+  auto &layoutableShadowNode = dynamic_cast<LayoutableShadowNode &>(*clonedShadowNode);
+
+  auto &state = getStateData();
+
+  facebook::react::LayoutConstraints layoutConstraints;
+  layoutConstraints.layoutDirection = layoutMetrics.layoutDirection;
+
+  if (state.userdata) {
+    // If the portal component set a state of type IPortalStateData,
+    // extract constraint information from it, and use that for layout
+    if (auto portalState = state.userdata.try_as<winrt::Microsoft::ReactNative::Composition::IPortalStateData>()) {
+      auto stateConstraints = portalState.LayoutConstraints();
+
+      layoutConstraints.minimumSize = {stateConstraints.MinimumSize.Width, stateConstraints.MinimumSize.Height};
+      layoutConstraints.maximumSize = {stateConstraints.MaximumSize.Width, stateConstraints.MaximumSize.Height};
+      if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight) {
+        layoutConstraints.layoutDirection = facebook::react::LayoutDirection::LeftToRight;
+      } else if (stateConstraints.LayoutDirection == winrt::Microsoft::ReactNative::LayoutDirection::RightToLeft) {
+        layoutConstraints.layoutDirection = facebook::react::LayoutDirection::RightToLeft;
+      }
+    }
+  }
+
+  // Laying out the `ShadowNode` and the subtree starting from it.
+  layoutableShadowNode.layoutTree(layoutContext, layoutConstraints);
+
+  auto childLayoutMetrics = layoutableShadowNode.getLayoutMetrics();
+  childLayoutMetrics.frame.origin = {0, 0};
+  layoutableShadowNode.setLayoutMetrics(childLayoutMetrics);
+
+  // Update the list of children to reflect the changes that we made.
+  this->children_ = static_cast<AbiPortalShadowNode *>(portalOwningShadowNode.get())->children_;
+}
+
+void AbiPortalShadowNode::Builder(winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept {
+  m_builder = builder;
+}
+
+winrt::Microsoft::ReactNative::IReactViewComponentBuilder AbiPortalShadowNode::Builder() const noexcept {
+  return m_builder;
+}
+
+void AbiPortalShadowNode::Proxy(winrt::Microsoft::ReactNative::ShadowNode proxy) noexcept {
+  m_proxy = proxy;
+}
+
+winrt::Microsoft::ReactNative::ShadowNode AbiPortalShadowNode::Proxy() const noexcept {
+  return m_proxy;
+}
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiPortalShadowNode.h

@@ -0,0 +1,53 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <react/components/rnwcore/EventEmitters.h>
+#include <unordered_map>
+#include "AbiShadowNode.h"
+#include "AbiState.h"
+#include "AbiViewProps.h"
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace Microsoft::ReactNative {
+
+extern const char AbiPortalComponentName[];
+
+class AbiPortalShadowNode final : public facebook::react::ConcreteViewShadowNode<
+                                      AbiPortalComponentName,
+                                      AbiViewProps,
+                                      facebook::react::ViewEventEmitter,
+                                      Microsoft::ReactNative::AbiStateData> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static facebook::react::ShadowNodeTraits BaseTraits() {
+    auto traits = facebook::react::ShadowNode::BaseTraits();
+    traits.set(facebook::react::ShadowNodeTraits::Trait::FormsStackingContext);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::FormsView);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::RootNodeKind);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(facebook::react::ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  facebook::react::Size measureContent(
+      const facebook::react::LayoutContext &layoutContext,
+      const facebook::react::LayoutConstraints &layoutConstraints) const override;
+  void layout(facebook::react::LayoutContext layoutContext) override;
+
+  void OnClone(const facebook::react::ShadowNode &sourceShadowNode) noexcept;
+  void Builder(winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept;
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder Builder() const noexcept;
+  void Proxy(winrt::Microsoft::ReactNative::ShadowNode handle) noexcept;
+  winrt::Microsoft::ReactNative::ShadowNode Proxy() const noexcept;
+
+ private:
+  winrt::Microsoft::ReactNative::ShadowNode m_proxy{nullptr};
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder{nullptr};
+};
+
+} // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h

@@ -3,16 +3,22 @@
 
 #pragma once
 
+#include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
+#include <Fabric/WindowsComponentDescriptorRegistry.h>
+#include <ReactContext.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 #include <react/renderer/core/ComponentDescriptor.h>
+#include "AbiPortalShadowNode.h"
 #include "AbiViewProps.h"
 #include "AbiViewShadowNode.h"
+#include "DynamicReader.h"
 #include "winrt/Microsoft.ReactNative.h"
 
 namespace Microsoft::ReactNative {
 
-class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
-  using ShadowNodeT = AbiViewShadowNode;
+template <typename ShadowNodeT>
+class ConcreteAbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
+ protected:
   using SharedShadowNodeT = std::shared_ptr<const ShadowNodeT>;
 
  public:
@@ -24,34 +30,143 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
   using ConcreteState = typename ShadowNodeT::ConcreteState;
   using ConcreteStateData = typename ShadowNodeT::ConcreteState::Data;
 
-  AbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters);
+  ConcreteAbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ComponentDescriptor(parameters) {
+    auto flavor = std::static_pointer_cast<std::string const>(this->flavor_);
+    m_builder = WindowsComponentDescriptorRegistry::FromProperties(
+                    parameters.contextContainer->at<winrt::Microsoft::ReactNative::ReactContext>("MSRN.ReactContext")
+                        .Properties())
+                    ->GetDescriptor(flavor);
+
+    rawPropsParser_.prepare<ConcreteProps>();
+  }
+  facebook::react::ComponentHandle getComponentHandle() const override {
+    return reinterpret_cast<facebook::react::ComponentHandle>(getComponentName());
+  }
+
+  facebook::react::ComponentName getComponentName() const override {
+    return std::static_pointer_cast<std::string const>(this->flavor_)->c_str();
+  }
+
+  facebook::react::ShadowNodeTraits getTraits() const override {
+    auto traits = ShadowNodeT::BaseTraits();
+    if (winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->MeasureContentHandler()) {
+      traits.set(facebook::react::ShadowNodeTraits::LeafYogaNode);
+      traits.set(facebook::react::ShadowNodeTraits::MeasurableYogaNode);
+    }
+    return traits;
+  }
 
-  facebook::react::ComponentHandle getComponentHandle() const override;
-  facebook::react::ComponentName getComponentName() const override;
-  facebook::react::ShadowNodeTraits getTraits() const override;
   std::shared_ptr<facebook::react::ShadowNode> createShadowNode(
       const facebook::react::ShadowNodeFragment &fragment,
-      facebook::react::ShadowNodeFamily::Shared const &family) const override;
+      facebook::react::ShadowNodeFamily::Shared const &family) const override {
+    auto shadowNode = std::make_shared<ShadowNodeT>(fragment, family, getTraits());
+    shadowNode->Proxy(winrt::make<winrt::Microsoft::ReactNative::implementation::YogaLayoutableShadowNode>(shadowNode));
+    winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+        ->CreateShadowNode(shadowNode->Proxy());
+
+    adopt(*shadowNode);
+    return shadowNode;
+  }
+
   facebook::react::ShadowNode::Unshared cloneShadowNode(
       const facebook::react::ShadowNode &sourceShadowNode,
-      const facebook::react::ShadowNodeFragment &fragment) const override;
+      const facebook::react::ShadowNodeFragment &fragment) const override {
+    auto shadowNode = std::make_shared<ShadowNodeT>(sourceShadowNode, fragment);
+    shadowNode->Proxy(winrt::make<winrt::Microsoft::ReactNative::implementation::YogaLayoutableShadowNode>(shadowNode));
+    winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+        ->CloneShadowNode(shadowNode->Proxy(), static_cast<const ShadowNodeT &>(sourceShadowNode).Proxy());
+
+    adopt(*shadowNode);
+    return shadowNode;
+  }
 
   void appendChild(
       const facebook::react::ShadowNode::Shared &parentShadowNode,
-      const facebook::react::ShadowNode::Shared &childShadowNode) const override;
+      const facebook::react::ShadowNode::Shared &childShadowNode) const override {
+    auto concreteParentShadowNode = std::static_pointer_cast<const ShadowNodeT>(parentShadowNode);
+    auto concreteNonConstParentShadowNode = std::const_pointer_cast<ShadowNodeT>(concreteParentShadowNode);
+    concreteNonConstParentShadowNode->appendChild(childShadowNode);
+  }
+
   virtual facebook::react::Props::Shared cloneProps(
       const facebook::react::PropsParserContext &context,
       const facebook::react::Props::Shared &props,
-      facebook::react::RawProps rawProps) const override;
+      facebook::react::RawProps rawProps) const override {
+    // Optimization:
+    // Quite often nodes are constructed with default/empty props: the base
+    // `props` object is `null` (there no base because it's not cloning) and the
+    // `rawProps` is empty. In this case, we can return the default props object
+    // of a concrete type entirely bypassing parsing.
+    if (!props && rawProps.isEmpty()) {
+      return ShadowNodeT::defaultSharedProps();
+    }
+
+    if constexpr (facebook::react::RawPropsFilterable<ShadowNodeT>) {
+      ShadowNodeT::filterRawProps(rawProps);
+    }
+
+    rawProps.parse(rawPropsParser_);
+
+    // Call old-style constructor
+    // auto shadowNodeProps = std::make_shared<ShadowNodeT::Props>(context, rawProps, props);
+    auto shadowNodeProps = std::make_shared<AbiViewProps>(
+        context, props ? static_cast<AbiViewProps const &>(*props) : *ShadowNodeT::defaultSharedProps(), rawProps);
+    auto viewProps =
+        winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(shadowNodeProps, false /*holdRef*/);
+    auto userProps =
+        winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->CreateProps(viewProps, props ? static_cast<AbiViewProps const &>(*props).UserProps() : nullptr);
+    shadowNodeProps->SetUserProps(userProps, viewProps);
+
+    rawProps.iterateOverValues(
+        [&](facebook::react::RawPropsPropNameHash hash, const char *propName, facebook::react::RawValue const &fn) {
+          shadowNodeProps.get()->setProp(context, hash, propName, fn);
+          userProps.SetProp(
+              hash,
+              winrt::to_hstring(propName),
+              winrt::make<winrt::Microsoft::ReactNative::DynamicReader>(folly::dynamic(fn)));
+        });
+
+    return shadowNodeProps;
+  }
+
   virtual facebook::react::State::Shared createInitialState(
       facebook::react::Props::Shared const &props,
-      facebook::react::ShadowNodeFamily::Shared const &family) const override;
+      facebook::react::ShadowNodeFamily::Shared const &family) const override {
+    if (std::is_same<ConcreteStateData, facebook::react::StateData>::value) {
+      // Default case: Returning `null` for nodes that don't use `State`.
+      return nullptr;
+    }
+
+    return std::make_shared<ConcreteState>(
+        std::make_shared<ConcreteStateData const>(
+            ConcreteAbiViewComponentDescriptor<ShadowNodeT>::initialStateData(props, family, *this)),
+        family);
+  }
+
   virtual facebook::react::State::Shared createState(
       facebook::react::ShadowNodeFamily const &family,
-      facebook::react::StateData::Shared const &data) const override;
+      facebook::react::StateData::Shared const &data) const override {
+    if (std::is_same<ConcreteStateData, facebook::react::StateData>::value) {
+      // Default case: Returning `null` for nodes that don't use `State`.
+      return nullptr;
+    }
+
+    react_native_assert(data && "Provided `data` is nullptr.");
+
+    return std::make_shared<ConcreteState const>(
+        std::static_pointer_cast<ConcreteStateData const>(data), *family.getMostRecentState());
+  }
 
   facebook::react::ShadowNodeFamily::Shared createFamily(
-      facebook::react::ShadowNodeFamilyFragment const &fragment) const override;
+      facebook::react::ShadowNodeFamilyFragment const &fragment) const override {
+    auto eventEmitter = std::make_shared<const ConcreteEventEmitter>(
+        std::make_shared<facebook::react::EventTarget>(fragment.instanceHandle), eventDispatcher_);
+    return std::make_shared<facebook::react::ShadowNodeFamily>(
+        fragment, std::move(eventEmitter), eventDispatcher_, *this);
+  }
 
  protected:
   /*
@@ -66,15 +181,44 @@ class AbiViewComponentDescriptor : public facebook::react::ComponentDescriptor {
    *   - Set `ShadowNode`'s size from state in
    * `ModalHostViewComponentDescriptor`.
    */
-  virtual void adopt(facebook::react::ShadowNode &shadowNode) const;
+  virtual void adopt(facebook::react::ShadowNode &shadowNode) const {
+    react_native_assert(shadowNode.getComponentHandle() == getComponentHandle());
+
+    auto &abiViewShadowNode = static_cast<AbiViewShadowNode &>(shadowNode);
+
+    abiViewShadowNode.Builder(m_builder);
+
+    if (winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
+            ->MeasureContentHandler()) {
+      abiViewShadowNode.dirtyLayout();
+      abiViewShadowNode.enableMeasurement();
+    }
+  }
 
  private:
   static ConcreteStateData initialStateData(
-      const facebook::react::Props::Shared & /*props*/,
+      const facebook::react::Props::Shared &props,
       const facebook::react::ShadowNodeFamily::Shared & /*family*/,
-      const facebook::react::ComponentDescriptor & /*componentDescriptor*/) noexcept;
+      const facebook::react::ComponentDescriptor &componentDescriptor) noexcept {
+    return {winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(
+                static_cast<const ConcreteAbiViewComponentDescriptor<ShadowNodeT> &>(componentDescriptor).m_builder)
+                ->InitialStateData(std::static_pointer_cast<AbiViewProps const>(props)->UserProps())};
+    return {};
+  }
+
+  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder{nullptr};
+};
 
-  winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder;
+class AbiViewComponentDescriptor : public ConcreteAbiViewComponentDescriptor<AbiViewShadowNode> {
+ public:
+  AbiViewComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ConcreteAbiViewComponentDescriptor<AbiViewShadowNode>(parameters) {}
+};
+
+class AbiPortalComponentDescriptor : public ConcreteAbiViewComponentDescriptor<AbiPortalShadowNode> {
+ public:
+  AbiPortalComponentDescriptor(facebook::react::ComponentDescriptorParameters const &parameters)
+      : ConcreteAbiViewComponentDescriptor<AbiPortalShadowNode>(parameters) {}
 };
 
 } // namespace Microsoft::ReactNative

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

@@ -4,6 +4,7 @@
 #include <Fabric/Composition/SwitchComponentView.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
 #include <Unicode.h>
+#include <winrt/Microsoft.UI.Content.h>
 #include "RootComponentView.h"
 #include "UiaHelpers.h"
 
@@ -27,12 +28,29 @@ CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
   }
 }
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
+    const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+    const winrt::Microsoft::UI::Content::ChildSiteLink &childSiteLink) noexcept
+    : m_view{componentView}, m_childSiteLink{childSiteLink} {}
+#endif // USE_EXPERIMENTAL_WINUI3
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::Navigate(
     NavigateDirection direction,
     IRawElementProviderFragment **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childSiteLink) {
+    if (direction == NavigateDirection_FirstChild || direction == NavigateDirection_LastChild) {
+      auto fragment = m_childSiteLink.AutomationProvider().try_as<IRawElementProviderFragment>();
+      *pRetVal = fragment.detach();
+      return S_OK;
+    }
+  }
+#endif // USE_EXPERIMENTAL_WINUI3
+
   return UiaNavigateHelper(m_view.view(), direction, *pRetVal);
 }
 

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

@@ -25,6 +25,12 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   CompositionDynamicAutomationProvider(
       const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView) noexcept;
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+  CompositionDynamicAutomationProvider(
+      const winrt::Microsoft::ReactNative::Composition::ComponentView &componentView,
+      const winrt::Microsoft::UI::Content::ChildSiteLink &childContentLink) noexcept;
+#endif // USE_EXPERIMENTAL_WINUI3
+
   // inherited via IRawElementProviderFragment
   virtual HRESULT __stdcall Navigate(NavigateDirection direction, IRawElementProviderFragment **pRetVal) override;
   virtual HRESULT __stdcall GetRuntimeId(SAFEARRAY **pRetVal) override;
@@ -86,6 +92,10 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
  private:
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   std::vector<winrt::com_ptr<IRawElementProviderSimple>> m_selectionItems;
+#ifdef USE_EXPERIMENTAL_WINUI3
+  // Non-null when this UIA node is the peer of a ContentIslandComponentView.
+  winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
+#endif
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -33,6 +33,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 constexpr float FOCUS_VISUAL_WIDTH = 2.0f;
+constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
@@ -168,11 +169,14 @@ void ComponentView::updateProps(
       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);
+    // We have to check m_componentHostingFocusVisual again, as it can be set to null by above hostFocusVisual call
+    if (m_componentHostingFocusVisual) {
+      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) {
@@ -225,29 +229,11 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
   facebook::react::RectangleEdges<bool> nudgeEdges;
   auto scaleFactor = m_focusPrimitive->m_focusVisualComponent->m_layoutMetrics.pointScaleFactor;
   if (m_focusPrimitive) {
+    auto nudgeEdges = m_focusPrimitive->m_focusVisualComponent->focusNudges();
     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)});
+          {outerFocusMetrics.frame.size.width * scaleFactor, outerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusOuterPrimitive->RootVisual().Offset(
           {nudgeEdges.left ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
            nudgeEdges.top ? 0 : -(FOCUS_VISUAL_WIDTH * 2 * scaleFactor),
@@ -258,15 +244,10 @@ void ComponentView::updateFocusLayoutMetrics() noexcept {
     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)});
+          {innerFocusMetrics.frame.size.width * scaleFactor, innerFocusMetrics.frame.size.height * scaleFactor});
       m_focusPrimitive->m_focusInnerPrimitive->RootVisual().Offset(
-          {nudgeEdges.left ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
-           nudgeEdges.top ? 0 : -FOCUS_VISUAL_WIDTH * scaleFactor,
+          {nudgeEdges.left ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
+           nudgeEdges.top ? (FOCUS_VISUAL_WIDTH * scaleFactor) : (-FOCUS_VISUAL_WIDTH * scaleFactor),
            0.0f});
       m_focusPrimitive->m_focusInnerPrimitive->markNeedsUpdate();
     }
@@ -535,7 +516,33 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView:
   return m_outerVisual ? m_outerVisual : Visual();
 }
 
-facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+// If the focus visual would extend past the bounds of the hosting visual,
+// then we will nudge the focus visual back inside the hosting visuals bounds.
+facebook::react::RectangleEdges<bool> ComponentView::focusNudges() const noexcept {
+  facebook::react::RectangleEdges<bool> nudgeEdges;
+
+  // Always use outer focus metrics to determine if we need to nudge the focus rect over to fit
+  facebook::react::LayoutMetrics layoutMetrics = focusLayoutMetricsNoNudge(false /*inner*/);
+
+  Assert(m_componentHostingFocusVisual);
+
+  if (layoutMetrics.frame.origin.x < 0) {
+    nudgeEdges.left = true;
+  }
+  if (layoutMetrics.frame.origin.y < 0) {
+    nudgeEdges.top = true;
+  }
+  if (layoutMetrics.frame.getMaxX() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxX()) {
+    nudgeEdges.right = true;
+  }
+  if (layoutMetrics.frame.getMaxY() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxY()) {
+    nudgeEdges.bottom = true;
+  }
+
+  return nudgeEdges;
+}
+
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetricsNoNudge(bool inner) const noexcept {
   facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics;
   layoutMetrics.frame.origin.x -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
   layoutMetrics.frame.origin.y -= FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
@@ -544,6 +551,28 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con
   return layoutMetrics;
 }
 
+facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) const noexcept {
+  auto nudgeEdges = focusNudges();
+  auto layoutMetrics = focusLayoutMetricsNoNudge(inner);
+
+  if (nudgeEdges.left) {
+    layoutMetrics.frame.origin.x += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.top) {
+    layoutMetrics.frame.origin.y += FOCUS_VISUAL_WIDTH * 2;
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.right) {
+    layoutMetrics.frame.size.width -= FOCUS_VISUAL_WIDTH * 2;
+  }
+  if (nudgeEdges.bottom) {
+    layoutMetrics.frame.size.height -= FOCUS_VISUAL_WIDTH * 2;
+  }
+
+  return layoutMetrics;
+}
+
 facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
     bool inner,
     const facebook::react::LayoutMetrics &layoutMetrics) const noexcept {
@@ -553,14 +582,17 @@ facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
   innerColor.m_platformColor.push_back(inner ? "FocusVisualSecondary" : "FocusVisualPrimary");
   metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top =
       innerColor;
-  if (metrics.borderRadii.bottomLeft != 0)
-    metrics.borderRadii.bottomLeft += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.bottomRight != 0)
-    metrics.borderRadii.bottomRight += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topLeft != 0)
-    metrics.borderRadii.topLeft += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
-  if (metrics.borderRadii.topRight != 0)
-    metrics.borderRadii.topRight += FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+
+  metrics.borderRadii.bottomLeft =
+      (metrics.borderRadii.bottomLeft ? metrics.borderRadii.bottomLeft : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.bottomRight =
+      (metrics.borderRadii.bottomRight ? metrics.borderRadii.bottomRight : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topLeft = (metrics.borderRadii.topLeft ? metrics.borderRadii.topLeft : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
+  metrics.borderRadii.topRight = (metrics.borderRadii.topRight ? metrics.borderRadii.topRight : FOCUS_VISUAL_RADIUS) +
+      FOCUS_VISUAL_WIDTH * (inner ? 1 : 2);
 
   metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top =
       facebook::react::BorderStyle::Solid;

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

@@ -143,6 +143,8 @@ struct ComponentView : public ComponentViewT<
   void FinalizeTransform(
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
+  facebook::react::RectangleEdges<bool> focusNudges() const noexcept;
+  facebook::react::LayoutMetrics focusLayoutMetricsNoNudge(bool inner) const noexcept;
   facebook::react::LayoutMetrics focusLayoutMetrics(bool inner) const noexcept;
   facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics)
       const noexcept;