@office-iss/react-native-win32 0.0.0-canary.270 → 0.0.0-canary.271

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/__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';

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

@@ -227,6 +227,7 @@ const validAttributesForNonEventProps = {
   justifyContent: true,
   overflow: true,
   display: true,
+  boxSizing: true,
 
   margin: true,
   marginBlock: true,

package/Libraries/NativeComponent/BaseViewConfig.ios.js

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

@@ -339,6 +339,7 @@ const validAttributesForNonEventProps = {
   alignContent: true,
   position: true,
   aspectRatio: true,
+  boxSizing: true,
 
   // Also declared as ViewProps
   // overflow: true,

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/Pressability/HoverState.js

@@ -12,6 +12,8 @@ import Platform from '../Utilities/Platform';
 
 let isEnabled = false;
 
+/* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
+ * Platform.flow.js */
 if (Platform.OS === 'web') {
   const canUseDOM = Boolean(
     typeof window !== 'undefined' &&

package/Libraries/Pressability/HoverState.win32.js

@@ -12,6 +12,8 @@ import Platform from '../Utilities/Platform';
 
 let isEnabled = false;
 
+/* $FlowFixMe[incompatible-type] Error found due to incomplete typing of
+ * Platform.flow.js */
 if (Platform.OS === 'web') {
   const canUseDOM = Boolean(
     typeof window !== 'undefined' &&

package/Libraries/Pressability/Pressability.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
 import type {
   BlurEvent,
   FocusEvent,
@@ -26,7 +26,6 @@ import {isHoverEnabled} from './HoverState';
 import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventEmitter.js';
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 import invariant from 'invariant';
-import * as React from 'react';
 
 export type PressabilityConfig = $ReadOnly<{|
   /**
@@ -378,7 +377,7 @@ export default class Pressability {
   _longPressDelayTimeout: ?TimeoutID = null;
   _pressDelayTimeout: ?TimeoutID = null;
   _pressOutDelayTimeout: ?TimeoutID = null;
-  _responderID: ?number | React.ElementRef<HostComponent<mixed>> = null;
+  _responderID: ?number | HostInstance = null;
   _responderRegion: ?$ReadOnly<{|
     bottom: number,
     left: number,

package/Libraries/Pressability/Pressability.win32.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
 import type {
   BlurEvent,
   FocusEvent,
@@ -27,7 +27,6 @@ import {isHoverEnabled} from './HoverState';
 import PressabilityPerformanceEventEmitter from './PressabilityPerformanceEventEmitter.js';
 import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.js';
 import invariant from 'invariant';
-import * as React from 'react';
 
 export type PressabilityConfig = $ReadOnly<{|
   /**
@@ -409,7 +408,7 @@ export default class Pressability {
   _longPressDelayTimeout: ?TimeoutID = null;
   _pressDelayTimeout: ?TimeoutID = null;
   _pressOutDelayTimeout: ?TimeoutID = null;
-  _responderID: ?number | React.ElementRef<HostComponent<mixed>> = null;
+  _responderID: ?number | HostInstance = null;
   _responderRegion: ?$ReadOnly<{|
     bottom: number,
     left: number,

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -9,7 +9,7 @@
  */
 
 import type {
-  HostComponent,
+  HostInstance,
   INativeMethods,
   InternalInstanceHandle,
   MeasureInWindowOnSuccessCallback,
@@ -17,7 +17,6 @@ import type {
   MeasureOnSuccessCallback,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
-import type {ElementRef} from 'react';
 
 import TextInputState from '../../Components/TextInput/TextInputState';
 import {getNodeFromInternalInstanceHandle} from '../../ReactNative/RendererProxy';
@@ -85,7 +84,7 @@ export default class ReactFabricHostComponent implements INativeMethods {
   }
 
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
   ) {

package/Libraries/ReactNative/RendererImplementation.js

@@ -10,6 +10,7 @@
 
 import type {
   HostComponent,
+  HostInstance,
   InternalInstanceHandle,
   Node,
 } from '../Renderer/shims/ReactNativeTypes';
@@ -61,7 +62,7 @@ export function renderElement({
 
 export function findHostInstance_DEPRECATED<TElementType: ElementType>(
   componentOrHandle: ?(ElementRef<TElementType> | number),
-): ?ElementRef<HostComponent<mixed>> {
+): ?HostInstance {
   return require('../Renderer/shims/ReactNative').findHostInstance_DEPRECATED(
     componentOrHandle,
   );
@@ -76,7 +77,7 @@ export function findNodeHandle<TElementType: ElementType>(
 }
 
 export function dispatchCommand(
-  handle: ElementRef<HostComponent<mixed>>,
+  handle: HostInstance,
   command: string,
   args: Array<mixed>,
 ): void {
@@ -98,7 +99,7 @@ export function dispatchCommand(
 }
 
 export function sendAccessibilityEvent(
-  handle: ElementRef<HostComponent<mixed>>,
+  handle: HostInstance,
   eventType: string,
 ): void {
   return require('../Renderer/shims/ReactNative').sendAccessibilityEvent(

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @nolint
  * @flow strict
- * @generated SignedSource<<b803401b6dd721b9caffdac1f8b6fd1c>>
+ * @generated SignedSource<<9e6c8931d3b0c36d35ad5da90b721b85>>
  */
 
 import type {
@@ -113,31 +113,32 @@ export interface INativeMethods {
   measure(callback: MeasureOnSuccessCallback): void;
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void;
   setNativeProps(nativeProps: {...}): void;
 }
 
-export type NativeMethods = $ReadOnly<{|
+export type NativeMethods = $ReadOnly<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-|}>;
+}>;
 
 // This validates that INativeMethods and NativeMethods stay in sync using Flow!
 declare const ensureNativeMethodsAreSynced: NativeMethods;
 (ensureNativeMethodsAreSynced: INativeMethods);
 
-export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
+export type HostInstance = NativeMethods;
+export type HostComponent<Config> = AbstractComponent<Config, HostInstance>;
 
 type SecretInternalsType = {
   computeComponentStackForErrorReporting(tag: number): string,
@@ -210,7 +211,7 @@ export type RenderRootOptions = {
 export type ReactNativeType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?ElementRef<HostComponent<mixed>>,
+  ): ?HostInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
@@ -219,14 +220,11 @@ export type ReactNativeType = {
     child: PublicInstance | HostComponent<mixed>,
   ): boolean,
   dispatchCommand(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     command: string,
     args: Array<mixed>,
   ): void,
-  sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
-    eventType: string,
-  ): void,
+  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,
@@ -248,20 +246,17 @@ type PublicTextInstance = mixed;
 export type ReactFabricType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
-  ): ?ElementRef<HostComponent<mixed>>,
+  ): ?HostInstance,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
   dispatchCommand(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     command: string,
     args: Array<mixed>,
   ): void,
   isChildPublicInstance(parent: PublicInstance, child: PublicInstance): boolean,
-  sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
-    eventType: string,
-  ): void,
+  sendAccessibilityEvent(handle: HostInstance, eventType: string): void,
   render(
     element: MixedElement,
     containerTag: number,

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -55,6 +55,7 @@ export interface FlexStyle {
   borderTopWidth?: number | undefined;
   borderWidth?: number | undefined;
   bottom?: DimensionValue | undefined;
+  boxSizing?: 'border-box' | 'content-box' | undefined;
   display?: 'none' | 'flex' | undefined;
   end?: DimensionValue | undefined;
   flex?: number | undefined;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -612,6 +612,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    */
   aspectRatio?: number | string,
 
+  /**
+   * Box sizing controls whether certain size properties apply to the node's
+   * content box or border box. The size properties in question include `width`,
+   * `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and `flexBasis`.
+   *
+   * e.g: Say a node has 10px of padding and 10px of borders on all
+   * sides and a defined `width` and `height` of 100px and 50px. Then the total
+   * size of the node (content area + padding + border) would be 100px by 50px
+   * under `boxSizing: border-box` and 120px by 70px under
+   * `boxSizing: content-box`.
+   */
+  boxSizing?: 'border-box' | 'content-box',
+
   /** `zIndex` controls which components display on top of others.
    *  Normally, you don't use `zIndex`. Components render according to
    *  their order in the document tree, so later components draw over

package/Libraries/StyleSheet/processTransform.js

@@ -26,7 +26,7 @@ function processTransform(
 ): Array<Object> | Array<number> {
   if (typeof transform === 'string') {
     const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
-    let transformArray: Array<Object> = [];
+    const transformArray: Array<Object> = [];
     let matches;
 
     while ((matches = regex.exec(transform))) {
@@ -50,23 +50,7 @@ function processTransform(
 }
 
 const _getKeyAndValueFromCSSTransform: (
-  key:
-    | string
-    | $TEMPORARY$string<'matrix'>
-    | $TEMPORARY$string<'perspective'>
-    | $TEMPORARY$string<'rotate'>
-    | $TEMPORARY$string<'rotateX'>
-    | $TEMPORARY$string<'rotateY'>
-    | $TEMPORARY$string<'rotateZ'>
-    | $TEMPORARY$string<'scale'>
-    | $TEMPORARY$string<'scaleX'>
-    | $TEMPORARY$string<'scaleY'>
-    | $TEMPORARY$string<'skewX'>
-    | $TEMPORARY$string<'skewY'>
-    | $TEMPORARY$string<'translate'>
-    | $TEMPORARY$string<'translate3d'>
-    | $TEMPORARY$string<'translateX'>
-    | $TEMPORARY$string<'translateY'>,
+  key: string,
   args: string,
 ) => {key: string, value?: Array<string | number> | number | string} = (
   key,
@@ -169,22 +153,7 @@ function _validateTransforms(transform: Array<Object>): void {
 }
 
 function _validateTransform(
-  key:
-    | string
-    | $TEMPORARY$string<'matrix'>
-    | $TEMPORARY$string<'perspective'>
-    | $TEMPORARY$string<'rotate'>
-    | $TEMPORARY$string<'rotateX'>
-    | $TEMPORARY$string<'rotateY'>
-    | $TEMPORARY$string<'rotateZ'>
-    | $TEMPORARY$string<'scale'>
-    | $TEMPORARY$string<'scaleX'>
-    | $TEMPORARY$string<'scaleY'>
-    | $TEMPORARY$string<'skewX'>
-    | $TEMPORARY$string<'skewY'>
-    | $TEMPORARY$string<'translate'>
-    | $TEMPORARY$string<'translateX'>
-    | $TEMPORARY$string<'translateY'>,
+  key: string,
   value: any | number | string,
   transformation: any,
 ) {