@office-iss/react-native-win32 0.72.8 → 0.73.0-preview.2

package/Libraries/MutationObserver/MutationRecord.js

@@ -0,0 +1,82 @@
+/**
+ * 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
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import type ReadOnlyNode from '../DOM/Nodes/ReadOnlyNode';
+import type {NativeMutationRecord} from './NativeMutationObserver';
+
+import NodeList, {createNodeList} from '../DOM/OldStyleCollections/NodeList';
+
+export type MutationType = 'attributes' | 'characterData' | 'childList';
+
+/**
+ * The `MutationRecord` is a read-only interface that represents an individual
+ * DOM mutation observed by a `MutationObserver`.
+ *
+ * It is the object inside the array passed to the callback of a `MutationObserver`.
+ */
+export default class MutationRecord {
+  _target: ReactNativeElement;
+  _addedNodes: NodeList<ReadOnlyNode>;
+  _removedNodes: NodeList<ReadOnlyNode>;
+
+  constructor(nativeRecord: NativeMutationRecord) {
+    // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+    const target = (nativeRecord.target: ReactNativeElement);
+    this._target = target;
+    // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+    const addedNodes = (nativeRecord.addedNodes: $ReadOnlyArray<ReadOnlyNode>);
+    this._addedNodes = createNodeList(addedNodes);
+    const removedNodes =
+      // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+      (nativeRecord.removedNodes: $ReadOnlyArray<ReadOnlyNode>);
+    this._removedNodes = createNodeList(removedNodes);
+  }
+
+  get addedNodes(): NodeList<ReadOnlyNode> {
+    return this._addedNodes;
+  }
+
+  get attributeName(): string | null {
+    return null;
+  }
+
+  get nextSibling(): ReadOnlyNode | null {
+    return null;
+  }
+
+  get oldValue(): mixed | null {
+    return null;
+  }
+
+  get previousSibling(): ReadOnlyNode | null {
+    return null;
+  }
+
+  get removedNodes(): NodeList<ReadOnlyNode> {
+    return this._removedNodes;
+  }
+
+  get target(): ReactNativeElement {
+    return this._target;
+  }
+
+  get type(): MutationType {
+    return 'childList';
+  }
+}
+
+export function createMutationRecord(
+  entry: NativeMutationRecord,
+): MutationRecord {
+  return new MutationRecord(entry);
+}

package/Libraries/MutationObserver/NativeMutationObserver.js

@@ -0,0 +1,58 @@
+/**
+ * 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
+ */
+
+import type {TurboModule} from '../TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export type MutationObserverId = number;
+
+// These types are not supported by the codegen.
+type ShadowNode = mixed;
+type InstanceHandle = mixed;
+type ReactNativeElement = mixed;
+type ReadOnlyNode = mixed;
+
+export type NativeMutationRecord = {
+  mutationObserverId: MutationObserverId,
+  target: ReactNativeElement,
+  addedNodes: $ReadOnlyArray<ReadOnlyNode>,
+  removedNodes: $ReadOnlyArray<ReadOnlyNode>,
+  ...
+};
+
+export type NativeMutationObserverObserveOptions = {
+  mutationObserverId: number,
+  targetShadowNode: ShadowNode,
+  subtree: boolean,
+};
+
+export interface Spec extends TurboModule {
+  +observe: (options: NativeMutationObserverObserveOptions) => void;
+  +unobserve: (
+    mutationObserverId: number,
+    targetShadowNode: ShadowNode,
+  ) => void;
+  +connect: (
+    notifyMutationObservers: () => void,
+    // We need this to retain the public instance before React removes the
+    // reference to it (which happen in mutations that remove nodes, or when
+    // nodes are removed between the change and the callback is executed in JS).
+    getPublicInstanceFromInstanceHandle: (
+      instanceHandle: InstanceHandle,
+    ) => ReadOnlyNode,
+  ) => void;
+  +disconnect: () => void;
+  +takeRecords: () => $ReadOnlyArray<NativeMutationRecord>;
+}
+
+export default (TurboModuleRegistry.get<Spec>(
+  'NativeMutationObserverCxx',
+): ?Spec);

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.win32.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,
 });
 
 /**