react-native-windows 0.72.14 → 0.73.0-preview.1

package/Libraries/MutationObserver/__mocks__/NativeMutationObserver.js

@@ -0,0 +1,327 @@
+/**
+ * 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
+ */
+
+/**
+ * This is a mock of `NativeMutationObserver` implementing the same logic as the
+ * native module and integrating with the existing mock for `FabricUIManager`.
+ * This allows us to test all the JavaScript code for IntersectionObserver in
+ * JavaScript as an integration test using only public APIs.
+ */
+
+import type {NodeSet} from '../../ReactNative/FabricUIManager';
+import type {RootTag} from '../../ReactNative/RootTag';
+import type {
+  InternalInstanceHandle,
+  Node,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  MutationObserverId,
+  NativeMutationObserverObserveOptions,
+  NativeMutationRecord,
+  Spec,
+} from '../NativeMutationObserver';
+
+import ReadOnlyNode from '../../DOM/Nodes/ReadOnlyNode';
+import {
+  type NodeMock,
+  type UIManagerCommitHook,
+  fromNode,
+  getFabricUIManager,
+  getNodeInChildSet,
+} from '../../ReactNative/__mocks__/FabricUIManager';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+
+let pendingRecords: Array<NativeMutationRecord> = [];
+let callback: ?() => void;
+let getPublicInstance: ?(instanceHandle: InternalInstanceHandle) => mixed;
+let observersByRootTag: Map<
+  RootTag,
+  Map<MutationObserverId, {deep: Set<Node>, shallow: Set<Node>}>,
+> = new Map();
+
+const FabricUIManagerMock = nullthrows(getFabricUIManager());
+
+function getMockDataFromShadowNode(node: mixed): NodeMock {
+  // $FlowExpectedError[incompatible-call]
+  return fromNode(node);
+}
+
+function castToNode(node: mixed): Node {
+  // $FlowExpectedError[incompatible-return]
+  return node;
+}
+
+const NativeMutationMock = {
+  observe: (options: NativeMutationObserverObserveOptions): void => {
+    const targetShadowNode = castToNode(options.targetShadowNode);
+    const rootTag = getMockDataFromShadowNode(options.targetShadowNode).rootTag;
+
+    let observers = observersByRootTag.get(rootTag);
+    if (observers == null) {
+      observers = new Map();
+      observersByRootTag.set(rootTag, observers);
+    }
+    let observations = observers.get(options.mutationObserverId);
+    if (observations == null) {
+      observations = {deep: new Set(), shallow: new Set()};
+      observers.set(options.mutationObserverId, observations);
+    }
+
+    const isTargetBeingObserved =
+      observations.deep.has(targetShadowNode) ||
+      observations.shallow.has(targetShadowNode);
+    invariant(!isTargetBeingObserved, 'unexpected duplicate call to observe');
+
+    if (options.subtree) {
+      observations.deep.add(targetShadowNode);
+    } else {
+      observations.shallow.add(targetShadowNode);
+    }
+  },
+  unobserve: (mutationObserverId: number, target: mixed): void => {
+    const targetShadowNode = castToNode(target);
+
+    const observers = observersByRootTag.get(
+      getMockDataFromShadowNode(targetShadowNode).rootTag,
+    );
+    const observations = observers?.get(mutationObserverId);
+    invariant(observations != null, 'unexpected call to unobserve');
+
+    const isTargetBeingObserved =
+      observations.deep.has(targetShadowNode) ||
+      observations.shallow.has(targetShadowNode);
+    invariant(isTargetBeingObserved, 'unexpected call to unobserve');
+
+    observations.deep.delete(targetShadowNode);
+    observations.shallow.delete(targetShadowNode);
+  },
+  connect: (
+    notifyMutationObserversCallback: () => void,
+    getPublicInstanceFromInstanceHandle: (
+      instanceHandle: InternalInstanceHandle,
+    ) => mixed,
+  ): void => {
+    invariant(callback == null, 'unexpected call to connect');
+    callback = notifyMutationObserversCallback;
+    getPublicInstance = getPublicInstanceFromInstanceHandle;
+    FabricUIManagerMock.__addCommitHook(NativeMutationObserverCommitHook);
+  },
+  disconnect: (): void => {
+    invariant(callback != null, 'unexpected call to disconnect');
+    callback = null;
+    FabricUIManagerMock.__removeCommitHook(NativeMutationObserverCommitHook);
+  },
+  takeRecords: (): $ReadOnlyArray<NativeMutationRecord> => {
+    const currentRecords = pendingRecords;
+    pendingRecords = [];
+    return currentRecords;
+  },
+};
+
+(NativeMutationMock: Spec);
+
+export default NativeMutationMock;
+
+const NativeMutationObserverCommitHook: UIManagerCommitHook = {
+  shadowTreeWillCommit: (rootTag, oldChildSet, newChildSet) => {
+    runMutationObservations(rootTag, oldChildSet, newChildSet);
+  },
+};
+
+function runMutationObservations(
+  rootTag: RootTag,
+  oldChildSet: ?NodeSet,
+  newChildSet: NodeSet,
+): void {
+  const observers = observersByRootTag.get(rootTag);
+  if (!observers) {
+    return;
+  }
+
+  const newRecords: Array<NativeMutationRecord> = [];
+
+  for (const [mutationObserverId, observations] of observers) {
+    const processedNodes: Set<Node> = new Set();
+    for (const targetShadowNode of observations.deep) {
+      runMutationObservation({
+        mutationObserverId,
+        targetShadowNode,
+        subtree: true,
+        oldChildSet,
+        newChildSet,
+        newRecords,
+        processedNodes,
+      });
+    }
+    for (const targetShadowNode of observations.shallow) {
+      runMutationObservation({
+        mutationObserverId,
+        targetShadowNode,
+        subtree: false,
+        oldChildSet,
+        newChildSet,
+        newRecords,
+        processedNodes,
+      });
+    }
+  }
+
+  for (const record of newRecords) {
+    pendingRecords.push(record);
+  }
+
+  notifyObserversIfNecessary();
+}
+
+function findNodeOfSameFamily(list: NodeSet, node: Node): ?Node {
+  for (const current of list) {
+    if (fromNode(current).reactTag === fromNode(node).reactTag) {
+      return current;
+    }
+  }
+  return;
+}
+
+function recordMutations({
+  mutationObserverId,
+  targetShadowNode,
+  subtree,
+  oldNode,
+  newNode,
+  newRecords,
+  processedNodes,
+}: {
+  mutationObserverId: MutationObserverId,
+  targetShadowNode: Node,
+  subtree: boolean,
+  oldNode: Node,
+  newNode: Node,
+  newRecords: Array<NativeMutationRecord>,
+  processedNodes: Set<Node>,
+}): void {
+  // If the nodes are referentially equal, their children are also the same.
+  if (oldNode === newNode || processedNodes.has(newNode)) {
+    return;
+  }
+
+  processedNodes.add(newNode);
+
+  const oldChildren = fromNode(oldNode).children;
+  const newChildren = fromNode(newNode).children;
+
+  const addedNodes = [];
+  const removedNodes = [];
+
+  // Check for removed nodes (and equal nodes for further inspection later)
+  for (const oldChild of oldChildren) {
+    const newChild = findNodeOfSameFamily(newChildren, oldChild);
+    if (newChild == null) {
+      removedNodes.push(oldChild);
+    } else if (subtree) {
+      recordMutations({
+        mutationObserverId,
+        targetShadowNode,
+        subtree,
+        oldNode: oldChild,
+        newNode: newChild,
+        newRecords,
+        processedNodes,
+      });
+    }
+  }
+
+  // Check for added nodes
+  for (const newChild of newChildren) {
+    const oldChild = findNodeOfSameFamily(oldChildren, newChild);
+    if (oldChild == null) {
+      addedNodes.push(newChild);
+    }
+  }
+
+  if (addedNodes.length > 0 || removedNodes.length > 0) {
+    newRecords.push({
+      mutationObserverId: mutationObserverId,
+      target: nullthrows(getPublicInstance)(
+        getMockDataFromShadowNode(targetShadowNode).instanceHandle,
+      ),
+      addedNodes: addedNodes.map(node => {
+        const readOnlyNode = nullthrows(getPublicInstance)(
+          fromNode(node).instanceHandle,
+        );
+        invariant(
+          readOnlyNode instanceof ReadOnlyNode,
+          'expected instance of ReadOnlyNode',
+        );
+        return readOnlyNode;
+      }),
+      removedNodes: removedNodes.map(node => {
+        const readOnlyNode = nullthrows(getPublicInstance)(
+          fromNode(node).instanceHandle,
+        );
+        invariant(
+          readOnlyNode instanceof ReadOnlyNode,
+          'expected instance of ReadOnlyNode',
+        );
+        return readOnlyNode;
+      }),
+    });
+  }
+}
+
+function runMutationObservation({
+  mutationObserverId,
+  targetShadowNode,
+  subtree,
+  oldChildSet,
+  newChildSet,
+  newRecords,
+  processedNodes,
+}: {
+  mutationObserverId: MutationObserverId,
+  targetShadowNode: Node,
+  subtree: boolean,
+  oldChildSet: ?NodeSet,
+  newChildSet: NodeSet,
+  newRecords: Array<NativeMutationRecord>,
+  processedNodes: Set<Node>,
+}): void {
+  if (!oldChildSet) {
+    return;
+  }
+
+  const oldTargetShadowNode = getNodeInChildSet(targetShadowNode, oldChildSet);
+  if (oldTargetShadowNode == null) {
+    return;
+  }
+
+  const newTargetShadowNode = getNodeInChildSet(targetShadowNode, newChildSet);
+  if (newTargetShadowNode == null) {
+    return;
+  }
+
+  recordMutations({
+    mutationObserverId,
+    targetShadowNode,
+    subtree,
+    oldNode: oldTargetShadowNode,
+    newNode: newTargetShadowNode,
+    newRecords,
+    processedNodes,
+  });
+}
+
+function notifyObserversIfNecessary(): void {
+  if (pendingRecords.length > 0) {
+    // We schedule these using regular tasks in native because microtasks are
+    // still not properly supported.
+    setTimeout(() => callback?.(), 0);
+  }
+}

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -103,6 +103,12 @@ const bubblingEventTypes = {
       bubbled: 'onPointerOver',
     },
   },
+  topClick: {
+    phasedRegistrationNames: {
+      captured: 'onClickCapture',
+      bubbled: 'onClick',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -135,9 +141,6 @@ const directEventTypes = {
   topMomentumScrollEnd: {
     registrationName: 'onMomentumScrollEnd',
   },
-  topClick: {
-    registrationName: 'onClick',
-  },
   topLoadingStart: {
     registrationName: 'onLoadingStart',
   },
@@ -162,6 +165,7 @@ const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
+  transformOrigin: true,
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
@@ -179,6 +183,7 @@ const validAttributesForNonEventProps = {
   accessibilityActions: true,
   accessibilityValue: true,
   importantForAccessibility: true,
+  role: true,
   rotation: true,
   scaleX: true,
   scaleY: true,
@@ -258,9 +263,19 @@ const validAttributesForNonEventProps = {
   top: true,
   bottom: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   position: true,
 
   style: ReactNativeStyleAttributes,
+
+  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -88,6 +88,12 @@ const bubblingEventTypes = {
   },
 
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topClick: {
+    phasedRegistrationNames: {
+      captured: 'onClickCapture',
+      bubbled: 'onClick',
+    },
+  },
   topPointerCancel: {
     phasedRegistrationNames: {
       captured: 'onPointerCancelCapture',
@@ -138,6 +144,18 @@ const bubblingEventTypes = {
       bubbled: 'onPointerOut',
     },
   },
+  topGotPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onGotPointerCaptureCapture',
+      bubbled: 'onGotPointerCapture',
+    },
+  },
+  topLostPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onLostPointerCaptureCapture',
+      bubbled: 'onLostPointerCapture',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -187,11 +205,13 @@ const validAttributesForNonEventProps = {
   overflow: true,
   shouldRasterizeIOS: true,
   transform: {diff: require('../Utilities/differ/matricesDiffer')},
+  transformOrigin: true,
   accessibilityRole: true,
   accessibilityState: true,
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,
+  role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
@@ -236,6 +256,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -308,6 +336,8 @@ const validAttributesForNonEventProps = {
   direction: true,
 
   style: ReactNativeStyleAttributes,
+
+  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events
@@ -342,6 +372,7 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onTouchCancel: true,
 
   // Pointer events
+  onClick: true,
   onPointerUp: true,
   onPointerDown: true,
   onPointerCancel: true,
@@ -350,6 +381,8 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onPointerLeave: true,
   onPointerOver: true,
   onPointerOut: true,
+  onGotPointerCapture: true,
+  onLostPointerCapture: true,
 });
 
 /**

package/Libraries/NativeComponent/BaseViewConfig.windows.js

@@ -83,8 +83,13 @@ const bubblingEventTypes = {
       captured: 'onTouchEndCapture',
     },
   },
-
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topClick: {
+    phasedRegistrationNames: {
+      captured: 'onClickCapture',
+      bubbled: 'onClick',
+    },
+  },
   topPointerCancel: {
     phasedRegistrationNames: {
       captured: 'onPointerCancelCapture',
@@ -135,6 +140,18 @@ const bubblingEventTypes = {
       bubbled: 'onPointerOut',
     },
   },
+  topGotPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onGotPointerCaptureCapture',
+      bubbled: 'onGotPointerCapture',
+    },
+  },
+  topLostPointerCapture: {
+    phasedRegistrationNames: {
+      captured: 'onLostPointerCaptureCapture',
+      bubbled: 'onLostPointerCapture',
+    },
+  },
 
   topKeyDown: {
     // [Windows]
@@ -182,9 +199,6 @@ const directEventTypes = {
   topMouseLeave: {
     registrationName: 'onMouseLeave',
   },
-  topClick: {
-    registrationName: 'onClick',
-  },
   // Windows]
 };
 
@@ -211,11 +225,13 @@ const validAttributesForNonEventProps = {
   overflow: true,
   shouldRasterizeIOS: true,
   transform: {diff: require('../Utilities/differ/matricesDiffer')},
+  transformOrigin: true,
   accessibilityRole: true,
   accessibilityState: true,
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,
+  role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
@@ -260,6 +276,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -331,6 +355,7 @@ const validAttributesForNonEventProps = {
 
   direction: true,
 
+  accessibilityLevel: true, // [Windows]
   accessibilityLiveRegion: true, // [Windows]
   accessibilityPosInSet: true, // [Windows]
   accessibilitySetSize: true, // [Windows]
@@ -344,6 +369,8 @@ const validAttributesForNonEventProps = {
   enableFocusRing: true, // [Windows]
 
   style: ReactNativeStyleAttributes,
+
+  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events
@@ -380,6 +407,7 @@ const validAttributesForEventProps = {
   onTouchCancel: true,
 
   // Pointer events
+  onClick: true,
   onPointerUp: true,
   onPointerDown: true,
   onPointerCancel: true,
@@ -388,6 +416,8 @@ const validAttributesForEventProps = {
   onPointerLeave: true,
   onPointerOver: true,
   onPointerOut: true,
+  onGotPointerCapture: true,
+  onLostPointerCapture: true,
 
   // [Windows
   // Mouse enter/leave events

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -38,11 +38,9 @@ export function setRuntimeConfigProvider(
     verify: boolean,
   },
 ): void {
-  invariant(
-    getRuntimeConfig == null,
-    'NativeComponentRegistry.setRuntimeConfigProvider() called more than once.',
-  );
-  getRuntimeConfig = runtimeConfigProvider;
+  if (getRuntimeConfig === undefined) {
+    getRuntimeConfig = runtimeConfigProvider;
+  }
 }
 
 /**

package/Libraries/NativeModules/specs/NativeSourceCode.js

@@ -12,19 +12,19 @@ import type {TurboModule} from '../../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
+export type SourceCodeConstants = {|
+  scriptURL: string,
+|};
+
 export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    scriptURL: string,
-  |};
+  +getConstants: () => SourceCodeConstants;
 }
 
 const NativeModule = TurboModuleRegistry.getEnforcing<Spec>('SourceCode');
 let constants = null;
 
 const NativeSourceCode = {
-  getConstants(): {|
-    scriptURL: string,
-  |} {
+  getConstants(): SourceCodeConstants {
     if (constants == null) {
       constants = NativeModule.getConstants();
     }

package/Libraries/Network/RCTNetworking.android.js

@@ -9,6 +9,7 @@
  */
 
 import type {RequestBody} from './convertRequestBody';
+import type {NativeResponseType} from './XMLHttpRequest';
 
 // Do not require the native RCTNetworking module directly! Use this wrapper module instead.
 // It will add the necessary requestId, so that you don't have to generate it yourself.
@@ -54,7 +55,7 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
     url: string,
     headers: Object,
     data: RequestBody,
-    responseType: 'text' | 'base64',
+    responseType: NativeResponseType,
     incrementalUpdates: boolean,
     timeout: number,
     callback: (requestId: number) => mixed,

package/Libraries/Network/XMLHttpRequest.js

@@ -13,12 +13,12 @@
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
+import EventTarget from 'event-target-shim';
 
 const BlobManager = require('../Blob/BlobManager');
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
-const EventTarget = require('event-target-shim');
 const invariant = require('invariant');
 
 const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging

package/Libraries/NewAppScreen/components/DebugInstructions.js

@@ -25,15 +25,15 @@ const DebugInstructions: () => Node = Platform.select({
   ios: () => (
     <Text>
       Press <Text style={styles.highlight}>Cmd + D</Text> in the simulator or{' '}
-      <Text style={styles.highlight}>Shake</Text> your device to open the React
-      Native debug menu.
+      <Text style={styles.highlight}>Shake</Text> your device to open the Dev
+      Menu.
     </Text>
   ),
   default: () => (
     <Text>
       Press <Text style={styles.highlight}>Cmd or Ctrl + M</Text> or{' '}
-      <Text style={styles.highlight}>Shake</Text> your device to open the React
-      Native debug menu.
+      <Text style={styles.highlight}>Shake</Text> your device to open the Dev
+      Menu.
     </Text>
   ),
 });

package/Libraries/NewAppScreen/components/DebugInstructions.windows.js

@@ -20,8 +20,8 @@ const styles = StyleSheet.create({
 
 const DebugInstructions = (): Node => (
   <Text>
-    Press <Text style={styles.highlight}>Ctrl+Shift+D</Text> to open the React
-    Native debug menu.
+    Press <Text style={styles.highlight}>Ctrl+Shift+D</Text> to open the Dev
+    Menu.
   </Text>
 );
 

package/Libraries/NewAppScreen/components/LearnMoreLinks.js

@@ -60,13 +60,20 @@ const links = [
   },
   {
     id: 7,
+    title: 'Debugging',
+    link: 'https://facebook.github.io/react-native/docs/debugging',
+    description:
+      'Learn about the tools available to debug and inspect your app.',
+  },
+  {
+    id: 8,
     title: 'Help',
-    link: 'https://reactnative.dev/help',
+    link: 'https://facebook.github.io/react-native/help',
     description:
       'Need more help? There are many other React Native developers who may have the answer.',
   },
   {
-    id: 8,
+    id: 9,
     title: 'Follow us on Twitter',
     link: 'https://twitter.com/reactnative',
     description: