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

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/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -138,7 +138,7 @@ function StackFrameList(props: {
 }
 
 function StackFrameFooter(
-  props: $TEMPORARY$object<{message: string, onPress: () => void}>,
+  props: $ReadOnly<{message: string, onPress: () => void}>,
 ) {
   return (
     <View style={stackStyles.collapseContainer}>

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -59,7 +59,7 @@ function TappableLinks(props: {
 
   // URLs were detected. Construct array of Text nodes.
 
-  let fragments: Array<React.Node> = [];
+  const fragments: Array<React.Node> = [];
   let indexCounter = 0;
   let startIndex = 0;
 
@@ -115,7 +115,7 @@ function LogBoxMessage(props: Props): React.Node {
   const elements = [];
   let length = 0;
   const createUnderLength = (
-    key: string | $TEMPORARY$string<'-1'>,
+    key: string,
     message: string,
     style: void | TextStyleProp,
   ) => {

package/Libraries/Modal/Modal.d.ts

@@ -10,6 +10,7 @@
 import type * as React from 'react';
 import {ViewProps} from '../Components/View/ViewPropTypes';
 import {NativeSyntheticEvent} from '../Types/CoreEventTypes';
+import {ColorValue} from '../StyleSheet/StyleSheet';
 
 export interface ModalBaseProps {
   /**
@@ -43,6 +44,12 @@ export interface ModalBaseProps {
    * The `onShow` prop allows passing a function that will be called once the modal has been shown.
    */
   onShow?: ((event: NativeSyntheticEvent<any>) => void) | undefined;
+
+  /**
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ColorValue | undefined;
 }
 
 export interface ModalPropsIOS {
@@ -94,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.
@@ -157,6 +165,12 @@ export type Props = $ReadOnly<{|
    * See https://reactnative.dev/docs/modal#onorientationchange
    */
   onOrientationChange?: ?DirectEventHandler<OrientationChangeEvent>,
+
+  /**
+   * The `backdropColor` props sets the background color of the modal's container.
+   * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
+   */
+  backdropColor?: ?string,
 |}>;
 
 function confirmProps(props: Props) {
@@ -170,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.',
+      );
+    }
   }
 }
 
@@ -218,6 +240,9 @@ class Modal extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      this.setState({isRendered: false});
+    }
     if (this._eventSubscription) {
       this._eventSubscription.remove();
     }
@@ -249,7 +274,9 @@ class Modal extends React.Component<Props, State> {
 
     const containerStyles = {
       backgroundColor:
-        this.props.transparent === true ? 'transparent' : 'white',
+        this.props.transparent === true
+          ? 'transparent'
+          : this.props.backdropColor ?? 'white',
     };
 
     let animationType = this.props.animationType || 'none';
@@ -290,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
@@ -331,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/BaseViewConfig.android.js

@@ -175,7 +175,7 @@ const validAttributesForNonEventProps = {
   filter: {
     process: require('../StyleSheet/processFilter').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
   opacity: true,
   elevation: true,
@@ -227,6 +227,7 @@ const validAttributesForNonEventProps = {
   justifyContent: true,
   overflow: true,
   display: true,
+  boxSizing: true,
 
   margin: true,
   marginBlock: true,
@@ -268,6 +269,11 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderRightWidth: true,
 
+  outlineColor: {process: require('../StyleSheet/processColor').default},
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
+
   start: true,
   end: true,
   left: true,
@@ -288,6 +294,71 @@ const validAttributesForNonEventProps = {
   style: ReactNativeStyleAttributes,
 
   experimental_layoutConformance: true,
+
+  // ReactClippingViewManager @ReactProps
+  removeClippedSubviews: true,
+
+  // ReactViewManager @ReactProps
+  accessible: true,
+  hasTVPreferredFocus: true,
+  nextFocusDown: true,
+  nextFocusForward: true,
+  nextFocusLeft: true,
+  nextFocusRight: true,
+  nextFocusUp: true,
+
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderTopStartRadius: true,
+  borderTopEndRadius: true,
+  borderBottomStartRadius: true,
+  borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  borderStyle: true,
+  hitSlop: true,
+  pointerEvents: true,
+  nativeBackgroundAndroid: true,
+  nativeForegroundAndroid: true,
+  needsOffscreenAlphaCompositing: true,
+
+  borderColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderLeftColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderRightColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderTopColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBottomColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockEndColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  borderBlockStartColor: {
+    process: require('../StyleSheet/processColor').default,
+  },
+  focusable: true,
+  backfaceVisibility: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -231,7 +231,7 @@ const validAttributesForNonEventProps = {
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
 
   borderTopWidth: true,
@@ -348,6 +348,7 @@ const validAttributesForNonEventProps = {
   alignContent: true,
   position: true,
   aspectRatio: true,
+  boxSizing: true,
 
   // Also declared as ViewProps
   // overflow: true,

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -198,7 +198,6 @@ const validAttributesForNonEventProps = {
   testID: true,
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
-  cursor: true,
   opacity: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
@@ -217,21 +216,19 @@ const validAttributesForNonEventProps = {
   role: true,
   borderRadius: true,
   borderColor: {process: require('../StyleSheet/processColor').default},
-  borderBlockColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
-  borderBlockWidth: true,
   borderStyle: true,
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  filter: {
+  experimental_filter: {
     process: require('../StyleSheet/processFilter').default,
   },
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_mixBlendMode: true,
+  mixBlendMode: true,
   isolation: true,
 
   borderTopWidth: true,
@@ -243,15 +240,9 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderBlockStartWidth: true,
   borderStartColor: {process: require('../StyleSheet/processColor').default},
-  borderBlockStartColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
   borderEndWidth: true,
-  borderBlockEndWidth: true,
   borderEndColor: {process: require('../StyleSheet/processColor').default},
-  borderBlockEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -348,6 +339,7 @@ const validAttributesForNonEventProps = {
   alignContent: true,
   position: true,
   aspectRatio: true,
+  boxSizing: true,
 
   // Also declared as ViewProps
   // overflow: true,

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/NativeComponent/StaticViewConfigValidator.js

@@ -9,7 +9,6 @@
  */
 
 import {type ViewConfig} from '../Renderer/shims/ReactNativeTypes';
-import {isIgnored} from './ViewConfigIgnore';
 
 export type Difference =
   | {

package/Libraries/Network/FormData.js

@@ -28,6 +28,15 @@ type FormDataPart =
       ...
     };
 
+/**
+ * Encode a FormData filename compliant with RFC 2183
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition#directives
+ */
+function encodeFilename(filename: string): string {
+  return encodeURIComponent(filename.replace(/\//g, '_'));
+}
+
 /**
  * Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
  * with mixed data (string, native files) to be submitted via XMLHttpRequest.
@@ -82,9 +91,8 @@ class FormData {
       // content type (cf. web Blob interface.)
       if (typeof value === 'object' && !Array.isArray(value) && value) {
         if (typeof value.name === 'string') {
-          headers['content-disposition'] += `; filename="${
-            value.name
-          }"; filename*=utf-8''${encodeURI(value.name)}`;
+          headers['content-disposition'] +=
+            `; filename="${encodeFilename(value.name)}"`;
         }
         if (typeof value.type === 'string') {
           headers['content-type'] = value.type;

package/Libraries/Network/XHRInterceptor.js

@@ -5,20 +5,57 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict-local
  */
 
 'use strict';
 
 const XMLHttpRequest = require('./XMLHttpRequest');
+// $FlowFixMe[method-unbinding]
 const originalXHROpen = XMLHttpRequest.prototype.open;
+// $FlowFixMe[method-unbinding]
 const originalXHRSend = XMLHttpRequest.prototype.send;
+// $FlowFixMe[method-unbinding]
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
 
-let openCallback;
-let sendCallback;
-let requestHeaderCallback;
-let headerReceivedCallback;
-let responseCallback;
+type XHRInterceptorOpenCallback = (
+  method: string,
+  url: string,
+  request: XMLHttpRequest,
+) => void;
+
+type XHRInterceptorSendCallback = (
+  data: string,
+  request: XMLHttpRequest,
+) => void;
+
+type XHRInterceptorRequestHeaderCallback = (
+  header: string,
+  value: string,
+  request: XMLHttpRequest,
+) => void;
+
+type XHRInterceptorHeaderReceivedCallback = (
+  responseContentType: string | void,
+  responseSize: number | void,
+  allHeaders: string,
+  request: XMLHttpRequest,
+) => void;
+
+type XHRInterceptorResponseCallback = (
+  status: number,
+  timeout: number,
+  response: string,
+  responseURL: string,
+  responseType: string,
+  request: XMLHttpRequest,
+) => void;
+
+let openCallback: XHRInterceptorOpenCallback | null;
+let sendCallback: XHRInterceptorSendCallback | null;
+let requestHeaderCallback: XHRInterceptorRequestHeaderCallback | null;
+let headerReceivedCallback: XHRInterceptorHeaderReceivedCallback | null;
+let responseCallback: XHRInterceptorResponseCallback | null;
 
 let isInterceptorEnabled = false;
 
@@ -33,39 +70,39 @@ const XHRInterceptor = {
   /**
    * Invoked before XMLHttpRequest.open(...) is called.
    */
-  setOpenCallback(callback) {
+  setOpenCallback(callback: XHRInterceptorOpenCallback) {
     openCallback = callback;
   },
 
   /**
    * Invoked before XMLHttpRequest.send(...) is called.
    */
-  setSendCallback(callback) {
+  setSendCallback(callback: XHRInterceptorSendCallback) {
     sendCallback = callback;
   },
 
   /**
    * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
    */
-  setHeaderReceivedCallback(callback) {
+  setHeaderReceivedCallback(callback: XHRInterceptorHeaderReceivedCallback) {
     headerReceivedCallback = callback;
   },
 
   /**
    * Invoked after xhr's readyState becomes xhr.DONE.
    */
-  setResponseCallback(callback) {
+  setResponseCallback(callback: XHRInterceptorResponseCallback) {
     responseCallback = callback;
   },
 
   /**
    * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
    */
-  setRequestHeaderCallback(callback) {
+  setRequestHeaderCallback(callback: XHRInterceptorRequestHeaderCallback) {
     requestHeaderCallback = callback;
   },
 
-  isInterceptorEnabled() {
+  isInterceptorEnabled(): boolean {
     return isInterceptorEnabled;
   },
 
@@ -75,7 +112,9 @@ const XHRInterceptor = {
     }
     // Override `open` method for all XHR requests to intercept the request
     // method and url, then pass them through the `openCallback`.
-    XMLHttpRequest.prototype.open = function (method, url) {
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.open = function (method: string, url: string) {
       if (openCallback) {
         openCallback(method, url, this);
       }
@@ -84,7 +123,12 @@ const XHRInterceptor = {
 
     // Override `setRequestHeader` method for all XHR requests to intercept
     // the request headers, then pass them through the `requestHeaderCallback`.
-    XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.setRequestHeader = function (
+      header: string,
+      value: string,
+    ) {
       if (requestHeaderCallback) {
         requestHeaderCallback(header, value, this);
       }
@@ -93,7 +137,9 @@ const XHRInterceptor = {
 
     // Override `send` method of all XHR requests to intercept the data sent,
     // register listeners to intercept the response, and invoke the callbacks.
-    XMLHttpRequest.prototype.send = function (data) {
+    // $FlowFixMe[cannot-write]
+    // $FlowFixMe[missing-this-annot]
+    XMLHttpRequest.prototype.send = function (data: string) {
       if (sendCallback) {
         sendCallback(data, this);
       }
@@ -151,8 +197,11 @@ const XHRInterceptor = {
       return;
     }
     isInterceptorEnabled = false;
+    // $FlowFixMe[cannot-write]
     XMLHttpRequest.prototype.send = originalXHRSend;
+    // $FlowFixMe[cannot-write]
     XMLHttpRequest.prototype.open = originalXHROpen;
+    // $FlowFixMe[cannot-write]
     XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
     responseCallback = null;
     openCallback = null;

package/Libraries/Network/XMLHttpRequest.js

@@ -22,6 +22,7 @@ const base64 = require('base64-js');
 const invariant = require('invariant');
 
 const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging
+const LABEL_FOR_MISSING_URL_FOR_PROFILING = 'Unknown URL';
 
 export type NativeResponseType = 'base64' | 'blob' | 'text';
 export type ResponseType =
@@ -101,6 +102,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
   static DONE: number = DONE;
 
   static _interceptor: ?XHRInterceptor = null;
+  static _profiling: boolean = false;
 
   UNSENT: number = UNSENT;
   OPENED: number = OPENED;
@@ -144,12 +146,17 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
   _timedOut: boolean = false;
   _trackingName: string = 'unknown';
   _incrementalEvents: boolean = false;
+  _startTime: ?number = null;
   _performanceLogger: IPerformanceLogger = GlobalPerformanceLogger;
 
   static setInterceptor(interceptor: ?XHRInterceptor) {
     XMLHttpRequest._interceptor = interceptor;
   }
 
+  static enableProfiling(enableProfiling: boolean): void {
+    XMLHttpRequest._profiling = enableProfiling;
+  }
+
   constructor() {
     super();
     this._reset();
@@ -356,6 +363,11 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
       this._response += responseText;
     }
 
+    if (XMLHttpRequest._profiling) {
+      performance.mark(
+        'Track:XMLHttpRequest:Incremental Data: ' + this._getMeasureURL(),
+      );
+    }
     XMLHttpRequest._interceptor &&
       XMLHttpRequest._interceptor.dataReceived(requestId, responseText);
 
@@ -398,7 +410,13 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
       this._clearSubscriptions();
       this._requestId = null;
       this.setReadyState(this.DONE);
-
+      if (XMLHttpRequest._profiling && this._startTime != null) {
+        const start = this._startTime;
+        performance.measure('Track:XMLHttpRequest:' + this._getMeasureURL(), {
+          start,
+          end: performance.now(),
+        });
+      }
       if (error) {
         XMLHttpRequest._interceptor &&
           XMLHttpRequest._interceptor.loadingFailed(requestId, error);
@@ -572,6 +590,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
         this._trackingName !== 'unknown' ? this._trackingName : this._url;
       this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
       this._performanceLogger.startTimespan(this._perfKey);
+      this._startTime = performance.now();
       invariant(
         this._method,
         'XMLHttpRequest method needs to be defined (%s).',
@@ -668,6 +687,12 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): typeof EventTarget) {
     }
     super.addEventListener(type, listener);
   }
+
+  _getMeasureURL(): string {
+    return (
+      this._trackingName ?? this._url ?? LABEL_FOR_MISSING_URL_FOR_PROFILING
+    );
+  }
 }
 
 module.exports = XMLHttpRequest;

package/Libraries/NewAppScreen/components/HermesBadge.js

@@ -40,8 +40,8 @@ const HermesBadge = (): Node => {
 const styles = StyleSheet.create({
   badge: {
     position: 'absolute',
-    top: 8,
     right: 12,
+    bottom: 8,
   },
   badgeText: {
     fontSize: 14,