[0.81] Do not create m_childrenContainer when using a custom visual to mount children into (#15884)

* Do not create m_childrenContainer when using a custom visual to mount children into (#15877)

* Do not create m_childrenContainer when using a custom visual to mount children into

* Change files

* fix

* fix change file

Author: acoates-ms

change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Do not create m_childrenContainer when using a custom visual to mount children into",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -226,6 +226,11 @@ winrt::hstring ViewProps::AccessibilityLabel() noexcept {
   return m_viewProps ? winrt::to_hstring(m_viewProps->accessibilityLabel) : winrt::hstring{};
 }
 
+winrt::Microsoft::ReactNative::Overflow ViewProps::Overflow() noexcept {
+  return m_viewProps ? static_cast<winrt::Microsoft::ReactNative::Overflow>(m_viewProps->yogaStyle.overflow())
+                     : winrt::Microsoft::ReactNative::Overflow::Visible;
+}
+
 ImageProps::ImageProps(facebook::react::SharedViewProps props) noexcept : Super(props) {}
 
 winrt::Windows::Foundation::Collections::IVectorView<winrt::Microsoft::ReactNative::ImageSource>

vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h

@@ -101,6 +101,7 @@ struct ViewProps : ViewPropsT<ViewProps> {
   winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept;
   winrt::hstring TestId() noexcept;
   winrt::hstring AccessibilityLabel() noexcept;
+  winrt::Microsoft::ReactNative::Overflow Overflow() noexcept;
 
  protected:
   facebook::react::SharedViewProps m_props;

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

@@ -1350,6 +1350,10 @@ void ViewComponentView::updateLayoutMetrics(
 void ViewComponentView::updateChildrenClippingPath(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
+  // Views with a custom visual to mount children into should to do their own handling of children clipping path
+  if (m_builder && m_builder->VisualToMountChildrenIntoHandler())
+    return;
+
   const float scale = layoutMetrics.pointScaleFactor;
   const float viewWidth = layoutMetrics.frame.size.width * scale;
   const float viewHeight = layoutMetrics.frame.size.height * scale;

vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl

@@ -72,6 +72,8 @@ namespace Microsoft.ReactNative.Composition
     void SetCreateVisualHandler(CreateVisualDelegate impl);
     void SetViewFeatures(ComponentViewFeatures viewFeatures);
     void SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl);
+
+    DOC_STRING("Provides a customized ContainerVisual that this components children will be mounted into.  When overriding this, a clip is no longer automatically applied for overflow:\"hidden\"")
     void SetVisualToMountChildrenIntoHandler(VisualToMountChildrenIntoDelegate impl);
   };
 

vnext/Microsoft.ReactNative/ViewProps.idl

@@ -32,6 +32,14 @@ namespace Microsoft.ReactNative {
     static void WriteValue(IJSValueWriter writer, Color color);
   };
 
+  [experimental]
+  enum Overflow
+  {
+    Visible,
+    Hidden,
+    Scroll,
+  };
+
   [webhosthidden]
   [experimental]
   DOC_STRING("Interface to implement custom view component properties.")
@@ -53,6 +61,7 @@ namespace Microsoft.ReactNative {
     Color BackgroundColor { get; };
     String TestId { get; };
     String AccessibilityLabel { get; };
+    Overflow Overflow { get; };
 
     // TODO add accessors to all the properties on ViewProps
   };