[0.77] 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-585ee87a-351c-4ad1-9ea5-941d070d221c.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/src/js/examples/Modal/ModalOnShow.windows.js

@@ -12,13 +12,14 @@ 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] = React.useState(true);
-  const [modalVisible, setModalVisible] = React.useState(false);
-  const [onShowCount, setOnShowCount] = React.useState(0);
-  const [onDismissCount, setOnDismissCount] = React.useState(0);
+  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}>
@@ -28,20 +29,15 @@ function ModalOnShowOnDismiss(): React.Node {
           transparent={true}
           visible={modalVisible}
           onShow={() => {
-            setOnShowCount(onShowCount + 1);
+            setOnShowCount(showCount => showCount + 1);
           }}
           onDismiss={() => {
-            setOnDismissCount(onDismissCount + 1);
+            setOnDismissCount(dismissCount => dismissCount + 1);
           }}
           onRequestClose={() => {
             setModalVisible(false);
           }}>
-          <View
-            style={[
-              styles.centeredView,
-              styles.modalBackdrop,
-              styles.widthHeight,
-            ]}>
+          <View style={[styles.centeredView, styles.modalBackdrop]}>
             <View style={styles.modalView}>
               <Text testID="modal-on-show-count">
                 onShow is called {onShowCount} times
@@ -96,7 +92,7 @@ const styles = StyleSheet.create({
     paddingVertical: 30,
   },
   centeredView: {
-    // flex: 1, [Windows]
+    // 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',
   },
@@ -134,12 +130,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
   },
-  // [Windows
-  widthHeight: {
-    width: 300,
-    height: 400,
-  },
-  // Windows]
 });
 
 export default ({

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

@@ -348,13 +348,9 @@ const styles = StyleSheet.create({
     marginTop: 6,
   },
   modalContainer: {
-    // [Windows
-    width: 500,
-    height: 500,
-    // flex: 1,
-    // justifyContent: 'center',
-    // padding: 20,
-    // Windows ]
+    //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,
   },
   modalInnerContainer: {
     borderRadius: 10,

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

@@ -0,0 +1,217 @@
+
+/*
+ * This file is auto-generated from CalendarViewNativeComponent spec file in flow / TypeScript.
+ */
+// clang-format off
+#pragma once
+
+#include <NativeModules.h>
+
+#ifdef RNW_NEW_ARCH
+#include <JSValueComposition.h>
+
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Microsoft.UI.Composition.h>
+#endif // #ifdef RNW_NEW_ARCH
+
+#ifdef RNW_NEW_ARCH
+
+namespace winrt::SampleCustomComponent::Codegen {
+
+REACT_STRUCT(CalendarViewProps)
+struct CalendarViewProps : winrt::implements<CalendarViewProps, winrt::Microsoft::ReactNative::IComponentProps> {
+  CalendarViewProps(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom)
+    : ViewProps(props)
+  {
+     if (cloneFrom) {
+       auto cloneFromProps = cloneFrom.as<CalendarViewProps>();
+       label = cloneFromProps->label;  
+     }
+  }
+
+  void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
+    winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
+  }
+
+  REACT_FIELD(label)
+  std::string label;
+
+  const winrt::Microsoft::ReactNative::ViewProps ViewProps;
+};
+
+REACT_STRUCT(CalendarView_OnSelectedDatesChanged)
+struct CalendarView_OnSelectedDatesChanged {
+  REACT_FIELD(value)
+  bool value{};
+
+  REACT_FIELD(startDate)
+  std::string startDate;
+};
+
+struct CalendarViewEventEmitter {
+  CalendarViewEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
+      : m_eventEmitter(eventEmitter) {}
+
+  using OnSelectedDatesChanged = CalendarView_OnSelectedDatesChanged;
+
+  void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
+    m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+ private:
+  winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
+};
+
+template<typename TUserData>
+struct BaseCalendarView {
+
+  virtual void UpdateProps(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::com_ptr<CalendarViewProps> &newProps,
+    const winrt::com_ptr<CalendarViewProps> &/*oldProps*/) noexcept {
+    m_props = newProps;
+  }
+
+  // UpdateLayoutMetrics will only be called if this method is overridden
+  virtual void UpdateLayoutMetrics(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*newLayoutMetrics*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*oldLayoutMetrics*/) noexcept {
+  }
+
+  // UpdateState will only be called if this method is overridden
+  virtual void UpdateState(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::IComponentState &/*newState*/) noexcept {
+  }
+
+  virtual void UpdateEventEmitter(const std::shared_ptr<CalendarViewEventEmitter> &eventEmitter) noexcept {
+    m_eventEmitter = eventEmitter;
+  }
+
+  // MountChildComponentView will only be called if this method is overridden
+  virtual void MountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // UnmountChildComponentView will only be called if this method is overridden
+  virtual void UnmountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // Initialize will only be called if this method is overridden
+  virtual void Initialize(const winrt::Microsoft::ReactNative::ComponentView &/*view*/) noexcept {
+  }
+
+  // CreateVisual will only be called if this method is overridden
+  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    return view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor().CreateSpriteVisual();
+  }
+
+  // FinalizeUpdate will only be called if this method is overridden
+  virtual void FinalizeUpdate(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+                                        winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept {
+  }
+
+
+
+  const std::shared_ptr<CalendarViewEventEmitter>& EventEmitter() const { return m_eventEmitter; }
+  const winrt::com_ptr<CalendarViewProps>& Props() const { return m_props; }
+
+private:
+  winrt::com_ptr<CalendarViewProps> m_props;
+  std::shared_ptr<CalendarViewEventEmitter> m_eventEmitter;
+};
+
+template <typename TUserData>
+void RegisterCalendarViewNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder,
+    std::function<void(const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder&)> builderCallback) noexcept {
+  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
+      L"CalendarView", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
+        auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
+
+        builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
+                              const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept {
+            return winrt::make<CalendarViewProps>(props, cloneFrom); 
+        });
+
+        builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &newProps,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateProps(view, newProps ? newProps.as<CalendarViewProps>() : nullptr, oldProps ? oldProps.as<CalendarViewProps>() : nullptr);
+        });
+
+        compBuilder.SetUpdateLayoutMetricsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateLayoutMetrics(view, newLayoutMetrics, oldLayoutMetrics);
+        });
+
+        builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) noexcept {
+          auto userData = view.UserData().as<TUserData>();
+          userData->UpdateEventEmitter(std::make_shared<CalendarViewEventEmitter>(eventEmitter));
+        });
+
+        if constexpr (&TUserData::FinalizeUpdate != &BaseCalendarView<TUserData>::FinalizeUpdate) {
+            builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->FinalizeUpdate(view, mask);
+          });
+        } 
+
+        if constexpr (&TUserData::UpdateState != &BaseCalendarView<TUserData>::UpdateState) {
+          builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateState(view, newState);
+          });
+        }
+
+        if constexpr (&TUserData::MountChildComponentView != &BaseCalendarView<TUserData>::MountChildComponentView) {
+          builder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->MountChildComponentView(view, args);
+          });
+        }
+
+        if constexpr (&TUserData::UnmountChildComponentView != &BaseCalendarView<TUserData>::UnmountChildComponentView) {
+          builder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->UnmountChildComponentView(view, args);
+          });
+        }
+
+        compBuilder.SetViewComponentViewInitializer([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+          auto userData = winrt::make_self<TUserData>();
+          if constexpr (&TUserData::Initialize != &BaseCalendarView<TUserData>::Initialize) {
+            userData->Initialize(view);
+          }
+          view.UserData(*userData);
+        });
+
+        if constexpr (&TUserData::CreateVisual != &BaseCalendarView<TUserData>::CreateVisual) {
+          compBuilder.SetCreateVisualHandler([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->CreateVisual(view);
+          });
+        }
+
+        // Allow app to further customize the builder
+        if (builderCallback) {
+          builderCallback(compBuilder);
+        }
+      });
+}
+
+} // namespace winrt::SampleCustomComponent::Codegen
+
+#endif // #ifdef RNW_NEW_ARCH

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/CompositionComponentView.idl

@@ -7,6 +7,7 @@ import "ViewProps.idl";
 import "Composition.Input.idl";
 import "CompositionSwitcher.idl";
 import "IReactContext.idl";
+import "ReactNativeIsland.idl";
 
 #include "DocString.h"
 
@@ -110,8 +111,19 @@ namespace Microsoft.ReactNative.Composition
   [default_interface]
   runtimeclass RootComponentView : ViewComponentView {
     Microsoft.ReactNative.ComponentView GetFocusedComponent();
+    Microsoft.ReactNative.ReactNativeIsland ReactNativeIsland { get; };
+    DOC_STRING("Is non-null if this RootComponentView is the content of a portal")
+    PortalComponentView Portal { get; };
   };
-
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  DOC_STRING("Used to implement UI that is hosted outside the main UI tree, such as modal.")
+  runtimeclass PortalComponentView : Microsoft.ReactNative.ComponentView {
+    RootComponentView ContentRoot { get; };
+  };
+
   [experimental]
   [webhosthidden]
   [default_interface]