@office-iss/react-native-win32 0.0.0-canary.273 → 0.0.0-canary.275

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/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/LogBox/Data/LogBoxData.js

@@ -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

@@ -55,7 +55,7 @@ if (__DEV__) {
       if (global.RN$registerExceptionListener != null) {
         global.RN$registerExceptionListener(
           (error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
-            if (!error.isFatal) {
+            if (global.RN$isRuntimeReady?.() || !error.isFatal) {
               error.preventDefault();
               addException(error);
             }

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

@@ -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,

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.win32.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,

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -27,7 +27,7 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
   Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {

package/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js

@@ -29,7 +29,7 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
   Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {

package/Libraries/Modal/Modal.d.ts

@@ -101,6 +101,11 @@ export interface ModalPropsAndroid {
    *  Determines whether your modal should go under the system statusbar.
    */
   statusBarTranslucent?: boolean | undefined;
+
+  /**
+   *  Determines whether your modal should go under the system navigationbar.
+   */
+  navigationBarTranslucent?: boolean | undefined;
 }
 
 export type ModalProps = ModalBaseProps &

package/Libraries/Modal/Modal.js

@@ -95,6 +95,14 @@ export type Props = $ReadOnly<{|
    */
   statusBarTranslucent?: ?boolean,
 
+  /**
+   * The `navigationBarTranslucent` prop determines whether your modal should go under
+   * the system navigationbar.
+   *
+   * See https://reactnative.dev/docs/modal.html#navigationbartranslucent-android
+   */
+  navigationBarTranslucent?: ?boolean,
+
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
    * acceleration for the underlying window.
@@ -176,6 +184,14 @@ function confirmProps(props: Props) {
         `Modal with '${props.presentationStyle}' presentation style and 'transparent' value is not supported.`,
       );
     }
+    if (
+      props.navigationBarTranslucent === true &&
+      props.statusBarTranslucent !== true
+    ) {
+      console.warn(
+        'Modal with translucent navigation bar and without translucent status bar is not supported.',
+      );
+    }
   }
 }
 
@@ -301,6 +317,7 @@ class Modal extends React.Component<Props, State> {
         onDismiss={onDismiss}
         visible={this.props.visible}
         statusBarTranslucent={this.props.statusBarTranslucent}
+        navigationBarTranslucent={this.props.navigationBarTranslucent}
         identifier={this._identifier}
         style={styles.modal}
         // $FlowFixMe[method-unbinding] added when improving typing for this parameters
@@ -342,8 +359,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const ExportedModal: React.AbstractComponent<
-  React.ElementConfig<typeof Modal>,
-> = ModalInjection.unstable_Modal ?? Modal;
+const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
+  ModalInjection.unstable_Modal ?? Modal;
 
 module.exports = ExportedModal;

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -48,7 +48,7 @@ export function setRuntimeConfigProvider(
  * The supplied `viewConfigProvider` may or may not be invoked and utilized,
  * depending on how `setRuntimeConfigProvider` is configured.
  */
-export function get<Config>(
+export function get<Config: {...}>(
   name: string,
   viewConfigProvider: () => PartialViewConfig,
 ): HostComponent<Config> {
@@ -121,10 +121,10 @@ export function get<Config>(
  * that the return value of this is not `HostComponent` because the returned
  * component instance is not guaranteed to have native methods.
  */
-export function getWithFallback_DEPRECATED<Config>(
+export function getWithFallback_DEPRECATED<Config: {...}>(
   name: string,
   viewConfigProvider: () => PartialViewConfig,
-): React.AbstractComponent<Config> {
+): React.ComponentType<Config> {
   if (getRuntimeConfig == null) {
     // `getRuntimeConfig == null` when static view configs are disabled
     // If `setRuntimeConfigProvider` is not configured, use native reflection.

package/Libraries/PermissionsAndroid/PermissionsAndroid.d.ts

@@ -66,11 +66,58 @@ export interface PermissionsAndroidStatic {
   /**
    * A list of permission results that are returned
    */
-  RESULTS: {[key: string]: PermissionStatus};
+  RESULTS: {
+    [key in 'GRANTED' | 'DENIED' | 'NEVER_ASK_AGAIN']: PermissionStatus;
+  };
   /**
    * A list of specified "dangerous" permissions that require prompting the user
    */
-  PERMISSIONS: {[key: string]: Permission};
+  PERMISSIONS: {
+    [key in
+      | 'READ_CALENDAR'
+      | 'WRITE_CALENDAR'
+      | 'CAMERA'
+      | 'READ_CONTACTS'
+      | 'WRITE_CONTACTS'
+      | 'GET_ACCOUNTS'
+      | 'ACCESS_FINE_LOCATION'
+      | 'ACCESS_COARSE_LOCATION'
+      | 'ACCESS_BACKGROUND_LOCATION'
+      | 'RECORD_AUDIO'
+      | 'READ_PHONE_STATE'
+      | 'CALL_PHONE'
+      | 'READ_CALL_LOG'
+      | 'WRITE_CALL_LOG'
+      | 'ADD_VOICEMAIL'
+      | 'READ_VOICEMAIL'
+      | 'WRITE_VOICEMAIL'
+      | 'USE_SIP'
+      | 'PROCESS_OUTGOING_CALLS'
+      | 'BODY_SENSORS'
+      | 'BODY_SENSORS_BACKGROUND'
+      | 'SEND_SMS'
+      | 'RECEIVE_SMS'
+      | 'READ_SMS'
+      | 'RECEIVE_WAP_PUSH'
+      | 'RECEIVE_MMS'
+      | 'READ_EXTERNAL_STORAGE'
+      | 'READ_MEDIA_IMAGES'
+      | 'READ_MEDIA_VIDEO'
+      | 'READ_MEDIA_AUDIO'
+      | 'READ_MEDIA_VISUAL_USER_SELECTED'
+      | 'WRITE_EXTERNAL_STORAGE'
+      | 'BLUETOOTH_CONNECT'
+      | 'BLUETOOTH_SCAN'
+      | 'BLUETOOTH_ADVERTISE'
+      | 'ACCESS_MEDIA_LOCATION'
+      | 'ACCEPT_HANDOVER'
+      | 'ACTIVITY_RECOGNITION'
+      | 'ANSWER_PHONE_CALLS'
+      | 'READ_PHONE_NUMBERS'
+      | 'UWB_RANGING'
+      | 'POST_NOTIFICATIONS'
+      | 'NEARBY_WIFI_DEVICES']: Permission;
+  };
   new (): PermissionsAndroidStatic;
   /**
    * @deprecated Use check instead

package/Libraries/PermissionsAndroid/PermissionsAndroid.js

@@ -88,7 +88,7 @@ const PERMISSIONS = Object.freeze({
  */
 
 class PermissionsAndroid {
-  PERMISSIONS: {|
+  PERMISSIONS: $ReadOnly<{|
     ACCEPT_HANDOVER: string,
     ACCESS_BACKGROUND_LOCATION: string,
     ACCESS_COARSE_LOCATION: string,
@@ -132,12 +132,12 @@ class PermissionsAndroid {
     WRITE_CALL_LOG: string,
     WRITE_CONTACTS: string,
     WRITE_EXTERNAL_STORAGE: string,
-  |} = PERMISSIONS;
-  RESULTS: {|
+  |}> = PERMISSIONS;
+  RESULTS: $ReadOnly<{|
     DENIED: 'denied',
     GRANTED: 'granted',
     NEVER_ASK_AGAIN: 'never_ask_again',
-  |} = PERMISSION_REQUEST_RESULT;
+  |}> = PERMISSION_REQUEST_RESULT;
 
   /**
    * DEPRECATED - use check

package/Libraries/Pressability/usePressability.js

@@ -14,6 +14,9 @@ import Pressability, {
 } from './Pressability';
 import {useEffect, useRef} from 'react';
 
+declare function usePressability(config: PressabilityConfig): EventHandlers;
+declare function usePressability(config: null | void): null | EventHandlers;
+
 /**
  * Creates a persistent instance of `Pressability` that automatically configures
  * itself and resets. Accepts null `config` to support lazy initialization. Once
@@ -28,7 +31,7 @@ import {useEffect, useRef} from 'react';
  */
 export default function usePressability(
   config: ?PressabilityConfig,
-): ?EventHandlers {
+): null | EventHandlers {
   const pressabilityRef = useRef<?Pressability>(null);
   if (config != null && pressabilityRef.current == null) {
     pressabilityRef.current = new Pressability(config);

package/Libraries/ReactNative/AppContainer.js

@@ -24,7 +24,7 @@ export type Props = $ReadOnly<{|
   internal_excludeInspector?: boolean,
 |}>;
 
-const AppContainer: React.AbstractComponent<Props> = __DEV__
+const AppContainer: component(...Props) = __DEV__
   ? require('./AppContainer-dev').default
   : require('./AppContainer-prod').default;
 

package/Libraries/ReactNative/AppRegistry.js

@@ -46,7 +46,6 @@ type AppParameters = {
   initialProps: $ReadOnly<{[string]: mixed, ...}>,
   rootTag: RootTag,
   fabric?: boolean,
-  concurrentRoot?: boolean,
 };
 export type Runnable = (
   appParameters: AppParameters,
@@ -120,10 +119,6 @@ const AppRegistry = {
   ): string {
     const scopedPerformanceLogger = createPerformanceLogger();
     runnables[appKey] = (appParameters, displayMode) => {
-      const concurrentRootEnabled = Boolean(
-        appParameters.initialProps?.concurrentRoot ||
-          appParameters.concurrentRoot,
-      );
       renderApplication(
         componentProviderInstrumentationHook(
           componentProvider,
@@ -138,7 +133,6 @@ const AppRegistry = {
         appKey === 'LogBox', // is logbox
         appKey,
         displayMode,
-        concurrentRootEnabled,
       );
     };
     if (section) {

package/Libraries/ReactNative/DisplayMode.js

@@ -12,7 +12,7 @@ export opaque type DisplayModeType = number;
 
 /** DisplayMode should be in sync with the method displayModeToInt from
  * react/renderer/uimanager/primitives.h. */
-const DisplayMode: {[string]: DisplayModeType} = Object.freeze({
+const DisplayMode: {+[string]: DisplayModeType} = Object.freeze({
   VISIBLE: 1,
   SUSPENDED: 2,
   HIDDEN: 3,