[0.78] Backport fixes for Modal

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-7dda9927-204c-4610-a14f-f5aa37558a62.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Allow portals to have independent layout constraints and scale factor (#14315)",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "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/overrides.json

@@ -41,6 +41,12 @@
       "baseHash": "e840e1c091d2644d0a682b8baffad3b3dda2b207",
       "issue": 12869
     },
+    {
+      "type": "patch",
+      "file": "src/js/examples/Modal/ModalOnShow.windows.js",
+      "baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
+      "baseHash": "911507abcf9172b5fdd1bb68faaf02562df704d4"
+    },
     {
       "type": "patch",
       "file": "src/js/examples/Modal/ModalPresentation.windows.js",

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

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import RNTesterText from '../../components/RNTesterText';
+import * as React from 'react';
+import {useState} from 'react';
+import {Modal, Pressable, StyleSheet, Text, View} from 'react-native';
+
+function ModalOnShowOnDismiss(): React.Node {
+  const [modalShowComponent, setModalShowComponent] = useState(true);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [onShowCount, setOnShowCount] = useState(0);
+  const [onDismissCount, setOnDismissCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      {modalShowComponent && (
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onShow={() => {
+            setOnShowCount(showCount => showCount + 1);
+          }}
+          onDismiss={() => {
+            setOnDismissCount(dismissCount => dismissCount + 1);
+          }}
+          onRequestClose={() => {
+            setModalVisible(false);
+          }}>
+          <View style={[styles.centeredView, styles.modalBackdrop]}>
+            <View style={styles.modalView}>
+              <Text testID="modal-on-show-count">
+                onShow is called {onShowCount} times
+              </Text>
+              <Text testID="modal-on-dismiss-count">
+                onDismiss is called {onDismissCount} times
+              </Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(false)}>
+                <Text testID="dismiss-modal" style={styles.textStyle}>
+                  Hide modal by setting visible to false
+                </Text>
+              </Pressable>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalShowComponent(false)}>
+                <Text
+                  testID="dismiss-modal-by-removing-component"
+                  style={styles.textStyle}>
+                  Hide modal by removing component
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal>
+      )}
+      <RNTesterText testID="on-show-count">
+        onShow is called {onShowCount} times
+      </RNTesterText>
+      <RNTesterText testID="on-dismiss-count">
+        onDismiss is called {onDismissCount} times
+      </RNTesterText>
+      <Pressable
+        style={[styles.button, styles.buttonOpen]}
+        onPress={() => {
+          setModalShowComponent(true);
+          setModalVisible(true);
+        }}>
+        <Text testID="open-modal" style={styles.textStyle}>
+          Show Modal
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingVertical: 30,
+  },
+  centeredView: {
+    // flex: 1, // [Windows] - This will cause the modal to stretch to be as tall as the availiable space given to it.
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalBackdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalView: {
+    margin: 20,
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    marginVertical: 20,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});
+
+export default ({
+  title: "Modal's onShow/onDismiss",
+  name: 'onShow',
+  description:
+    'onShow and onDismiss (iOS only) callbacks are called when a modal is shown/dismissed',
+  render: (): React.Node => <ModalOnShowOnDismiss />,
+}: RNTesterModuleExample);

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