@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -176,10 +176,10 @@ const validAttributesForNonEventProps = {
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
   testID: true,
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
   opacity: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
   shadowOpacity: true,
   shadowRadius: true,
@@ -193,7 +193,7 @@ const validAttributesForNonEventProps = {
   pointerEvents: true,
   removeClippedSubviews: true,
   borderRadius: true,
-  borderColor: {process: require('../StyleSheet/processColor')},
+  borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
   borderStyle: true,
@@ -201,17 +201,17 @@ const validAttributesForNonEventProps = {
   collapsable: true,
 
   borderTopWidth: true,
-  borderTopColor: {process: require('../StyleSheet/processColor')},
+  borderTopColor: {process: require('../StyleSheet/processColor').default},
   borderRightWidth: true,
-  borderRightColor: {process: require('../StyleSheet/processColor')},
+  borderRightColor: {process: require('../StyleSheet/processColor').default},
   borderBottomWidth: true,
-  borderBottomColor: {process: require('../StyleSheet/processColor')},
+  borderBottomColor: {process: require('../StyleSheet/processColor').default},
   borderLeftWidth: true,
-  borderLeftColor: {process: require('../StyleSheet/processColor')},
+  borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderStartColor: {process: require('../StyleSheet/processColor')},
+  borderStartColor: {process: require('../StyleSheet/processColor').default},
   borderEndWidth: true,
-  borderEndColor: {process: require('../StyleSheet/processColor')},
+  borderEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -221,6 +221,10 @@ const validAttributesForNonEventProps = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   display: true,
   zIndex: true,
 
@@ -232,6 +236,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -249,25 +261,37 @@ const validAttributesForNonEventProps = {
   // borderEndWidth: true,
   // borderWidth: true,
 
-  marginTop: true,
-  marginRight: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
+  marginRight: true,
   marginStart: true,
-  marginEnd: true,
+  marginTop: true,
   marginVertical: true,
-  marginHorizontal: true,
-  margin: true,
 
-  paddingTop: true,
-  paddingRight: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
+  paddingRight: true,
   paddingStart: true,
-  paddingEnd: true,
+  paddingTop: true,
   paddingVertical: true,
-  paddingHorizontal: true,
-  padding: true,
 
   flex: true,
   flexGrow: true,

package/Libraries/NativeComponent/BaseViewConfig.win32.js

@@ -176,10 +176,10 @@ const validAttributesForNonEventProps = {
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
   testID: true,
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
   opacity: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
   shadowOpacity: true,
   shadowRadius: true,
@@ -193,7 +193,7 @@ const validAttributesForNonEventProps = {
   pointerEvents: true,
   removeClippedSubviews: true,
   borderRadius: true,
-  borderColor: {process: require('../StyleSheet/processColor')},
+  borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
   borderStyle: true,
@@ -201,17 +201,17 @@ const validAttributesForNonEventProps = {
   collapsable: true,
 
   borderTopWidth: true,
-  borderTopColor: {process: require('../StyleSheet/processColor')},
+  borderTopColor: {process: require('../StyleSheet/processColor').default},
   borderRightWidth: true,
-  borderRightColor: {process: require('../StyleSheet/processColor')},
+  borderRightColor: {process: require('../StyleSheet/processColor').default},
   borderBottomWidth: true,
-  borderBottomColor: {process: require('../StyleSheet/processColor')},
+  borderBottomColor: {process: require('../StyleSheet/processColor').default},
   borderLeftWidth: true,
-  borderLeftColor: {process: require('../StyleSheet/processColor')},
+  borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderStartColor: {process: require('../StyleSheet/processColor')},
+  borderStartColor: {process: require('../StyleSheet/processColor').default},
   borderEndWidth: true,
-  borderEndColor: {process: require('../StyleSheet/processColor')},
+  borderEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -221,6 +221,10 @@ const validAttributesForNonEventProps = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   display: true,
   zIndex: true,
 
@@ -232,6 +236,14 @@ const validAttributesForNonEventProps = {
   bottom: true,
   left: true,
 
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+
   width: true,
   height: true,
 
@@ -249,25 +261,37 @@ const validAttributesForNonEventProps = {
   // borderEndWidth: true,
   // borderWidth: true,
 
-  marginTop: true,
-  marginRight: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
+  marginRight: true,
   marginStart: true,
-  marginEnd: true,
+  marginTop: true,
   marginVertical: true,
-  marginHorizontal: true,
-  margin: true,
 
-  paddingTop: true,
-  paddingRight: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
+  paddingRight: true,
   paddingStart: true,
-  paddingEnd: true,
+  paddingTop: true,
   paddingVertical: true,
-  paddingHorizontal: true,
-  padding: true,
 
   flex: true,
   flexGrow: true,

package/Libraries/NativeComponent/NativeComponentRegistryUnstable.js

@@ -3,6 +3,9 @@
  *
  * 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
  */
 
 let componentNameToExists: Map<string, boolean> = new Map();
@@ -11,7 +14,7 @@ let componentNameToExists: Map<string, boolean> = new Map();
  * Unstable API. Do not use!
  *
  * This method returns if the component with name received as a parameter
- * is registed in the native platform.
+ * is registered in the native platform.
  */
 export function unstable_hasComponent(name: string): boolean {
   let hasNativeComponent = componentNameToExists.get(name);

package/Libraries/NativeComponent/ViewConfig.js

@@ -32,6 +32,7 @@ export function createViewConfig(
       PlatformBaseViewConfig.directEventTypes,
       partialViewConfig.directEventTypes,
     ),
+    // $FlowFixMe[incompatible-return]
     validAttributes: composeIndexers(
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
       PlatformBaseViewConfig.validAttributes,

package/Libraries/NativeComponent/ViewConfigIgnore.js

@@ -37,10 +37,7 @@ export function DynamicallyInjectedByGestureHandler<T: {...}>(object: T): T {
 export function ConditionallyIgnoredEventHandlers<T: {[name: string]: true}>(
   value: T,
 ): T | void {
-  if (
-    Platform.OS === 'ios' &&
-    !(global.RN$ViewConfigEventValidAttributesDisabled === true)
-  ) {
+  if (Platform.OS === 'ios') {
     return value;
   }
   return undefined;

package/Libraries/Network/RCTNetworking.android.js

@@ -22,7 +22,7 @@ type Header = [string, string];
 // Convert FormData headers to arrays, which are easier to consume in
 // native on Android.
 function convertHeadersMapToArray(headers: Object): Array<Header> {
-  const headerArray = [];
+  const headerArray: Array<Header> = [];
   for (const name in headers) {
     headerArray.push([name, headers[name]]);
   }
@@ -91,4 +91,4 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
   }
 }
 
-module.exports = (new RCTNetworking(): RCTNetworking);
+export default (new RCTNetworking(): RCTNetworking);

package/Libraries/Network/RCTNetworking.ios.js

@@ -109,4 +109,4 @@ const RCTNetworking = {
   },
 };
 
-module.exports = RCTNetworking;
+export default RCTNetworking;

package/Libraries/Network/RCTNetworking.win32.js

@@ -115,4 +115,4 @@ const RCTNetworking = {
   },
 };
 
-module.exports = RCTNetworking;
+export default RCTNetworking;

package/Libraries/Network/XMLHttpRequest.js

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

package/Libraries/Pressability/Pressability.js

@@ -112,7 +112,7 @@ export type PressabilityConfig = $ReadOnly<{|
   onLongPress?: ?(event: PressEvent) => mixed,
 
   /**
-   * Called when a press gestute has been triggered.
+   * Called when a press gesture has been triggered.
    */
   onPress?: ?(event: PressEvent) => mixed,
 
@@ -281,6 +281,8 @@ const DEFAULT_PRESS_RECT_OFFSETS = {
 };
 const DEFAULT_MIN_PRESS_DURATION = 130;
 
+const DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE = 10;
+let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
 /**
  * Pressability implements press handling capabilities.
  *
@@ -293,7 +295,7 @@ const DEFAULT_MIN_PRESS_DURATION = 130;
  *
  * - When a press has activated (e.g. highlight an element)
  * - When a press has deactivated (e.g. un-highlight an element)
- * - When a press sould trigger an action, meaning it activated and deactivated
+ * - When a press should trigger an action, meaning it activated and deactivated
  *   while within the geometry of the element without the lock being stolen.
  *
  * A high quality interaction isn't as simple as you might think. There should
@@ -430,6 +432,10 @@ export default class Pressability {
     return this._eventHandlers;
   }
 
+  static setLongPressDeactivationDistance(distance: number): void {
+    longPressDeactivationDistance = distance;
+  }
+
   _createEventHandlers(): EventHandlers {
     const focusEventHandlers = {
       onBlur: (event: BlurEvent): void => {
@@ -508,7 +514,7 @@ export default class Pressability {
         if (this._touchActivatePosition != null) {
           const deltaX = this._touchActivatePosition.pageX - touch.pageX;
           const deltaY = this._touchActivatePosition.pageY - touch.pageY;
-          if (Math.hypot(deltaX, deltaY) > 10) {
+          if (Math.hypot(deltaX, deltaY) > longPressDeactivationDistance) {
             this._cancelLongPressDelayTimeout();
           }
         }
@@ -559,8 +565,8 @@ export default class Pressability {
       ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
     ) {
       const hoverPointerEvents = {
-        onPointerEnter: undefined,
-        onPointerLeave: undefined,
+        onPointerEnter: (undefined: void | (PointerEvent => void)),
+        onPointerLeave: (undefined: void | (PointerEvent => void)),
       };
       const {onHoverIn, onHoverOut} = this._config;
       if (onHoverIn != null) {

package/Libraries/Pressability/Pressability.win32.js

@@ -312,6 +312,8 @@ const DEFAULT_PRESS_RECT_OFFSETS = {
 };
 const DEFAULT_MIN_PRESS_DURATION = 130;
 
+const DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE = 10;
+let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
 /**
  * Pressability implements press handling capabilities.
  *
@@ -461,6 +463,10 @@ export default class Pressability {
     return this._eventHandlers;
   }
 
+  static setLongPressDeactivationDistance(distance: number): void {
+    longPressDeactivationDistance = distance;
+  }
+
   _createEventHandlers(): EventHandlers {
     const focusEventHandlers = {
       onBlur: (event: BlurEvent): void => {
@@ -539,7 +545,7 @@ export default class Pressability {
         if (this._touchActivatePosition != null) {
           const deltaX = this._touchActivatePosition.pageX - touch.pageX;
           const deltaY = this._touchActivatePosition.pageY - touch.pageY;
-          if (Math.hypot(deltaX, deltaY) > 10) {
+          if (Math.hypot(deltaX, deltaY) > longPressDeactivationDistance) {
             this._cancelLongPressDelayTimeout();
           }
         }
@@ -627,8 +633,8 @@ export default class Pressability {
       ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
     ) {
       const hoverPointerEvents = {
-        onPointerEnter: undefined,
-        onPointerLeave: undefined,
+        onPointerEnter: (undefined: void | (PointerEvent => void)),
+        onPointerLeave: (undefined: void | (PointerEvent => void)),
       };
       const {onHoverIn, onHoverOut} = this._config;
       if (onHoverIn != null) {

package/Libraries/ReactNative/AppContainer.js

@@ -32,6 +32,7 @@ type Props = $ReadOnly<{|
 type State = {|
   inspector: ?React.Node,
   devtoolsOverlay: ?React.Node,
+  traceUpdateOverlay: ?React.Node,
   mainKey: number,
   hasError: boolean,
 |};
@@ -40,6 +41,7 @@ class AppContainer extends React.Component<Props, State> {
   state: State = {
     inspector: null,
     devtoolsOverlay: null,
+    traceUpdateOverlay: null,
     mainKey: 1,
     hasError: false,
   };
@@ -75,7 +77,10 @@ class AppContainer extends React.Component<Props, State> {
           const devtoolsOverlay = (
             <DevtoolsOverlay inspectedView={this._mainRef} />
           );
-          this.setState({devtoolsOverlay});
+          const TraceUpdateOverlay =
+            require('../Components/TraceUpdateOverlay/TraceUpdateOverlay').default;
+          const traceUpdateOverlay = <TraceUpdateOverlay />;
+          this.setState({devtoolsOverlay, traceUpdateOverlay});
         }
       }
     }
@@ -127,6 +132,7 @@ class AppContainer extends React.Component<Props, State> {
       <RootTagContext.Provider value={createRootTag(this.props.rootTag)}>
         <View style={styles.appContainer} pointerEvents="box-none">
           {!this.state.hasError && innerView}
+          {this.state.traceUpdateOverlay}
           {this.state.devtoolsOverlay}
           {this.state.inspector}
           {logBox}

package/Libraries/ReactNative/AppRegistry.d.ts

@@ -8,7 +8,7 @@
  */
 
 import type * as React from 'react';
-import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+import type {IPerformanceLogger} from '../Utilities/IPerformanceLogger';
 
 type Task = (taskData: any) => Promise<void>;
 type TaskProvider = () => Task;

package/Libraries/ReactNative/AppRegistry.js

@@ -312,6 +312,7 @@ const AppRegistry = {
           NativeHeadlessJsTaskSupport &&
           reason instanceof HeadlessJsTaskError
         ) {
+          // $FlowFixMe[unused-promise]
           NativeHeadlessJsTaskSupport.notifyTaskRetry(taskId).then(
             retryPosted => {
               if (!retryPosted) {
@@ -340,19 +341,15 @@ const AppRegistry = {
 if (!(global.RN$Bridgeless === true)) {
   BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 
-  if (__DEV__) {
-    const LogBoxInspector =
-      require('../LogBox/LogBoxInspectorContainer').default;
-    AppRegistry.registerComponent('LogBox', () => LogBoxInspector);
-  } else {
-    AppRegistry.registerComponent(
-      'LogBox',
-      () =>
-        function NoOp() {
-          return null;
-        },
-    );
-  }
+  AppRegistry.registerComponent('LogBox', () => {
+    if (__DEV__) {
+      return require('../LogBox/LogBoxInspectorContainer').default;
+    } else {
+      return function NoOp() {
+        return null;
+      };
+    }
+  });
 }
 
 module.exports = AppRegistry;

package/Libraries/ReactNative/FabricUIManager.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 
@@ -19,7 +19,7 @@ import type {
 import type {RootTag} from '../Types/RootTagTypes';
 
 // TODO: type these properly.
-type Node = {...};
+export opaque type Node = {...};
 type NodeSet = Array<Node>;
 type NodeProps = {...};
 type InstanceHandle = {...};
@@ -53,13 +53,29 @@ export type Spec = {|
   +configureNextLayoutAnimation: (
     config: LayoutAnimationConfig,
     callback: () => void, // check what is returned here
-    // This error isn't currently called anywhere, so the `error` object is really not defined
-    // $FlowFixMe[unclear-type]
-    errorCallback: (error: Object) => void,
+    errorCallback: () => void,
   ) => void,
   +sendAccessibilityEvent: (node: Node, eventType: string) => void,
+  +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node,
+  +getBoundingClientRect: (
+    node: Node,
+  ) => [
+    /* x:*/ number,
+    /* y:*/ number,
+    /* width:*/ number,
+    /* height:*/ number,
+  ],
+  +setNativeProps: (node: Node, newProps: NodeProps) => void,
+  +dispatchCommand: (
+    node: Node,
+    commandName: string,
+    args: Array<mixed>,
+  ) => void,
 |};
 
-const FabricUIManager: ?Spec = global.nativeFabricUIManager;
-
-module.exports = FabricUIManager;
+// This is exposed as a getter because apps using the legacy renderer AND
+// Fabric can define the binding lazily. If we evaluated the global and cached
+// it in the module we might be caching an `undefined` value before it is set.
+export function getFabricUIManager(): ?Spec {
+  return global.nativeFabricUIManager;
+}

package/Libraries/ReactNative/NativeUIManager.js

@@ -44,7 +44,7 @@ export interface Spec extends TurboModule {
     commandArgs: ?Array<any>,
   ) => void;
   +measure: (
-    reactTag: ?number,
+    reactTag: number,
     callback: (
       left: number,
       top: number,
@@ -55,7 +55,7 @@ export interface Spec extends TurboModule {
     ) => void,
   ) => void;
   +measureInWindow: (
-    reactTag: ?number,
+    reactTag: number,
     callback: (x: number, y: number, width: number, height: number) => void,
   ) => void;
   +viewIsDescendantOf: (
@@ -64,8 +64,8 @@ export interface Spec extends TurboModule {
     callback: (result: Array<boolean>) => void,
   ) => void;
   +measureLayout: (
-    reactTag: ?number,
-    ancestorReactTag: ?number,
+    reactTag: number,
+    ancestorReactTag: number,
     errorCallback: (error: Object) => void,
     callback: (
       left: number,
@@ -75,7 +75,7 @@ export interface Spec extends TurboModule {
     ) => void,
   ) => void;
   +measureLayoutRelativeToParent: (
-    reactTag: ?number,
+    reactTag: number,
     errorCallback: (error: Object) => void,
     callback: (
       left: number,

package/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -4,12 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 
-'use strict';
-
 export type FeatureFlags = {|
   /**
    * Function used to enable / disabled Layout Animations in React Native.
@@ -39,12 +37,14 @@ export type FeatureFlags = {|
    */
   animatedShouldUseSingleOp: () => boolean,
   /**
-   * This feature flag enables an experimental render system that allows
-   * to render react components driven by classes written in C++.
+   * Enables GlobalPerformanceLogger replacement with a WebPerformance API based
+   * implementation
    */
-  enableCppRenderSystem: () => boolean,
-
-  removeListenersOnDetach: () => boolean,
+  isGlobalWebPerformanceLoggerEnabled: () => boolean,
+  /**
+   * Enables access to the host tree in Fabric using DOM-compatible APIs.
+   */
+  enableAccessToHostTreeInFabric: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -53,8 +53,8 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   shouldPressibilityUseW3CPointerEventsForHover: () => false,
   animatedShouldDebounceQueueFlush: () => false,
   animatedShouldUseSingleOp: () => false,
-  enableCppRenderSystem: () => false,
-  removeListenersOnDetach: () => false,
+  isGlobalWebPerformanceLoggerEnabled: () => false,
+  enableAccessToHostTreeInFabric: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;