@office-iss/react-native-win32 0.0.0-canary.245 → 0.0.0-canary.247

package/Libraries/ReactNative/RendererImplementation.js

@@ -12,8 +12,12 @@ import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type ReactFabricHostComponent from './ReactFabricPublicInstance/ReactFabricHostComponent';
 import type {Element, ElementRef, ElementType} from 'react';
 
+import {
+  onCaughtError,
+  onRecoverableError,
+  onUncaughtError,
+} from '../Core/ErrorHandlers';
 import {type RootTag} from './RootTag';
-
 export function renderElement({
   element,
   rootTag,
@@ -31,9 +35,23 @@ export function renderElement({
       rootTag,
       null,
       useConcurrentRoot,
+      {
+        onCaughtError,
+        onUncaughtError,
+        onRecoverableError,
+      },
     );
   } else {
-    require('../Renderer/shims/ReactNative').render(element, rootTag);
+    require('../Renderer/shims/ReactNative').render(
+      element,
+      rootTag,
+      undefined,
+      {
+        onCaughtError,
+        onUncaughtError,
+        onRecoverableError,
+      },
+    );
   }
 }
 

package/Libraries/ReactNative/UIManager.d.ts

@@ -89,27 +89,6 @@ export interface UIManagerStatic {
     | ((value: boolean) => void)
     | undefined;
 
-  /**
-   * Used to display an Android PopupMenu. If a menu item is pressed, the success callback will
-   * be called with the following arguments:
-   *
-   *  - item - the menu item.
-   *  - index - index of the pressed item in array. Returns `undefined` if cancelled.
-   *
-   * To obtain a native node handle for a component, you can use
-   * `React.findNodeHandle(component)`.
-   *
-   * Note that this works only on Android
-   */
-  showPopupMenu?:
-    | ((
-        node: number,
-        items: string[],
-        error: () => void /* currently unused */,
-        success: (item: string, index: number | undefined) => void,
-      ) => void)
-    | undefined;
-
   getViewManagerConfig: (name: string) => {
     Commands: {[key: string]: number};
   };

package/Libraries/ReactNative/UIManagerProperties.js

@@ -30,7 +30,6 @@ module.exports = [
   'clearJSResponder',
   'configureNextLayoutAnimation',
   'createView',
-  'dismissPopupMenu',
   'dispatchViewManagerCommand',
   'findSubviewIn',
   'getConstantsForViewManager',
@@ -45,10 +44,8 @@ module.exports = [
   'setChildren',
   'setJSResponder',
   'setLayoutAnimationEnabledExperimental',
-  'showPopupMenu',
   'updateView',
   'viewIsDescendantOf',
-  'PopupMenu',
   'LazyViewManagersEnabled',
   'ViewManagerNames',
   'StyleConstants',

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -19,17 +19,14 @@ const matricesDiffer = require('../Utilities/differ/matricesDiffer');
 const pointsDiffer = require('../Utilities/differ/pointsDiffer');
 const sizesDiffer = require('../Utilities/differ/sizesDiffer');
 const UIManager = require('./UIManager');
-const invariant = require('invariant');
 const nullthrows = require('nullthrows');
 
 function getNativeComponentAttributes(uiViewClassName: string): any {
   const viewConfig = UIManager.getViewManagerConfig(uiViewClassName);
 
-  invariant(
-    viewConfig != null && viewConfig.NativeProps != null,
-    'requireNativeComponent: "%s" was not found in the UIManager.',
-    uiViewClassName,
-  );
+  if (viewConfig == null) {
+    return null;
+  }
 
   // TODO: This seems like a whole lot of runtime initialization for every
   // native component that can be either avoided or simplified.

package/Libraries/Renderer/shims/ReactFabric.js

@@ -8,6 +8,9 @@
  * @flow
  * @nolint
  * @generated SignedSource<<c1cc197c110e3a49a5e8f6bd5d32b23f>>
+ * @generated SignedSource<<19f13c8d8dac82cd391ad408f5ad8893>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 'use strict';

package/Libraries/Renderer/shims/ReactFeatureFlags.js

@@ -8,6 +8,9 @@
  * @flow strict-local
  * @nolint
  * @generated SignedSource<<2881c8e89ef0f73f4cf6612cb518b197>>
+ * @generated SignedSource<<f48352b25600c8534f28130f5256d937>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 'use strict';

package/Libraries/Renderer/shims/ReactNative.js

@@ -8,6 +8,9 @@
  * @flow
  * @nolint
  * @generated SignedSource<<0debd6e5a17dc037cb4661315a886de6>>
+ * @generated SignedSource<<228cd610b28ff12c92264be0d9be9374>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 'use strict';

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,10 @@
  * @noformat
  * @flow strict
  * @nolint
- * @generated SignedSource<<b35184ab7e1e173fd34278def089e277>>
+ * @generated SignedSource<<c41f61379973354629ee7bf55ba92541>>
+ * @generated SignedSource<<39aa3fa373095c6b192fac24f5b6c30c>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
@@ -176,6 +179,25 @@ export type TouchedViewDataAtPoint = $ReadOnly<{
   ...InspectorData,
 }>;
 
+export type RenderRootOptions = {
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      // $FlowFixMe[unclear-type] unknown props and state.
+      +errorBoundary?: ?React$Component<any, any>,
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+};
+
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
  * Provide minimal Flow typing for the high-level RN API and call it a day.
@@ -204,6 +226,7 @@ export type ReactNativeType = {
     element: Element<ElementType>,
     containerTag: number,
     callback: ?() => void,
+    options: ?RenderRootOptions,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
@@ -239,6 +262,7 @@ export type ReactFabricType = {
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,
+    options: ?RenderRootOptions,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   getNodeFromInternalInstanceHandle(

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -8,6 +8,9 @@
  * @flow strict-local
  * @nolint
  * @generated SignedSource<<73af5b3fe29d226634ed64bc861634df>>
+ * @generated SignedSource<<b616e9e4f0bcab37292324fd9dd1b01d>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 'use strict';

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -8,6 +8,9 @@
  * @flow strict-local
  * @nolint
  * @generated SignedSource<<ede54ac2fa1b9a09e234cdf098048989>>
+ * @generated SignedSource<<c20bad591efa52fa416567851318b8ca>>
+ *
+ * This file was sync'd from the facebook/react repository.
  */
 
 'use strict';

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -65,9 +65,9 @@ export interface FlexStyle {
     | 'row-reverse'
     | 'column-reverse'
     | undefined;
-  rowGap?: number | undefined;
-  gap?: number | undefined;
-  columnGap?: number | undefined;
+  rowGap?: number | string | undefined;
+  gap?: number | string | undefined;
+  columnGap?: number | string | undefined;
   flexGrow?: number | undefined;
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -644,9 +644,9 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    * between children may be larger than the gap value.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
    */
-  rowGap?: number,
-  columnGap?: number,
-  gap?: number,
+  rowGap?: number | string,
+  columnGap?: number | string,
+  gap?: number | string,
 }>;
 
 /**

package/Libraries/Utilities/{LoadingView.android.js → DevLoadingView.js}

@@ -12,23 +12,45 @@ import processColor from '../StyleSheet/processColor';
 import Appearance from './Appearance';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
+const COLOR_SCHEME = {
+  dark: {
+    refresh: {
+      backgroundColor: '#2584e8',
+      textColor: '#ffffff',
+    },
+    load: {
+      backgroundColor: '#fafafa',
+      textColor: '#242526',
+    },
+  },
+  default: {
+    refresh: {
+      backgroundColor: '#2584e8',
+      textColor: '#ffffff',
+    },
+    load: {
+      backgroundColor: '#404040',
+      textColor: '#ffffff',
+    },
+  },
+};
+
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
+      const colorScheme =
+        Appearance.getColorScheme() === 'dark'
+          ? COLOR_SCHEME.dark
+          : COLOR_SCHEME.default;
+
+      const colorSet = colorScheme[type];
+
       let backgroundColor;
       let textColor;
 
-      if (type === 'refresh') {
-        backgroundColor = processColor('#2584e8');
-        textColor = processColor('#ffffff');
-      } else if (type === 'load') {
-        if (Appearance.getColorScheme() === 'dark') {
-          backgroundColor = processColor('#fafafa');
-          textColor = processColor('#242526');
-        } else {
-          backgroundColor = processColor('#404040');
-          textColor = processColor('#ffffff');
-        }
+      if (colorSet) {
+        backgroundColor = processColor(colorSet.backgroundColor);
+        textColor = processColor(colorSet.textColor);
       }
 
       NativeDevLoadingView.showMessage(

package/Libraries/Utilities/HMRClient.js

@@ -70,7 +70,7 @@ const HMRClient: HMRClientNativeInterface = {
     }
 
     invariant(hmrClient, 'Expected HMRClient.setup() call at startup.');
-    const LoadingView = require('./LoadingView');
+    const DevLoadingView = require('./DevLoadingView');
 
     // We use this for internal logging only.
     // It doesn't affect the logic.
@@ -81,13 +81,13 @@ const HMRClient: HMRClientNativeInterface = {
     const hasUpdates = hmrClient.hasPendingUpdates();
 
     if (hasUpdates) {
-      LoadingView.showMessage('Refreshing...', 'refresh');
+      DevLoadingView.showMessage('Refreshing...', 'refresh');
     }
     try {
       hmrClient.enable();
     } finally {
       if (hasUpdates) {
-        LoadingView.hide();
+        DevLoadingView.hide();
       }
     }
 
@@ -181,7 +181,7 @@ const HMRClient: HMRClientNativeInterface = {
     invariant(!hmrClient, 'Cannot initialize hmrClient twice');
 
     // Moving to top gives errors due to NativeModules not being initialized
-    const LoadingView = require('./LoadingView');
+    const DevLoadingView = require('./DevLoadingView');
 
     const serverHost = port !== null && port !== '' ? `${host}:${port}` : host;
 
@@ -230,7 +230,7 @@ Error: ${e.message}`;
       didConnect = true;
 
       if (client.isEnabled() && !isInitialUpdate) {
-        LoadingView.showMessage('Refreshing...', 'refresh');
+        DevLoadingView.showMessage('Refreshing...', 'refresh');
       }
     });
 
@@ -242,11 +242,11 @@ Error: ${e.message}`;
     });
 
     client.on('update-done', () => {
-      LoadingView.hide();
+      DevLoadingView.hide();
     });
 
     client.on('error', data => {
-      LoadingView.hide();
+      DevLoadingView.hide();
 
       if (data.type === 'GraphNotFoundError') {
         client.close();
@@ -267,7 +267,7 @@ Error: ${e.message}`;
     });
 
     client.on('close', closeEvent => {
-      LoadingView.hide();
+      DevLoadingView.hide();
 
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5

package/overrides.json

@@ -7,13 +7,13 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240406-a05466c5b",
+  "baseVersion": "0.75.0-nightly-20240420-03a51da72",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "47a3426b7d1053a171e1ee1c56120e0e2f1ce887"
+      "baseHash": "4f8e1f39d8ed29d7d0e21455cac407d352a6824d"
     },
     {
       "type": "derived",
@@ -108,12 +108,6 @@
       "baseFile": "packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js",
       "baseHash": "ae5845b576484b3600e395d3b1ee03223530b8f7"
     },
-    {
-      "type": "derived",
-      "file": "src-win/Libraries/Components/ScrollView/ScrollView.win32.js",
-      "baseFile": "packages/react-native/Libraries/Components/ScrollView/ScrollView.js",
-      "baseHash": "732f5ccb69ff37895b3da2a160a0a6842a770385"
-    },
     {
       "type": "platform",
       "file": "src-win/Libraries/Components/TextInput/Tests/TextInputTest.tsx"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.245",
+  "version": "0.0.0-canary.247",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -30,13 +30,13 @@
     "@react-native-community/cli-platform-android": "14.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "14.0.0-alpha.2",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/codegen": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240406-a05466c5b",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240406-a05466c5b",
+    "@react-native/assets-registry": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/codegen": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/community-cli-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/gradle-plugin": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/js-polyfills": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/normalize-colors": "0.75.0-nightly-20240420-03a51da72",
+    "@react-native/virtualized-lists": "0.75.0-nightly-20240420-03a51da72",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -56,11 +56,12 @@
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "^5.0.2",
+    "react-devtools-core": "5.1.0",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
     "scheduler": "0.24.0-canary-efb381bbf-20230505",
+    "semver": "^7.1.3",
     "stacktrace-parser": "^0.1.10",
     "whatwg-fetch": "^3.0.0",
     "ws": "^6.2.2",
@@ -69,11 +70,11 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240406-a05466c5b",
+    "@react-native/metro-config": "0.75.0-nightly-20240420-03a51da72",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.15",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.19",
-    "@rnw-scripts/just-task": "2.3.31",
+    "@rnw-scripts/eslint-config": "1.2.17",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.21",
+    "@rnw-scripts/just-task": "2.3.33",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.0",
     "@types/node": "^18.0.0",
@@ -85,14 +86,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240406-a05466c5b",
-    "react-native-platform-override": "^1.9.32",
+    "react-native": "0.75.0-nightly-20240420-03a51da72",
+    "react-native-platform-override": "^1.9.34",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "18.2.0",
-    "react-native": "0.75.0-nightly-20240406-a05466c5b"
+    "react-native": "0.75.0-nightly-20240420-03a51da72"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ee6090277aad4b98818b1a3ecb913a23>>
+ * @generated SignedSource<<0e0858557eb27f3eebfecae18ee13c0b>>
  * @flow strict-local
  */
 
@@ -45,16 +45,18 @@ export type ReactNativeFeatureFlags = {
   enableBackgroundExecutor: Getter<boolean>,
   enableCleanTextInputYogaNode: Getter<boolean>,
   enableCustomDrawOrderFabric: Getter<boolean>,
-  enableFixForClippedSubviewsCrash: Getter<boolean>,
   enableMicrotasks: Getter<boolean>,
   enableMountHooksAndroid: Getter<boolean>,
   enableSpannableBuildingUnification: Getter<boolean>,
   enableSynchronousStateUpdates: Getter<boolean>,
   enableUIConsistency: Getter<boolean>,
+  forceBatchingMountItemsOnAndroid: Getter<boolean>,
   inspectorEnableCxxInspectorPackagerConnection: Getter<boolean>,
   inspectorEnableModernCDPRegistry: Getter<boolean>,
+  preventDoubleTextMeasure: Getter<boolean>,
   useModernRuntimeScheduler: Getter<boolean>,
   useNativeViewConfigsInBridgelessMode: Getter<boolean>,
+  useStateAlignmentMechanism: Getter<boolean>,
 }
 
 /**
@@ -117,10 +119,6 @@ export const enableCleanTextInputYogaNode: Getter<boolean> = createNativeFlagGet
  * When enabled, Fabric will use customDrawOrder in ReactViewGroup (similar to old architecture).
  */
 export const enableCustomDrawOrderFabric: Getter<boolean> = createNativeFlagGetter('enableCustomDrawOrderFabric', false);
-/**
- * Attempt at fixing a crash related to subview clipping on Android. This is a kill switch for the fix
- */
-export const enableFixForClippedSubviewsCrash: Getter<boolean> = createNativeFlagGetter('enableFixForClippedSubviewsCrash', false);
 /**
  * Enables the use of microtasks in Hermes (scheduling) and RuntimeScheduler (execution).
  */
@@ -141,6 +139,10 @@ export const enableSynchronousStateUpdates: Getter<boolean> = createNativeFlagGe
  * Ensures that JavaScript always has a consistent view of the state of the UI (e.g.: commits done in other threads are not immediately propagated to JS during its execution).
  */
 export const enableUIConsistency: Getter<boolean> = createNativeFlagGetter('enableUIConsistency', false);
+/**
+ * Forces the mounting layer on Android to always batch mount items instead of dispatching them immediately. This might fix some crashes related to synchronous state updates, where some views dispatch state updates during mount.
+ */
+export const forceBatchingMountItemsOnAndroid: Getter<boolean> = createNativeFlagGetter('forceBatchingMountItemsOnAndroid', false);
 /**
  * Flag determining if the C++ implementation of InspectorPackagerConnection should be used instead of the per-platform one. This flag is global and should not be changed across React Host lifetimes.
  */
@@ -149,6 +151,10 @@ export const inspectorEnableCxxInspectorPackagerConnection: Getter<boolean> = cr
  * Flag determining if the modern CDP backend should be enabled. This flag is global and should not be changed across React Host lifetimes.
  */
 export const inspectorEnableModernCDPRegistry: Getter<boolean> = createNativeFlagGetter('inspectorEnableModernCDPRegistry', false);
+/**
+ * When enabled, ParagraphShadowNode will no longer call measure twice.
+ */
+export const preventDoubleTextMeasure: Getter<boolean> = createNativeFlagGetter('preventDoubleTextMeasure', false);
 /**
  * When enabled, it uses the modern fork of RuntimeScheduler that allows scheduling tasks with priorities from any thread.
  */
@@ -157,6 +163,10 @@ export const useModernRuntimeScheduler: Getter<boolean> = createNativeFlagGetter
  * When enabled, the native view configs are used in bridgeless mode.
  */
 export const useNativeViewConfigsInBridgelessMode: Getter<boolean> = createNativeFlagGetter('useNativeViewConfigsInBridgelessMode', false);
+/**
+ * When enabled, it uses optimised state reconciliation algorithm.
+ */
+export const useStateAlignmentMechanism: Getter<boolean> = createNativeFlagGetter('useStateAlignmentMechanism', false);
 
 /**
  * Overrides the feature flags with the provided methods.

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<9e0489da8f2a77565018ee983f7fae7e>>
+ * @generated SignedSource<<4ba909c3b360c6a4fc9c6ed5996b6a13>>
  * @flow strict-local
  */
 
@@ -28,16 +28,18 @@ export interface Spec extends TurboModule {
   +enableBackgroundExecutor?: () => boolean;
   +enableCleanTextInputYogaNode?: () => boolean;
   +enableCustomDrawOrderFabric?: () => boolean;
-  +enableFixForClippedSubviewsCrash?: () => boolean;
   +enableMicrotasks?: () => boolean;
   +enableMountHooksAndroid?: () => boolean;
   +enableSpannableBuildingUnification?: () => boolean;
   +enableSynchronousStateUpdates?: () => boolean;
   +enableUIConsistency?: () => boolean;
+  +forceBatchingMountItemsOnAndroid?: () => boolean;
   +inspectorEnableCxxInspectorPackagerConnection?: () => boolean;
   +inspectorEnableModernCDPRegistry?: () => boolean;
+  +preventDoubleTextMeasure?: () => boolean;
   +useModernRuntimeScheduler?: () => boolean;
   +useNativeViewConfigsInBridgelessMode?: () => boolean;
+  +useStateAlignmentMechanism?: () => boolean;
 }
 
 const NativeReactNativeFeatureFlags: ?Spec = TurboModuleRegistry.get<Spec>(