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

package/Libraries/Inspector/NetworkOverlay.js

@@ -143,6 +143,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setRequestHeaderCallback((header, value, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -159,6 +160,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setSendCallback((data, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -173,6 +175,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setHeaderReceivedCallback(
       (type, size, responseHeaders, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;
@@ -190,6 +193,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setResponseCallback(
       (status, timeout, response, responseURL, responseType, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;

package/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -20,7 +20,6 @@ import StyleSheet from '../StyleSheet/StyleSheet';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 
 const {useEffect, useState, useCallback} = React;
@@ -78,20 +77,15 @@ export default function ReactDevToolsOverlay({
         x,
         y,
         viewData => {
-          const {touchedViewTag, closestInstance, frame} = viewData;
-          if (closestInstance != null || touchedViewTag != null) {
-            // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
-            // this makes sure it works for both architectures.
-            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
-            if (closestInstance != null) {
-              reactDevToolsAgent.selectNode(closestInstance);
-            }
-            setInspected({
-              frame,
-            });
-            return true;
+          const {frame, closestPublicInstance} = viewData;
+
+          if (closestPublicInstance == null) {
+            return false;
           }
-          return false;
+
+          reactDevToolsAgent.selectNode(closestPublicInstance);
+          setInspected({frame});
+          return true;
         },
       );
     },

package/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -9,18 +9,16 @@
  */
 
 import type {
-  HostComponent,
+  HostInstance,
   TouchedViewDataAtPoint,
 } from '../Renderer/shims/ReactNativeTypes';
 
 const invariant = require('invariant');
-const React = require('react');
 
-export type HostRef = React.ElementRef<HostComponent<mixed>>;
 export type ReactRenderer = {
   rendererConfig: {
     getInspectorDataForViewAtPoint: (
-      inspectedView: ?HostRef,
+      inspectedView: ?HostInstance,
       locationX: number,
       locationY: number,
       callback: Function,
@@ -52,7 +50,7 @@ function validateRenderers(): void {
 }
 
 module.exports = function getInspectorDataForViewAtPoint(
-  inspectedView: ?HostRef,
+  inspectedView: ?HostInstance,
   locationX: number,
   locationY: number,
   callback: (viewData: TouchedViewDataAtPoint) => boolean,

package/Libraries/Interaction/InteractionManager.js

@@ -10,6 +10,7 @@
 
 import type {Task} from './TaskQueue';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge');
@@ -208,4 +209,8 @@ function _processUpdate() {
   _deleteInteractionSet.clear();
 }
 
-module.exports = InteractionManager;
+module.exports = (
+  ReactNativeFeatureFlags.disableInteractionManager()
+    ? require('./InteractionManagerStub')
+    : InteractionManager
+) as typeof InteractionManager;

package/Libraries/Interaction/InteractionManagerStub.js

@@ -0,0 +1,176 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
+
+const invariant = require('invariant');
+
+export type Handle = number;
+
+type Task =
+  | {
+      name: string,
+      run: () => void,
+    }
+  | {
+      name: string,
+      gen: () => Promise<void>,
+    }
+  | (() => void);
+
+/**
+ * InteractionManager allows long-running work to be scheduled after any
+ * interactions/animations have completed. In particular, this allows JavaScript
+ * animations to run smoothly.
+ *
+ * Applications can schedule tasks to run after interactions with the following:
+ *
+ * ```
+ * InteractionManager.runAfterInteractions(() => {
+ *   // ...long-running synchronous task...
+ * });
+ * ```
+ *
+ * Compare this to other scheduling alternatives:
+ *
+ * - requestAnimationFrame(): for code that animates a view over time.
+ * - setImmediate/setTimeout(): run code later, note this may delay animations.
+ * - runAfterInteractions(): run code later, without delaying active animations.
+ *
+ * The touch handling system considers one or more active touches to be an
+ * 'interaction' and will delay `runAfterInteractions()` callbacks until all
+ * touches have ended or been cancelled.
+ *
+ * InteractionManager also allows applications to register animations by
+ * creating an interaction 'handle' on animation start, and clearing it upon
+ * completion:
+ *
+ * ```
+ * var handle = InteractionManager.createInteractionHandle();
+ * // run animation... (`runAfterInteractions` tasks are queued)
+ * // later, on animation completion:
+ * InteractionManager.clearInteractionHandle(handle);
+ * // queued tasks run if all handles were cleared
+ * ```
+ *
+ * `runAfterInteractions` takes either a plain callback function, or a
+ * `PromiseTask` object with a `gen` method that returns a `Promise`.  If a
+ * `PromiseTask` is supplied, then it is fully resolved (including asynchronous
+ * dependencies that also schedule more tasks via `runAfterInteractions`) before
+ * starting on the next task that might have been queued up synchronously
+ * earlier.
+ *
+ * By default, queued tasks are executed together in a loop in one
+ * `setImmediate` batch. If `setDeadline` is called with a positive number, then
+ * tasks will only be executed until the deadline (in terms of js event loop run
+ * time) approaches, at which point execution will yield via setTimeout,
+ * allowing events such as touches to start interactions and block queued tasks
+ * from executing, making apps more responsive.
+ *
+ * @deprecated
+ */
+const InteractionManagerStub = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete',
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed. Returns a cancellable
+   * "promise".
+   *
+   * @deprecated
+   */
+  runAfterInteractions(task: ?Task): {
+    then: <U>(
+      onFulfill?: ?(void) => ?(Promise<U> | U),
+      onReject?: ?(error: mixed) => ?(Promise<U> | U),
+    ) => Promise<U>,
+    cancel: () => void,
+    ...
+  } {
+    let immediateID: ?$FlowIssue;
+    const promise = new Promise((resolve, reject) => {
+      immediateID = setImmediate(() => {
+        if (typeof task === 'object' && task !== null) {
+          if (typeof task.gen === 'function') {
+            task.gen().then(resolve, reject);
+          } else if (typeof task.run === 'function') {
+            try {
+              task.run();
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new TypeError(`Task "${task.name}" missing gen or run.`));
+          }
+        } else if (typeof task === 'function') {
+          try {
+            task();
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        } else {
+          reject(new TypeError('Invalid task of type: ' + typeof task));
+        }
+      });
+    });
+
+    return {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      then: promise.then.bind(promise),
+      cancel() {
+        clearImmediate(immediateID);
+      },
+    };
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   *
+   * @deprecated
+   */
+  createInteractionHandle(): Handle {
+    return -1;
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   *
+   * @deprecated
+   */
+  clearInteractionHandle(handle: Handle) {
+    invariant(!!handle, 'InteractionManager: Must provide a handle to clear.');
+  },
+
+  /**
+   * @deprecated
+   */
+  addListener(): EventSubscription {
+    return {
+      remove() {},
+    };
+  },
+
+  /**
+   * A positive number will use setTimeout to schedule any tasks after the
+   * eventLoopRunningTime hits the deadline value, otherwise all tasks will be
+   * executed in one setImmediate batch (default).
+   *
+   * @deprecated
+   */
+  setDeadline(deadline: number) {
+    // Do nothing.
+  },
+};
+
+module.exports = InteractionManagerStub;

package/Libraries/Interaction/TouchHistoryMath.js

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
+// $FlowFixMe[definition-cycle]
+// $FlowFixMe[recursive-definition]
 const TouchHistoryMath = {
   /**
    * This code is optimized and not intended to look beautiful. This allows
@@ -25,11 +28,11 @@ const TouchHistoryMath = {
    * @return {number} value of centroid in specified dimension.
    */
   centroidDimension: function (
-    touchHistory,
-    touchesChangedAfter,
-    isXAxis,
-    ofCurrent,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+    isXAxis: boolean,
+    ofCurrent: boolean,
+  ): number {
     const touchBank = touchHistory.touchBank;
     let total = 0;
     let count = 0;
@@ -82,9 +85,9 @@ const TouchHistoryMath = {
   },
 
   currentCentroidXOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -94,9 +97,9 @@ const TouchHistoryMath = {
   },
 
   currentCentroidYOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -106,9 +109,9 @@ const TouchHistoryMath = {
   },
 
   previousCentroidXOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -118,9 +121,9 @@ const TouchHistoryMath = {
   },
 
   previousCentroidYOfTouchesChangedAfter: function (
-    touchHistory,
-    touchesChangedAfter,
-  ) {
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       touchesChangedAfter,
@@ -129,7 +132,7 @@ const TouchHistoryMath = {
     );
   },
 
-  currentCentroidX: function (touchHistory) {
+  currentCentroidX: function (touchHistory: TouchHistoryMath): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       0, // touchesChangedAfter
@@ -138,7 +141,7 @@ const TouchHistoryMath = {
     );
   },
 
-  currentCentroidY: function (touchHistory) {
+  currentCentroidY: function (touchHistory: TouchHistoryMath): number {
     return TouchHistoryMath.centroidDimension(
       touchHistory,
       0, // touchesChangedAfter

package/Libraries/JSInspector/NetworkAgent.js

@@ -260,7 +260,7 @@ type EnableArgs = {
 };
 
 class NetworkAgent extends InspectorAgent {
-  static DOMAIN: $TEMPORARY$string<'Network'> = 'Network';
+  static DOMAIN: string = 'Network';
 
   _sendEvent: EventSender;
   _interceptor: ?Interceptor;

package/Libraries/Lists/FlatList.d.ts

@@ -235,8 +235,7 @@ export abstract class FlatListComponent<
 
   getScrollableNode: () => any;
 
-  // TODO: use `unknown` instead of `any` for Typescript >= 3.0
-  setNativeProps: (props: {[key: string]: any}) => void;
+  setNativeProps: (props: {[key: string]: unknown}) => void;
 }
 
 export class FlatList<ItemT = any> extends FlatListComponent<

package/Libraries/Lists/FlatList.js

@@ -480,10 +480,10 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     this._checkProps(this.props);
   }
 
-  _listRef: ?React.ElementRef<typeof VirtualizedList>;
+  _listRef: ?VirtualizedList;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
 
-  _captureRef = (ref: ?React.ElementRef<typeof VirtualizedList>) => {
+  _captureRef = (ref: ?VirtualizedList) => {
     this._listRef = ref;
   };
 

package/Libraries/Lists/SectionListModern.js

@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {AbstractComponent, ElementRef} from 'react';
+import type {ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -93,7 +93,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
   removeClippedSubviews?: boolean,
 |};
 
-export type Props<SectionT> = {|
+export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -115,7 +115,7 @@ export type Props<SectionT> = {|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|};
+|}>;
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
@@ -172,10 +172,10 @@ export type Props<SectionT> = {|
  *   Alternatively, you can provide a custom `keyExtractor` prop.
  *
  */
-const SectionList: AbstractComponent<Props<SectionBase<any>>, any> = forwardRef<
-  Props<SectionBase<any>>,
-  any,
->((props, ref) => {
+const SectionList: component(
+  ref?: React.RefSetter<any>,
+  ...Props<SectionBase<any>>
+) = forwardRef<Props<SectionBase<any>>, any>((props, ref) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
     ...props,

package/Libraries/Lists/__flowtests__/FlatList-flowtest.js

@@ -75,7 +75,7 @@ module.exports = {
     );
   },
 
-  testBadRenderItemFunction(): $TEMPORARY$array<React.Node> {
+  testBadRenderItemFunction(): $ReadOnlyArray<React.Node> {
     const data = [
       {
         title: 'foo',
@@ -105,7 +105,7 @@ module.exports = {
     ];
   },
 
-  testOtherBadProps(): $TEMPORARY$array<React.Node> {
+  testOtherBadProps(): $ReadOnlyArray<React.Node> {
     return [
       // $FlowExpectedError - bad numColumns type "lots"
       <FlatList renderItem={renderMyListItem} data={[]} numColumns="lots" />,

package/Libraries/Lists/__flowtests__/SectionList-flowtest.js

@@ -44,7 +44,7 @@ module.exports = {
     return <SectionList renderItem={renderMyListItem} sections={sections} />;
   },
 
-  testBadRenderItemFunction(): $TEMPORARY$array<React.Node> {
+  testBadRenderItemFunction(): $ReadOnlyArray<React.Node> {
     const sections = [
       {
         key: 'a',

package/Libraries/LogBox/Data/LogBoxData.js

@@ -18,7 +18,7 @@ import type {
   Message,
 } from './parseLogBoxLog';
 
-import DebuggerSessionObserver from '../../../src/private/fusebox/FuseboxSessionObserver';
+import DebuggerSessionObserver from '../../../src/private/debugging/FuseboxSessionObserver';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
@@ -421,7 +421,7 @@ type State = $ReadOnly<{|
   selectedLogIndex: number,
 |}>;
 
-type SubscribedComponent = React.AbstractComponent<
+type SubscribedComponent = React.ComponentType<
   $ReadOnly<{|
     logs: $ReadOnlyArray<LogBoxLog>,
     isDisabled: boolean,
@@ -431,7 +431,7 @@ type SubscribedComponent = React.AbstractComponent<
 
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
-): React.AbstractComponent<{||}> {
+): React.ComponentType<{||}> {
   class LogBoxStateSubscription extends React.Component<Props, State> {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};

package/Libraries/LogBox/LogBox.js

@@ -52,6 +52,17 @@ if (__DEV__) {
 
       isLogBoxInstalled = true;
 
+      if (global.RN$registerExceptionListener != null) {
+        global.RN$registerExceptionListener(
+          (error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
+            if (global.RN$isRuntimeReady?.() || !error.isFatal) {
+              error.preventDefault();
+              addException(error);
+            }
+          },
+        );
+      }
+
       // Trigger lazy initialization of module.
       require('../NativeModules/specs/NativeLogBox');
 
@@ -122,13 +133,15 @@ if (__DEV__) {
       }
     },
 
-    addException(error: ExtendedExceptionData): void {
-      if (isLogBoxInstalled) {
-        LogBoxData.addException(error);
-      }
-    },
+    addException,
   };
 
+  function addException(error: ExtendedExceptionData): void {
+    if (isLogBoxInstalled) {
+      LogBoxData.addException(error);
+    }
+  }
+
   const isRCTLogAdviceWarning = (...args: Array<mixed>) => {
     // RCTLogAdvice is a native logging function designed to show users
     // a message in the console, but not show it to them in Logbox.

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.AbstractComponent<{||}>);
+): React.ComponentType<{||}>);

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -8,13 +8,13 @@
  * @format
  */
 
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
-import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 type Props = $ReadOnly<{|
   logs: $ReadOnlyArray<LogBoxLog>,
@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.AbstractComponent<{||}>);
+): React.ComponentType<{||}>);

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -37,6 +37,8 @@ const COLORS = {
   'ansi-bright-white': 'rgb(247, 247, 247)',
 };
 
+const LRM = '\u200E'; // Left-to-Right Mark
+
 export default function Ansi({
   text,
   style,
@@ -80,25 +82,28 @@ export default function Ansi({
   };
 
   return (
-    <View>
+    <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          {items.map((bundle, key) => {
-            const textStyle =
-              bundle.fg && COLORS[bundle.fg]
-                ? {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                    color: bundle.fg && COLORS[bundle.fg],
-                  }
-                : {
-                    backgroundColor: bundle.bg && COLORS[bundle.bg],
-                  };
-            return (
-              <Text style={[style, textStyle]} key={key}>
-                {getText(bundle.content, key)}
-              </Text>
-            );
-          })}
+          <Text>
+            {LRM}
+            {items.map((bundle, key) => {
+              const textStyle =
+                bundle.fg && COLORS[bundle.fg]
+                  ? {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                      color: bundle.fg && COLORS[bundle.fg],
+                    }
+                  : {
+                      backgroundColor: bundle.bg && COLORS[bundle.bg],
+                    };
+              return (
+                <Text style={[style, textStyle]} key={key}>
+                  {getText(bundle.content, key)}
+                </Text>
+              );
+            })}
+          </Text>
         </View>
       ))}
     </View>
@@ -106,6 +111,10 @@ export default function Ansi({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    minWidth: '100%',
+    direction: 'ltr',
+  },
   line: {
     flexDirection: 'row',
   },

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -59,7 +59,9 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
     <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
       <View style={styles.box}>
         <View style={styles.frame}>
-          <ScrollView horizontal>
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.contentContainer}>
             <AnsiHighlight style={styles.content} text={codeFrame.content} />
           </ScrollView>
         </View>
@@ -138,6 +140,9 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  contentContainer: {
+    minWidth: '100%',
+  },
   content: {
     color: LogBoxStyle.getTextColor(1),
     fontSize: 12,