@office-iss/react-native-win32 0.0.0-canary.274 → 0.0.0-canary.276

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`.
@@ -221,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-win/Libraries/Components/View/ViewPropTypes.d.ts

@@ -343,6 +343,13 @@ export interface ViewProps
    * Used to reference react managed views from native code.
    */
   nativeID?: string | undefined;
+
+  /**
+   * Contols whether this view, and its transitive children, are laid in a way
+   * consistent with web browsers ('strict'), or consistent with existing
+   * React Native code which may rely on incorrect behavior ('classic').
+   */
+  experimental_layoutConformance?: 'strict' | 'classic' | undefined;
 }
 
 // For backwards compat.... // Win32

package/Libraries/ReactNative/ReactFabricInternals.js

@@ -1,17 +0,0 @@
-/**
- * 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
- */
-
-'use strict';
-
-const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
-
-module.exports = {
-  createReactNativeComponentClass,
-};

package/src/private/components/useSyncOnScroll.js

@@ -1,48 +0,0 @@
-/**
- * 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
- * @oncall react_native
- */
-
-import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
-import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
-
-import * as React from 'react';
-import {useImperativeHandle, useRef, useState} from 'react';
-
-export type TScrollViewNativeComponentInstance = React.ElementRef<
-  HostComponent<ScrollViewNativeProps>,
->;
-
-export type TScrollViewNativeImperativeHandle = {
-  componentRef: React.RefObject<TScrollViewNativeComponentInstance | null>,
-  unstable_setEnableSyncOnScroll: (enabled: true) => void,
-};
-
-/**
- * Hook used by `HScrollViewNativeComponent` and `VScrollViewNativeComponent`
- * to make an implementation of `unstable_setEnableSyncOnScroll` available that
- * does not require updating all `ScrollView` children.
- */
-export default function useSyncOnScroll(
-  inputRef: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
-): [React.RefSetter<TScrollViewNativeComponentInstance | null>, true | void] {
-  const componentRef = useRef<TScrollViewNativeComponentInstance | null>(null);
-  const [enableSyncOnScroll, setEnableSyncOnScroll] = useState<true | void>();
-
-  useImperativeHandle<TScrollViewNativeImperativeHandle>(inputRef, () => {
-    return {
-      componentRef,
-      unstable_setEnableSyncOnScroll(enabled: true): void {
-        setEnableSyncOnScroll(enabled);
-      },
-    };
-  }, []);
-
-  return [componentRef, enableSyncOnScroll];
-}

package/types/experimental.d.ts

@@ -1,59 +0,0 @@
-/**
- * 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.
- *
- * @format
- */
-
-/**
- * These are types for things that are present for New Architecture enabled apps
- * which is currently considered experimental.
- *
- * To load the types declared here in an actual project, there are three ways.
- *
- * 1. If your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
- * is to add `"react-native/types/experimental"` to the `"types"` array.
- *
- * 2. Alternatively, a specific import syntax can to be used from a typescript file.
- * This module does not exist in reality, which is why the {} is important:
- *
- * ```ts
- * import {} from 'react-native/types/experimental'
- * ```
- *
- * 3. It is also possible to include it through a triple-slash reference:
- *
- * ```ts
- * /// <reference types="react-native/types/experimental" />
- * ```
- *
- * Either the import or the reference only needs to appear once, anywhere in the project.
- */
-
-import {
-  GradientValue,
-  BlendMode,
-} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
-
-export {};
-
-declare module '.' {
-  export interface ViewProps {
-    /**
-     * Contols whether this view, and its transitive children, are laid in a way
-     * consistent with web browsers ('strict'), or consistent with existing
-     * React Native code which may rely on incorrect behavior ('classic').
-     */
-    experimental_layoutConformance?: 'strict' | 'classic' | undefined;
-  }
-
-  export interface ViewStyle {
-    mixBlendMode?: BlendMode | undefined;
-    experimental_backgroundImage?:
-      | ReadonlyArray<GradientValue>
-      | string
-      | undefined;
-  }
-}