react-native-windows 0.74.4 → 0.74.6

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -1346,9 +1346,13 @@ function InternalTextInput(props: Props): React.Node {
               );
             }
           },
-          // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
-            return TextInputState.currentlyFocusedInput() === inputRef.current;
+            const currentlyFocusedInput =
+              TextInputState.currentlyFocusedInput();
+            return (
+              currentlyFocusedInput !== null &&
+              currentlyFocusedInput === inputRef.current
+            );
           },
           getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
             return inputRef.current;

package/Libraries/Components/View/View.windows.js

@@ -175,6 +175,9 @@ const View: React.AbstractComponent<
     // [Windows
     // $FlowFixMe - children typing
     const childrenWithImportantForAccessibility = children => {
+      if (children == null) {
+        return children;
+      }
       const updatedChildren = React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           // $FlowFixMe[incompatible-use]

package/Microsoft.ReactNative/ComponentView.idl

@@ -67,6 +67,26 @@ namespace Microsoft.ReactNative
     IReactContext ReactContext { get;};
   };
 
+  [experimental]
+  [webhosthidden]
+  runtimeclass LosingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
+    Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
+
+    void TryCancel();
+    void TrySetNewFocusedComponent(Microsoft.ReactNative.ComponentView component);
+  };
+
+  [experimental]
+  [webhosthidden]
+  runtimeclass GettingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
+    Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
+
+    void TryCancel();
+    void TrySetNewFocusedComponent(Microsoft.ReactNative.ComponentView component);
+  };
+
   [experimental]
   [webhosthidden]
   unsealed runtimeclass ComponentView {
@@ -101,6 +121,12 @@ namespace Microsoft.ReactNative
     overridable void OnPointerExited(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
     overridable void OnPointerCaptureLost();
 
+    Boolean TryFocus();
+    
+    event Windows.Foundation.EventHandler<LosingFocusEventArgs> LosingFocus;
+    event Windows.Foundation.EventHandler<GettingFocusEventArgs> GettingFocus;
+    event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.RoutedEventArgs> LostFocus;
+    event Windows.Foundation.EventHandler<Microsoft.ReactNative.Composition.Input.RoutedEventArgs> GotFocus;
   };
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -26,6 +26,15 @@ namespace Microsoft.ReactNative.Composition
     Default       = 0x00000007, // ShadowProps | NativeBorder | Background
   };
 
+  namespace Experimental {
+    [webhosthidden]
+    [experimental]
+    interface IInternalCreateComponentViewArgs
+    {
+      ICompositionContext CompositionContext { get; };
+    }
+  }
+
   [experimental]
   [webhosthidden]
   runtimeclass CreateCompositionComponentViewArgs : Microsoft.ReactNative.CreateComponentViewArgs {
@@ -39,6 +48,7 @@ namespace Microsoft.ReactNative.Composition
     ComponentView(CreateCompositionComponentViewArgs args);
 
     Microsoft.UI.Composition.Compositor Compositor { get; };
+    RootComponentView Root { get; };
     Theme Theme;
     overridable void OnThemeChanged();
     Boolean CapturePointer(Microsoft.ReactNative.Composition.Input.Pointer pointer);
@@ -72,13 +82,14 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass SwitchComponentView : ComponentView {
+  unsealed runtimeclass SwitchComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
   unsealed runtimeclass RootComponentView : ViewComponentView {
+    Microsoft.ReactNative.ComponentView GetFocusedComponent();
   };
   
   [experimental]
@@ -90,31 +101,32 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ActivityIndicatorComponentView : ComponentView {
+  unsealed runtimeclass ActivityIndicatorComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass WindowsModalHostComponentView : ComponentView {
+  unsealed runtimeclass WindowsModalHostComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ImageComponentView : ComponentView {
+  unsealed runtimeclass ImageComponentView : ViewComponentView {
+    Microsoft.ReactNative.ImageProps ViewProps { get; };
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ParagraphComponentView : ComponentView {
+  unsealed runtimeclass ParagraphComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ScrollViewComponentView : ComponentView {
+  unsealed runtimeclass ScrollViewComponentView : ViewComponentView {
   };
 
   [experimental]
@@ -126,7 +138,7 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass WindowsTextInputComponentView : ComponentView {
+  unsealed runtimeclass WindowsTextInputComponentView : ViewComponentView {
   };
   
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -99,6 +99,7 @@ namespace Microsoft.ReactNative
     Microsoft.ReactNative.Composition.ICustomResourceLoader Resources;
 
     Microsoft.ReactNative.Composition.Theme Theme { get; };
+    Int64 RootTag { get; };
 
 #ifdef USE_WINUI3
     Microsoft.UI.Content.ContentIsland Island { get; };

package/Microsoft.ReactNative/CompositionUIService.idl

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import "ReactInstanceSettings.idl";
+import "ComponentView.idl";
 
 #include "DocString.h"
 
@@ -22,5 +23,8 @@ namespace Microsoft.ReactNative.Composition
       "Gets the Compositor used by this ReactNative instance.")
     static Microsoft.UI.Composition.Compositor GetCompositor(Microsoft.ReactNative.IReactPropertyBag properties);
 
+    DOC_STRING("Gets the ComponentView from a react tag.")
+    static Microsoft.ReactNative.ComponentView ComponentFromReactTag(Microsoft.ReactNative.IReactContext context, Int64 reactTag);
+
   }
 } // namespace Microsoft.ReactNative.Composition

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp

@@ -99,7 +99,8 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps(
   // 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::UserViewProps>(shadowNodeProps);
+  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);

package/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -7,10 +7,12 @@
 
 #include <Fabric/Composition/Theme.h>
 #include <JSValueReader.h>
+#include <react/renderer/components/image/ImageProps.h>
+#include <winrt/Microsoft.ReactNative.h>
+#include <winrt/Windows.Foundation.h>
 
-#if __has_include("Color.g.cpp")
 #include "Color.g.cpp"
-#endif
+#include "ImageSource.g.cpp"
 
 namespace Microsoft::ReactNative {
 
@@ -21,24 +23,24 @@ AbiViewProps::AbiViewProps(
     : facebook::react::ViewProps(context, sourceProps, rawProps) {}
 
 AbiViewProps::~AbiViewProps() {
-  if (m_userProps) {
-    winrt::get_self<winrt::Microsoft::ReactNative::implementation::UserViewProps>(m_userProps)->Disconnect();
+  if (m_innerProps) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ViewProps>(m_innerProps)->Disconnect();
   }
 }
 
 void AbiViewProps::SetUserProps(
-    winrt::Microsoft::ReactNative::IComponentProps componentProps,
-    winrt::Microsoft::ReactNative::ViewProps userProps) noexcept {
-  m_componentProps = componentProps;
+    winrt::Microsoft::ReactNative::IComponentProps userProps,
+    winrt::Microsoft::ReactNative::ViewProps innerProps) noexcept {
   m_userProps = userProps;
+  m_innerProps = innerProps;
 }
 
 winrt::Microsoft::ReactNative::IComponentProps AbiViewProps::UserProps() const noexcept {
-  return m_componentProps;
+  return m_userProps;
 }
 
 winrt::Microsoft::ReactNative::ViewProps AbiViewProps::ViewProps() const noexcept {
-  return m_userProps;
+  return m_innerProps;
 }
 
 } // namespace Microsoft::ReactNative
@@ -124,29 +126,114 @@ winrt::Microsoft::ReactNative::Color Color::White() noexcept {
   return winrt::make<Color>(facebook::react::whiteColor());
 }
 
-UserViewProps::UserViewProps(std::shared_ptr<::Microsoft::ReactNative::AbiViewProps const> viewProps) noexcept
-    : m_viewProps(viewProps.get()) {}
+ImageSource::ImageSource(const facebook::react::ImageSource &imageSource) : m_imageSource(imageSource) {}
+
+ImageSourceType ImageSource::Type() noexcept {
+  static_assert(
+      winrt::Microsoft::ReactNative::ImageSourceType::Invalid ==
+      static_cast<winrt::Microsoft::ReactNative::ImageSourceType>(facebook::react::ImageSource::Type::Invalid));
+  static_assert(
+      winrt::Microsoft::ReactNative::ImageSourceType::Remote ==
+      static_cast<winrt::Microsoft::ReactNative::ImageSourceType>(facebook::react::ImageSource::Type::Remote));
+  static_assert(
+      winrt::Microsoft::ReactNative::ImageSourceType::Local ==
+      static_cast<winrt::Microsoft::ReactNative::ImageSourceType>(facebook::react::ImageSource::Type::Local));
+  return static_cast<winrt::Microsoft::ReactNative::ImageSourceType>(m_imageSource.type);
+}
+
+winrt::hstring ImageSource::Uri() noexcept {
+  return winrt::to_hstring(m_imageSource.uri);
+}
 
-void UserViewProps::Disconnect() noexcept {
+winrt::hstring ImageSource::Bundle() noexcept {
+  return winrt::to_hstring(m_imageSource.bundle);
+}
+
+float ImageSource::Scale() noexcept {
+  return m_imageSource.scale;
+}
+
+winrt::Windows::Foundation::Size ImageSource::Size() noexcept {
+  return {m_imageSource.size.width, m_imageSource.size.height};
+}
+
+winrt::Microsoft::ReactNative::ImageSource ImageSource::ReadValue(
+    const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept {
+  facebook::react::ImageSource imageSource;
+  switch (reader.ValueType()) {
+    case JSValueType::String: {
+      imageSource.type = facebook::react::ImageSource::Type::Remote;
+      imageSource.uri = winrt::to_string(reader.GetString());
+      break;
+    }
+    case JSValueType::Object: {
+      imageSource.type = facebook::react::ImageSource::Type::Remote;
+
+      winrt::hstring propertyName;
+      while (reader.GetNextObjectProperty(/*out*/ propertyName)) {
+        if (propertyName == L"__packager_asset") {
+          imageSource.type = facebook::react::ImageSource::Type::Local;
+        } else if (propertyName == L"width") {
+          imageSource.size.width = static_cast<float>(reader.GetDouble());
+        } else if (propertyName == L"height") {
+          imageSource.size.height = static_cast<float>(reader.GetDouble());
+        } else if (propertyName == L"scale") {
+          imageSource.scale = static_cast<float>(reader.GetDouble());
+        } else if (propertyName == L"uri") {
+          imageSource.uri = winrt::to_string(reader.GetString());
+        } else if (propertyName == L"url") {
+          imageSource.uri = winrt::to_string(reader.GetString());
+        } else if (propertyName == L"bundle") {
+          imageSource.bundle = winrt::to_string(reader.GetString());
+          imageSource.type = facebook::react::ImageSource::Type::Local;
+        }
+      }
+      break;
+    }
+    default: {
+      imageSource.type = facebook::react::ImageSource::Type::Invalid;
+      break;
+    }
+  }
+  return winrt::make<ImageSource>(imageSource);
+}
+
+ViewProps::ViewProps(facebook::react::SharedViewProps props, bool holdRef) noexcept
+    : m_props(holdRef ? props : nullptr), m_viewProps(static_cast<const facebook::react::ViewProps *>(props.get())) {}
+
+void ViewProps::Disconnect() noexcept {
   m_viewProps = nullptr;
 }
 
-float UserViewProps::Opacity() noexcept {
+float ViewProps::Opacity() noexcept {
   return m_viewProps ? m_viewProps->opacity : 1.0f;
 }
 
-winrt::Microsoft::ReactNative::Color UserViewProps::BackgroundColor() noexcept {
+winrt::Microsoft::ReactNative::Color ViewProps::BackgroundColor() noexcept {
   return winrt::make<Color>(m_viewProps ? m_viewProps->backgroundColor : facebook::react::clearColor());
 }
 
-ViewProps::ViewProps(facebook::react::SharedViewProps props) noexcept : m_props(props) {}
+winrt::hstring ViewProps::TestId() noexcept {
+  return m_viewProps ? winrt::to_hstring(m_viewProps->testId) : winrt::hstring{};
+}
 
-float ViewProps::Opacity() noexcept {
-  return m_props->opacity;
+winrt::hstring ViewProps::AccessibilityLabel() noexcept {
+  return m_viewProps ? winrt::to_hstring(m_viewProps->accessibilityLabel) : winrt::hstring{};
 }
 
-winrt::Microsoft::ReactNative::Color ViewProps::BackgroundColor() noexcept {
-  return winrt::make<Color>(m_props->backgroundColor);
+ImageProps::ImageProps(facebook::react::SharedViewProps props) noexcept : Super(props) {}
+
+winrt::Windows::Foundation::Collections::IVectorView<winrt::Microsoft::ReactNative::ImageSource>
+ImageProps::Sources() noexcept {
+  winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::ImageSource> sources{
+      winrt::single_threaded_vector<winrt::Microsoft::ReactNative::ImageSource>()};
+  const auto imageProps = std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+
+  for (const auto &source : imageProps->sources) {
+    sources.Append(winrt::make<ImageSource>(source));
+  }
+
+  return sources.GetView();
 }
 
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/Fabric/AbiViewProps.h

@@ -4,9 +4,12 @@
 #pragma once
 
 #include "Color.g.h"
+#include "ImageProps.g.h"
+#include "ImageSource.g.h"
 #include "ViewProps.g.h"
 
 #include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/imagemanager/primitives.h>
 #include "winrt/Microsoft.ReactNative.Composition.Experimental.h"
 #include "winrt/Microsoft.ReactNative.h"
 
@@ -22,14 +25,14 @@ class AbiViewProps final : public facebook::react::ViewProps {
   ~AbiViewProps();
 
   void SetUserProps(
-      winrt::Microsoft::ReactNative::IComponentProps componentProps,
-      winrt::Microsoft::ReactNative::ViewProps userProps) noexcept;
+      winrt::Microsoft::ReactNative::IComponentProps userProps,
+      winrt::Microsoft::ReactNative::ViewProps innerProps) noexcept;
   winrt::Microsoft::ReactNative::IComponentProps UserProps() const noexcept;
   winrt::Microsoft::ReactNative::ViewProps ViewProps() const noexcept;
 
  private:
-  winrt::Microsoft::ReactNative::IComponentProps m_componentProps{nullptr};
-  winrt::Microsoft::ReactNative::ViewProps m_userProps{nullptr};
+  winrt::Microsoft::ReactNative::IComponentProps m_userProps{nullptr};
+  winrt::Microsoft::ReactNative::ViewProps m_innerProps{nullptr};
 };
 
 } // namespace Microsoft::ReactNative
@@ -60,27 +63,55 @@ struct Color : ColorT<Color, Composition::Experimental::IInternalColor> {
   facebook::react::SharedColor m_color;
 };
 
-struct UserViewProps : ViewPropsT<UserViewProps> {
-  UserViewProps(std::shared_ptr<::Microsoft::ReactNative::AbiViewProps const> viewProps) noexcept;
+struct ImageSource : ImageSourceT<ImageSource> {
+  ImageSource(const facebook::react::ImageSource &imageSource);
 
-  float Opacity() noexcept;
-  winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept;
+  ImageSourceType Type() noexcept;
+  winrt::hstring Uri() noexcept;
+  winrt::hstring Bundle() noexcept;
+  float Scale() noexcept;
+  winrt::Windows::Foundation::Size Size() noexcept;
 
-  void Disconnect() noexcept;
+  static winrt::Microsoft::ReactNative::ImageSource ReadValue(
+      const winrt::Microsoft::ReactNative::IJSValueReader &reader) noexcept;
+
+  static void WriteValue(
+      const winrt::Microsoft::ReactNative::IJSValueWriter &writer,
+      const winrt::Microsoft::ReactNative::ImageSource &value) noexcept;
 
  private:
-  // Use a raw pointer here to avoid a ref cycle with AbiViewProps.  ~AbiViewProps will clear this pointer
-  ::Microsoft::ReactNative::AbiViewProps const *m_viewProps{nullptr};
+  const facebook::react::ImageSource m_imageSource;
 };
 
+/**
+ * When providing a external ViewProps object on a normal ComponentView, ViewProps will hold a reference to the internal
+ * facebook::react::ViewProps object since the ComponentView could release the object at any time. However, when
+ * providing a ViewProps object on a custom ComponentView that has a custom app provided props, the AbiViewProps object
+ * will already be holding a reference to this object, so we only hold onto a weak reference.
+ */
 struct ViewProps : ViewPropsT<ViewProps> {
-  ViewProps(facebook::react::SharedViewProps props) noexcept;
+  ViewProps(facebook::react::SharedViewProps props, bool holdRef = true) noexcept;
+
+  // Notification when the owning AbiViewProps is going away.
+  void Disconnect() noexcept;
 
   float Opacity() noexcept;
   winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept;
+  winrt::hstring TestId() noexcept;
+  winrt::hstring AccessibilityLabel() noexcept;
 
- private:
+ protected:
   facebook::react::SharedViewProps m_props;
+
+  // Use a raw pointer here to avoid a ref cycle with AbiViewProps.  ~AbiViewProps will clear this pointer
+  facebook::react::ViewProps const *m_viewProps{nullptr};
+};
+
+struct ImageProps : ImagePropsT<ImageProps, ViewProps> {
+  using Super = ImagePropsT<ImageProps, ViewProps>;
+  ImageProps(facebook::react::SharedViewProps props) noexcept;
+
+  winrt::Windows::Foundation::Collections::IVectorView<winrt::Microsoft::ReactNative::ImageSource> Sources() noexcept;
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation
@@ -88,5 +119,6 @@ struct ViewProps : ViewPropsT<ViewProps> {
 namespace winrt::Microsoft::ReactNative::factory_implementation {
 
 struct Color : ColorT<Color, implementation::Color> {};
+struct ImageSource : ImageSourceT<ImageSource, implementation::ImageSource> {};
 
 } // namespace winrt::Microsoft::ReactNative::factory_implementation

package/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -143,19 +143,16 @@ ComponentView::rootComponentView() noexcept {
 }
 
 void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &parent) noexcept {
-  if (!parent) {
-    auto root = rootComponentView();
-    winrt::Microsoft::ReactNative::ComponentView view{nullptr};
-    winrt::check_hresult(
-        QueryInterface(winrt::guid_of<winrt::Microsoft::ReactNative::ComponentView>(), winrt::put_abi(view)));
-    if (root && root->GetFocusedComponent() == view) {
-      root->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
-    }
-  }
-
   if (m_parent != parent) {
+    auto oldRootView = rootComponentView();
     m_rootView = nullptr;
+    auto oldParent = m_parent;
     m_parent = parent;
+    if (!parent) {
+      if (oldRootView && oldRootView->GetFocusedComponent() == *this) {
+        oldRootView->TrySetFocusedComponent(oldParent);
+      }
+    }
     if (parent) {
       theme(winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(parent)->theme());
     }
@@ -220,9 +217,83 @@ facebook::react::Point ComponentView::getClientOffset() const noexcept {
   return {};
 }
 
-void ComponentView::onFocusLost() noexcept {}
+void ComponentView::onLostFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_lostFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onLostFocus(args);
+  }
+}
+
+void ComponentView::onGotFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_gotFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onGotFocus(args);
+  }
+}
+
+void ComponentView::onLosingFocus(const winrt::Microsoft::ReactNative::LosingFocusEventArgs &args) noexcept {
+  m_losingFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onLosingFocus(args);
+  }
+}
+
+void ComponentView::onGettingFocus(const winrt::Microsoft::ReactNative::GettingFocusEventArgs &args) noexcept {
+  m_gettingFocusEvent(*this, args);
+  if (m_parent) {
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->onGettingFocus(args);
+  }
+}
 
-void ComponentView::onFocusGained() noexcept {}
+winrt::event_token ComponentView::LosingFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs> const
+        &handler) noexcept {
+  return m_losingFocusEvent.add(handler);
+}
+
+void ComponentView::LosingFocus(winrt::event_token const &token) noexcept {
+  m_losingFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::GettingFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs> const
+        &handler) noexcept {
+  return m_gettingFocusEvent.add(handler);
+}
+
+void ComponentView::GettingFocus(winrt::event_token const &token) noexcept {
+  m_gettingFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::LostFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+        &handler) noexcept {
+  return m_lostFocusEvent.add(handler);
+}
+
+void ComponentView::LostFocus(winrt::event_token const &token) noexcept {
+  m_lostFocusEvent.remove(token);
+}
+
+winrt::event_token ComponentView::GotFocus(
+    winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+        &handler) noexcept {
+  return m_gotFocusEvent.add(handler);
+}
+
+void ComponentView::GotFocus(winrt::event_token const &token) noexcept {
+  m_gotFocusEvent.remove(token);
+}
+
+bool ComponentView::TryFocus() noexcept {
+  if (auto root = rootComponentView()) {
+    return root->TrySetFocusedComponent(*get_strong());
+  }
+
+  return false;
+}
 
 void ComponentView::OnPointerEntered(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {}

package/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -87,8 +87,29 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   virtual RECT getClientRect() const noexcept;
   // The offset from this elements parent to its children (accounts for things like scroll position)
   virtual facebook::react::Point getClientOffset() const noexcept;
-  virtual void onFocusLost() noexcept;
-  virtual void onFocusGained() noexcept;
+  virtual void onLosingFocus(const winrt::Microsoft::ReactNative::LosingFocusEventArgs &args) noexcept;
+  virtual void onGettingFocus(const winrt::Microsoft::ReactNative::GettingFocusEventArgs &args) noexcept;
+  virtual void onLostFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
+  virtual void onGotFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept;
+
+  winrt::event_token LosingFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs> const
+          &handler) noexcept;
+  void LosingFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token GettingFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs> const
+          &handler) noexcept;
+  void GettingFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token LostFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+          &handler) noexcept;
+  void LostFocus(winrt::event_token const &token) noexcept;
+  winrt::event_token GotFocus(
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> const
+          &handler) noexcept;
+  void GotFocus(winrt::event_token const &token) noexcept;
+
+  bool TryFocus() noexcept;
 
   virtual bool focusable() const noexcept;
   virtual facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept;
@@ -158,6 +179,16 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   winrt::Microsoft::ReactNative::ComponentView m_parent{nullptr};
   winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::ComponentView> m_children{
       winrt::single_threaded_vector<winrt::Microsoft::ReactNative::ComponentView>()};
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::LosingFocusEventArgs>>
+      m_losingFocusEvent;
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::GettingFocusEventArgs>>
+      m_gettingFocusEvent;
+  winrt::event<
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs>>
+      m_lostFocusEvent;
+  winrt::event<
+      winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs>>
+      m_gotFocusEvent;
 };
 
 // Run fn on all nodes of the component view tree starting from this one until fn returns true