react-native-tvos 0.82.1-0 → 0.83.0-0

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

@@ -24,7 +24,7 @@ export type IntersectionObserverCallback = (
 
 export interface IntersectionObserverInit {
   root?: ?ReactNativeElement;
-  // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
+  rootMargin?: string;
   threshold?: number | $ReadOnlyArray<number>;
 
   /**
@@ -56,9 +56,8 @@ export interface IntersectionObserverInit {
  * 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) and provides a React Native specific
- * option `rnRootThreshold`.
+ * This implementation supports `threshold`, `root`, and `rootMargin` options and
+ * provides a React Native specific option `rnRootThreshold`.
  *
  */
 export default class IntersectionObserver {
@@ -68,6 +67,7 @@ export default class IntersectionObserver {
   _intersectionObserverId: ?IntersectionObserverId;
   _rootThresholds: $ReadOnlyArray<number> | null;
   _root: ReactNativeElement | null;
+  _rootMargin: string;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -85,13 +85,6 @@ export default class IntersectionObserver {
       );
     }
 
-    // $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",
-      );
-    }
-
     if (
       options?.root != null &&
       !(options?.root instanceof ReactNativeElement)
@@ -109,6 +102,7 @@ export default class IntersectionObserver {
       this._rootThresholds != null, // only provide default if no rootThreshold
     );
     this._root = options?.root ?? null;
+    this._rootMargin = normalizeRootMargin(options?.rootMargin);
   }
 
   /**
@@ -128,12 +122,9 @@ export default class IntersectionObserver {
    * 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';
+    return this._rootMargin;
   }
 
   /**
@@ -351,3 +342,73 @@ function normalizeThresholdValue(
 
   return thresholdAsNumber;
 }
+
+/**
+ * Validates and normalizes the rootMargin value.
+ * Accepts CSS margin syntax (e.g., "10px", "10px 20px", "10px 20px 30px 40px").
+ * Returns the normalized string or throws an error if invalid.
+ *
+ * Per W3C spec, rootMargin must be specified in pixels or percent.
+ * This implementation validates the basic format.
+ */
+function normalizeRootMargin(rootMargin: mixed): string {
+  if (rootMargin == null || rootMargin === '') {
+    return '0px 0px 0px 0px';
+  }
+
+  if (typeof rootMargin !== 'string') {
+    throw new TypeError(
+      "Failed to construct 'IntersectionObserver': Failed to read the 'rootMargin' property from 'IntersectionObserverInit': The provided value is not of type 'string'.",
+    );
+  }
+
+  const marginStr = rootMargin.trim();
+  if (marginStr === '') {
+    return '0px 0px 0px 0px';
+  }
+
+  // Split by whitespace and validate each value
+  const parts = marginStr.split(/\s+/);
+  if (parts.length > 4) {
+    throw new SyntaxError(
+      "Failed to construct 'IntersectionObserver': Failed to parse rootMargin: Too many values (expected 1-4).",
+    );
+  }
+
+  // Validate each part matches the pattern: optional minus, digits, and unit (px or %)
+  const validPattern = /^-?\d+(\.\d+)?(px|%)$/;
+  for (const part of parts) {
+    if (!validPattern.test(part)) {
+      throw new SyntaxError(
+        `Failed to construct 'IntersectionObserver': Failed to parse rootMargin: '${part}' is not a valid length. Only 'px' and '%' units are allowed.`,
+      );
+    }
+  }
+
+  // Normalize to 4 values following CSS margin shorthand rules
+  let normalized: Array<string>;
+  switch (parts.length) {
+    case 1:
+      // All sides the same
+      normalized = [parts[0], parts[0], parts[0], parts[0]];
+      break;
+    case 2:
+      // Vertical | Horizontal
+      normalized = [parts[0], parts[1], parts[0], parts[1]];
+      break;
+    case 3:
+      // Top | Horizontal | Bottom
+      normalized = [parts[0], parts[1], parts[2], parts[1]];
+      break;
+    case 4:
+      // Top | Right | Bottom | Left
+      normalized = parts;
+      break;
+    default:
+      throw new SyntaxError(
+        "Failed to construct 'IntersectionObserver': Failed to parse rootMargin.",
+      );
+  }
+
+  return normalized.join(' ');
+}

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

@@ -175,6 +175,7 @@ export function observe({
     targetShadowNode: targetNativeNodeReference,
     thresholds: registeredObserver.observer.thresholds,
     rootThresholds: registeredObserver.observer.rnRootThresholds,
+    rootMargin: registeredObserver.observer.rootMargin,
   });
   targetToTokenMap.set(target, token);
 

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

@@ -29,6 +29,7 @@ export type NativeIntersectionObserverObserveOptions = {
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
   rootThresholds?: ?$ReadOnlyArray<number>,
+  rootMargin?: ?string,
 };
 
 export opaque type NativeIntersectionObserverToken = mixed;

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

@@ -25,7 +25,10 @@ export type PerformanceResourceTimingJSON = {
   connectEnd: DOMHighResTimeStamp,
   responseStart: DOMHighResTimeStamp,
   responseEnd: DOMHighResTimeStamp,
-  responseStatus: ?number,
+  responseStatus: number,
+  contentType: string,
+  encodedBodySize: number,
+  decodedBodySize: number,
   ...
 };
 
@@ -39,7 +42,10 @@ export interface PerformanceResourceTimingInit {
   +connectEnd: DOMHighResTimeStamp;
   +responseStart: DOMHighResTimeStamp;
   +responseEnd: DOMHighResTimeStamp;
-  +responseStatus?: number;
+  +responseStatus: number;
+  +contentType: string;
+  +encodedBodySize: number;
+  +decodedBodySize: number;
 }
 
 export class PerformanceResourceTiming extends PerformanceEntry {
@@ -49,7 +55,10 @@ export class PerformanceResourceTiming extends PerformanceEntry {
   #connectEnd: DOMHighResTimeStamp;
   #responseStart: DOMHighResTimeStamp;
   #responseEnd: DOMHighResTimeStamp;
-  #responseStatus: ?number;
+  #responseStatus: number;
+  #contentType: string;
+  #encodedBodySize: number;
+  #decodedBodySize: number;
 
   constructor(init: PerformanceResourceTimingInit) {
     super('resource', init);
@@ -61,6 +70,9 @@ export class PerformanceResourceTiming extends PerformanceEntry {
     this.#responseStart = init.responseStart;
     this.#responseEnd = init.responseEnd;
     this.#responseStatus = init.responseStatus;
+    this.#contentType = init.contentType;
+    this.#encodedBodySize = init.encodedBodySize;
+    this.#decodedBodySize = init.decodedBodySize;
   }
 
   get fetchStart(): DOMHighResTimeStamp {
@@ -87,10 +99,22 @@ export class PerformanceResourceTiming extends PerformanceEntry {
     return this.#responseEnd;
   }
 
-  get responseStatus(): ?number {
+  get responseStatus(): number {
     return this.#responseStatus;
   }
 
+  get contentType(): string {
+    return this.#contentType;
+  }
+
+  get encodedBodySize(): number {
+    return this.#encodedBodySize;
+  }
+
+  get decodedBodySize(): number {
+    return this.#decodedBodySize;
+  }
+
   toJSON(): PerformanceResourceTimingJSON {
     return {
       ...super.toJSON(),
@@ -101,6 +125,9 @@ export class PerformanceResourceTiming extends PerformanceEntry {
       responseStart: this.#responseStart,
       responseEnd: this.#responseEnd,
       responseStatus: this.#responseStatus,
+      contentType: this.contentType,
+      encodedBodySize: this.encodedBodySize,
+      decodedBodySize: this.decodedBodySize,
     };
   }
 }

package/src/private/webapis/performance/internals/RawPerformanceEntry.js

@@ -68,7 +68,10 @@ export function rawToPerformanceEntry(
         connectEnd: entry.connectEnd ?? 0,
         responseStart: entry.responseStart ?? 0,
         responseEnd: entry.responseEnd ?? 0,
-        responseStatus: entry.responseStatus,
+        responseStatus: entry.responseStatus ?? 0,
+        contentType: entry.contentType ?? '',
+        encodedBodySize: entry.encodedBodySize ?? 0,
+        decodedBodySize: entry.decodedBodySize ?? 0,
       });
     default:
       return new PerformanceEntry(rawToPerformanceEntryType(entry.entryType), {

package/src/private/webapis/performance/specs/NativePerformance.js

@@ -37,6 +37,9 @@ export type RawPerformanceEntry = {
   responseStart?: number,
   responseEnd?: number,
   responseStatus?: number,
+  contentType?: string,
+  encodedBodySize?: number,
+  decodedBodySize?: number,
 };
 
 export opaque type OpaqueNativeObserverHandle = mixed;

package/types/index.d.ts

@@ -104,6 +104,7 @@ export * from '../Libraries/Components/View/ViewAccessibility';
 export * from '../Libraries/Components/View/ViewPropTypes';
 export * from '../Libraries/Components/Button';
 export * from '../Libraries/Core/registerCallableModule';
+export * as NativeComponentRegistry from '../Libraries/NativeComponent/NativeComponentRegistry';
 export * from '../Libraries/EventEmitter/NativeEventEmitter';
 export * from '../Libraries/EventEmitter/RCTDeviceEventEmitter';
 export * from '../Libraries/EventEmitter/RCTNativeAppEventEmitter';

package/types/public/ReactNativeTypes.d.ts

@@ -120,8 +120,6 @@ export type NativeMethodsMixin = NativeMethods;
  */
 export type NativeMethodsMixinType = NativeMethods;
 
-export type HostInstance = NativeMethods;
-
 /**
  * Represents a native component, such as those returned from `requireNativeComponent`.
  *
@@ -137,3 +135,118 @@ export interface HostComponent<P>
   > {
   new (props: P, context?: any): React.Component<P> & HostInstance;
 }
+
+export interface ArrayLike<T> extends Iterable<T> {
+  [indexer: number]: T;
+  readonly length: number;
+}
+
+export interface HTMLCollection<T> extends Iterable<T>, ArrayLike<T> {
+  [index: number]: T;
+  readonly length: number;
+  item(index: number): null | T;
+  namedItem(name: string): null | T;
+  [Symbol.iterator](): Iterator<T>;
+}
+
+export interface NodeList<T> extends Iterable<T>, ArrayLike<T> {
+  [index: number]: T;
+  readonly length: number;
+  entries(): Iterator<[number, T]>;
+  forEach<ThisType>(
+    callbackFn: (value: T, index: number, array: NodeList<T>) => unknown,
+    thisArg?: ThisType,
+  ): void;
+  item(index: number): null | T;
+  keys(): Iterator<number>;
+  values(): Iterator<T>;
+  [Symbol.iterator](): Iterator<T>;
+}
+
+export interface ReadOnlyNode {
+  get childNodes(): NodeList<ReadOnlyNode>;
+  compareDocumentPosition(otherNode: ReadOnlyNode): number;
+  contains(otherNode: ReadOnlyNode): boolean;
+  get firstChild(): null | ReadOnlyNode;
+  getRootNode(): ReadOnlyNode;
+  hasChildNodes(): boolean;
+  get isConnected(): boolean;
+  get lastChild(): null | ReadOnlyNode;
+  get nextSibling(): null | ReadOnlyNode;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null | string;
+  get ownerDocument(): null | ReactNativeDocument;
+  get parentElement(): null | ReadOnlyElement;
+  get parentNode(): null | ReadOnlyNode;
+  get previousSibling(): null | ReadOnlyNode;
+  get textContent(): string;
+}
+
+export interface ReactNativeDocument extends ReadOnlyNode {
+  get childElementCount(): number;
+  get children(): HTMLCollection<ReadOnlyElement>;
+  get documentElement(): ReactNativeElement;
+  get firstElementChild(): null | ReadOnlyElement;
+  getElementById(id: string): null | ReadOnlyElement;
+  get lastElementChild(): null | ReadOnlyElement;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null;
+}
+
+export interface ReadOnlyElement extends ReadOnlyNode {
+  get childElementCount(): number;
+  get children(): HTMLCollection<ReadOnlyElement>;
+  get clientHeight(): number;
+  get clientLeft(): number;
+  get clientTop(): number;
+  get clientWidth(): number;
+  get firstElementChild(): null | ReadOnlyElement;
+  getBoundingClientRect(): DOMRect;
+  hasPointerCapture(pointerId: number): boolean;
+  get id(): string;
+  get lastElementChild(): null | ReadOnlyElement;
+  get nextElementSibling(): null | ReadOnlyElement;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null | string;
+  set nodeValue(value: string);
+  get previousElementSibling(): null | ReadOnlyElement;
+  releasePointerCapture(pointerId: number): void;
+  get scrollHeight(): number;
+  get scrollLeft(): number;
+  get scrollTop(): number;
+  get scrollWidth(): number;
+  setPointerCapture(pointerId: number): void;
+  get tagName(): string;
+  get textContent(): string;
+}
+
+export interface ReactNativeElement extends ReadOnlyElement, NativeMethods {
+  blur(): void;
+  focus(): void;
+  get offsetHeight(): number;
+  get offsetLeft(): number;
+  get offsetParent(): null | ReadOnlyElement;
+  get offsetTop(): number;
+  get offsetWidth(): number;
+  setNativeProps(nativeProps: {}): void;
+}
+
+export interface ReadOnlyCharacterData extends ReadOnlyNode {
+  get data(): string;
+  get length(): number;
+  get nextElementSibling(): null | ReadOnlyElement;
+  get nodeValue(): string;
+  get previousElementSibling(): null | ReadOnlyElement;
+  substringData(offset: number, count: number): string;
+  get textContent(): string;
+}
+
+export interface ReadOnlyText extends ReadOnlyCharacterData {
+  get nodeName(): string;
+  get nodeType(): number;
+}
+
+export type HostInstance = ReactNativeElement;

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -1,152 +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
- */
-
-import type {
-  HostInstance,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
-  NativeMethods,
-} from '../../../src/private/types/HostInstance';
-import type {
-  InternalInstanceHandle,
-  ViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
-
-import TextInputState from '../../Components/TextInput/TextInputState';
-import {getNodeFromInternalInstanceHandle} from '../../ReactNative/RendererProxy';
-import {getFabricUIManager} from '../FabricUIManager';
-import {create} from './ReactNativeAttributePayload';
-import warnForStyleProps from './warnForStyleProps';
-import nullthrows from 'nullthrows';
-
-const {
-  measure: fabricMeasure,
-  measureInWindow: fabricMeasureInWindow,
-  measureLayout: fabricMeasureLayout,
-  getBoundingClientRect: fabricGetBoundingClientRect,
-  setNativeProps,
-} = nullthrows(getFabricUIManager());
-
-const noop = () => {};
-
-/**
- * This is used for refs on host components.
- */
-export default class ReactFabricHostComponent implements NativeMethods {
-  // These need to be accessible from `ReactFabricPublicInstanceUtils`.
-  __nativeTag: number;
-  __internalInstanceHandle: InternalInstanceHandle;
-
-  _viewConfig: ViewConfig;
-
-  constructor(
-    tag: number,
-    viewConfig: ViewConfig,
-    internalInstanceHandle: InternalInstanceHandle,
-  ) {
-    this.__nativeTag = tag;
-    this._viewConfig = viewConfig;
-    this.__internalInstanceHandle = internalInstanceHandle;
-  }
-
-  blur() {
-    // $FlowFixMe[incompatible-type] - Error supressed during the migration of HostInstance to ReactNativeElement
-    TextInputState.blurTextInput(this);
-  }
-
-  focus() {
-    // $FlowFixMe[incompatible-type] - Error supressed during the migration of HostInstance to ReactNativeElement
-    TextInputState.focusTextInput(this);
-  }
-
-  measure(callback: MeasureOnSuccessCallback) {
-    const node = getNodeFromInternalInstanceHandle(
-      this.__internalInstanceHandle,
-    );
-    if (node != null) {
-      fabricMeasure(node, callback);
-    }
-  }
-
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
-    const node = getNodeFromInternalInstanceHandle(
-      this.__internalInstanceHandle,
-    );
-    if (node != null) {
-      fabricMeasureInWindow(node, callback);
-    }
-  }
-
-  measureLayout(
-    relativeToNativeNode: number | HostInstance,
-    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail?: () => void /* currently unused */,
-  ) {
-    if (
-      typeof relativeToNativeNode === 'number' ||
-      !(relativeToNativeNode instanceof ReactFabricHostComponent)
-    ) {
-      if (__DEV__) {
-        console.error(
-          'Warning: ref.measureLayout must be called with a ref to a native component.',
-        );
-      }
-
-      return;
-    }
-
-    const toStateNode = getNodeFromInternalInstanceHandle(
-      this.__internalInstanceHandle,
-    );
-    const fromStateNode = getNodeFromInternalInstanceHandle(
-      relativeToNativeNode.__internalInstanceHandle,
-    );
-
-    if (toStateNode != null && fromStateNode != null) {
-      fabricMeasureLayout(
-        toStateNode,
-        fromStateNode,
-        onFail != null ? onFail : noop,
-        onSuccess != null ? onSuccess : noop,
-      );
-    }
-  }
-
-  unstable_getBoundingClientRect(): DOMRect {
-    const node = getNodeFromInternalInstanceHandle(
-      this.__internalInstanceHandle,
-    );
-    if (node != null) {
-      const rect = fabricGetBoundingClientRect(node, true);
-
-      if (rect) {
-        return new DOMRect(rect[0], rect[1], rect[2], rect[3]);
-      }
-    }
-
-    // Empty rect if any of the above failed
-    return new DOMRect(0, 0, 0, 0);
-  }
-
-  setNativeProps(nativeProps: {...}): void {
-    if (__DEV__) {
-      warnForStyleProps(nativeProps, this._viewConfig.validAttributes);
-    }
-    const updatePayload = create(nativeProps, this._viewConfig.validAttributes);
-
-    const node = getNodeFromInternalInstanceHandle(
-      this.__internalInstanceHandle,
-    );
-    if (node != null && updatePayload != null) {
-      setNativeProps(node, updatePayload);
-    }
-  }
-}