@office-iss/react-native-win32 0.80.0-preview.1 → 0.81.0-preview.1

package/src/private/webapis/errors/DOMException.js

@@ -0,0 +1,166 @@
+/**
+ * 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
+ * @format
+ */
+
+/**
+ * This module implements the `DOMException` interface from WebIDL.
+ * See https://webidl.spec.whatwg.org/#idl-DOMException.
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
+const ERROR_NAME_TO_ERROR_CODE_MAP: {[string]: number} = {
+  IndexSizeError: 1,
+  HierarchyRequestError: 3,
+  WrongDocumentError: 4,
+  InvalidCharacterError: 5,
+  NoModificationAllowedError: 7,
+  NotFoundError: 8,
+  NotSupportedError: 9,
+  InUseAttributeError: 10,
+  InvalidStateError: 11,
+  SyntaxError: 12,
+  InvalidModificationError: 13,
+  NamespaceError: 14,
+  InvalidAccessError: 15,
+  TypeMismatchError: 17,
+  SecurityError: 18,
+  NetworkError: 19,
+  AbortError: 20,
+  URLMismatchError: 21,
+  QuotaExceededError: 22,
+  TimeoutError: 23,
+  InvalidNodeTypeError: 24,
+  DataCloneError: 25,
+};
+
+const ERROR_CODES: {[string]: number} = {
+  INDEX_SIZE_ERR: 1,
+  DOMSTRING_SIZE_ERR: 2,
+  HIERARCHY_REQUEST_ERR: 3,
+  WRONG_DOCUMENT_ERR: 4,
+  INVALID_CHARACTER_ERR: 5,
+  NO_DATA_ALLOWED_ERR: 6,
+  NO_MODIFICATION_ALLOWED_ERR: 7,
+  NOT_FOUND_ERR: 8,
+  NOT_SUPPORTED_ERR: 9,
+  INUSE_ATTRIBUTE_ERR: 10,
+  INVALID_STATE_ERR: 11,
+  SYNTAX_ERR: 12,
+  INVALID_MODIFICATION_ERR: 13,
+  NAMESPACE_ERR: 14,
+  INVALID_ACCESS_ERR: 15,
+  VALIDATION_ERR: 16,
+  TYPE_MISMATCH_ERR: 17,
+  SECURITY_ERR: 18,
+  NETWORK_ERR: 19,
+  ABORT_ERR: 20,
+  URL_MISMATCH_ERR: 21,
+  QUOTA_EXCEEDED_ERR: 22,
+  TIMEOUT_ERR: 23,
+  INVALID_NODE_TYPE_ERR: 24,
+  DATA_CLONE_ERR: 25,
+};
+
+/* eslint-disable @react-native/monorepo/require-extends-error */
+// $FlowExpectedError[incompatible-variance] name is writable in Error but not in DOMException, but this is how it works on Web.
+export default class DOMException extends Error {
+  static +INDEX_SIZE_ERR: 1;
+  static +DOMSTRING_SIZE_ERR: 2;
+  static +HIERARCHY_REQUEST_ERR: 3;
+  static +WRONG_DOCUMENT_ERR: 4;
+  static +INVALID_CHARACTER_ERR: 5;
+  static +NO_DATA_ALLOWED_ERR: 6;
+  static +NO_MODIFICATION_ALLOWED_ERR: 7;
+  static +NOT_FOUND_ERR: 8;
+  static +NOT_SUPPORTED_ERR: 9;
+  static +INUSE_ATTRIBUTE_ERR: 10;
+  static +INVALID_STATE_ERR: 11;
+  static +SYNTAX_ERR: 12;
+  static +INVALID_MODIFICATION_ERR: 13;
+  static +NAMESPACE_ERR: 14;
+  static +INVALID_ACCESS_ERR: 15;
+  static +VALIDATION_ERR: 16;
+  static +TYPE_MISMATCH_ERR: 17;
+  static +SECURITY_ERR: 18;
+  static +NETWORK_ERR: 19;
+  static +ABORT_ERR: 20;
+  static +URL_MISMATCH_ERR: 21;
+  static +QUOTA_EXCEEDED_ERR: 22;
+  static +TIMEOUT_ERR: 23;
+  static +INVALID_NODE_TYPE_ERR: 24;
+  static +DATA_CLONE_ERR: 25;
+
+  +INDEX_SIZE_ERR: 1;
+  +DOMSTRING_SIZE_ERR: 2;
+  +HIERARCHY_REQUEST_ERR: 3;
+  +WRONG_DOCUMENT_ERR: 4;
+  +INVALID_CHARACTER_ERR: 5;
+  +NO_DATA_ALLOWED_ERR: 6;
+  +NO_MODIFICATION_ALLOWED_ERR: 7;
+  +NOT_FOUND_ERR: 8;
+  +NOT_SUPPORTED_ERR: 9;
+  +INUSE_ATTRIBUTE_ERR: 10;
+  +INVALID_STATE_ERR: 11;
+  +SYNTAX_ERR: 12;
+  +INVALID_MODIFICATION_ERR: 13;
+  +NAMESPACE_ERR: 14;
+  +INVALID_ACCESS_ERR: 15;
+  +VALIDATION_ERR: 16;
+  +TYPE_MISMATCH_ERR: 17;
+  +SECURITY_ERR: 18;
+  +NETWORK_ERR: 19;
+  +ABORT_ERR: 20;
+  +URL_MISMATCH_ERR: 21;
+  +QUOTA_EXCEEDED_ERR: 22;
+  +TIMEOUT_ERR: 23;
+  +INVALID_NODE_TYPE_ERR: 24;
+  +DATA_CLONE_ERR: 25;
+
+  #name: string;
+  #code: number;
+
+  constructor(message?: string, name?: string) {
+    super(message);
+
+    if (typeof name === 'undefined') {
+      this.#name = 'Error';
+      this.#code = 0;
+    } else {
+      this.#name = String(name);
+      this.#code = ERROR_NAME_TO_ERROR_CODE_MAP[this.name] ?? 0;
+    }
+  }
+
+  get name(): string {
+    return this.#name;
+  }
+
+  get code(): number {
+    return this.#code;
+  }
+}
+
+for (const code in ERROR_CODES) {
+  Object.defineProperty(DOMException, code, {
+    enumerable: true,
+    value: ERROR_CODES[code],
+  });
+
+  Object.defineProperty(DOMException.prototype, code, {
+    enumerable: true,
+    value: ERROR_CODES[code],
+  });
+}
+
+setPlatformObject(DOMException, {
+  clone: exception => new DOMException(exception.message, exception.name),
+});

package/src/private/webapis/geometry/DOMRect.js

@@ -14,6 +14,7 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import DOMRectReadOnly, {type DOMRectInit} from './DOMRectReadOnly';
 
 // flowlint unsafe-getters-setters:off
@@ -80,3 +81,7 @@ export default class DOMRect extends DOMRectReadOnly {
     return new DOMRect(rect.x, rect.y, rect.width, rect.height);
   }
 }
+
+setPlatformObject(DOMRect, {
+  clone: rect => new DOMRect(rect.x, rect.y, rect.width, rect.height),
+});

package/src/private/webapis/geometry/DOMRectList.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // flowlint unsafe-getters-setters:off
@@ -14,6 +14,7 @@ import type {ArrayLike} from '../utils/ArrayLikeUtils';
 import type DOMRectReadOnly from './DOMRectReadOnly';
 
 import {createValueIterator} from '../utils/ArrayLikeUtils';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 // IMPORTANT: The Flow type definition for this module is defined in `DOMRectList.js.flow`
 // because Flow only supports indexers in classes in declaration files.
@@ -63,6 +64,8 @@ export default class DOMRectList implements Iterable<DOMRectReadOnly> {
   }
 }
 
+setPlatformObject(DOMRectList);
+
 /**
  * This is an internal method to create instances of `DOMRectList`,
  * which avoids leaking its constructor to end users.

package/src/private/webapis/geometry/DOMRectReadOnly.js

@@ -14,6 +14,8 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 // flowlint sketchy-null:off, unsafe-getters-setters:off
 
 export interface DOMRectInit {
@@ -186,3 +188,7 @@ export default class DOMRectReadOnly {
     this.#height = castToNumber(height);
   }
 }
+
+setPlatformObject(DOMRectReadOnly, {
+  clone: rect => new DOMRectReadOnly(rect.x, rect.y, rect.width, rect.height),
+});

package/src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks.js

@@ -12,6 +12,8 @@ import type {TurboModule} from '../../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../../Libraries/TurboModule/TurboModuleRegistry';
 
+export opaque type IdleCallbackID = mixed;
+
 export type RequestIdleCallbackOptions = {
   timeout?: number,
 };
@@ -25,8 +27,8 @@ export interface Spec extends TurboModule {
   +requestIdleCallback: (
     callback: (idleDeadline: IdleDeadline) => mixed,
     options?: RequestIdleCallbackOptions,
-  ) => mixed;
-  +cancelIdleCallback: (handle: mixed) => void;
+  ) => IdleCallbackID;
+  +cancelIdleCallback: (handle: IdleCallbackID) => void;
 }
 
 export default (TurboModuleRegistry.getEnforcing<Spec>(

package/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -14,6 +14,7 @@ import type {IntersectionObserverId} from './internals/IntersectionObserverManag
 import type IntersectionObserverEntry from './IntersectionObserverEntry';
 
 import ReactNativeElement from '../dom/nodes/ReactNativeElement';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import * as IntersectionObserverManager from './internals/IntersectionObserverManager';
 
 export type IntersectionObserverCallback = (
@@ -22,7 +23,7 @@ export type IntersectionObserverCallback = (
 ) => mixed;
 
 export interface IntersectionObserverInit {
-  // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
+  root?: ?ReactNativeElement;
   // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
   threshold?: number | $ReadOnlyArray<number>;
 
@@ -66,6 +67,7 @@ export default class IntersectionObserver {
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
   _rootThresholds: $ReadOnlyArray<number> | null;
+  _root: ReactNativeElement | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -84,16 +86,18 @@ export default class IntersectionObserver {
     }
 
     // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
-    if (options?.root != null) {
+    if (options?.rootMargin != null) {
       throw new TypeError(
-        "Failed to construct 'IntersectionObserver': root is not supported",
+        "Failed to construct 'IntersectionObserver': rootMargin is not supported",
       );
     }
 
-    // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
-    if (options?.rootMargin != null) {
+    if (
+      options?.root != null &&
+      !(options?.root instanceof ReactNativeElement)
+    ) {
       throw new TypeError(
-        "Failed to construct 'IntersectionObserver': rootMargin is not supported",
+        "Failed to construct 'IntersectionObserver': Failed to read the 'root' property from 'IntersectionObserverInit': The provided value is not of type '(null or ReactNativeElement)",
       );
     }
 
@@ -104,6 +108,7 @@ export default class IntersectionObserver {
       options?.threshold,
       this._rootThresholds != null, // only provide default if no rootThreshold
     );
+    this._root = options?.root ?? null;
   }
 
   /**
@@ -115,7 +120,7 @@ export default class IntersectionObserver {
    * NOTE: This cannot currently be configured and `root` is always `null`.
    */
   get root(): ReactNativeElement | null {
-    return null;
+    return this._root;
   }
 
   /**
@@ -182,6 +187,7 @@ export default class IntersectionObserver {
 
     const didStartObserving = IntersectionObserverManager.observe({
       intersectionObserverId: this._getOrCreateIntersectionObserverId(),
+      root: this._root,
       target,
     });
 
@@ -250,6 +256,8 @@ export default class IntersectionObserver {
   }
 }
 
+setPlatformObject(IntersectionObserver);
+
 /**
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).

package/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js

@@ -14,6 +14,7 @@ import type ReactNativeElement from '../dom/nodes/ReactNativeElement';
 import type {NativeIntersectionObserverEntry} from './specs/NativeIntersectionObserver';
 
 import DOMRectReadOnly from '../geometry/DOMRectReadOnly';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 /**
  * The [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
@@ -159,6 +160,8 @@ export default class IntersectionObserverEntry {
   }
 }
 
+setPlatformObject(IntersectionObserverEntry);
+
 export function createIntersectionObserverEntry(
   entry: NativeIntersectionObserverEntry,
   target: ReactNativeElement,

package/src/private/webapis/intersectionobserver/internals/IntersectionObserverManager.js

@@ -23,9 +23,11 @@ import type IntersectionObserver, {
   IntersectionObserverCallback,
 } from '../IntersectionObserver';
 import type IntersectionObserverEntry from '../IntersectionObserverEntry';
+import type {NativeIntersectionObserverToken} from '../specs/NativeIntersectionObserver';
 
 import * as Systrace from '../../../../../Libraries/Performance/Systrace';
 import warnOnce from '../../../../../Libraries/Utilities/warnOnce';
+import * as ReactNativeFeatureFlags from '../../../featureflags/ReactNativeFeatureFlags';
 import {
   getInstanceHandle,
   getNativeNodeReference,
@@ -74,6 +76,29 @@ const targetToShadowNodeMap: WeakMap<
   ReturnType<typeof getNativeNodeReference>,
 > = new WeakMap();
 
+const targetToTokenMap: WeakMap<
+  ReactNativeElement,
+  NativeIntersectionObserverToken,
+> = new WeakMap();
+
+let modernNativeIntersectionObserver =
+  NativeIntersectionObserver == null
+    ? null
+    : NativeIntersectionObserver.observeV2 == null ||
+        NativeIntersectionObserver.unobserveV2 == null
+      ? null
+      : {
+          observe: NativeIntersectionObserver.observeV2,
+          unobserve: NativeIntersectionObserver.unobserveV2,
+        };
+
+if (
+  modernNativeIntersectionObserver &&
+  !ReactNativeFeatureFlags.utilizeTokensInIntersectionObserver()
+) {
+  modernNativeIntersectionObserver = null;
+}
+
 /**
  * Registers the given intersection observer and returns a unique ID for it,
  * which is required to start observing targets.
@@ -115,9 +140,11 @@ export function unregisterObserver(
  */
 export function observe({
   intersectionObserverId,
+  root,
   target,
 }: {
   intersectionObserverId: IntersectionObserverId,
+  root: ?ReactNativeElement,
   target: ReactNativeElement,
 }): boolean {
   if (NativeIntersectionObserver == null) {
@@ -149,24 +176,47 @@ export function observe({
     return false;
   }
 
+  const rootNativeNodeReference =
+    root != null ? getNativeNodeReference(root) : null;
+  if (root != null && rootNativeNodeReference == null) {
+    console.error(
+      'IntersectionObserverManager: could not find shadow node for observation root',
+    );
+    return false;
+  }
+
   // Store the mapping between the instance handle and the target so we can
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  // Same for the mapping between the target and its shadow node.
-  targetToShadowNodeMap.set(target, targetNativeNodeReference);
+  if (modernNativeIntersectionObserver == null) {
+    // Same for the mapping between the target and its shadow node.
+    targetToShadowNodeMap.set(target, targetNativeNodeReference);
+  }
 
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
     isConnected = true;
   }
 
-  NativeIntersectionObserver.observe({
-    intersectionObserverId,
-    targetShadowNode: targetNativeNodeReference,
-    thresholds: registeredObserver.observer.thresholds,
-    rootThresholds: registeredObserver.observer.rnRootThresholds,
-  });
+  if (modernNativeIntersectionObserver == null) {
+    NativeIntersectionObserver.observe({
+      intersectionObserverId,
+      rootShadowNode: rootNativeNodeReference,
+      targetShadowNode: targetNativeNodeReference,
+      thresholds: registeredObserver.observer.thresholds,
+      rootThresholds: registeredObserver.observer.rnRootThresholds,
+    });
+  } else {
+    const token = modernNativeIntersectionObserver.observe({
+      intersectionObserverId,
+      rootShadowNode: rootNativeNodeReference,
+      targetShadowNode: targetNativeNodeReference,
+      thresholds: registeredObserver.observer.thresholds,
+      rootThresholds: registeredObserver.observer.rnRootThresholds,
+    });
+    targetToTokenMap.set(target, token);
+  }
 
   return true;
 }
@@ -190,18 +240,33 @@ export function unobserve(
     return;
   }
 
-  const targetNativeNodeReference = targetToShadowNodeMap.get(target);
-  if (targetNativeNodeReference == null) {
-    console.error(
-      'IntersectionObserverManager: could not find registration data for target',
+  if (modernNativeIntersectionObserver == null) {
+    const targetNativeNodeReference = targetToShadowNodeMap.get(target);
+    if (targetNativeNodeReference == null) {
+      console.error(
+        'IntersectionObserverManager: could not find registration data for target',
+      );
+      return;
+    }
+
+    NativeIntersectionObserver.unobserve(
+      intersectionObserverId,
+      targetNativeNodeReference,
     );
-    return;
-  }
+  } else {
+    const targetToken = targetToTokenMap.get(target);
+    if (targetToken == null) {
+      console.error(
+        'IntersectionObserverManager: could not find registration data for target',
+      );
+      return;
+    }
 
-  NativeIntersectionObserver.unobserve(
-    intersectionObserverId,
-    targetNativeNodeReference,
-  );
+    modernNativeIntersectionObserver.unobserve(
+      intersectionObserverId,
+      targetToken,
+    );
+  }
 }
 
 /**

package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -25,14 +25,26 @@ export type NativeIntersectionObserverEntry = {
 
 export type NativeIntersectionObserverObserveOptions = {
   intersectionObserverId: number,
+  rootShadowNode?: ?mixed,
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
   rootThresholds?: ?$ReadOnlyArray<number>,
 };
 
+export opaque type NativeIntersectionObserverToken = mixed;
+
 export interface Spec extends TurboModule {
+  // TODO(T223605846): Remove legacy observe method
   +observe: (options: NativeIntersectionObserverObserveOptions) => void;
+  // TODO(T223605846): Remove legacy unobserve method
   +unobserve: (intersectionObserverId: number, targetShadowNode: mixed) => void;
+  +observeV2?: (
+    options: NativeIntersectionObserverObserveOptions,
+  ) => NativeIntersectionObserverToken;
+  +unobserveV2?: (
+    intersectionObserverId: number,
+    token: NativeIntersectionObserverToken,
+  ) => void;
   +connect: (notifyIntersectionObserversCallback: () => void) => void;
   +disconnect: () => void;
   +takeRecords: () => $ReadOnlyArray<NativeIntersectionObserverEntry>;

package/src/private/webapis/mutationobserver/MutationObserver.js

@@ -14,6 +14,7 @@ import type {MutationObserverId} from './internals/MutationObserverManager';
 import type MutationRecord from './MutationRecord';
 
 import ReactNativeElement from '../dom/nodes/ReactNativeElement';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import * as MutationObserverManager from './internals/MutationObserverManager';
 
 export type MutationObserverCallback = (
@@ -42,6 +43,7 @@ export interface MutationObserverInit {
  */
 export default class MutationObserver {
   _callback: MutationObserverCallback;
+  // TODO: delete in the next version.
   _observationTargets: Set<ReactNativeElement> = new Set();
   _mutationObserverId: ?MutationObserverId;
 
@@ -115,46 +117,11 @@ export default class MutationObserver {
 
     const mutationObserverId = this._getOrCreateMutationObserverId();
 
-    // As per the spec, if the target is already being observed, we "reset"
-    // the observation and only use the last options used.
-    if (this._observationTargets.has(target)) {
-      MutationObserverManager.unobserve(mutationObserverId, target);
-    }
-
-    const didStartObserving = MutationObserverManager.observe({
+    MutationObserverManager.observe({
       mutationObserverId,
       target,
       subtree: Boolean(options?.subtree),
     });
-
-    if (didStartObserving) {
-      this._observationTargets.add(target);
-    }
-  }
-
-  _unobserve(target: ReactNativeElement): void {
-    if (!(target instanceof ReactNativeElement)) {
-      throw new TypeError(
-        "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'ReactNativeElement'.",
-      );
-    }
-
-    if (!this._observationTargets.has(target)) {
-      return;
-    }
-
-    const mutationObserverId = this._mutationObserverId;
-    if (mutationObserverId == null) {
-      return;
-    }
-
-    MutationObserverManager.unobserve(mutationObserverId, target);
-    this._observationTargets.delete(target);
-
-    if (this._observationTargets.size === 0) {
-      MutationObserverManager.unregisterObserver(mutationObserverId);
-      this._mutationObserverId = null;
-    }
   }
 
   /**
@@ -162,9 +129,15 @@ export default class MutationObserver {
    * The observer can be reused by calling its `observe()` method again.
    */
   disconnect(): void {
-    for (const target of this._observationTargets.keys()) {
-      this._unobserve(target);
+    const mutationObserverId = this._mutationObserverId;
+    if (mutationObserverId == null) {
+      return;
     }
+
+    MutationObserverManager.unobserveAll(mutationObserverId);
+
+    MutationObserverManager.unregisterObserver(mutationObserverId);
+    this._mutationObserverId = null;
   }
 
   _getOrCreateMutationObserverId(): MutationObserverId {
@@ -184,3 +157,5 @@ export default class MutationObserver {
     return this._mutationObserverId;
   }
 }
+
+setPlatformObject(MutationObserver);

package/src/private/webapis/mutationobserver/MutationRecord.js

@@ -15,6 +15,7 @@ import type ReadOnlyNode from '../dom/nodes/ReadOnlyNode';
 import type {NativeMutationRecord} from './specs/NativeMutationObserver';
 
 import NodeList, {createNodeList} from '../dom/oldstylecollections/NodeList';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 export type MutationType = 'attributes' | 'characterData' | 'childList';
 
@@ -75,6 +76,8 @@ export default class MutationRecord {
   }
 }
 
+setPlatformObject(MutationRecord);
+
 export function createMutationRecord(
   entry: NativeMutationRecord,
 ): MutationRecord {