Allow portals to have independent layout constraints and scale factor (#14315)

* Allow portals to have independent layout constraints and scale factor

* format

* change files

* fix

Author: acoates-ms

change/@react-native-windows-codegen-e7b6a9a3-a6de-499d-95bb-1510e5009dd2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix UpdateState on generated base class",
+  "packageName": "@react-native-windows/codegen",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-56595f43-5a8f-443b-9594-7de92ea7e45c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow portals to have independent layout constraints and scale factor",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts

@@ -200,7 +200,7 @@ void Register::_COMPONENT_NAME_::NativeComponent(
           builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
                                      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
             auto userData = view.UserData().as<TUserData>();
-            userData->member(view, newState);
+            userData->UpdateState(view, newState);
           });
         }
 

packages/@react-native-windows/tester/src/js/examples/Modal/ModalPresentation.windows.js

@@ -348,7 +348,7 @@ const styles = StyleSheet.create({
     marginTop: 6,
   },
   modalContainer: {
-    flex: 1,
+    //flex: 1, // [Windows] - This will cause the modal to stretch to be as tall as the availiable space given to it.
     justifyContent: 'center',
     padding: 20,
   },

packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h

@@ -170,7 +170,7 @@ void RegisterCalendarViewNativeComponent(
           builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
                                      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
             auto userData = view.UserData().as<TUserData>();
-            userData->member(view, newState);
+            userData->UpdateState(view, newState);
           });
         }
 

packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/DrawingIsland.g.h

@@ -150,7 +150,7 @@ void RegisterDrawingIslandNativeComponent(
           builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
                                      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
             auto userData = view.UserData().as<TUserData>();
-            userData->member(view, newState);
+            userData->UpdateState(view, newState);
           });
         }
 

packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/MovingLight.g.h

@@ -203,7 +203,7 @@ void RegisterMovingLightNativeComponent(
           builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
                                      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
             auto userData = view.UserData().as<TUserData>();
-            userData->member(view, newState);
+            userData->UpdateState(view, newState);
           });
         }
 

vnext/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

vnext/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