@office-iss/react-native-win32 0.0.0-canary.257 → 0.0.0-canary.258

package/Libraries/Text/Text.win32.js

@@ -11,6 +11,7 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -18,6 +19,7 @@ import processColor from '../StyleSheet/processColor';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import TextOptimized from './TextOptimized';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -26,7 +28,7 @@ import {useContext, useMemo, useState} from 'react';
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
+const TextLegacy: React.AbstractComponent<
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 > = React.forwardRef((props: TextProps, forwardedRef) => {
@@ -340,7 +342,7 @@ const Text: React.AbstractComponent<
   );
 });
 
-Text.displayName = 'Text';
+TextLegacy.displayName = 'TextLegacy';
 
 /**
  * Returns false until the first time `newValue` is true, after which this will
@@ -370,4 +372,17 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  if (ReactNativeFeatureFlags.shouldUseOptimizedText()) {
+    return <TextOptimized {...props} ref={forwardedRef} />;
+  } else {
+    return <TextLegacy {...props} ref={forwardedRef} />;
+  }
+});
+
+Text.displayName = 'Text';
+
 module.exports = Text;

package/index.js

@@ -9,6 +9,7 @@
  */
 
 'use strict';
+'use client';
 
 // APIs
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';

package/index.win32.js

@@ -9,6 +9,7 @@
  */
 
 'use strict';
+'use client';
 
 // APIs
 import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';

package/jest/mockComponent.js

@@ -16,7 +16,10 @@ module.exports = (moduleName, instanceMethods, isESModule) => {
   const React = require('react');
 
   const SuperClass =
-    typeof RealComponent === 'function' ? RealComponent : React.Component;
+    typeof RealComponent === 'function' &&
+    RealComponent.prototype.constructor instanceof React.Component
+      ? RealComponent
+      : React.Component;
 
   const name =
     RealComponent.displayName ||

package/overrides.json

@@ -7,19 +7,19 @@
     "**/__snapshots__/**",
     "src-win/rntypes/**"
   ],
-  "baseVersion": "0.75.0-nightly-20240618-5df5ed1a8",
+  "baseVersion": "0.76.0-nightly-20240701-9f6cb21ed",
   "overrides": [
     {
       "type": "derived",
       "file": ".flowconfig",
       "baseFile": ".flowconfig",
-      "baseHash": "75582b181be0cd6790f7c021bfafb761dfc42381"
+      "baseHash": "2b0a3c4f44b686f254516c51469500bf26c5b113"
     },
     {
       "type": "derived",
       "file": "src-win/index.win32.js",
       "baseFile": "packages/react-native/index.js",
-      "baseHash": "dd3b224f82882d17be0a79a368b293c9ac6599a0"
+      "baseHash": "2690130ef7a40e3fb37fc465979e69b1036cdae8"
     },
     {
       "type": "platform",
@@ -317,7 +317,7 @@
       "type": "patch",
       "file": "src-win/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js",
       "baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js",
-      "baseHash": "e85290422895e30d58e2d804f11e73407a743282",
+      "baseHash": "46b6ee5d65a0c820dd0a2415bd8f43e5e8807bae",
       "issue": 7952
     },
     {
@@ -439,7 +439,7 @@
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.win32.js",
       "baseFile": "packages/react-native/Libraries/Text/Text.js",
-      "baseHash": "71c24366f3f0baa9a48ba34c08b255483bf77553"
+      "baseHash": "3b40ec7def4177ef81ad2eb84a0f95bc00cec041"
     },
     {
       "type": "derived",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.0.0-canary.257",
+  "version": "0.0.0-canary.258",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "repository": {
     "type": "git",
@@ -12,31 +12,31 @@
   "types": "types",
   "scripts": {
     "build": "rnw-scripts build",
-    "bundle": "rnw-scripts prepareBundle && react-native bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
+    "bundle": "rnw-scripts prepareBundle && npx @react-native-community/cli bundle --platform win32 --entry-file ../react-native-win32-tester/js/RNTesterApp.win32.js --bundle-output dist/win32/dev/js/RNTesterApp.bundle --assets-dest dist/win32/dev --sourcemap-output ./dist/win32/dev/js/RNTesterApp.bundle.map",
     "clean": "rnw-scripts clean",
     "flow-check": "rnw-scripts flow-check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
     "run-win32-devmain": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useDirectDebugger --useFastRefresh",
     "run-win32": "npx @office-iss/rex-win32@0.71.15-devmain.16607.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDirectDebugger --useFastRefresh",
-    "start": "react-native start --projectRoot ../react-native-win32-tester",
+    "start": "npx @react-native-community/cli start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^29.6.3",
-    "@react-native-community/cli": "14.0.0-alpha.2",
-    "@react-native-community/cli-platform-android": "14.0.0-alpha.2",
-    "@react-native-community/cli-platform-ios": "14.0.0-alpha.2",
+    "@react-native-community/cli": "14.0.0-alpha.11",
+    "@react-native-community/cli-platform-android": "14.0.0-alpha.11",
+    "@react-native-community/cli-platform-ios": "14.0.0-alpha.11",
     "@react-native/assets": "1.0.0",
-    "@react-native/assets-registry": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/codegen": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/community-cli-plugin": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/gradle-plugin": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/js-polyfills": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/normalize-colors": "0.75.0-nightly-20240618-5df5ed1a8",
-    "@react-native/virtualized-lists": "0.75.0-nightly-20240618-5df5ed1a8",
+    "@react-native/assets-registry": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/codegen": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/community-cli-plugin": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/gradle-plugin": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/js-polyfills": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/normalize-colors": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native/virtualized-lists": "0.76.0-nightly-20240701-9f6cb21ed",
     "abort-controller": "^3.0.0",
     "anser": "^1.4.9",
     "ansi-regex": "^5.0.0",
@@ -57,7 +57,7 @@
     "pretty-format": "^26.5.2",
     "promise": "^8.3.0",
     "react-clone-referenced-element": "^1.0.1",
-    "react-devtools-core": "5.1.0",
+    "react-devtools-core": "^5.3.0",
     "react-refresh": "^0.14.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -65,17 +65,17 @@
     "semver": "^7.1.3",
     "stacktrace-parser": "^0.1.10",
     "whatwg-fetch": "^3.0.0",
-    "ws": "^6.2.2",
+    "ws": "^6.2.3",
     "yargs": "^17.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/eslint-parser": "^7.20.0",
-    "@react-native/metro-config": "0.75.0-nightly-20240614-8b53d41a8",
+    "@react-native/metro-config": "0.76.0-nightly-20240701-9f6cb21ed",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
-    "@rnw-scripts/eslint-config": "1.2.25",
-    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.29",
-    "@rnw-scripts/just-task": "2.3.42",
+    "@rnw-scripts/eslint-config": "1.2.26",
+    "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.30",
+    "@rnw-scripts/just-task": "2.3.43",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnx-kit/jest-preset": "^0.1.17",
     "@types/node": "^18.0.0",
@@ -87,14 +87,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "2.8.8",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.75.0-nightly-20240618-5df5ed1a8",
-    "react-native-platform-override": "^1.9.44",
+    "react-native": "0.76.0-nightly-20240701-9f6cb21ed",
+    "react-native-platform-override": "^1.9.45",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
-    "react-native": "0.75.0-nightly-20240618-5df5ed1a8"
+    "react-native": "0.76.0-nightly-20240701-9f6cb21ed"
   },
   "beachball": {
     "defaultNpmTag": "canary",

package/src/private/core/components/HScrollViewNativeComponents.js

@@ -0,0 +1,55 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
+
+import AndroidHorizontalScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent';
+import ScrollContentViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
+import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import Platform from '../../../../Libraries/Utilities/Platform';
+import AndroidHorizontalScrollContentViewNativeComponent from '../../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+import useSyncOnScroll from './useSyncOnScroll';
+import * as React from 'react';
+
+const HScrollViewNativeComponentForPlatform =
+  Platform.OS === 'android'
+    ? AndroidHorizontalScrollViewNativeComponent
+    : ScrollViewNativeComponent;
+
+export const HScrollViewNativeComponent: React.AbstractComponent<
+  ScrollViewNativeProps,
+  TScrollViewNativeImperativeHandle,
+  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
+> = function HScrollViewNativeComponent(props: {
+  ...ScrollViewNativeProps,
+  ref?: React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+  ...
+}): React.Node {
+  const [ref, enableSyncOnScroll] = useSyncOnScroll(props.ref);
+  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
+  // changed. Notably, `props.children` will be the same, allowing React to
+  // bail out during reconciliation.
+  return (
+    <HScrollViewNativeComponentForPlatform
+      {...props}
+      ref={ref}
+      enableSyncOnScroll={enableSyncOnScroll}
+    />
+  );
+};
+
+export const HScrollContentViewNativeComponent: HostComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? AndroidHorizontalScrollContentViewNativeComponent
+    : ScrollContentViewNativeComponent;

package/src/private/core/components/VScrollViewNativeComponents.js

@@ -0,0 +1,47 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
+
+import ScrollContentViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
+import ScrollViewNativeComponent from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import View from '../../../../Libraries/Components/View/View';
+import Platform from '../../../../Libraries/Utilities/Platform';
+import useSyncOnScroll from './useSyncOnScroll';
+import * as React from 'react';
+
+export const VScrollViewNativeComponent: React.AbstractComponent<
+  ScrollViewNativeProps,
+  TScrollViewNativeImperativeHandle,
+  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
+> = function VScrollViewNativeComponent(props: {
+  ...ScrollViewNativeProps,
+  ref?: React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+  ...
+}): React.Node {
+  const [ref, enableSyncOnScroll] = useSyncOnScroll(props.ref);
+  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
+  // changed. Notably, `props.children` will be the same, allowing React to
+  // bail out during reconciliation.
+  return (
+    <ScrollViewNativeComponent
+      {...props}
+      ref={ref}
+      enableSyncOnScroll={enableSyncOnScroll}
+    />
+  );
+};
+
+export const VScrollContentViewNativeComponent: HostComponent<ViewProps> =
+  Platform.OS === 'android' ? View : ScrollContentViewNativeComponent;

package/src/private/core/components/useSyncOnScroll.js

@@ -0,0 +1,48 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import type {ScrollViewNativeProps} from '../../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
+import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+
+import * as React from 'react';
+import {useImperativeHandle, useRef, useState} from 'react';
+
+export type TScrollViewNativeComponentInstance = React.ElementRef<
+  HostComponent<ScrollViewNativeProps>,
+>;
+
+export type TScrollViewNativeImperativeHandle = {
+  componentRef: React.RefObject<TScrollViewNativeComponentInstance | null>,
+  unstable_setEnableSyncOnScroll: (enabled: true) => void,
+};
+
+/**
+ * Hook used by `HScrollViewNativeComponent` and `VScrollViewNativeComponent`
+ * to make an implementation of `unstable_setEnableSyncOnScroll` available that
+ * does not require updating all `ScrollView` children.
+ */
+export default function useSyncOnScroll(
+  inputRef: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
+): [React.RefSetter<TScrollViewNativeComponentInstance | null>, true | void] {
+  const componentRef = useRef<TScrollViewNativeComponentInstance | null>(null);
+  const [enableSyncOnScroll, setEnableSyncOnScroll] = useState<true | void>();
+
+  useImperativeHandle<TScrollViewNativeImperativeHandle>(inputRef, () => {
+    return {
+      componentRef,
+      unstable_setEnableSyncOnScroll(enabled: true): void {
+        setEnableSyncOnScroll(enabled);
+      },
+    };
+  }, []);
+
+  return [componentRef, enableSyncOnScroll];
+}

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<<870e25c844e692bb04ee49fe20cd3baf>>
+ * @generated SignedSource<<522f11a571457cb932f451cf81bd384a>>
  * @flow strict-local
  */
 
@@ -32,6 +32,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   enableAccessToHostTreeInFabric: Getter<boolean>,
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
+  shouldUseOptimizedText: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
 };
@@ -51,6 +52,7 @@ export type ReactNativeFeatureFlags = {
   enableMicrotasks: Getter<boolean>,
   enableSynchronousStateUpdates: Getter<boolean>,
   enableUIConsistency: Getter<boolean>,
+  fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean>,
   fixStoppedSurfaceRemoveDeleteTreeUIFrameCallbackLeak: Getter<boolean>,
   forceBatchingMountItemsOnAndroid: Getter<boolean>,
   fuseboxEnabledDebug: Getter<boolean>,
@@ -96,6 +98,11 @@ export const isLayoutAnimationEnabled: Getter<boolean> = createJavaScriptFlagGet
  */
 export const shouldUseAnimatedObjectForTransform: Getter<boolean> = createJavaScriptFlagGetter('shouldUseAnimatedObjectForTransform', false);
 
+/**
+ * Use optimized version of <Text /> component.
+ */
+export const shouldUseOptimizedText: Getter<boolean> = createJavaScriptFlagGetter('shouldUseOptimizedText', false);
+
 /**
  * removeClippedSubviews prop will be used as the default in FlatList on iOS to match Android
  */
@@ -150,6 +157,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);
+/**
+ * Uses the default event priority instead of the discreet event priority by default when dispatching events from Fabric to React.
+ */
+export const fixMappingOfEventPrioritiesBetweenFabricAndReact: Getter<boolean> = createNativeFlagGetter('fixMappingOfEventPrioritiesBetweenFabricAndReact', false);
 /**
  * Fixes a leak in SurfaceMountingManager.mRemoveDeleteTreeUIFrameCallback
  */

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<<6922b452333fc62a263bd77d42afbbbe>>
+ * @generated SignedSource<<6715ba4954b31464c591597c53a2a0de>>
  * @flow strict-local
  */
 
@@ -34,6 +34,7 @@ export interface Spec extends TurboModule {
   +enableMicrotasks?: () => boolean;
   +enableSynchronousStateUpdates?: () => boolean;
   +enableUIConsistency?: () => boolean;
+  +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
   +fixStoppedSurfaceRemoveDeleteTreeUIFrameCallbackLeak?: () => boolean;
   +forceBatchingMountItemsOnAndroid?: () => boolean;
   +fuseboxEnabledDebug?: () => boolean;

package/src/private/specs/modules/NativeSampleTurboModule.js

@@ -12,7 +12,10 @@ import type {
   RootTag,
   TurboModule,
 } from '../../../../Libraries/TurboModule/RCTExport';
-import type {UnsafeObject} from '../../../../Libraries/Types/CodegenTypes';
+import type {
+  EventEmitter,
+  UnsafeObject,
+} from '../../../../Libraries/Types/CodegenTypes';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
@@ -21,7 +24,17 @@ export enum EnumInt {
   B = 42,
 }
 
+export type ObjectStruct = {
+  a: number,
+  b: string,
+  c?: ?string,
+};
+
 export interface Spec extends TurboModule {
+  +onPress: EventEmitter<void>;
+  +onClick: EventEmitter<string>;
+  +onChange: EventEmitter<ObjectStruct>;
+  +onSubmit: EventEmitter<ObjectStruct[]>;
   // Exported methods.
   +getConstants: () => {|
     const1: boolean,