[0.75] [Fabric] Cherry pick changes

change/react-native-windows-2a2b1b40-5859-4ef6-9dd5-b48717b71c24.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "replace IAppData.TemporaryFolder with GetTempPathW",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-58e392a3-bd7d-42b1-84d3-f2a6dd66f6ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rework custom components to not rely on open compose patterns",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-d8175a4a-46c8-40d0-b42b-097f50a633c1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Fabric] Fix ScrollViewComponentView object leak",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-dd026530-5f0b-4ca5-b43e-a7a6960d7696.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Fabric] Enable implementation of custom events on custom components",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/CustomXamlComponentWithNativeLayoutNativeComponent.js

@@ -12,13 +12,22 @@
 
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
+type MyEventEvent = $ReadOnly<{|
+  value: boolean,
+  target: Int32,
+|}>;
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 
   // Props
   label: string,
+
+  // Events
+  onMyEvent?: ?DirectEventHandler<MyEventEvent>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/CustomXamlComponentWithYogaLayoutNativeComponent.js

@@ -12,13 +12,22 @@
 
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
+type MyEventEvent = $ReadOnly<{|
+  value: boolean,
+  target: Int32,
+|}>;
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 
   // Props
   label: string,
+
+  // Events
+  onMyEvent?: ?DirectEventHandler<MyEventEvent>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponent.windows.js

@@ -10,10 +10,43 @@
 
 'use strict';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View} from 'react-native';
 import CustomXamlComponentWithNativeLayout from './CustomXamlComponentWithNativeLayoutNativeComponent';
 
+const NativeComponentWithNativeLayout = () => {
+  let [log, setLog] = useState('');
+  return (
+    <View
+      style={{
+        borderRadius: 0,
+        margin: 10,
+        borderWidth: 2,
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        gap: 5,
+      }}>
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+      <Text style={{color: 'gray'}}>This is RN Text</Text>
+      <Text style={{color: 'red'}}>{log}</Text>
+      <CustomXamlComponentWithNativeLayout
+        label="This is a Xaml Button set to ellipisify on truncation"
+        style={{flexShrink: 1}}
+        onMyEvent={(arg) => {setLog(log + '\nRecieved MyEvent: ' + JSON.stringify(arg.nativeEvent) + '\n')}}
+      />
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+    </View>
+  );
+}
+
 exports.displayName = 'NativeFabricComponent';
 exports.framework = 'React';
 exports.category = 'UI';
@@ -27,32 +60,8 @@ exports.examples = [
     title: 'Native Component',
     render: function (): React.Node {
       return (
-        <View
-          style={{
-            borderRadius: 0,
-            margin: 10,
-            borderWidth: 2,
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            gap: 5,
-          }}>
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-          <Text style={{color: 'gray'}}>This is RN Text</Text>
-          <CustomXamlComponentWithNativeLayout
-            label="This is a Xaml Button set to ellipisify on truncation"
-            style={{flexShrink: 1}}
-          />
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-        </View>
+        <NativeComponentWithNativeLayout />
       );
     },
-  },
+  }
 ];

packages/@react-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponentYoga.windows.js

@@ -10,10 +10,43 @@
 
 'use strict';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View} from 'react-native';
 import CustomXamlComponentWithYogaLayout from './CustomXamlComponentWithYogaLayoutNativeComponent';
 
+const NativeComponentWithYogaExample = () => {
+  let [log, setLog] = useState('');
+  return (
+    <View
+      style={{
+        borderRadius: 0,
+        margin: 10,
+        borderWidth: 2,
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        gap: 5,
+      }}>
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+      <Text style={{color: 'gray'}}>This is RN Text</Text>
+      <Text style={{color: 'red'}}>{log}</Text>
+      <CustomXamlComponentWithYogaLayout
+        label="This is a Xaml Button set to ellipisify on truncation"
+        style={{flex: 1, minWidth: 100}}
+        onMyEvent={(arg) => {setLog(log + '\nRecieved MyEvent: ' + JSON.stringify(arg.nativeEvent) + '\n')}}
+      />
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+    </View>
+  );
+};
+
 exports.displayName = 'NativeFabricComponentYoga';
 exports.framework = 'React';
 exports.category = 'UI';
@@ -27,31 +60,7 @@ exports.examples = [
     title: 'Native Component',
     render: function (): React.Node {
       return (
-        <View
-          style={{
-            borderRadius: 0,
-            margin: 10,
-            borderWidth: 2,
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            gap: 5,
-          }}>
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-          <Text style={{color: 'gray'}}>This is RN Text</Text>
-          <CustomXamlComponentWithYogaLayout
-            label="This is a Xaml Button set to ellipisify on truncation"
-            style={{flex: 1, minWidth: 100}}
-          />
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-        </View>
+        <NativeComponentWithYogaExample />
       );
     },
   },

packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap

@@ -9627,6 +9627,7 @@ exports[`Home UIA Tree Dump Search Bar 1`] = `
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "edit",
     "Name": "Search...",
+    "ValuePattern.IsReadOnly": false,
   },
   "Component Tree": {
     "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView",