@office-iss/react-native-win32 0.0.0-canary.283 → 0.0.0-canary.284

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

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView
-            horizontal
-            contentContainerStyle={styles.contentContainer}>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,13 +18,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-|}>;
+}>;
 
 const SHOW_MORE_MESSAGE_LENGTH = 300;
 

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -20,9 +20,9 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
-|}>;
+}>;
 
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 

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

@@ -20,9 +20,9 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
-|}>;
+}>;
 
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 

package/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -14,11 +14,11 @@ import Text from '../../Text/Text';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   heading: string,
   children: React.Node,
   action?: ?React.Node,
-|}>;
+}>;
 
 function LogBoxInspectorSection(props: Props): React.Node {
   return (

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -18,10 +18,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onPress?: ?(event: PressEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-|}>;
+}>;
 
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   const [state, setState] = React.useState({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -23,10 +23,10 @@ import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   onRetry: () => void,
-|}>;
+}>;
 
 export function getCollapseMessage(
   stackFrames: Stack,

package/Libraries/Modal/Modal.js

@@ -18,15 +18,15 @@ import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
 import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
+import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const View = require('../Components/View/View');
 const AppContainer = require('../ReactNative/AppContainer');
 const I18nManager = require('../ReactNative/I18nManager');
 const {RootTagContext} = require('../ReactNative/RootTag');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Platform = require('../Utilities/Platform');
-const React = require('react');
 
 type ModalEventDefinitions = {
   modalDismissed: [{modalID: number}],
@@ -53,11 +53,11 @@ const ModalEventEmitter =
 // destroyed before the callback is fired.
 let uniqueModalIdentifier = 0;
 
-type OrientationChangeEvent = $ReadOnly<{|
+type OrientationChangeEvent = $ReadOnly<{
   orientation: 'portrait' | 'landscape',
-|}>;
+}>;
 
-export type Props = $ReadOnly<{|
+export type Props = $ReadOnly<{
   ...ViewProps,
 
   /**
@@ -171,7 +171,7 @@ export type Props = $ReadOnly<{|
    * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
    */
   backdropColor?: ?string,
-|}>;
+}>;
 
 function confirmProps(props: Props) {
   if (__DEV__) {
@@ -202,7 +202,7 @@ type State = {
 };
 
 class Modal extends React.Component<Props, State> {
-  static defaultProps: {|hardwareAccelerated: boolean, visible: boolean|} = {
+  static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,
   };

package/Libraries/Network/XMLHttpRequest.js

@@ -15,7 +15,7 @@ import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import EventTarget from 'event-target-shim';
 
-const BlobManager = require('../Blob/BlobManager');
+const BlobManager = require('../Blob/BlobManager').default;
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');

package/Libraries/Network/convertRequestBody.js

@@ -10,7 +10,9 @@
 
 'use strict';
 
-const Blob = require('../Blob/Blob');
+import typeof BlobT from '../Blob/Blob';
+
+const Blob: BlobT = require('../Blob/Blob').default;
 const binaryToBase64 = require('../Utilities/binaryToBase64');
 const FormData = require('./FormData');
 

package/Libraries/PermissionsAndroid/PermissionsAndroid.js

@@ -88,7 +88,7 @@ const PERMISSIONS = Object.freeze({
  */
 
 class PermissionsAndroid {
-  PERMISSIONS: $ReadOnly<{|
+  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: $ReadOnly<{|
+  }> = 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/Pressability.js

@@ -27,7 +27,7 @@ import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventE
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 import invariant from 'invariant';
 
-export type PressabilityConfig = $ReadOnly<{|
+export type PressabilityConfig = $ReadOnly<{
   /**
    * Whether a press gesture can be interrupted by a parent gesture such as a
    * scroll event. Defaults to true.
@@ -135,9 +135,9 @@ export type PressabilityConfig = $ReadOnly<{|
    * while this pressable is responder.
    */
   blockNativeResponder?: ?boolean,
-|}>;
+}>;
 
-export type EventHandlers = $ReadOnly<{|
+export type EventHandlers = $ReadOnly<{
   onBlur: (event: BlurEvent) => void,
   onClick: (event: PressEvent) => void,
   onFocus: (event: FocusEvent) => void,
@@ -151,7 +151,7 @@ export type EventHandlers = $ReadOnly<{|
   onResponderTerminate: (event: PressEvent) => void,
   onResponderTerminationRequest: () => boolean,
   onStartShouldSetResponder: () => boolean,
-|}>;
+}>;
 
 type TouchState =
   | 'NOT_RESPONDER'
@@ -378,16 +378,16 @@ export default class Pressability {
   _pressDelayTimeout: ?TimeoutID = null;
   _pressOutDelayTimeout: ?TimeoutID = null;
   _responderID: ?number | HostInstance = null;
-  _responderRegion: ?$ReadOnly<{|
+  _responderRegion: ?$ReadOnly<{
     bottom: number,
     left: number,
     right: number,
     top: number,
-  |}> = null;
-  _touchActivatePosition: ?$ReadOnly<{|
+  }> = null;
+  _touchActivatePosition: ?$ReadOnly<{
     pageX: number,
     pageY: number,
-  |}>;
+  }>;
   _touchActivateTime: ?number;
   _touchState: TouchState = 'NOT_RESPONDER';
 
@@ -830,12 +830,12 @@ export default class Pressability {
 
   _isTouchWithinResponderRegion(
     touch: $PropertyType<PressEvent, 'nativeEvent'>,
-    responderRegion: $ReadOnly<{|
+    responderRegion: $ReadOnly<{
       bottom: number,
       left: number,
       right: number,
       top: number,
-    |}>,
+    }>,
   ): boolean {
     const hitSlop = normalizeRect(this._config.hitSlop);
     const pressRectOffset = normalizeRect(this._config.pressRectOffset);

package/Libraries/Pressability/Pressability.win32.js

@@ -28,7 +28,7 @@ import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventE
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 import invariant from 'invariant';
 
-export type PressabilityConfig = $ReadOnly<{|
+export type PressabilityConfig = $ReadOnly<{
   /**
    * Whether a press gesture can be interrupted by a parent gesture such as a
    * scroll event. Defaults to true.
@@ -162,9 +162,9 @@ export type PressabilityConfig = $ReadOnly<{|
    */
   onMouseLeave?: ?(event: MouseEvent) => mixed,
   // Windows]
-|}>;
+}>;
 
-export type EventHandlers = $ReadOnly<{|
+export type EventHandlers = $ReadOnly<{
   onBlur: (event: BlurEvent) => void,
   onClick: (event: PressEvent) => void,
   onFocus: (event: FocusEvent) => void,
@@ -182,7 +182,7 @@ export type EventHandlers = $ReadOnly<{|
   onKeyUp: (event: KeyEvent) => void,
   onKeyDown: (event: KeyEvent) => void,
   // Windows]
-|}>;
+}>;
 
 type TouchState =
   | 'NOT_RESPONDER'
@@ -409,16 +409,16 @@ export default class Pressability {
   _pressDelayTimeout: ?TimeoutID = null;
   _pressOutDelayTimeout: ?TimeoutID = null;
   _responderID: ?number | HostInstance = null;
-  _responderRegion: ?$ReadOnly<{|
+  _responderRegion: ?$ReadOnly<{
     bottom: number,
     left: number,
     right: number,
     top: number,
-  |}> = null;
-  _touchActivatePosition: ?$ReadOnly<{|
+  }> = null;
+  _touchActivatePosition: ?$ReadOnly<{
     pageX: number,
     pageY: number,
-  |}>;
+  }>;
   _touchActivateTime: ?number;
   _touchState: TouchState = 'NOT_RESPONDER';
   _isKeyDown: boolean = false;
@@ -935,12 +935,12 @@ export default class Pressability {
 
   _isTouchWithinResponderRegion(
     touch: $PropertyType<PressEvent, 'nativeEvent'>,
-    responderRegion: $ReadOnly<{|
+    responderRegion: $ReadOnly<{
       bottom: number,
       left: number,
       right: number,
       top: number,
-    |}>,
+    }>,
   ): boolean {
     const hitSlop = normalizeRect(this._config.hitSlop);
     const pressRectOffset = normalizeRect(this._config.pressRectOffset);

package/Libraries/Pressability/PressabilityDebug.js

@@ -15,10 +15,10 @@ import normalizeColor from '../StyleSheet/normalizeColor';
 import {type RectOrSize, normalizeRect} from '../StyleSheet/Rect';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   color: ColorValue,
   hitSlop: ?RectOrSize,
-|}>;
+}>;
 
 /**
  * Displays a debug overlay to visualize press targets when enabled via the

package/Libraries/Pressability/PressabilityPerformanceEventEmitter.js

@@ -10,10 +10,10 @@
 
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 
-export type PressabilityPerformanceEvent = $ReadOnly<{|
+export type PressabilityPerformanceEvent = $ReadOnly<{
   signal: TouchSignal,
   nativeTimestamp: number,
-|}>;
+}>;
 export type PressabilityPerformanceEventListener =
   PressabilityPerformanceEvent => void;
 

package/Libraries/Promise.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const Promise = require('promise/setimmediate/es6-extensions');
+import Promise from 'promise/setimmediate/es6-extensions';
 
 require('promise/setimmediate/finally');
 
@@ -20,4 +20,4 @@ if (__DEV__) {
   );
 }
 
-module.exports = Promise;
+export default Promise;

package/Libraries/ReactNative/AppContainer.js

@@ -13,7 +13,7 @@ import type {RootTag} from './RootTag';
 
 import * as React from 'react';
 
-export type Props = $ReadOnly<{|
+export type Props = $ReadOnly<{
   children?: React.Node,
   fabric?: boolean,
   rootTag: number | RootTag,
@@ -22,7 +22,7 @@ export type Props = $ReadOnly<{|
   rootViewStyle?: ?ViewStyleProp,
   internal_excludeLogBox?: boolean,
   internal_excludeInspector?: boolean,
-|}>;
+}>;
 
 const AppContainer: component(...Props) = __DEV__
   ? require('./AppContainer-dev').default

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -182,14 +182,9 @@ const UIManagerJSPlatformAPIs = Platform.select({
       return [];
     },
     setLayoutAnimationEnabledExperimental: (enabled: boolean): void => {
-      /**
-       * Layout animations are always enabled in the New Architecture.
-       * They cannot be turned off.
-       */
-      if (!enabled) {
-        raiseSoftError(
-          'setLayoutAnimationEnabledExperimental(false)',
-          'Layout animations are always enabled in the New Architecture.',
+      if (__DEV__) {
+        console.warn(
+          'setLayoutAnimationEnabledExperimental is currently a no-op in the New Architecture.',
         );
       }
     },

package/Libraries/ReactNative/I18nManager.js

@@ -56,6 +56,7 @@ module.exports = {
     NativeI18nManager.swapLeftAndRightInRTL(flipStyles);
   },
 
-  isRTL: i18nConstants.isRTL,
-  doLeftAndRightSwapInRTL: i18nConstants.doLeftAndRightSwapInRTL,
+  isRTL: i18nConstants.isRTL as I18nManagerConstants['isRTL'],
+  doLeftAndRightSwapInRTL:
+    i18nConstants.doLeftAndRightSwapInRTL as I18nManagerConstants['doLeftAndRightSwapInRTL'],
 };

package/Libraries/ReactNative/PaperUIManager.js

@@ -14,7 +14,7 @@ import type {UIManagerJSInterface} from '../Types/UIManagerJSInterface';
 import NativeUIManager from './NativeUIManager';
 import nullthrows from 'nullthrows';
 
-const NativeModules = require('../BatchedBridge/NativeModules');
+const NativeModules = require('../BatchedBridge/NativeModules').default;
 const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
 const Platform = require('../Utilities/Platform');
 const UIManagerProperties = require('./UIManagerProperties');

package/Libraries/ReactNative/PaperUIManager.win32.js

@@ -14,7 +14,7 @@ import type {UIManagerJSInterface} from '../Types/UIManagerJSInterface';
 import NativeUIManager from './NativeUIManager';
 import nullthrows from 'nullthrows';
 
-const NativeModules = require('../BatchedBridge/NativeModules');
+const NativeModules = require('../BatchedBridge/NativeModules').default;
 const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
 const Platform = require('../Utilities/Platform');
 const UIManagerProperties = require('./UIManagerProperties');

package/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-export type FeatureFlags = {|
+export type FeatureFlags = {
   /**
    * Function used to enable / disable W3C pointer event emitting in React Native.
    * If enabled you must also flip the equivalent native flags on each platform:
@@ -21,7 +21,7 @@ export type FeatureFlags = {|
    * for its hover callbacks
    */
   shouldPressibilityUseW3CPointerEventsForHover: () => boolean,
-|};
+};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
   shouldEmitW3CPointerEvents: () => false,

package/Libraries/ReactNative/ReactNativeRuntimeDiagnostics.js

@@ -14,7 +14,7 @@
  * Perform a set of runtime diagnostics, usually useful for test purpose.
  * This is only meaningful for __DEV__ mode.
  */
-export type RuntimeDiagnostics = {|
+export type RuntimeDiagnostics = {
   /**
    * Check if the runtime diagnostics is enabled at all.
    */
@@ -24,7 +24,7 @@ export type RuntimeDiagnostics = {|
    * If enabled, simulate early JavaScript errors during initialization.
    */
   simulateEarlyJavaScriptErrors: () => void,
-|};
+};
 
 export type RuntimeDiagnosticFlag = 'early_js_errors' | 'all';
 

package/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -38,7 +38,7 @@ import typeof Platform from '../Utilities/Platform';
 // flowlint unsafe-getters-setters:off
 module.exports = {
   get BatchedBridge(): BatchedBridge {
-    return require('../BatchedBridge/BatchedBridge');
+    return require('../BatchedBridge/BatchedBridge').default;
   },
   get ExceptionsManager(): ExceptionsManager {
     return require('../Core/ExceptionsManager');
@@ -77,7 +77,8 @@ module.exports = {
     return require('../Core/ReactFiberErrorDialog').default;
   },
   get legacySendAccessibilityEvent(): legacySendAccessibilityEvent {
-    return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent');
+    return require('../Components/AccessibilityInfo/legacySendAccessibilityEvent')
+      .default;
   },
   get RawEventEmitter(): RawEventEmitter {
     return require('../Core/RawEventEmitter').default;

package/Libraries/StyleSheet/Rect.js

@@ -8,12 +8,12 @@
  * @flow strict
  */
 
-export type Rect = $ReadOnly<{|
+export type Rect = $ReadOnly<{
   bottom?: ?number,
   left?: ?number,
   right?: ?number,
   top?: ?number,
-|}>;
+}>;
 
 export type RectOrSize = Rect | number;
 

package/Libraries/StyleSheet/StyleSheet.js

@@ -24,10 +24,10 @@ import type {
 } from './StyleSheetTypes';
 
 import composeStyles from '../../src/private/styles/composeStyles';
+import flatten from './flattenStyle';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;
-const flatten = require('./flattenStyle');
 
 export type {NativeColorValue} from './StyleSheetTypes';
 

package/Libraries/StyleSheet/StyleSheet.win32.js

@@ -24,11 +24,11 @@ import type {
 } from './StyleSheetTypes';
 
 import composeStyles from '../../src/private/styles/composeStyles';
+import flatten from './flattenStyle';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform'); // [Win32]
-const flatten = require('./flattenStyle');
 
 export type {NativeColorValue} from './StyleSheetTypes';
 

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -372,7 +372,7 @@ export type GradientValue = {
   // Angle or direction enums
   direction?: string | undefined;
   colorStops: ReadonlyArray<{
-    color: ColorValue;
+    color: ColorValue | null;
     positions?: ReadonlyArray<string[]> | undefined;
   }>;
 };