react-native-windows 0.74.20 → 0.74.22

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

@@ -102,6 +102,7 @@ void CompositionHwndHost::UpdateSize() noexcept {
       // Do not relayout when minimized
       if (!IsIconic(m_hwnd)) {
         winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+        constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
         constraints.MinimumSize = constraints.MaximumSize = size;
         m_compRootView.Arrange(constraints, {0, 0});
       }

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

@@ -23,6 +23,7 @@
 #include "CompositionHelpers.h"
 #include "RootComponentView.h"
 #include "Theme.h"
+#include "TooltipService.h"
 #include "UiaHelpers.h"
 #include "d2d1helper.h"
 
@@ -31,52 +32,25 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-CreateCompositionComponentViewArgs::CreateCompositionComponentViewArgs(
-    const winrt::Microsoft::ReactNative::IReactContext &reactContext,
-    facebook::react::Tag tag,
-    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compositionContext)
-    : base_type(reactContext, tag), m_compositionContext(compositionContext){};
-
-winrt::Microsoft::UI::Composition::Compositor CreateCompositionComponentViewArgs::Compositor() const noexcept {
-  return winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(ReactContext().Properties());
-}
-
-winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext
-CreateCompositionComponentViewArgs::CompositionContext() const noexcept {
-  return m_compositionContext;
-}
-
-ComponentViewFeatures CreateCompositionComponentViewArgs::Features() const noexcept {
-  return m_features;
-}
-
-void CreateCompositionComponentViewArgs::Features(ComponentViewFeatures value) noexcept {
-  m_features = value;
-}
-
-ComponentView::ComponentView(const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
-    : ComponentView(
-          winrt::get_self<
-              winrt::Microsoft::ReactNative::Composition::implementation::CreateCompositionComponentViewArgs>(args)
-              ->CompositionContext(),
-          args.Tag(),
-          args.ReactContext(),
-          args.Features(),
-          true) {}
-
 ComponentView::ComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-    ComponentViewFeatures flags,
-    bool customControl)
-    : base_type(tag, reactContext, customControl), m_compContext(compContext), m_flags(flags) {
+    ComponentViewFeatures flags)
+    : base_type(tag, reactContext), 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.CreateFocusVisual();
   m_outerVisual.InsertAt(m_focusVisual.InnerVisual(), 0);
 }
 
+ComponentView::~ComponentView() {
+  if (m_tooltipTracked) {
+    TooltipService::GetCurrent(m_reactContext.Properties())->StopTracking(*this);
+    m_tooltipTracked = false;
+  }
+}
+
 facebook::react::Tag ComponentView::Tag() const noexcept {
   return m_tag;
 }
@@ -105,14 +79,18 @@ void ComponentView::onThemeChanged() noexcept {
 
   base_type::onThemeChanged();
 
-  if (m_customComponent) {
-    // Review is it expected that I need this cast to call overridden methods?
-    winrt::Microsoft::ReactNative::Composition::ComponentView outer(*this);
-    outer.OnThemeChanged();
+  if (m_themeChangedEvent) {
+    m_themeChangedEvent(*this, *this);
   }
 }
 
-void ComponentView::OnThemeChanged() noexcept {}
+winrt::event_token ComponentView::ThemeChanged(
+    winrt::Windows::Foundation::EventHandler<winrt::IInspectable> const &handler) noexcept {
+  return m_themeChangedEvent.add(handler);
+}
+void ComponentView::ThemeChanged(winrt::event_token const &token) noexcept {
+  m_themeChangedEvent.remove(token);
+}
 
 void ComponentView::Theme(const winrt::Microsoft::ReactNative::Composition::Theme &value) noexcept {
   theme(winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(value));
@@ -160,6 +138,16 @@ void ComponentView::updateProps(
     updateShadowProps(oldViewProps, newViewProps);
   }
 
+  if (oldViewProps.tooltip != newViewProps.tooltip) {
+    if (!m_tooltipTracked && newViewProps.tooltip) {
+      TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);
+      m_tooltipTracked = true;
+    } else if (m_tooltipTracked && !newViewProps.tooltip) {
+      TooltipService::GetCurrent(m_reactContext.Properties())->StopTracking(*this);
+      m_tooltipTracked = false;
+    }
+  }
+
   base_type::updateProps(props, oldProps);
 }
 
@@ -170,10 +158,8 @@ void ComponentView::updateLayoutMetrics(
     updateBorderLayoutMetrics(layoutMetrics, *viewProps());
   }
 
-  m_layoutMetrics = layoutMetrics;
-  UpdateCenterPropertySet();
-
   base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+  UpdateCenterPropertySet();
 }
 
 const facebook::react::LayoutMetrics &ComponentView::layoutMetrics() const noexcept {
@@ -277,24 +263,29 @@ void ComponentView::StartBringIntoView(
 
 void ComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
   m_eventEmitter = std::static_pointer_cast<facebook::react::ViewEventEmitter const>(eventEmitter);
+  base_type::updateEventEmitter(eventEmitter);
 }
 
-void ComponentView::HandleCommand(
-    winrt::hstring commandName,
-    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept {
+  base_type::HandleCommand(args);
+  if (args.Handled())
+    return;
+
+  auto commandName = args.CommandName();
   if (commandName == L"focus") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(*get_strong());
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
     }
     return;
   }
   if (commandName == L"blur") {
     if (auto root = rootComponentView()) {
-      root->TrySetFocusedComponent(nullptr); // Todo store this component as previously focused element
+      root->TrySetFocusedComponent(
+          nullptr, winrt::Microsoft::ReactNative::FocusNavigationDirection::None); // Todo store this component as
+                                                                                   // previously focused element
     }
     return;
   }
-  assert(false); // Unhandled command
 }
 
 bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
@@ -1318,11 +1309,32 @@ void ComponentView::updateAccessibilityProps(
       !(oldViewProps.accessibilityState && oldViewProps.accessibilityState->disabled),
       !(newViewProps.accessibilityState && newViewProps.accessibilityState->disabled));
 
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      m_uiaProvider,
+      UIA_IsEnabledPropertyId,
+      !(oldViewProps.accessibilityState && oldViewProps.accessibilityState->busy),
+      !(newViewProps.accessibilityState && newViewProps.accessibilityState->busy));
+
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
       m_uiaProvider, UIA_ControlTypePropertyId, oldViewProps.accessibilityRole, newViewProps.accessibilityRole);
 
   winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
       m_uiaProvider, UIA_HelpTextPropertyId, oldViewProps.accessibilityHint, newViewProps.accessibilityHint);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      m_uiaProvider,
+      UIA_PositionInSetPropertyId,
+      oldViewProps.accessibilityPosInSet,
+      newViewProps.accessibilityPosInSet);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      m_uiaProvider, UIA_SizeOfSetPropertyId, oldViewProps.accessibilitySetSize, newViewProps.accessibilitySetSize);
+
+  winrt::Microsoft::ReactNative::implementation::UpdateUiaProperty(
+      m_uiaProvider,
+      UIA_LiveSettingPropertyId,
+      oldViewProps.accessibilityLiveRegion,
+      newViewProps.accessibilityLiveRegion);
 }
 
 std::optional<std::string> ComponentView::getAcccessiblityValue() noexcept {
@@ -1337,6 +1349,14 @@ bool ComponentView::getAcccessiblityIsReadOnly() noexcept {
   return true;
 }
 
+ToggleState ComponentView::getToggleState() noexcept {
+  return ToggleState::ToggleState_Off;
+}
+
+void ComponentView::Toggle() noexcept {
+  // no-op
+}
+
 void ComponentView::updateBorderLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
@@ -1483,18 +1503,6 @@ std::string ComponentView::DefaultHelpText() const noexcept {
   return "";
 }
 
-ViewComponentView::ViewComponentView(
-    const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
-    : ViewComponentView(
-          ViewComponentView::defaultProps(),
-          winrt::get_self<
-              winrt::Microsoft::ReactNative::Composition::implementation::CreateCompositionComponentViewArgs>(args)
-              ->CompositionContext(),
-          args.Tag(),
-          args.ReactContext(),
-          args.Features(),
-          true) {}
-
 facebook::react::SharedViewProps ViewComponentView::defaultProps() noexcept {
   static auto const defaultViewProps = std::make_shared<facebook::react::ViewProps const>();
   return defaultViewProps;
@@ -1505,33 +1513,42 @@ ViewComponentView::ViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-    ComponentViewFeatures flags,
-    bool customComponent)
-    : base_type(compContext, tag, reactContext, flags, customComponent),
+    ComponentViewFeatures flags)
+    : base_type(compContext, tag, reactContext, flags),
       m_props(defaultProps ? defaultProps : ViewComponentView::defaultProps()) {}
 
 winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ViewComponentView::createVisual() noexcept {
   return m_compContext.CreateSpriteVisual();
 }
 
-winrt::Microsoft::UI::Composition::Visual ViewComponentView::CreateVisual() noexcept {
-  return winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
-      createVisual());
+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;
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate
+ViewComponentView::CreateInternalVisualHandler() const noexcept {
+  return m_createInternalVisualHandler;
 }
 
 void ViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
-    if (m_customComponent) {
-      // Review is it expected that I need this cast to call overridden methods?
-      winrt::Microsoft::ReactNative::Composition::ViewComponentView outer(*this);
-      winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateVisual internalCreateVisual{nullptr};
-      if (outer.try_as(internalCreateVisual)) {
-        m_visual = internalCreateVisual.CreateInternalVisual();
-      } else {
-        m_visual =
-            winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
-                outer.CreateVisual());
-      }
+    if (m_createInternalVisualHandler) {
+      m_visual = m_createInternalVisualHandler(*this);
+    } else if (m_createVisualHandler) {
+      m_visual =
+          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::CreateVisual(
+              m_createVisualHandler(*this));
     } else {
       m_visual = createVisual();
     }
@@ -1544,7 +1561,7 @@ winrt::Microsoft::ReactNative::ComponentView ViewComponentView::Create(
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<ViewComponentView>(
-      ViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default, false);
+      ViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default);
 }
 
 void ViewComponentView::MountChildComponentView(
@@ -1555,10 +1572,20 @@ void ViewComponentView::MountChildComponentView(
   indexOffsetForBorder(index);
   ensureVisual();
 
-  // TODO if we get mixed children of composition and non-composition ComponentViews the indexes will get mixed up
-  // We could offset the index based on non-composition children in m_children
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
-    Visual().InsertAt(compositionChild->OuterVisual(), index);
+    auto visualIndex = index;
+    // Most of the time child index will align with visual index.
+    // But if we have non-visual children, we need to account for that.
+    if (m_hasNonVisualChildren) {
+      for (uint32_t i = 0; i <= index; i++) {
+        if (!m_children.GetAt(i).try_as<ComponentView>()) {
+          visualIndex--;
+        }
+      }
+    }
+    Visual().InsertAt(compositionChild->OuterVisual(), visualIndex);
+  } else {
+    m_hasNonVisualChildren = true;
   }
 }
 
@@ -1597,7 +1624,6 @@ void ViewComponentView::updateProps(
 
 const winrt::Microsoft::ReactNative::IComponentProps ViewComponentView::userProps(
     facebook::react::Props::Shared const &props) noexcept {
-  assert(m_customComponent);
   const auto &abiViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(props);
   return abiViewProps.UserProps();
 }
@@ -1663,22 +1689,21 @@ std::string CodeFromVirtualKey(
 }
 
 void ViewComponentView::OnKeyDown(
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  auto eventCode = CodeFromVirtualKey(source, args.Key());
+  auto eventCode = CodeFromVirtualKey(args.KeyboardSource(), args.Key());
   bool fShift =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Shift) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fAlt =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Menu) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fCtrl =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Control) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fMeta =
-      ((source.GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) &
+      ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) ||
-      ((source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) &
+      ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down);
 
   if (args.OriginalSource() == Tag() && !args.Handled()) {
@@ -1691,7 +1716,7 @@ void ViewComponentView::OnKeyDown(
     event.key = ::Microsoft::ReactNative::FromVirtualKey(
         args.Key(),
         event.shiftKey,
-        !!((source.GetKeyState(winrt::Windows::System::VirtualKey::CapitalLock) &
+        !!((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::CapitalLock) &
             winrt::Microsoft::UI::Input::VirtualKeyStates::Locked) ==
            winrt::Microsoft::UI::Input::VirtualKeyStates::Locked));
     event.code = eventCode;
@@ -1707,26 +1732,25 @@ void ViewComponentView::OnKeyDown(
     }
   }
 
-  base_type::OnKeyDown(source, args);
+  base_type::OnKeyDown(args);
 }
 
 void ViewComponentView::OnKeyUp(
-    const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  auto eventCode = CodeFromVirtualKey(source, args.Key());
+  auto eventCode = CodeFromVirtualKey(args.KeyboardSource(), args.Key());
   bool fShift =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Shift) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Shift) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fAlt =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Menu) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Menu) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fCtrl =
-      (source.GetKeyState(winrt::Windows::System::VirtualKey::Control) &
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
   bool fMeta =
-      ((source.GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) &
+      ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::LeftWindows) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) ||
-      ((source.GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) &
+      ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::RightWindows) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down);
 
   if (args.OriginalSource() == Tag()) {
@@ -1739,7 +1763,7 @@ void ViewComponentView::OnKeyUp(
     event.key = ::Microsoft::ReactNative::FromVirtualKey(
         args.Key(),
         event.shiftKey,
-        !!((source.GetKeyState(winrt::Windows::System::VirtualKey::CapitalLock) &
+        !!((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::CapitalLock) &
             winrt::Microsoft::UI::Input::VirtualKeyStates::Down) ==
            winrt::Microsoft::UI::Input::VirtualKeyStates::Down));
     event.code = eventCode;
@@ -1755,7 +1779,7 @@ void ViewComponentView::OnKeyUp(
     }
   }
 
-  base_type::OnKeyUp(source, args);
+  base_type::OnKeyUp(args);
 }
 
 void ViewComponentView::updateLayoutMetrics(
@@ -1767,10 +1791,9 @@ void ViewComponentView::updateLayoutMetrics(
   }
   ensureVisual();
   base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-}
-
-void ViewComponentView::UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept {
-  Visual().Size({metrics.Frame.Width * metrics.PointScaleFactor, metrics.Frame.Height * metrics.PointScaleFactor});
+  Visual().Size(
+      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
 }
 
 void ViewComponentView::prepareForRecycle() noexcept {}

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

@@ -11,7 +11,6 @@
 #include "CompositionHelpers.h"
 
 #include "Composition.ComponentView.g.h"
-#include "Composition.CreateCompositionComponentViewArgs.g.h"
 #include "Composition.ViewComponentView.g.h"
 
 namespace Microsoft::ReactNative {
@@ -20,39 +19,18 @@ struct CompContext;
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct CreateCompositionComponentViewArgs
-    : public CreateCompositionComponentViewArgsT<
-          CreateCompositionComponentViewArgs,
-          winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs,
-          winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateComponentViewArgs> {
-  CreateCompositionComponentViewArgs(
-      const winrt::Microsoft::ReactNative::IReactContext &reactContext,
-      facebook::react::Tag tag,
-      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compositionContext);
-
-  winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
-
-  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
-
-  ComponentViewFeatures Features() const noexcept;
-  void Features(ComponentViewFeatures value) noexcept;
-
- private:
-  ComponentViewFeatures m_features{ComponentViewFeatures::Default};
-  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compositionContext;
-};
-
-struct ComponentView
-    : public ComponentViewT<ComponentView, winrt::Microsoft::ReactNative::implementation::ComponentView> {
+struct ComponentView : public ComponentViewT<
+                           ComponentView,
+                           winrt::Microsoft::ReactNative::implementation::ComponentView,
+                           winrt::Microsoft::ReactNative::Composition::Experimental::IInternalComponentView> {
   static constexpr size_t SpecialBorderLayerCount = 8;
 
-  ComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
   ComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-      ComponentViewFeatures flags,
-      bool customControl);
+      ComponentViewFeatures flags);
+  virtual ~ComponentView();
 
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept {
     return nullptr;
@@ -61,8 +39,7 @@ struct ComponentView
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
-  void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
-      override;
+  void HandleCommand(const winrt::Microsoft::ReactNative::HandleCommandArgs &args) noexcept override;
   facebook::react::Props::Shared props() noexcept override;
   virtual const facebook::react::SharedViewProps &viewProps() const noexcept {
     static facebook::react::SharedViewProps emptyProps;
@@ -118,6 +95,8 @@ struct ComponentView
   std::optional<std::string> getAcccessiblityValue() noexcept override;
   void setAcccessiblityValue(std::string &&value) noexcept override;
   bool getAcccessiblityIsReadOnly() noexcept override;
+  ToggleState getToggleState() noexcept override;
+  void Toggle() noexcept override;
   virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept;
 
   const facebook::react::LayoutMetrics &layoutMetrics() const noexcept;
@@ -129,9 +108,10 @@ struct ComponentView
   winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
 
-  // Publicaly overridable APIs
   void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
-  virtual void OnThemeChanged() noexcept;
+  winrt::event_token ThemeChanged(
+      winrt::Windows::Foundation::EventHandler<winrt::IInspectable> const &handler) noexcept;
+  void ThemeChanged(winrt::event_token const &token) noexcept;
 
  protected:
   bool anyHitTestHelper(
@@ -143,7 +123,6 @@ struct ComponentView
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   comp::CompositionPropertySet m_centerPropSet{nullptr};
   facebook::react::SharedViewEventEmitter m_eventEmitter;
-  facebook::react::LayoutMetrics m_layoutMetrics;
   bool m_needsBorderUpdate{false};
   bool m_hasTransformMatrixFacade{false};
   bool m_enableFocusVisual{false};
@@ -173,14 +152,18 @@ struct ComponentView
       const facebook::react::ViewProps &viewProps) noexcept;
 
   bool m_FinalizeTransform{false};
+  bool m_tooltipTracked{false};
   ComponentViewFeatures m_flags;
   void showFocusVisual(bool show) noexcept;
   winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr};
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::IInspectable>> m_themeChangedEvent;
 };
 
-struct ViewComponentView : public ViewComponentViewT<ViewComponentView, ComponentView> {
-  ViewComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
+struct ViewComponentView : public ViewComponentViewT<
+                               ViewComponentView,
+                               ComponentView,
+                               winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateVisual> {
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
@@ -200,12 +183,8 @@ struct ViewComponentView : public ViewComponentViewT<ViewComponentView, Componen
   void prepareForRecycle() noexcept override;
   bool TryFocus() noexcept;
   bool focusable() const noexcept override;
-  void OnKeyDown(
-      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
-      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
-  void OnKeyUp(
-      const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
-      const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
+  void OnKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
+  void OnKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
   std::string DefaultControlType() const noexcept override;
 
   const facebook::react::SharedViewProps &viewProps() const noexcept override;
@@ -227,29 +206,27 @@ struct ViewComponentView : public ViewComponentViewT<ViewComponentView, Componen
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
-      ComponentViewFeatures flags,
-      bool customComponent);
+      ComponentViewFeatures flags);
 
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept;
 
-  // Publicly overridable APIs
-  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual() noexcept;
-  virtual void UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept;
+  void CreateVisualHandler(const winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate &handler);
+  winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate CreateVisualHandler() const noexcept;
+  void CreateInternalVisualHandler(
+      const winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate &handler);
+  winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate CreateInternalVisualHandler()
+      const noexcept;
 
  protected:
   virtual winrt::Microsoft::ReactNative::ViewProps ViewPropsInner() noexcept;
 
  private:
+  bool m_hasNonVisualChildren{false};
   facebook::react::SharedViewProps m_props;
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::CreateVisualDelegate m_createVisualHandler{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate m_createInternalVisualHandler{
+      nullptr};
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation
-
-namespace winrt::Microsoft::ReactNative::Composition::factory_implementation {
-
-struct ComponentView : ComponentViewT<ComponentView, implementation::ComponentView> {};
-
-struct ViewComponentView : ViewComponentViewT<ViewComponentView, implementation::ViewComponentView> {};
-
-} // namespace winrt::Microsoft::ReactNative::Composition::factory_implementation