@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.2

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

@@ -16,6 +16,12 @@ export interface Spec extends TurboModule {
   +isReduceMotionEnabled: (
     onSuccess: (isReduceMotionEnabled: boolean) => void,
   ) => void;
+  +isInvertColorsEnabled?: (
+    onSuccess: (isInvertColorsEnabled: boolean) => void,
+  ) => void;
+  +isHighTextContrastEnabled?: (
+    onSuccess: (isHighTextContrastEnabled: boolean) => void,
+  ) => void;
   +isTouchExplorationEnabled: (
     onSuccess: (isScreenReaderEnabled: boolean) => void,
   ) => void;
@@ -34,6 +40,9 @@ export interface Spec extends TurboModule {
     mSec: number,
     onSuccess: (recommendedTimeoutMillis: number) => void,
   ) => void;
+  +isGrayscaleEnabled?: (
+    onSuccess: (isGrayscaleEnabled: boolean) => void,
+  ) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('AccessibilityInfo'): ?Spec);

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

@@ -29,6 +29,10 @@ export interface Spec extends TurboModule {
     onSuccess: (isReduceMotionEnabled: boolean) => void,
     onError: (error: Object) => void,
   ) => void;
+  +getCurrentDarkerSystemColorsState?: (
+    onSuccess: (isDarkerSystemColorsEnabled: boolean) => void,
+    onError: (error: Object) => void,
+  ) => void;
   +getCurrentPrefersCrossFadeTransitionsState?: (
     onSuccess: (prefersCrossFadeTransitions: boolean) => void,
     onError: (error: Object) => void,

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

@@ -24,6 +24,7 @@ export interface Spec extends TurboModule {
       +anchor?: ?number,
       +tintColor?: ?number,
       +cancelButtonTintColor?: ?number,
+      +disabledButtonTintColor?: ?number,
       +userInterfaceStyle?: ?string,
       +disabledButtonIndices?: Array<number>,
     |},
@@ -37,6 +38,7 @@ export interface Spec extends TurboModule {
       +anchor?: ?number,
       +tintColor?: ?number,
       +cancelButtonTintColor?: ?number,
+      +disabledButtonTintColor?: ?number,
       +excludedActivityTypes?: ?Array<string>,
       +userInterfaceStyle?: ?string,
     |},

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

@@ -12,21 +12,15 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
-export type ColorSchemeName = 'light' | 'dark';
+export type ColorSchemeName = 'light' | 'dark' | 'unspecified';
 
 export type AppearancePreferences = {
-  // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-  // types.
-  /* 'light' | 'dark' */
-  colorScheme?: ?string,
+  colorScheme?: ?ColorSchemeName,
 };
 
 export interface Spec extends TurboModule {
-  // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-  // types.
-  /* 'light' | 'dark' */
-  +getColorScheme: () => ?string;
-  +setColorScheme: (colorScheme: string) => void;
+  +getColorScheme: () => ?ColorSchemeName;
+  +setColorScheme: (colorScheme: ColorSchemeName) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

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

@@ -47,11 +47,6 @@ export interface Spec extends TurboModule {
     exceptionId: number,
   ) => void;
   +reportException?: (data: ExceptionData) => void;
-  +updateExceptionMessage: (
-    message: string,
-    stack: Array<StackFrame>,
-    exceptionId: number,
-  ) => void;
   // TODO(T53311281): This is a noop on iOS now. Implement it.
   +dismissRedbox?: () => void;
 }
@@ -74,13 +69,6 @@ const ExceptionsManager = {
   ) {
     NativeModule.reportSoftException(message, stack, exceptionId);
   },
-  updateExceptionMessage(
-    message: string,
-    stack: Array<StackFrame>,
-    exceptionId: number,
-  ) {
-    NativeModule.updateExceptionMessage(message, stack, exceptionId);
-  },
   dismissRedbox(): void {
     if (Platform.OS !== 'ios' && NativeModule.dismissRedbox) {
       // TODO(T53311281): This is a noop on iOS now. Implement it.

package/src/private/specs/modules/{NativeDevToolsSettingsManager.js → NativeReactDevToolsSettingsManager.js}

@@ -13,12 +13,10 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {
-  +setConsolePatchSettings: (newConsolePatchSettings: string) => void;
-  +getConsolePatchSettings: () => ?string;
-  +setProfilingSettings?: (newProfilingSettings: string) => void;
-  +getProfilingSettings?: () => ?string;
+  +setGlobalHookSettings: (settings: string) => void;
+  +getGlobalHookSettings: () => ?string;
 }
 
 export default (TurboModuleRegistry.get<Spec>(
-  'DevToolsSettingsManager',
+  'ReactDevToolsSettingsManager',
 ): ?Spec);

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

@@ -14,7 +14,7 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
-import DOMRectReadOnly, {type DOMRectLike} from './DOMRectReadOnly';
+import DOMRectReadOnly, {type DOMRectInit} from './DOMRectReadOnly';
 
 // flowlint unsafe-getters-setters:off
 
@@ -72,7 +72,7 @@ export default class DOMRect extends DOMRectReadOnly {
   /**
    * Creates a new `DOMRect` object with a given location and dimensions.
    */
-  static fromRect(rect?: ?DOMRectLike): DOMRect {
+  static fromRect(rect?: ?DOMRectInit): DOMRect {
     if (!rect) {
       return new DOMRect();
     }

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

@@ -16,7 +16,7 @@
 
 // flowlint sketchy-null:off, unsafe-getters-setters:off
 
-export interface DOMRectLike {
+export interface DOMRectInit {
   x?: ?number;
   y?: ?number;
   width?: ?number;
@@ -146,7 +146,7 @@ export default class DOMRectReadOnly {
   /**
    * Creates a new `DOMRectReadOnly` object with a given location and dimensions.
    */
-  static fromRect(rect?: ?DOMRectLike): DOMRectReadOnly {
+  static fromRect(rect?: ?DOMRectInit): DOMRectReadOnly {
     if (!rect) {
       return new DOMRectReadOnly();
     }

package/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -11,7 +11,7 @@
 // flowlint unsafe-getters-setters:off
 
 import type {
-  HostComponent,
+  HostInstance,
   INativeMethods,
   InternalInstanceHandle,
   MeasureInWindowOnSuccessCallback,
@@ -19,7 +19,6 @@ import type {
   MeasureOnSuccessCallback,
   ViewConfig,
 } from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
-import type {ElementRef} from 'react';
 
 import TextInputState from '../../../../../Libraries/Components/TextInput/TextInputState';
 import {getFabricUIManager} from '../../../../../Libraries/ReactNative/FabricUIManager';
@@ -143,7 +142,7 @@ export default class ReactNativeElement
   }
 
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
   ) {

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

@@ -25,6 +25,18 @@ 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>,
+
+  /**
+   * This is a React Native specific option (not spec compliant) that specifies
+   * ratio threshold(s) of the intersection area to the total `root` area.
+   *
+   * If set, it will either be a singular ratio value between 0-1 (inclusive)
+   * or an array of such ratios.
+   *
+   * Note: If `rn_rootThreshold` is set, and `threshold` is not set,
+   * `threshold` will not default to [0] (as per spec)
+   */
+  rn_rootThreshold?: number | $ReadOnlyArray<number>,
 };
 
 /**
@@ -44,13 +56,16 @@ type IntersectionObserverInit = {
  * elements with the same observer.
  *
  * This implementation only supports the `threshold` option at the moment
- * (`root` and `rootMargin` are not supported).
+ * (`root` and `rootMargin` are not supported) and provides a React Native specific
+ * option `rn_rootThreshold`.
+ *
  */
 export default class IntersectionObserver {
   _callback: IntersectionObserverCallback;
   _thresholds: $ReadOnlyArray<number>;
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
+  _rootThresholds: $ReadOnlyArray<number> | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -83,7 +98,12 @@ export default class IntersectionObserver {
     }
 
     this._callback = callback;
-    this._thresholds = normalizeThresholds(options?.threshold);
+
+    this._rootThresholds = normalizeRootThreshold(options?.rn_rootThreshold);
+    this._thresholds = normalizeThreshold(
+      options?.threshold,
+      this._rootThresholds != null, // only provide default if no rootThreshold
+    );
   }
 
   /**
@@ -115,14 +135,27 @@ export default class IntersectionObserver {
    * 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.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   *
+   * If no value was passed to the constructor, and no `rn_rootThreshold`
+   * is set, `0` is used.
    */
   get thresholds(): $ReadOnlyArray<number> {
     return this._thresholds;
   }
 
+  /**
+   * A list of root thresholds, sorted in increasing numeric order, where each
+   * threshold is a ratio of intersection area to bounding box area of the specified
+   * root view, which defaults to the viewport.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   */
+  get rootThresholds(): $ReadOnlyArray<number> | null {
+    return this._rootThresholds;
+  }
+
   /**
    * Adds an element to the set of target elements being watched by the
    * `IntersectionObserver`.
@@ -131,6 +164,12 @@ export default class IntersectionObserver {
    * To stop observing the element, call `IntersectionObserver.unobserve()`.
    */
   observe(target: ReactNativeElement): void {
+    if (target == null) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is null or undefined.",
+      );
+    }
+
     if (!(target instanceof ReactNativeElement)) {
       throw new TypeError(
         "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'ReactNativeElement'.",
@@ -215,32 +254,84 @@ export default class IntersectionObserver {
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
  *
+ * If `defaultEmpty` is true, then defaults to empty array, otherwise [0].
+ *
  * @example
  * normalizeThresholds(0.5);                // → [0.5]
  * normalizeThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
  * normalizeThresholds(['1', '0.5', '0']);  // → [0, 0.5, 1]
+ * normalizeThresholds(null);               // → [0]
+ * normalizeThresholds([null, null]);       // → [0, 0]
+ *
+ * normalizeThresholds([null], true);       // → [0]
+ * normalizeThresholds(null, true);         // → []
+ * normalizeThresholds([], true);           // → []
  */
-function normalizeThresholds(threshold: mixed): $ReadOnlyArray<number> {
+function normalizeThreshold(
+  threshold: mixed,
+  defaultEmpty: boolean = false,
+): $ReadOnlyArray<number> {
   if (Array.isArray(threshold)) {
     if (threshold.length > 0) {
-      return threshold.map(normalizeThresholdValue).sort();
+      return threshold
+        .map(t => normalizeThresholdValue(t, 'threshold'))
+        .map(t => t ?? 0)
+        .sort();
+    } else if (defaultEmpty) {
+      return [];
     } else {
       return [0];
     }
   }
 
-  return [normalizeThresholdValue(threshold)];
+  const normalized = normalizeThresholdValue(threshold, 'threshold');
+  if (normalized == null) {
+    return defaultEmpty ? [] : [0];
+  }
+
+  return [normalized];
+}
+
+/**
+ * Converts the user defined `rn_rootThreshold` value into an array of sorted valid
+ * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
+ *
+ * If invalid array or null, returns null.
+ *
+ * @example
+ * normalizeRootThreshold(0.5);                 // → [0.5]
+ * normalizeRootThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
+ * normalizeRootThresholds([null, '0.5', '0']); // → [0, 0.5]
+ * normalizeRootThresholds(null);               // → null
+ * normalizeRootThresholds([null, null]);       // → null
+ */
+function normalizeRootThreshold(
+  rootThreshold: mixed,
+): null | $ReadOnlyArray<number> {
+  if (Array.isArray(rootThreshold)) {
+    const normalizedArr = rootThreshold
+      .map(rt => normalizeThresholdValue(rt, 'rn_rootThreshold'))
+      .filter((rt): rt is number => rt != null)
+      .sort();
+    return normalizedArr.length === 0 ? null : normalizedArr;
+  }
+
+  const normalized = normalizeThresholdValue(rootThreshold, 'rn_rootThreshold');
+  return normalized == null ? null : [normalized];
 }
 
-function normalizeThresholdValue(threshold: mixed): number {
+function normalizeThresholdValue(
+  threshold: mixed,
+  property: string,
+): null | number {
   if (threshold == null) {
-    return 0;
+    return null;
   }
 
   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.",
+      `Failed to read the '${property}' property from 'IntersectionObserverInit': The provided double value is non-finite.`,
     );
   }
 

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

@@ -74,6 +74,32 @@ export default class IntersectionObserverEntry {
     return Math.min(ratio, 1);
   }
 
+  /**
+   * Returns the ratio of the `intersectionRect` to the `boundingRootRect`.
+   */
+  get rn_intersectionRootRatio(): number {
+    const intersectionRect = this.intersectionRect;
+
+    const rootRect = this._nativeEntry.rootRect;
+    const boundingRootRect = new DOMRectReadOnly(
+      rootRect[0],
+      rootRect[1],
+      rootRect[2],
+      rootRect[3],
+    );
+
+    if (boundingRootRect.width === 0 || boundingRootRect.height === 0) {
+      return 0;
+    }
+
+    const ratio =
+      (intersectionRect.width * intersectionRect.height) /
+      (boundingRootRect.width * boundingRootRect.height);
+
+    // Prevent rounding errors from making this value greater than 1.
+    return Math.min(ratio, 1);
+  }
+
   /**
    * Returns a `DOMRectReadOnly` representing the target's visible area.
    */

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

@@ -162,6 +162,7 @@ export function observe({
     intersectionObserverId,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
+    rootThresholds: registeredObserver.observer.rootThresholds,
   });
 
   return true;

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

@@ -26,6 +26,7 @@ export type NativeIntersectionObserverObserveOptions = {
   intersectionObserverId: number,
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
+  rootThresholds?: ?$ReadOnlyArray<number>,
 };
 
 export interface Spec extends TurboModule {

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

@@ -23,8 +23,10 @@ import nullthrows from 'nullthrows';
 
 type ObserverState = {
   thresholds: $ReadOnlyArray<number>,
+  rootThresholds?: ?$ReadOnlyArray<number>,
   intersecting: boolean,
   currentThreshold: ?number,
+  currentRootThreshold: ?number,
 };
 
 type Observation = {
@@ -74,8 +76,10 @@ const NativeIntersectionObserverMock = {
       ...options,
       state: {
         thresholds: options.thresholds,
+        rootThresholds: options.rootThresholds,
         intersecting: false,
         currentThreshold: null,
+        currentRootThreshold: null,
       },
     };
     observations.push(observation);
@@ -141,9 +145,14 @@ const NativeIntersectionObserverMock = {
     if (observation.state.intersecting) {
       observation.state.intersecting = false;
       observation.state.currentThreshold = null;
+      observation.state.currentRootThreshold = null;
     } else {
       observation.state.intersecting = true;
       observation.state.currentThreshold = observation.thresholds[0];
+      observation.state.currentRootThreshold =
+        observation.rootThresholds != null
+          ? observation.rootThresholds[0]
+          : null;
     }
     pendingRecords.push(createRecordFromObservation(observation));
     setImmediate(notifyIntersectionObservers);

package/src/private/webapis/performance/EventTiming.js

@@ -16,8 +16,8 @@ import type {
 } from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
-import {warnNoNativePerformanceObserver} from './PerformanceObserver';
-import NativePerformanceObserver from './specs/NativePerformanceObserver';
+import NativePerformance from './specs/NativePerformance';
+import {warnNoNativePerformance} from './Utilities';
 
 export type PerformanceEventTimingJSON = {
   ...PerformanceEntryJSON,
@@ -85,14 +85,18 @@ function getCachedEventCounts(): Map<string, number> {
   if (cachedEventCounts) {
     return cachedEventCounts;
   }
-  if (!NativePerformanceObserver) {
-    warnNoNativePerformanceObserver();
-    return new Map();
+
+  if (!NativePerformance || !NativePerformance?.getEventCounts) {
+    warnNoNativePerformance();
+    cachedEventCounts = new Map();
+    return cachedEventCounts;
   }
 
-  cachedEventCounts = new Map<string, number>(
-    NativePerformanceObserver.getEventCounts(),
+  const eventCounts = new Map<string, number>(
+    NativePerformance.getEventCounts?.() ?? [],
   );
+  cachedEventCounts = eventCounts;
+
   // $FlowFixMe[incompatible-call]
   global.queueMicrotask(() => {
     // To be consistent with the calls to the API from the same task,
@@ -101,7 +105,8 @@ function getCachedEventCounts(): Map<string, number> {
     // after the current task is guaranteed to have finished.
     cachedEventCounts = null;
   });
-  return cachedEventCounts ?? new Map();
+
+  return eventCounts;
 }
 
 /**