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

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -73,7 +73,7 @@ export default function Ansi({
       return content.replace(/\| $/, ' ');
     } else if (key === 2 && commonWhitespaceLength < Infinity) {
       // Remove common whitespace at the beginning of the line
-      return content.substr(commonWhitespaceLength);
+      return content.slice(commonWhitespaceLength);
     } else {
       return content;
     }

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,10 +10,10 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import DeviceInfo from '../../Utilities/DeviceInfo';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
@@ -52,39 +52,21 @@ type ButtonProps = $ReadOnly<{|
 
 function FooterButton(props: ButtonProps): React.Node {
   return (
-    <LogBoxButton
-      backgroundColor={{
-        default: 'transparent',
-        pressed: LogBoxStyle.getBackgroundDarkColor(),
-      }}
-      onPress={props.onPress}
-      style={buttonStyles.safeArea}>
-      <View style={buttonStyles.content}>
-        <Text style={buttonStyles.label}>{props.text}</Text>
-      </View>
-    </LogBoxButton>
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
   );
 }
 
-const buttonStyles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    // $FlowFixMe[sketchy-null-bool]
-    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
-  },
-  content: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  label: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
-});
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -97,6 +79,17 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -88,7 +88,7 @@ const backgroundForLevel = (level: LogLevel) =>
       default: 'transparent',
       pressed: LogBoxStyle.getFatalDarkColor(),
     },
-  }[level]);
+  })[level];
 
 function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -138,17 +138,14 @@ function LogBoxMessage(props: Props): React.Node {
     const key = String(index);
 
     if (substitution.offset > prevOffset) {
-      const prevPart = content.substr(
-        prevOffset,
-        substitution.offset - prevOffset,
-      );
+      const prevPart = content.slice(prevOffset, substitution.offset);
 
       createUnderLength(key, prevPart);
     }
 
-    const substitutionPart = content.substr(
+    const substitutionPart = content.slice(
       substitution.offset,
-      substitution.length,
+      substitution.offset + substitution.length,
     );
 
     createUnderLength(key + '.5', substitutionPart, substitutionStyle);
@@ -156,7 +153,7 @@ function LogBoxMessage(props: Props): React.Node {
   }, 0);
 
   if (lastOffset < content.length) {
-    const lastPart = content.substr(lastOffset);
+    const lastPart = content.slice(lastOffset);
     createUnderLength('-1', lastPart);
   }
 

package/Libraries/MutationObserver/MutationObserver.js

@@ -0,0 +1,184 @@
+/**
+ * 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 {MutationObserverId} from './MutationObserverManager';
+import type MutationRecord from './MutationRecord';
+
+import ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import * as MutationObserverManager from './MutationObserverManager';
+
+export type MutationObserverCallback = (
+  mutationRecords: $ReadOnlyArray<MutationRecord>,
+  observer: MutationObserver,
+) => mixed;
+
+type MutationObserverInit = $ReadOnly<{
+  subtree?: boolean,
+  // This is the only supported option so it's required to be `true`.
+  childList: true,
+
+  // Unsupported:
+  attributes?: boolean,
+  attributeFilter?: $ReadOnlyArray<string>,
+  attributeOldValue?: boolean,
+  characterData?: boolean,
+  characterDataOldValue?: boolean,
+}>;
+
+/**
+ * This is a React Native implementation for the `MutationObserver` API
+ * (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+ *
+ * It only supports the `subtree` and `childList` options at the moment.
+ */
+export default class MutationObserver {
+  _callback: MutationObserverCallback;
+  _observationTargets: Set<ReactNativeElement> = new Set();
+  _mutationObserverId: ?MutationObserverId;
+
+  constructor(callback: MutationObserverCallback): void {
+    if (callback == null) {
+      throw new TypeError(
+        "Failed to construct 'MutationObserver': 1 argument required, but only 0 present.",
+      );
+    }
+
+    if (typeof callback !== 'function') {
+      throw new TypeError(
+        "Failed to construct 'MutationObserver': parameter 1 is not of type 'Function'.",
+      );
+    }
+
+    this._callback = callback;
+  }
+
+  /**
+   * Configures the `MutationObserver` callback to begin receiving notifications
+   * of changes to the UI tree that match the given options.
+   * Depending on the configuration, the observer may watch a single node in the
+   * UI tree, or that node and some or all of its descendant nodes.
+   * To stop the `MutationObserver` (so that none of its callbacks will be
+   * triggered any longer), call `MutationObserver.disconnect()`.
+   */
+  observe(target: ReactNativeElement, options?: MutationObserverInit): void {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'ReactNativeElement'.",
+      );
+    }
+
+    // Browsers force a cast of this value to boolean
+    if (Boolean(options?.childList) !== true) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'MutationObserver': The options object must set 'childList' to true.",
+      );
+    }
+
+    if (options?.attributes != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributes is not supported",
+      );
+    }
+
+    if (options?.attributeFilter != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributeFilter is not supported",
+      );
+    }
+
+    if (options?.attributeOldValue != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributeOldValue is not supported",
+      );
+    }
+
+    if (options?.characterData != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': characterData is not supported",
+      );
+    }
+
+    if (options?.characterDataOldValue != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': characterDataOldValue is not supported",
+      );
+    }
+
+    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);
+    }
+
+    MutationObserverManager.observe({
+      mutationObserverId,
+      target,
+      subtree: Boolean(options?.subtree),
+    });
+
+    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;
+    }
+  }
+
+  /**
+   * Tells the observer to stop watching for mutations.
+   * The observer can be reused by calling its `observe()` method again.
+   */
+  disconnect(): void {
+    for (const target of this._observationTargets.keys()) {
+      this._unobserve(target);
+    }
+  }
+
+  _getOrCreateMutationObserverId(): MutationObserverId {
+    let mutationObserverId = this._mutationObserverId;
+    if (mutationObserverId == null) {
+      mutationObserverId = MutationObserverManager.registerObserver(
+        this,
+        this._callback,
+      );
+      this._mutationObserverId = mutationObserverId;
+    }
+    return mutationObserverId;
+  }
+
+  // Only for tests
+  __getObserverID(): ?MutationObserverId {
+    return this._mutationObserverId;
+  }
+}

package/Libraries/MutationObserver/MutationObserverManager.js

@@ -0,0 +1,218 @@
+/**
+ * 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
+ */
+
+/**
+ * This module handles the communication between the React Native renderer
+ * and all the mutation observers that are currently observing any targets.
+ *
+ * In order to reduce the communication between native and JavaScript,
+ * we register a single notication callback in native, and then we handle how
+ * to notify each entry to the right mutation observer when we receive all
+ * the notifications together.
+ */
+
+import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import type MutationObserver, {
+  MutationObserverCallback,
+} from './MutationObserver';
+import type MutationRecord from './MutationRecord';
+
+import {
+  getPublicInstanceFromInternalInstanceHandle,
+  getShadowNode,
+} from '../DOM/Nodes/ReadOnlyNode';
+import * as Systrace from '../Performance/Systrace';
+import warnOnce from '../Utilities/warnOnce';
+import {createMutationRecord} from './MutationRecord';
+import NativeMutationObserver from './NativeMutationObserver';
+
+export type MutationObserverId = number;
+
+let nextMutationObserverId: MutationObserverId = 1;
+let isConnected: boolean = false;
+
+const registeredMutationObservers: Map<
+  MutationObserverId,
+  $ReadOnly<{observer: MutationObserver, callback: MutationObserverCallback}>,
+> = new Map();
+
+/**
+ * Registers the given mutation observer and returns a unique ID for it,
+ * which is required to start observing targets.
+ */
+export function registerObserver(
+  observer: MutationObserver,
+  callback: MutationObserverCallback,
+): MutationObserverId {
+  const mutationObserverId = nextMutationObserverId;
+  nextMutationObserverId++;
+  registeredMutationObservers.set(mutationObserverId, {
+    observer,
+    callback,
+  });
+  return mutationObserverId;
+}
+
+/**
+ * Unregisters the given mutation observer.
+ * This should only be called when an observer is no longer observing any
+ * targets.
+ */
+export function unregisterObserver(
+  mutationObserverId: MutationObserverId,
+): void {
+  const deleted = registeredMutationObservers.delete(mutationObserverId);
+  if (deleted && registeredMutationObservers.size === 0) {
+    // When there are no observers left, we can disconnect the native module
+    // so we don't need to check commits for mutations.
+    NativeMutationObserver?.disconnect();
+    isConnected = false;
+  }
+}
+
+export function observe({
+  mutationObserverId,
+  target,
+  subtree,
+}: {
+  mutationObserverId: MutationObserverId,
+  target: ReactNativeElement,
+  subtree: boolean,
+}): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const registeredObserver =
+    registeredMutationObservers.get(mutationObserverId);
+  if (registeredObserver == null) {
+    console.error(
+      `MutationObserverManager: could not start observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'MutationObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  if (!isConnected) {
+    NativeMutationObserver.connect(
+      notifyMutationObservers,
+      // We need to do this operation from native to make sure we're retaining
+      // the public instance immediately when mutations occur. Otherwise React
+      // could dereference it in the instance handle and we wouldn't be able to
+      // access it.
+      // $FlowExpectedError[incompatible-call] This is typed as (mixed) => mixed in the native module because the codegen doesn't support the actual types.
+      getPublicInstanceFromInternalInstanceHandle,
+    );
+    isConnected = true;
+  }
+
+  return NativeMutationObserver.observe({
+    mutationObserverId,
+    targetShadowNode,
+    subtree,
+  });
+}
+
+export function unobserve(
+  mutationObserverId: number,
+  target: ReactNativeElement,
+): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const registeredObserver =
+    registeredMutationObservers.get(mutationObserverId);
+  if (registeredObserver == null) {
+    console.error(
+      `MutationObserverManager: could not stop observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'MutationObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  NativeMutationObserver.unobserve(mutationObserverId, targetShadowNode);
+}
+
+/**
+ * This function is called from native when there are `MutationObserver`
+ * entries to dispatch.
+ */
+function notifyMutationObservers(): void {
+  Systrace.beginEvent('MutationObserverManager.notifyMutationObservers');
+  try {
+    doNotifyMutationObservers();
+  } finally {
+    Systrace.endEvent();
+  }
+}
+
+function doNotifyMutationObservers(): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const nativeRecords = NativeMutationObserver.takeRecords();
+
+  const entriesByObserver: Map<
+    MutationObserverId,
+    Array<MutationRecord>,
+  > = new Map();
+
+  for (const nativeRecord of nativeRecords) {
+    let list = entriesByObserver.get(nativeRecord.mutationObserverId);
+    if (list == null) {
+      list = [];
+      entriesByObserver.set(nativeRecord.mutationObserverId, list);
+    }
+    list.push(createMutationRecord(nativeRecord));
+  }
+
+  for (const [mutationObserverId, entriesForObserver] of entriesByObserver) {
+    const registeredObserver =
+      registeredMutationObservers.get(mutationObserverId);
+    if (!registeredObserver) {
+      // This could happen if the observer is disconnected between commit
+      // and mount. In this case, we can just ignore the entries.
+      return;
+    }
+
+    const {observer, callback} = registeredObserver;
+    try {
+      callback.call(observer, entriesForObserver, observer);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+function warnNoNativeMutationObserver() {
+  warnOnce(
+    'missing-native-mutation-observer',
+    'Missing native implementation of MutationObserver',
+  );
+}

package/Libraries/MutationObserver/MutationRecord.js

@@ -0,0 +1,82 @@
+/**
+ * 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 ReadOnlyNode from '../DOM/Nodes/ReadOnlyNode';
+import type {NativeMutationRecord} from './NativeMutationObserver';
+
+import NodeList, {createNodeList} from '../DOM/OldStyleCollections/NodeList';
+
+export type MutationType = 'attributes' | 'characterData' | 'childList';
+
+/**
+ * The `MutationRecord` is a read-only interface that represents an individual
+ * DOM mutation observed by a `MutationObserver`.
+ *
+ * It is the object inside the array passed to the callback of a `MutationObserver`.
+ */
+export default class MutationRecord {
+  _target: ReactNativeElement;
+  _addedNodes: NodeList<ReadOnlyNode>;
+  _removedNodes: NodeList<ReadOnlyNode>;
+
+  constructor(nativeRecord: NativeMutationRecord) {
+    // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+    const target = (nativeRecord.target: ReactNativeElement);
+    this._target = target;
+    // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+    const addedNodes = (nativeRecord.addedNodes: $ReadOnlyArray<ReadOnlyNode>);
+    this._addedNodes = createNodeList(addedNodes);
+    const removedNodes =
+      // $FlowExpectedError[incompatible-cast] the codegen doesn't support the actual type.
+      (nativeRecord.removedNodes: $ReadOnlyArray<ReadOnlyNode>);
+    this._removedNodes = createNodeList(removedNodes);
+  }
+
+  get addedNodes(): NodeList<ReadOnlyNode> {
+    return this._addedNodes;
+  }
+
+  get attributeName(): string | null {
+    return null;
+  }
+
+  get nextSibling(): ReadOnlyNode | null {
+    return null;
+  }
+
+  get oldValue(): mixed | null {
+    return null;
+  }
+
+  get previousSibling(): ReadOnlyNode | null {
+    return null;
+  }
+
+  get removedNodes(): NodeList<ReadOnlyNode> {
+    return this._removedNodes;
+  }
+
+  get target(): ReactNativeElement {
+    return this._target;
+  }
+
+  get type(): MutationType {
+    return 'childList';
+  }
+}
+
+export function createMutationRecord(
+  entry: NativeMutationRecord,
+): MutationRecord {
+  return new MutationRecord(entry);
+}

package/Libraries/MutationObserver/NativeMutationObserver.js

@@ -0,0 +1,58 @@
+/**
+ * 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 {TurboModule} from '../TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export type MutationObserverId = number;
+
+// These types are not supported by the codegen.
+type ShadowNode = mixed;
+type InstanceHandle = mixed;
+type ReactNativeElement = mixed;
+type ReadOnlyNode = mixed;
+
+export type NativeMutationRecord = {
+  mutationObserverId: MutationObserverId,
+  target: ReactNativeElement,
+  addedNodes: $ReadOnlyArray<ReadOnlyNode>,
+  removedNodes: $ReadOnlyArray<ReadOnlyNode>,
+  ...
+};
+
+export type NativeMutationObserverObserveOptions = {
+  mutationObserverId: number,
+  targetShadowNode: ShadowNode,
+  subtree: boolean,
+};
+
+export interface Spec extends TurboModule {
+  +observe: (options: NativeMutationObserverObserveOptions) => void;
+  +unobserve: (
+    mutationObserverId: number,
+    targetShadowNode: ShadowNode,
+  ) => void;
+  +connect: (
+    notifyMutationObservers: () => void,
+    // We need this to retain the public instance before React removes the
+    // reference to it (which happen in mutations that remove nodes, or when
+    // nodes are removed between the change and the callback is executed in JS).
+    getPublicInstanceFromInstanceHandle: (
+      instanceHandle: InstanceHandle,
+    ) => ReadOnlyNode,
+  ) => void;
+  +disconnect: () => void;
+  +takeRecords: () => $ReadOnlyArray<NativeMutationRecord>;
+}
+
+export default (TurboModuleRegistry.get<Spec>(
+  'NativeMutationObserverCxx',
+): ?Spec);