Integrate RN 3/21/2024 (7d180d712)

.ado/image/rnw-img-vs2022-node18.json

@@ -34,7 +34,7 @@
         {
             "name": "Windows-NodeJS",
             "parameters": {
-                "Version": "18.16.1"
+                "Version": "18.18.0"
             }
         },
         {

change/@office-iss-react-native-win32-ab9bf9be-8971-414b-9a32-7e4c75caff97.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "integrate react-native-3-21",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@react-native-windows-automation-channel-e03e525c-abcb-485c-bf7f-cdb161ca836a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "integrate react-native-3-21",
+  "packageName": "@react-native-windows/automation-channel",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@react-native-windows-cli-a1ce68a8-2e76-4625-bc76-7c5bb8d1c69d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "integrate react-native-3-21",
+  "packageName": "@react-native-windows/cli",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@rnw-scripts-eslint-config-6c54f16d-6659-4e2d-a99d-6a4ce5dbb9f2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "integrate react-native-3-21",
+  "packageName": "@rnw-scripts/eslint-config",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-fb4b6aba-56ea-4d8a-a329-d0f0e682a095.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "integrate react-native-3-21",
+  "packageName": "react-native-windows",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/@office-iss/react-native-win32-tester/overrides.json

@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win32/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240307-ff03b149e",
+  "baseVersion": "0.75.0-nightly-20240321-7d180d712",
   "overrides": [
     {
       "type": "patch",

packages/@office-iss/react-native-win32-tester/package.json

@@ -19,7 +19,7 @@
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.243",
     "react": "18.0.0",
-    "react-native": "0.75.0-nightly-20240307-ff03b149e"
+    "react-native": "0.75.0-nightly-20240321-7d180d712"
   },
   "devDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.243",
@@ -30,7 +30,7 @@
     "@types/node": "^18.0.0",
     "eslint": "^8.19.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.75.0-nightly-20240307-ff03b149e",
+    "react-native": "0.75.0-nightly-20240321-7d180d712",
     "react-native-platform-override": "^1.9.30",
     "typescript": "5.0.4"
   },

packages/@office-iss/react-native-win32/.flowconfig

@@ -154,4 +154,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.229.2
+^0.231.0

packages/@office-iss/react-native-win32/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240307-ff03b149e",
+  "baseVersion": "0.75.0-nightly-20240321-7d180d712",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "bdebcba51a5c13fbe5acab9e07720acff0825bc9"
+      "baseHash": "a57066be1285dc8bc5d9702d0227d04c1c6447ce"
     },
     {
       "type": "derived",
@@ -122,7 +122,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Components/TextInput/TextInput.win32.js",
       "baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.js",
-      "baseHash": "f05b36551197bfa87f2342bd6d1c9b134c1731b2"
+      "baseHash": "b1ef5981a6abbb0548fc5fd835ad711c10712d61"
     },
     {
       "type": "patch",
@@ -323,7 +323,7 @@
       "type": "derived",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js",
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js",
-      "baseHash": "04c1210d0198315af8358b22a81dc74dc76ef752"
+      "baseHash": "3a765d2180cca25ed35172ebce8294fc569486aa"
     },
     {
       "type": "derived",
@@ -528,20 +528,6 @@
       "file": "src-win/src/private/specs/modules/NativePlatformConstantsWin.js",
       "baseFile": "packages/react-native/src/private/specs/modules/NativePlatformConstantsAndroid.js",
       "baseHash": "b4a125d9134f33aeaba9e06988e18cbb0b4e9e9c"
-    },
-    {
-      "type": "patch",
-      "file": "src-win/src/private/webapis/dom/nodes/ReadOnlyElement.js",
-      "baseFile": "packages/react-native/src/private/webapis/dom/nodes/ReadOnlyElement.js",
-      "baseHash": "e049a95c6fab9e5d3f7e13edbeb7b12440f71259",
-      "issue": 12951
-    },
-    {
-      "type": "patch",
-      "file": "src-win/src/private/webapis/dom/nodes/ReadOnlyNode.js",
-      "baseFile": "packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js",
-      "baseHash": "bbb8d136ec9b0f56a3843ea9da0bd1e17a50a7a3",
-      "issue": 12951
     }
   ]
 }

packages/@office-iss/react-native-win32/package.json

@@ -26,17 +26,17 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^29.6.3",
-    "@react-native-community/cli": "13.6.1",
-    "@react-native-community/cli-platform-android": "13.6.1",
-    "@react-native-community/cli-platform-ios": "13.6.1",
+    "@react-native-community/cli": "14.0.0-alpha.0",
+    "@react-native-community/cli-platform-android": "14.0.0-alpha.0",
+    "@react-native-community/cli-platform-ios": "14.0.0-alpha.0",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/codegen": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240307-ff03b149e",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240307-ff03b149e",
+    "@react-native/assets-registry": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/codegen": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/community-cli-plugin": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/gradle-plugin": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/js-polyfills": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/normalize-colors": "0.75.0-nightly-20240321-7d180d712",
+    "@react-native/virtualized-lists": "0.75.0-nightly-20240321-7d180d712",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -56,7 +56,7 @@
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "^5.0.0",
+    "react-devtools-core": "^5.0.2",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -69,7 +69,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240307-ff03b149e",
+    "@react-native/metro-config": "0.75.0-nightly-20240321-7d180d712",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.13",
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.17",
@@ -85,13 +85,13 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240307-ff03b149e",
+    "react-native": "0.75.0-nightly-20240321-7d180d712",
     "react-native-platform-override": "^1.9.30",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240307-ff03b149e"
+    "react-native": "0.75.0-nightly-20240321-7d180d712"
   },
   "beachball": {
     "defaultNpmTag": "canary",

packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js

@@ -784,33 +784,12 @@ export type Props = $ReadOnly<{|
    */
   onChange?: ?(e: ChangeEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   *
-   * @platform ios
-   */
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
-
   /**
    * Callback that is called when the text input's text changes.
    * Changed text is passed as an argument to the callback handler.
    */
   onChangeText?: ?(text: string) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   * Changed text is passed as an argument to the callback handler.
-   *
-   * @platform ios
-   */
-  unstable_onChangeTextSync?: ?(text: string) => mixed,
-
   /**
    * Callback that is called when the text input's content size changes.
    * This will be called with
@@ -839,21 +818,6 @@ export type Props = $ReadOnly<{|
    */
   onKeyPress?: ?(e: KeyPressEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   *
-   * Callback that is called when a key is pressed.
-   * This will be called with `{ nativeEvent: { key: keyValue } }`
-   * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
-   * the typed-in character otherwise including `' '` for space.
-   * Fires before `onChange` callbacks.
-   *
-   * @platform ios
-   */
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
-
   /**
    * Called when a single tap gesture is detected.
    */
@@ -1359,26 +1323,6 @@ function InternalTextInput(props: Props): React.Node {
     setMostRecentEventCount(event.nativeEvent.eventCount);
   };
 
-  const _onChangeSync = (event: ChangeEvent) => {
-    const currentText = event.nativeEvent.text;
-    props.unstable_onChangeSync && props.unstable_onChangeSync(event);
-    props.unstable_onChangeTextSync &&
-      props.unstable_onChangeTextSync(currentText);
-
-    if (inputRef.current == null) {
-      // calling `props.onChange` or `props.onChangeText`
-      // may clean up the input itself. Exits here.
-      return;
-    }
-
-    setLastNativeText(currentText);
-    // This must happen last, after we call setLastNativeText.
-    // Different ordering can cause bugs when editing AndroidTextInputs
-    // with multiple Fragments.
-    // We must update this so that controlled input updates work.
-    setMostRecentEventCount(event.nativeEvent.eventCount);
-  };
-
   const _onSelectionChange = (event: SelectionChangeEvent) => {
     props.onSelectionChange && props.onSelectionChange(event);
 
@@ -1583,10 +1527,6 @@ function InternalTextInput(props: Props): React.Node {
           style.paddingVertical == null &&
           style.paddingTop == null));
 
-    const useOnChangeSync =
-      (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
-      !(props.onChange || props.onChangeText);
-
     textInput = (
       <RCTTextInputView
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
@@ -1603,9 +1543,7 @@ function InternalTextInput(props: Props): React.Node {
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
-        onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
-        onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
         onScroll={_onScroll}

packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js

@@ -50,24 +50,27 @@ function getPrettyFileName(path: string) {
 }
 function LogBoxInspectorReactFrames(props: Props): React.Node {
   const [collapsed, setCollapsed] = React.useState(true);
-  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+  if (
+    props.log.getAvailableComponentStack() == null ||
+    props.log.getAvailableComponentStack().length < 1
+  ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.componentStack.slice(0, 3);
+      return props.log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.componentStack;
+      return props.log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.componentStack.length <= 3) {
+    if (props.log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.componentStack.length - 3;
+    const count = props.log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {