react-native-windows 0.75.1 → 0.75.2

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

@@ -31,46 +31,12 @@
 
 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();
@@ -105,14 +71,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));
@@ -170,10 +140,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,6 +245,7 @@ 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(
@@ -294,7 +263,8 @@ void ComponentView::HandleCommand(
     }
     return;
   }
-  assert(false); // Unhandled command
+
+  base_type::HandleCommand(commandName, args);
 }
 
 bool ComponentView::CapturePointer(const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer) noexcept {
@@ -1323,6 +1293,21 @@ void ComponentView::updateAccessibilityProps(
 
   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 +1322,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 +1476,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 +1486,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 +1534,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 +1545,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 +1597,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 +1662,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 +1689,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 +1705,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 +1736,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 +1752,7 @@ void ViewComponentView::OnKeyUp(
     }
   }
 
-  base_type::OnKeyUp(source, args);
+  base_type::OnKeyUp(args);
 }
 
 void ViewComponentView::updateLayoutMetrics(
@@ -1767,10 +1764,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,17 @@ 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 winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept {
     return nullptr;
@@ -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};
@@ -177,10 +156,13 @@ struct ComponentView
   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 +182,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 +205,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

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

@@ -0,0 +1,133 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ContentIslandComponentView.h"
+
+#include <Fabric/FabricUIManagerModule.h>
+#include <IReactContext.h>
+#include <UI.Xaml.Controls.h>
+#include <Utils/ValueUtils.h>
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Windows.UI.Composition.h>
+#include "CompositionContextHelper.h"
+#include "RootComponentView.h"
+
+#include "Composition.ContentIslandComponentView.g.cpp"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+ContentIslandComponentView::ContentIslandComponentView(
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : base_type(ViewComponentView::defaultProps(), compContext, tag, reactContext, ComponentViewFeatures::Default) {
+  m_mountedToken = Mounted([](const winrt::IInspectable &, const winrt::Microsoft::ReactNative::ComponentView &view) {
+    view.as<ContentIslandComponentView>()->OnMounted();
+  });
+  m_unmountedToken =
+      Unmounted([](const winrt::IInspectable &, const winrt::Microsoft::ReactNative::ComponentView &view) {
+        view.as<ContentIslandComponentView>()->OnUnmounted();
+      });
+}
+
+void ContentIslandComponentView::OnMounted() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  m_childContentLink = winrt::Microsoft::UI::Content::ChildContentLink::Create(
+      rootComponentView()->parentContentIsland(),
+      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
+          .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
+  m_childContentLink.ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+  if (m_islandToConnect) {
+    m_childContentLink.Connect(m_islandToConnect);
+    m_islandToConnect = nullptr;
+  }
+
+  ParentLayoutChanged();
+  auto view = Parent();
+  while (view) {
+    m_layoutMetricChangedRevokers.push_back(view.LayoutMetricsChanged(
+        winrt::auto_revoke,
+        [wkThis = get_weak()](
+            const winrt::IInspectable &sender, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs &args) {
+          if (auto strongThis = wkThis.get()) {
+            strongThis->ParentLayoutChanged();
+          }
+        }));
+    view = view.Parent();
+  }
+#endif
+}
+
+void ContentIslandComponentView::OnUnmounted() noexcept {
+  m_layoutMetricChangedRevokers.clear();
+}
+
+void ContentIslandComponentView::ParentLayoutChanged() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_layoutChangePosted)
+    return;
+
+  m_layoutChangePosted = true;
+  ReactContext().UIDispatcher().Post([wkThis = get_weak()]() {
+    if (auto strongThis = wkThis.get()) {
+      auto clientRect = strongThis->getClientRect();
+
+      strongThis->m_childContentLink.OffsetOverride(
+          {static_cast<float>(clientRect.left), static_cast<float>(clientRect.top)});
+      strongThis->m_layoutChangePosted = false;
+    }
+  });
+#endif
+}
+
+ContentIslandComponentView::~ContentIslandComponentView() noexcept {
+  if (m_islandToConnect) {
+    m_islandToConnect.Close();
+  }
+}
+
+void ContentIslandComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+  base_type::MountChildComponentView(childComponentView, index);
+}
+
+void ContentIslandComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+  base_type::UnmountChildComponentView(childComponentView, index);
+}
+
+void ContentIslandComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childContentLink) {
+    m_childContentLink.ActualSize({layoutMetrics.frame.size.width, layoutMetrics.frame.size.height});
+    ParentLayoutChanged();
+  }
+#endif
+  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+}
+
+void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::ContentIsland &contentIsland) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_childContentLink) {
+    m_islandToConnect = nullptr;
+    m_childContentLink.Connect(contentIsland);
+  } else {
+    m_islandToConnect = contentIsland;
+  }
+#endif
+}
+
+void ContentIslandComponentView::prepareForRecycle() noexcept {
+  Super::prepareForRecycle();
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation