[0.75] Cherry-pick fixes (#14106)

* [Fabric] Introducing autocapitalize prop in TextInput - Take 2 (#13343) * New implementation of autocapitalize! * Change files * Fixed bug for sentences scenario * Just keep characters mode for now * Revert "Just keep characters mode for now" This reverts commit 60ca1ce. * Re-apply changes minus packages.json.lock * The original js file was deleted, re-applying changes * Fixed snapshot and lint errors * Fix override mismatch, added comments * Remove stale test check * Minor changes * Update obsolete snapshot * Cleanup ReactNativeAppBuilder and ReactNativeWin32App (#13983) This PR simplifies and scopes down the API for `ReactNativeAppBuilder` and `ReactNativeWin32App`. - Bug fix (non-breaking change which fixes an issue) `ReactNativeAppBuilder`'s API surface made it too easy to call incorrectly and not realize it. Resolves #13946 There are a variety of changes to the API surface: * `ReactInstanceSettingsBuilder` deleted: not only are there are simply too many APIs that would need to be exposed to be useful, the very act of creating and replacing the app's `ReactNativeHost`'s `ReactInstanceSettings` with a new one is what caused the bug in #13946 in the first place * `ReactNativeAppBuilder` now only exposes APIs to specify the intial, non-ReactNative, WinAppSDK types, (i.e. `DispatcherQueueController`, `Compositor`, and `AppWindow`), objects the app developer may already have created for their existing app, and otherwise is only responsible for building a `ReactNativeWin32App` with those types properly pre-made * `ReactNativeWin32App::Start()` is now more responsible for the stitching together all of the relevant types to make a working Win32 fabric app * All WinRT APIs without an immediate use-case have been commented out until we are sure they are necessary and that it is safe to expose them * The template has been updated to follow the pattern of: * Use `ReactNativeAppBuilder` to get a `ReactNativeWin32` app with the base WinAppSDK types ready * Get and modify the types as necessary from the created app object (like the `ReactInstanceSettings` and the `AppWindow`) * Call `app.Start()` N/A Verified new apps and example apps in libraryes build and run properly. Should this change be included in the release notes: _yes_ Cleanup ReactNativeAppBuilder and ReactNativeWin32App * Update Guardrails on Provider Instantiation (#13961) * Update Provider Guardrails * Change files * Format * Update Snapshots * Add very basic box-shadow support (#14028) * Add very basic box-shadow support * Change files * Focus should notify island host when tab loop wraps to give host oportunity to take focus (#14026) * Focus should notify island host when tab loop wraps to give host oportunity to take focus * Change files * Default scroll to bring a component into view should have padding around the viewport (#14018) * Default scroll to bring a component into view should have padding around the viewport * Change files * Update focus visuals to use cornerRadius and inner/outer strokes (#14008) * Update focus visuals to use cornerRadius and inner/outer strokes. * Change files * Format * lint fix * Scale focus border for scaleFactor * [Fabric] Get Modal to host RN components in new hwnd (#13500) * save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]> * Support accessibilityState 'checked' (#13962) * Implement accessibilityState checked * Change files * Add Testing * Format and Update Snapshots * Adjust Guardrails * Merge * Format * Format * Lint * Change files * Fix Merge Error * Fix issue with prop cloning with custom native props (#14061) * Fix issue with prop cloning with custom native props * format * prettier * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * Export MS.RN.Color ctor in Office dll (#14082) * Export MS.RN.Color ctor in Office dll * Change files * Implement TxScreenToClient and TxClientToScreen * format --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * TextInput caret becomes visible on non-focused TextInputs on resize (#14091) * TextInput caret becomes visible on non-focused TextInputs on resize * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * Fix focus visuals being obscured by adjacent views (#14093) * Fix focus visuals being obscured by adjacent views * Change files * update snapshots * Fix uimplemented view * review feedback --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * change files * Build fixes * fix * Update Test Website to dotnet8 * update snapshots * fix overrides --------- Co-authored-by: Daniel Ayala <[email protected]> Co-authored-by: Jon Thysell <[email protected]> Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]> Co-authored-by: React-Native-Windows Bot <[email protected]>
microsoft · Nov 23, 2024 · e50e19a · e50e19a
1 parent 8a13e06
commit e50e19a
Show file tree

Hide file tree

Showing 90 changed files with 4,561 additions and 5,317 deletions.
diff --git a/change/@office-iss-react-native-win32-f99cfd3f-e8be-4146-8f14-07aca4f2c5b1.json b/change/@office-iss-react-native-win32-f99cfd3f-e8be-4146-8f14-07aca4f2c5b1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "adds default Modal",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@react-native-windows-codegen-132ed636-192e-42e3-808f-a259a253bb75.json b/change/@react-native-windows-codegen-132ed636-192e-42e3-808f-a259a253bb75.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Implement accessibilityState checked",
+  "packageName": "@react-native-windows/codegen",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@react-native-windows-codegen-4ec7c1b2-8541-47d9-a5d0-c245b25fbac1.json b/change/@react-native-windows-codegen-4ec7c1b2-8541-47d9-a5d0-c245b25fbac1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issue with prop cloning with custom native props",
+  "packageName": "@react-native-windows/codegen",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-0f3d0823-4941-4a2d-95bd-ffa2a401aa53.json b/change/react-native-windows-0f3d0823-4941-4a2d-95bd-ffa2a401aa53.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update Provider Guardrails",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-18d4918c-6f73-4fe4-a6e4-42f5ac6ac39e.json b/change/react-native-windows-18d4918c-6f73-4fe4-a6e4-42f5ac6ac39e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Implement accessibilityState checked",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-22ea5da8-4ee5-4ec6-bac3-1c62cabf01f7.json b/change/react-native-windows-22ea5da8-4ee5-4ec6-bac3-1c62cabf01f7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Export MS.RN.Color ctor in Office dll",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-283ad80a-9f48-40a3-b7a3-227795b6f110.json b/change/react-native-windows-283ad80a-9f48-40a3-b7a3-227795b6f110.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "adds default modal that hosts fabric components",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-2b4a6ca8-3a50-4be5-8b1d-559946fa0be1.json b/change/react-native-windows-2b4a6ca8-3a50-4be5-8b1d-559946fa0be1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Cleanup ReactNativeAppBuilder and ReactNativeWin32App",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-42cade43-cd57-4cd5-97d3-2a35b924d78f.json b/change/react-native-windows-42cade43-cd57-4cd5-97d3-2a35b924d78f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix focus visuals being obscured by adjacent views",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-433ea974-44c7-465f-a6e9-1f34927c7217.json b/change/react-native-windows-433ea974-44c7-465f-a6e9-1f34927c7217.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Focus should notify island host when tab loop wraps to give host oportunity to take focus",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-621a9112-d00c-469f-83a8-ae391abefe18.json b/change/react-native-windows-621a9112-d00c-469f-83a8-ae391abefe18.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issue with prop cloning with custom native props",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-6b83103d-e55d-427a-a482-d2706e24f6a0.json b/change/react-native-windows-6b83103d-e55d-427a-a482-d2706e24f6a0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Default scroll to bring a component into view should have padding around the viewport",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-7edd982f-196f-4feb-a824-cbf08e0a2c96.json b/change/react-native-windows-7edd982f-196f-4feb-a824-cbf08e0a2c96.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add very basic box-shadow support",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-aa22348e-c6b1-4cfc-9a85-c8b2bc2df484.json b/change/react-native-windows-aa22348e-c6b1-4cfc-9a85-c8b2bc2df484.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Introduced autocapitalize prop in TextInput",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-ad145bca-5a3a-45aa-ab7b-35661aa5fe59.json b/change/react-native-windows-ad145bca-5a3a-45aa-ab7b-35661aa5fe59.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "TextInput caret becomes visible on non-focused TextInputs on resize",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-ce27643e-687f-4f35-815b-4e030e9cc358.json b/change/react-native-windows-ce27643e-687f-4f35-815b-4e030e9cc358.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update focus visuals to use cornerRadius and inner/outer strokes.",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js b/packages/@office-iss/react-native-win32-tester/src/js/utils/RNTesterList.win32.js
@@ -59,6 +59,11 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'ImageWin32Test',
     module: require('@office-iss/react-native-win32/Libraries/Image/Tests/ImageWin32Test'),
   },
+  {
+    key: 'ModalExample',
+    category: 'UI',
+    module: require('../examples/Modal/ModalExample'),
+  },
   /*
   {
     key: 'JSResponderHandlerExample',
@@ -68,11 +73,6 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'KeyboardAvoidingViewExample',
     module: require('../examples/KeyboardAvoidingView/KeyboardAvoidingViewExample'),
   },
-  {
-    key: 'ModalExample',
-    category: 'UI',
-    module: require('../examples/Modal/ModalExample'),
-  },
   {
     key: 'NewAppScreenExample',
     module: require('../examples/NewAppScreen/NewAppScreenExample'),

diff --git a/packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts b/packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts
@@ -38,7 +38,14 @@ const headerTemplate = `/*
 
 const propsTemplate = `REACT_STRUCT(::_PROPS_NAME_::)
 struct ::_PROPS_NAME_:: : winrt::implements<::_PROPS_NAME_::, winrt::Microsoft::ReactNative::IComponentProps> {
-  ::_PROPS_NAME_::(winrt::Microsoft::ReactNative::ViewProps props) : ViewProps(props) {}
+  ::_PROPS_NAME_::(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom)
+    : ViewProps(props)
+  {
+     if (cloneFrom) {
+       auto cloneFromProps = cloneFrom.as<::_PROPS_NAME_::>();
+::_PROP_INITIALIZERS_::  
+     }
+  }
 
   void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
     winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
@@ -144,8 +151,10 @@ void Register::_COMPONENT_NAME_::NativeComponent(
       L"::_COMPONENT_NAME_::", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
         auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
 
-        builder.SetCreateProps(
-            [](winrt::Microsoft::ReactNative::ViewProps props) noexcept { return winrt::make<::_COMPONENT_NAME_::Props>(props); });
+        builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
+                              const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept {
+            return winrt::make<::_COMPONENT_NAME_::Props>(props, cloneFrom); 
+        });
 
         builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
                                      const winrt::Microsoft::ReactNative::IComponentProps &newProps,
@@ -296,6 +305,12 @@ export function createComponentGenerator({
           })
           .join('\n');
 
+        const propInitializers = componentShape.props
+          .map(prop => {
+            return `       ${prop.name} = cloneFromProps->${prop.name};`;
+          })
+          .join('\n');
+
         const propObjectTypes = propObjectAliases.jobs
           .map(propObjectTypeName => {
             const propObjectType = propObjectAliases.types[propObjectTypeName]!;
@@ -510,6 +525,7 @@ ${
             .replace(/::_EVENT_EMITTER_NAME_::/g, eventEmitterName)
             .replace(/::_PROPS_NAME_::/g, propsName)
             .replace(/::_COMPONENT_NAME_::/g, componentName)
+            .replace(/::_PROP_INITIALIZERS_::/g, propInitializers)
             .replace(/::_PROPS_FIELDS_::/g, propsFields)
             .replace(/::_NAMESPACE_::/g, namespace)
             .replace(/\n\n\n+/g, '\n\n');

diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json
@@ -41,6 +41,18 @@
       "baseHash": "1aba10f5b2956a53348264be92ce2314d1515d28",
       "issue": 12869
     },
+    {
+      "type": "patch",
+      "file": "src/js/examples/Modal/ModalOnShow.windows.js",
+      "baseFile": "packages/rn-tester/js/examples/Modal/ModalOnShow.js",
+      "baseHash": "5098723f16d232ef3c5971a6f153522f42f87f61"
+    },
+    {
+      "type": "patch",
+      "file": "src/js/examples/Modal/ModalPresentation.windows.js",
+      "baseFile": "packages/rn-tester/js/examples/Modal/ModalPresentation.js",
+      "baseHash": "97e0408dad28bd62e6ec22a8454af764d69d8ed5"
+    },
     {
       "type": "patch",
       "file": "src/js/examples/Pressable/PressableExample.windows.js",

diff --git a/packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js b/packages/@react-native-windows/tester/src/js/examples/Modal/ModalOnShow.windows.js
@@ -0,0 +1,149 @@
+/**
+ * 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 * as React 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);
+
+  return (
+    <View style={styles.container}>
+      {modalShowComponent && (
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onShow={() => {
+            setOnShowCount(onShowCount + 1);
+          }}
+          onDismiss={() => {
+            setOnDismissCount(onDismissCount + 1);
+          }}
+          onRequestClose={() => {
+            setModalVisible(false);
+          }}>
+          <View
+            style={[
+              styles.centeredView,
+              styles.modalBackdrop,
+              styles.widthHeight,
+            ]}>
+            <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>
+      )}
+      <Text testID="on-show-count">onShow is called {onShowCount} times</Text>
+      <Text testID="on-dismiss-count">
+        onDismiss is called {onDismissCount} times
+      </Text>
+      <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]
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalBackdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    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',
+  },
+  // [Windows
+  widthHeight: {
+    width: 300,
+    height: 400,
+  },
+  // Windows]
+});
+
+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);