@office-iss/react-native-win32 0.72.6 → 0.73.0-preview.1

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -10,6 +10,7 @@
 
 import type {IEventEmitter} from '../vendor/emitter/EventEmitter';
 
+import {beginEvent, endEvent} from '../Performance/Systrace';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 // FIXME: use typed events
@@ -21,12 +22,22 @@ type RCTDeviceEventDefinitions = $FlowFixMe;
  *
  * NativeModules that emit events should instead subclass `NativeEventEmitter`.
  */
-const RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions> =
-  new EventEmitter();
+class RCTDeviceEventEmitter extends EventEmitter<RCTDeviceEventDefinitions> {
+  // Add systrace to RCTDeviceEventEmitter.emit method for debugging
+  emit<TEvent: $Keys<RCTDeviceEventDefinitions>>(
+    eventType: TEvent,
+    ...args: RCTDeviceEventDefinitions[TEvent]
+  ): void {
+    beginEvent(() => `RCTDeviceEventEmitter.emit#${eventType}`);
+    super.emit(eventType, ...args);
+    endEvent();
+  }
+}
+const instance = new RCTDeviceEventEmitter();
 
 Object.defineProperty(global, '__rctDeviceEventEmitter', {
   configurable: true,
-  value: RCTDeviceEventEmitter,
+  value: instance,
 });
 
-export default (RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions>);
+export default (instance: IEventEmitter<RCTDeviceEventDefinitions>);

package/Libraries/Image/Image.android.js

@@ -112,7 +112,7 @@ export type ImageComponentStatics = $ReadOnly<{|
   getSizeWithHeaders: typeof getSizeWithHeaders,
   prefetch: typeof prefetch,
   prefetchWithMetadata: typeof prefetchWithMetadata,
-  abortPrefetch: typeof abortPrefetch,
+  abortPrefetch?: typeof abortPrefetch,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
 |}>;
@@ -197,11 +197,14 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   };
 
   const objectFit =
+    // $FlowFixMe[prop-missing]
     style && style.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
+      ? // $FlowFixMe[incompatible-call]
+        convertObjectFitToResizeMode(style.objectFit)
       : null;
   // $FlowFixMe[prop-missing]
   const resizeMode =
+    // $FlowFixMe[prop-missing]
     objectFit || props.resizeMode || (style && style.resizeMode) || 'cover';
 
   return (
@@ -220,7 +223,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
               if (hasTextAncestor) {
                 return (
                   <TextInlineImageNativeComponent
+                    // $FlowFixMe[incompatible-type]
                     style={style}
+                    // $FlowFixMe[incompatible-type]
                     resizeMode={resizeMode}
                     headers={nativeProps.headers}
                     src={sources}
@@ -232,6 +237,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
               return (
                 <ImageViewNativeComponent
                   {...nativePropsWithAnalytics}
+                  // $FlowFixMe[incompatible-type]
                   resizeMode={resizeMode}
                 />
               );

package/Libraries/Image/Image.d.ts

@@ -223,7 +223,7 @@ export interface ImagePropsBase
    *
    * The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).
    */
-  source: ImageSourcePropType;
+  source?: ImageSourcePropType | undefined;
 
   /**
    * A string representing the resource identifier for the image. Similar to

package/Libraries/Image/Image.ios.js

@@ -91,6 +91,7 @@ export type ImageComponentStatics = $ReadOnly<{|
   getSizeWithHeaders: typeof getSizeWithHeaders,
   prefetch: typeof prefetch,
   prefetchWithMetadata: typeof prefetchWithMetadata,
+  abortPrefetch?: number => void,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
 |}>;
@@ -132,7 +133,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   const objectFit =
     // $FlowFixMe[prop-missing]
     style && style.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
+      ? // $FlowFixMe[incompatible-call]
+        convertObjectFitToResizeMode(style.objectFit)
       : null;
   const resizeMode =
     // $FlowFixMe[prop-missing]
@@ -177,6 +179,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={forwardedRef}
             style={style}
+            // $FlowFixMe[incompatible-type]
             resizeMode={resizeMode}
             tintColor={tintColor}
             source={sources}

package/Libraries/Image/Image.win32.js

@@ -114,6 +114,7 @@ export type ImageComponentStatics = $ReadOnly<{|
   getSizeWithHeaders: typeof getSizeWithHeaders,
   prefetch: typeof prefetch,
   prefetchWithMetadata: typeof prefetchWithMetadata,
+  abortPrefetch?: number => void,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
 |}>;
@@ -155,7 +156,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   const objectFit =
     // $FlowFixMe[prop-missing]
     style && style.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
+      ? // $FlowFixMe[incompatible-call]
+        convertObjectFitToResizeMode(style.objectFit)
       : null;
   const resizeMode =
     // $FlowFixMe[prop-missing]
@@ -209,12 +211,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             {analyticTag => {
               return (
                 <ImageViewNativeComponent
-                  {...restProps}
                   accessibilityState={_accessibilityState}
+                  {...restProps}
                   accessible={props.alt !== undefined ? true : props.accessible}
-                  accessibilityLabel={accessibilityLabel}
+                  accessibilityLabel={accessibilityLabel ?? props.alt}
                   ref={forwardedRef}
                   style={style}
+                  // $FlowFixMe[incompatible-type]
                   resizeMode={resizeMode}
                   tintColor={tintColor}
                   source={sources}

package/Libraries/Image/ImageBackground.js

@@ -84,6 +84,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
         importantForAccessibility={importantForAccessibility}
         style={style}
         ref={this._captureRef}>
+        {/* $FlowFixMe[incompatible-use] */}
         <Image
           {...props}
           importantForAccessibility={importantForAccessibility}
@@ -97,7 +98,9 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
               // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
               // This workaround should be removed after implementing proper support of
               // intrinsic content size of the <Image>.
+              // $FlowFixMe[prop-missing]
               width: flattenedStyle?.width,
+              // $FlowFixMe[prop-missing]
               height: flattenedStyle?.height,
             },
             imageStyle,

package/Libraries/Image/resolveAssetSource.win32.js

@@ -115,7 +115,7 @@ class AssetResolverLateScaleResolution {
       height: this._resolver.asset.height,
       uri: source,
       // Include scales info in returned object
-      // This may make it easier to do scale lookups on native side if we dont have that infomation from any kind of manifest
+      // This may make it easier to do scale lookups on native side if we don't have that information from any kind of manifest
       scales: this._resolver.asset.scales,
     };
   }

package/Libraries/Inspector/DevtoolsOverlay.js

@@ -52,11 +52,14 @@ export default function DevtoolsOverlay({
     function onAgentShowNativeHighlight(node: any) {
       clearTimeout(hideTimeoutId);
 
-      // `publicInstance` => Fabric
-      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      // `canonical.publicInstance` => Fabric
       // `canonical` => Legacy Fabric
       // `node` => Legacy renderer
-      const component = node.publicInstance ?? node.canonical ?? node;
+      const component =
+        (node.canonical && node.canonical.publicInstance) ??
+        // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+        node.canonical ??
+        node;
       if (!component || !component.measure) {
         return;
       }

package/Libraries/Inspector/NetworkOverlay.js

@@ -64,7 +64,7 @@ function getStringByValue(value: any): string {
   }
   if (typeof value === 'string' && value.length > 500) {
     return String(value)
-      .substr(0, 500)
+      .slice(0, 500)
       .concat('\n***TRUNCATED TO 500 CHARACTERS***');
   }
   return value;
@@ -88,7 +88,7 @@ function keyExtractor(request: NetworkRequestInfo): string {
  * Show all the intercepted network requests over the InspectorPanel.
  */
 class NetworkOverlay extends React.Component<Props, State> {
-  _requestsListView: ?React.ElementRef<typeof FlatList>;
+  _requestsListView: ?React.ElementRef<Class<FlatList<NetworkRequestInfo>>>;
   _detailScrollView: ?React.ElementRef<typeof ScrollView>;
 
   // Metrics are used to decide when if the request list should be sticky, and

package/Libraries/Interaction/JSEventLoopWatchdog.js

@@ -14,11 +14,7 @@ const infoLog = require('../Utilities/infoLog');
 
 type Handler = {
   onIterate?: () => void,
-  onStall: (params: {
-    lastInterval: number,
-    busyTime: number,
-    ...
-  }) => ?string,
+  onStall: (params: {lastInterval: number, busyTime: number, ...}) => ?string,
   ...
 };
 

package/Libraries/Interaction/PanResponder.js

@@ -574,9 +574,6 @@ function clearInteractionHandle(
   }
 }
 
-export type PanResponderInstance = $Call<
-  $PropertyType<typeof PanResponder, 'create'>,
-  PanResponderConfig,
->;
+export type PanResponderInstance = ReturnType<(typeof PanResponder)['create']>;
 
 export default PanResponder;

package/Libraries/IntersectionObserver/IntersectionObserver.js

@@ -0,0 +1,252 @@
+/**
+ * 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 IntersectionObserverEntry from './IntersectionObserverEntry';
+import type {IntersectionObserverId} from './IntersectionObserverManager';
+
+import ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import * as IntersectionObserverManager from './IntersectionObserverManager';
+
+export type IntersectionObserverCallback = (
+  entries: Array<IntersectionObserverEntry>,
+  observer: IntersectionObserver,
+) => mixed;
+
+type IntersectionObserverInit = {
+  // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
+  // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
+  threshold?: number | $ReadOnlyArray<number>,
+};
+
+/**
+ * The [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * provides a way to asynchronously observe changes in the intersection of a
+ * target element with an ancestor element or with a top-level document's
+ * viewport.
+ *
+ * The ancestor element or viewport is referred to as the root.
+ *
+ * When an `IntersectionObserver` is created, it's configured to watch for given
+ * ratios of visibility within the root.
+ *
+ * The configuration cannot be changed once the `IntersectionObserver` is
+ * created, so a given observer object is only useful for watching for specific
+ * changes in degree of visibility; however, you can watch multiple target
+ * elements with the same observer.
+ *
+ * This implementation only supports the `threshold` option at the moment
+ * (`root` and `rootMargin` are not supported).
+ */
+export default class IntersectionObserver {
+  _callback: IntersectionObserverCallback;
+  _thresholds: $ReadOnlyArray<number>;
+  _observationTargets: Set<ReactNativeElement> = new Set();
+  _intersectionObserverId: ?IntersectionObserverId;
+
+  constructor(
+    callback: IntersectionObserverCallback,
+    options?: IntersectionObserverInit,
+  ): void {
+    if (callback == null) {
+      throw new TypeError(
+        "Failed to construct 'IntersectionObserver': 1 argument required, but only 0 present.",
+      );
+    }
+
+    if (typeof callback !== 'function') {
+      throw new TypeError(
+        "Failed to construct 'IntersectionObserver': parameter 1 is not of type 'Function'.",
+      );
+    }
+
+    // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
+    if (options?.root != null) {
+      throw new TypeError(
+        "Failed to construct 'IntersectionObserver': root is not supported",
+      );
+    }
+
+    // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
+    if (options?.rootMargin != null) {
+      throw new TypeError(
+        "Failed to construct 'IntersectionObserver': rootMargin is not supported",
+      );
+    }
+
+    this._callback = callback;
+    this._thresholds = normalizeThresholds(options?.threshold);
+  }
+
+  /**
+   * The `ReactNativeElement` whose bounds are used as the bounding box when
+   * testing for intersection.
+   * If no `root` value was passed to the constructor or its value is `null`,
+   * the root view is used.
+   *
+   * NOTE: This cannot currently be configured and `root` is always `null`.
+   */
+  get root(): ReactNativeElement | null {
+    return null;
+  }
+
+  /**
+   * String with syntax similar to that of the CSS `margin` property.
+   * Each side of the rectangle represented by `rootMargin` is added to the
+   * corresponding side in the root element's bounding box before the
+   * intersection test is performed.
+   *
+   * NOTE: This cannot currently be configured and `rootMargin` is always
+   * `null`.
+   */
+  get rootMargin(): string {
+    return '0px 0px 0px 0px';
+  }
+
+  /**
+   * A list of thresholds, sorted in increasing numeric order, where each
+   * threshold is a ratio of intersection area to bounding box area of an
+   * observed target.
+   * Notifications for a target are generated when any of the thresholds are
+   * crossed for that target.
+   * If no value was passed to the constructor, `0` is used.
+   */
+  get thresholds(): $ReadOnlyArray<number> {
+    return this._thresholds;
+  }
+
+  /**
+   * Adds an element to the set of target elements being watched by the
+   * `IntersectionObserver`.
+   * One observer has one set of thresholds and one root, but can watch multiple
+   * target elements for visibility changes.
+   * To stop observing the element, call `IntersectionObserver.unobserve()`.
+   */
+  observe(target: ReactNativeElement): void {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'ReactNativeElement'.",
+      );
+    }
+
+    if (this._observationTargets.has(target)) {
+      return;
+    }
+
+    IntersectionObserverManager.observe({
+      intersectionObserverId: this._getOrCreateIntersectionObserverId(),
+      target,
+    });
+
+    this._observationTargets.add(target);
+  }
+
+  /**
+   * Instructs the `IntersectionObserver` to stop observing the specified target
+   * element.
+   */
+  unobserve(target: ReactNativeElement): void {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new TypeError(
+        "Failed to execute 'unobserve' on 'IntersectionObserver': parameter 1 is not of type 'ReactNativeElement'.",
+      );
+    }
+
+    if (!this._observationTargets.has(target)) {
+      return;
+    }
+
+    const intersectionObserverId = this._intersectionObserverId;
+    if (intersectionObserverId == null) {
+      // This is unexpected if the target is in `_observationTargets`.
+      console.error(
+        "Unexpected state in 'IntersectionObserver': could not find observer ID to unobserve target.",
+      );
+      return;
+    }
+
+    IntersectionObserverManager.unobserve(intersectionObserverId, target);
+    this._observationTargets.delete(target);
+
+    if (this._observationTargets.size === 0) {
+      IntersectionObserverManager.unregisterObserver(intersectionObserverId);
+      this._intersectionObserverId = null;
+    }
+  }
+
+  /**
+   * Stops watching all of its target elements for visibility changes.
+   */
+  disconnect(): void {
+    for (const target of this._observationTargets.keys()) {
+      this.unobserve(target);
+    }
+  }
+
+  _getOrCreateIntersectionObserverId(): IntersectionObserverId {
+    let intersectionObserverId = this._intersectionObserverId;
+    if (intersectionObserverId == null) {
+      intersectionObserverId = IntersectionObserverManager.registerObserver(
+        this,
+        this._callback,
+      );
+      this._intersectionObserverId = intersectionObserverId;
+    }
+    return intersectionObserverId;
+  }
+
+  // Only for tests
+  __getObserverID(): ?IntersectionObserverId {
+    return this._intersectionObserverId;
+  }
+}
+
+/**
+ * Converts the user defined `threshold` value into an array of sorted valid
+ * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
+ *
+ * @example
+ * normalizeThresholds(0.5);                // → [0.5]
+ * normalizeThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
+ * normalizeThresholds(['1', '0.5', '0']);  // → [0, 0.5, 1]
+ */
+function normalizeThresholds(threshold: mixed): $ReadOnlyArray<number> {
+  if (Array.isArray(threshold)) {
+    if (threshold.length > 0) {
+      return threshold.map(normalizeThresholdValue).sort();
+    } else {
+      return [0];
+    }
+  }
+
+  return [normalizeThresholdValue(threshold)];
+}
+
+function normalizeThresholdValue(threshold: mixed): number {
+  if (threshold == null) {
+    return 0;
+  }
+
+  const thresholdAsNumber = Number(threshold);
+  if (!Number.isFinite(thresholdAsNumber)) {
+    throw new TypeError(
+      "Failed to read the 'threshold' property from 'IntersectionObserverInit': The provided double value is non-finite.",
+    );
+  }
+
+  if (thresholdAsNumber < 0 || thresholdAsNumber > 1) {
+    throw new RangeError(
+      "Failed to construct 'IntersectionObserver': Threshold values must be numbers between 0 and 1",
+    );
+  }
+
+  return thresholdAsNumber;
+}

package/Libraries/IntersectionObserver/IntersectionObserverEntry.js

@@ -0,0 +1,140 @@
+/**
+ * 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 {InternalInstanceHandle} from '../Renderer/shims/ReactNativeTypes';
+import type {NativeIntersectionObserverEntry} from './NativeIntersectionObserver';
+
+import DOMRectReadOnly from '../DOM/Geometry/DOMRectReadOnly';
+import {getPublicInstanceFromInternalInstanceHandle} from '../DOM/Nodes/ReadOnlyNode';
+
+/**
+ * The [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+ * interface of the Intersection Observer API describes the intersection between
+ * the target element and its root container at a specific moment of transition.
+ *
+ * An array of `IntersectionObserverEntry` is delivered to
+ * `IntersectionObserver` callbacks as the first argument.
+ */
+export default class IntersectionObserverEntry {
+  // We lazily compute all the properties from the raw entry provided by the
+  // native module, so we avoid unnecessary work.
+  _nativeEntry: NativeIntersectionObserverEntry;
+
+  constructor(nativeEntry: NativeIntersectionObserverEntry) {
+    this._nativeEntry = nativeEntry;
+  }
+
+  /**
+   * Returns the bounds rectangle of the target element as a `DOMRectReadOnly`.
+   * The bounds are computed as described in the documentation for
+   * [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
+   */
+  get boundingClientRect(): DOMRectReadOnly {
+    const targetRect = this._nativeEntry.targetRect;
+    return new DOMRectReadOnly(
+      targetRect[0],
+      targetRect[1],
+      targetRect[2],
+      targetRect[3],
+    );
+  }
+
+  /**
+   * Returns the ratio of the `intersectionRect` to the `boundingClientRect`.
+   */
+  get intersectionRatio(): number {
+    const intersectionRect = this.intersectionRect;
+    const boundingClientRect = this.boundingClientRect;
+
+    if (boundingClientRect.width === 0 || boundingClientRect.height === 0) {
+      return 0;
+    }
+
+    return (
+      (intersectionRect.width * intersectionRect.height) /
+      (boundingClientRect.width * boundingClientRect.height)
+    );
+  }
+
+  /**
+   * Returns a `DOMRectReadOnly` representing the target's visible area.
+   */
+  get intersectionRect(): DOMRectReadOnly {
+    const intersectionRect = this._nativeEntry.intersectionRect;
+
+    if (intersectionRect == null) {
+      return new DOMRectReadOnly();
+    }
+
+    return new DOMRectReadOnly(
+      intersectionRect[0],
+      intersectionRect[1],
+      intersectionRect[2],
+      intersectionRect[3],
+    );
+  }
+
+  /**
+   * A `Boolean` value which is `true` if the target element intersects with the
+   * intersection observer's root.
+   * * If this is `true`, then, the `IntersectionObserverEntry` describes a
+   * transition into a state of intersection.
+   * * If it's `false`, then you know the transition is from intersecting to
+   * not-intersecting.
+   */
+  get isIntersecting(): boolean {
+    return this._nativeEntry.isIntersectingAboveThresholds;
+  }
+
+  /**
+   * Returns a `DOMRectReadOnly` for the intersection observer's root.
+   */
+  get rootBounds(): DOMRectReadOnly {
+    const rootRect = this._nativeEntry.rootRect;
+    return new DOMRectReadOnly(
+      rootRect[0],
+      rootRect[1],
+      rootRect[2],
+      rootRect[3],
+    );
+  }
+
+  /**
+   * The `ReactNativeElement` whose intersection with the root changed.
+   */
+  get target(): ReactNativeElement {
+    const targetInstanceHandle: InternalInstanceHandle =
+      // $FlowExpectedError[incompatible-type] native modules don't support using InternalInstanceHandle as a type
+      this._nativeEntry.targetInstanceHandle;
+
+    const targetElement =
+      getPublicInstanceFromInternalInstanceHandle(targetInstanceHandle);
+
+    // $FlowExpectedError[incompatible-cast] we know targetElement is a ReactNativeElement, not just a ReadOnlyNode
+    return (targetElement: ReactNativeElement);
+  }
+
+  /**
+   * A `DOMHighResTimeStamp` indicating the time at which the intersection was
+   * recorded, relative to the `IntersectionObserver`'s time origin.
+   */
+  get time(): DOMHighResTimeStamp {
+    return this._nativeEntry.time;
+  }
+}
+
+export function createIntersectionObserverEntry(
+  entry: NativeIntersectionObserverEntry,
+): IntersectionObserverEntry {
+  return new IntersectionObserverEntry(entry);
+}