react-native-windows 0.71.10 → 0.72.0-preview.2

package/Libraries/Animated/nodes/AnimatedStyle.js

@@ -13,24 +13,54 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
+import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import AnimatedNode from './AnimatedNode';
 import AnimatedTransform from './AnimatedTransform';
 import AnimatedWithChildren from './AnimatedWithChildren';
 
+function createAnimatedStyle(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  const style = flattenStyle(inputStyle);
+  const animatedStyles: any = {};
+  for (const key in style) {
+    const value = style[key];
+    if (key === 'transform') {
+      animatedStyles[key] = new AnimatedTransform(value);
+    } else if (value instanceof AnimatedNode) {
+      animatedStyles[key] = value;
+    } else if (value && !Array.isArray(value) && typeof value === 'object') {
+      animatedStyles[key] = createAnimatedStyle(value);
+    }
+  }
+  return animatedStyles;
+}
+
+function createStyleWithAnimatedTransform(inputStyle: any): Object {
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(inputStyle) || ({}: {[string]: any});
+
+  if (style.transform) {
+    style = {
+      ...style,
+      transform: new AnimatedTransform(style.transform),
+    };
+  }
+  return style;
+}
+
 export default class AnimatedStyle extends AnimatedWithChildren {
+  _inputStyle: any;
   _style: Object;
 
   constructor(style: any) {
     super();
-    style = flattenStyle(style) || ({}: {[string]: any});
-    if (style.transform) {
-      style = {
-        ...style,
-        transform: new AnimatedTransform(style.transform),
-      };
+    if (Platform.OS === 'web') {
+      this._inputStyle = style;
+      this._style = createAnimatedStyle(style);
+    } else {
+      this._style = createStyleWithAnimatedTransform(style);
     }
-    this._style = style;
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
@@ -50,7 +80,11 @@ export default class AnimatedStyle extends AnimatedWithChildren {
     return updatedStyle;
   }
 
-  __getValue(): Object {
+  __getValue(): Object | Array<Object> {
+    if (Platform.OS === 'web') {
+      return [this._inputStyle, this._walkStyleAndGetValues(this._style)];
+    }
+
     return this._walkStyleAndGetValues(this._style);
   }
 

package/Libraries/Animated/nodes/AnimatedTransform.js

@@ -68,7 +68,7 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __getNativeConfig(): any {
-    const transConfigs = [];
+    const transConfigs: Array<any> = [];
 
     this._transforms.forEach(transform => {
       for (const key in transform) {

package/Libraries/Animated/nodes/AnimatedValue.js

@@ -48,21 +48,18 @@ const NativeAnimatedAPI = NativeAnimatedHelper.API;
  * this two-phases process is to deal with composite props such as
  * transform which can receive values from multiple parents.
  */
-function _flush(rootNode: AnimatedValue): void {
-  const animatedStyles = new Set<AnimatedValue | AnimatedNode>();
-  function findAnimatedStyles(node: AnimatedValue | AnimatedNode) {
-    /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
-     * suppresses an error found when Flow v0.68 was deployed. To see the error
-     * delete this comment and run Flow. */
+export function flushValue(rootNode: AnimatedNode): void {
+  const leaves = new Set<{update: () => void, ...}>();
+  function findAnimatedStyles(node: AnimatedNode) {
+    // $FlowFixMe[prop-missing]
     if (typeof node.update === 'function') {
-      animatedStyles.add(node);
+      leaves.add((node: any));
     } else {
       node.__getChildren().forEach(findAnimatedStyles);
     }
   }
   findAnimatedStyles(rootNode);
-  // $FlowFixMe[prop-missing]
-  animatedStyles.forEach(animatedStyle => animatedStyle.update());
+  leaves.forEach(leaf => leaf.update());
 }
 
 /**
@@ -91,7 +88,6 @@ export default class AnimatedValue extends AnimatedWithChildren {
   _animation: ?Animation;
   _tracking: ?AnimatedTracking;
 
-  // $FlowFixMe[missing-local-annot]
   constructor(value: number, config?: ?AnimatedValueConfig) {
     super();
     if (typeof value !== 'number') {
@@ -291,9 +287,9 @@ export default class AnimatedValue extends AnimatedWithChildren {
 
     this._value = value;
     if (flush) {
-      _flush(this);
+      flushValue(this);
     }
-    super.__callListeners(this.__getValue());
+    this.__callListeners(this.__getValue());
   }
 
   __getNativeConfig(): Object {

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -70,7 +70,7 @@ export default class AnimatedWithChildren extends AnimatedNode {
     }
   }
 
-  __getChildren(): Array<AnimatedNode> {
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
     return this._children;
   }
 

package/Libraries/Animated/useAnimatedProps.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import {isPublicInstance as isFabricPublicInstance} from '../Renderer/public/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -52,7 +53,7 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   //   2) Update `onUpdateRef`.
   //   3) Update listeners for `AnimatedEvent` props.
   //
-  // Ideally, each of these would be separat "effects" so that they are not
+  // Ideally, each of these would be separate "effects" so that they are not
   // unnecessarily re-run when irrelevant dependencies change. For example, we
   // should be able to hoist all `AnimatedEvent` props and only do #3 if either
   // the `AnimatedEvent` props change or `instance` changes.
@@ -183,7 +184,7 @@ function getEventTarget<TInstance>(instance: TInstance): TInstance {
 // $FlowFixMe[unclear-type] - Legacy instance assumptions.
 function isFabricInstance(instance: any): boolean {
   return (
-    hasFabricHandle(instance) ||
+    isFabricPublicInstance(instance) ||
     // Some components have a setNativeProps function but aren't a host component
     // such as lists like FlatList and SectionList. These should also use
     // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
@@ -192,13 +193,9 @@ function isFabricInstance(instance: any): boolean {
     // If these components end up using forwardRef then these hacks can go away
     // as instance would actually be the underlying host component and the above check
     // would be sufficient.
-    hasFabricHandle(instance?.getNativeScrollRef?.()) ||
-    hasFabricHandle(instance?.getScrollResponder?.()?.getNativeScrollRef?.())
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
   );
 }
-
-// $FlowFixMe[unclear-type] - Legacy instance assumptions.
-function hasFabricHandle(instance: any): boolean {
-  // eslint-disable-next-line dot-notation
-  return instance?.['_internalInstanceHandle']?.stateNode?.canonical != null;
-}

package/Libraries/AppTheme/AppTheme.js

@@ -37,6 +37,7 @@ type NativeAppThemeEventDefinitions = {
   highContrastChanged: [AppThemeData],
 };
 
+// $FlowFixMe[underconstrained-implicit-instantiation]
 const _notifHandlers = new Map();
 
 if (NativeAppTheme) {

package/Libraries/AppTheme/AppThemeTypes.d.ts

@@ -4,7 +4,7 @@
  * @format
  */
 
-import {EmitterSubscription} from 'react-native';
+import {EmitterSubscription} from '../vendor/emitter/EventEmitter';
 
 /**
  * Color information for high contrast

package/Libraries/BatchedBridge/MessageQueue.js

@@ -207,7 +207,7 @@ class MessageQueue {
           });
           warnOnce(
             'excessive-number-of-pending-callbacks',
-            `Please report: Excessive number of pending callbacks: ${
+            `Excessive number of pending callbacks: ${
               this._successCallbacks.size
             }. Some pending callbacks that might have leaked by never being called from native code: ${stringifySafe(
               info,
@@ -381,6 +381,7 @@ class MessageQueue {
     return (
       // $FlowFixMe[cannot-resolve-name]
       typeof DebuggerInternal !== 'undefined' &&
+      // $FlowFixMe[cannot-resolve-name]
       DebuggerInternal.shouldPauseOnThrow === true
     );
   }

package/Libraries/BatchedBridge/NativeModules.d.ts

@@ -8,7 +8,7 @@
  */
 
 /**
- * Interface for NativeModules which allows to augment NativeModules with type informations.
+ * Interface for NativeModules which allows to augment NativeModules with type information.
  * See react-native-sensor-manager for example.
  */
 interface NativeModulesStatic {

package/Libraries/BatchedBridge/NativeModules.js

@@ -134,6 +134,7 @@ function genMethod(moduleID: number, methodID: number, type: MethodType) {
       const onSuccess: ?(mixed) => void = hasSuccessCallback ? lastArg : null;
       // $FlowFixMe[incompatible-type]
       const onFail: ?(mixed) => void = hasErrorCallback ? secondLastArg : null;
+      // $FlowFixMe[unsafe-addition]
       const callbackCount = hasSuccessCallback + hasErrorCallback;
       const newArgs = args.slice(0, args.length - callbackCount);
       if (type === 'sync') {

package/Libraries/Blob/Blob.js

@@ -98,6 +98,10 @@ class Blob {
           // $FlowFixMe[reassign-const]
           end = this.size + end;
         }
+        if (end > this.size) {
+          // $FlowFixMe[reassign-const]
+          end = this.size;
+        }
         size = end - start;
       }
     }

package/Libraries/Blob/FileReader.js

@@ -11,6 +11,7 @@
 import type Blob from './Blob';
 
 import NativeFileReaderModule from './NativeFileReaderModule';
+import {toByteArray} from 'base64-js';
 
 const EventTarget = require('event-target-shim');
 
@@ -74,8 +75,35 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
     }
   }
 
-  readAsArrayBuffer(): any {
-    throw new Error('FileReader.readAsArrayBuffer is not implemented');
+  readAsArrayBuffer(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+
+        const base64 = text.split(',')[1];
+        const typedArray = toByteArray(base64);
+
+        this._result = typedArray.buffer;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
   }
 
   readAsDataURL(blob: ?Blob): void {

package/Libraries/Blob/URL.js

@@ -20,6 +20,7 @@ if (
 ) {
   const constants = NativeBlobModule.getConstants();
   // $FlowFixMe[incompatible-type] asserted above
+  // $FlowFixMe[unsafe-addition]
   BLOB_URL_PREFIX = constants.BLOB_URI_SCHEME + ':';
   if (typeof constants.BLOB_URI_HOST === 'string') {
     BLOB_URL_PREFIX += `//${constants.BLOB_URI_HOST}/`;
@@ -122,7 +123,7 @@ function validateBaseUrl(url: string) {
 
 export class URL {
   _url: string;
-  _searchParamsInstance = null;
+  _searchParamsInstance: ?URLSearchParams = null;
 
   static createObjectURL(blob: Blob): string {
     if (BLOB_URL_PREFIX === null) {
@@ -220,6 +221,7 @@ export class URL {
     if (this._searchParamsInstance === null) {
       return this._url;
     }
+    // $FlowFixMe[incompatible-use]
     const instanceString = this._searchParamsInstance.toString();
     const separator = this._url.indexOf('?') > -1 ? '&' : '?';
     return this._url + separator + instanceString;

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -37,7 +37,7 @@ type AccessibilityAnnouncementFinishedEventHandler = (
   event: AccessibilityAnnouncementFinishedEvent,
 ) => void;
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 /**
  * @see https://reactnative.dev/docs/accessibilityinfo
@@ -137,7 +137,7 @@ export interface AccessibilityInfoStatic {
    */
   announceForAccessibilityWithOptions(
     announcement: string,
-    options: {queue?: boolean},
+    options: {queue?: boolean | undefined},
   ): void;
 
   /**

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -10,7 +10,6 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {AccessibilityInfoType} from './AccessibilityInfo.flow';
 import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
@@ -42,7 +41,7 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 // Mapping of public event names to platform-specific event names.
 const EventNames: Map<
@@ -75,7 +74,7 @@ const EventNames: Map<
  *
  * See https://reactnative.dev/docs/accessibilityinfo
  */
-const AccessibilityInfo: AccessibilityInfoType = {
+const AccessibilityInfo = {
   /**
    * Query whether bold text is currently enabled.
    *

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.windows.js

@@ -10,7 +10,6 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {AccessibilityInfoType} from './AccessibilityInfo.flow';
 import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
@@ -42,7 +41,7 @@ type AccessibilityEventDefinitions = {
   screenReaderChanged: [boolean],
 };
 
-type AccessibilityEventTypes = 'click' | 'focus';
+type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
 
 // Mapping of public event names to platform-specific event names.
 const EventNames: Map<
@@ -81,7 +80,7 @@ const EventNames: Map<
  *
  * See https://reactnative.dev/docs/accessibilityinfo
  */
-const AccessibilityInfo: AccessibilityInfoType = {
+const AccessibilityInfo = {
   /**
    * Query whether bold text is currently enabled.
    *

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,8 +10,8 @@
  */
 
 'use strict';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ActivityIndicator as ActivityIndicatorType} from './ActivityIndicator.flow';
 
 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
@@ -184,8 +184,10 @@ const ActivityIndicator = (
   ```
 */
 
-const ActivityIndicatorWithRef: ActivityIndicatorType =
-  React.forwardRef(ActivityIndicator);
+const ActivityIndicatorWithRef: React.AbstractComponent<
+  Props,
+  HostComponent<mixed>,
+> = React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({
@@ -203,4 +205,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ActivityIndicatorWithRef;
+export default ActivityIndicatorWithRef;

package/Libraries/Components/Button.js

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {Button as ButtonType} from './Button.flow';
 import type {
@@ -310,8 +311,8 @@ class Button extends React.Component<ButtonProps> {
       accessibilityLanguage,
       onAccessibilityAction,
     } = this.props;
-    const buttonStyles = [styles.button];
-    const textStyles = [styles.text];
+    const buttonStyles: Array<ViewStyleProp> = [styles.button];
+    const textStyles: Array<TextStyleProp> = [styles.text];
     if (color) {
       if (Platform.OS === 'ios') {
         textStyles.push({color: color});

package/Libraries/Components/Button.windows.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {Button as ButtonType} from './Button.flow';
 import type {
@@ -332,8 +333,8 @@ class Button extends React.Component<
       onAccessibilityAction,
       tabIndex,
     } = this.props;
-    const buttonStyles = [styles.button];
-    const textStyles = [styles.text];
+    const buttonStyles: Array<ViewStyleProp> = [styles.button];
+    const textStyles: Array<TextStyleProp> = [styles.text];
     if (color) {
       if (Platform.OS === 'ios') {
         textStyles.push({color: color});

package/Libraries/Components/Clipboard/Clipboard.js

@@ -32,7 +32,7 @@ module.exports = {
    *   Clipboard.setString('hello world');
    * }
    * ```
-   * @param the content to be stored in the clipboard.
+   * @param {string} content the content to be stored in the clipboard.
    */
   setString(content: string) {
     NativeClipboard.setString(content);

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
@@ -36,6 +37,8 @@ type DrawerSlideEvent = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{|
+  accessibilityRole?: ?AccessibilityRole,
+
   /**
    * Determines whether the keyboard gets dismissed in response to a drag.
    *   - 'none' (the default), drags do not dismiss the keyboard.
@@ -235,6 +238,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
    * LTI update could not be added via codemod */
   _onDrawerSlide = event => {
     if (this.props.onDrawerSlide) {
+      // $FlowFixMe[unused-promise]
       this.props.onDrawerSlide(event);
     }
     if (this.props.keyboardDismissMode === 'on-drag') {

package/Libraries/Components/Flyout/Flyout.d.ts

@@ -1,19 +1,55 @@
-import React from 'react';
-import { IFlyoutProps } from './FlyoutProps';
-export interface IFlyoutTargetState {
-    target?: number | null;
-    targetRef?: React.ReactNode;
-}
-/**
- * Renders a flyout component.
- *
- * This is a controlled component that requires an `onDismiss` callback that
- * updates the `isOpen` prop in order for the component to reflect user actions.
- *
- * @keyword flyout
- */
-export declare class Flyout extends React.Component<IFlyoutProps, IFlyoutTargetState> {
-    static getDerivedStateFromProps(nextProps: IFlyoutProps, prevState: IFlyoutTargetState): IFlyoutTargetState;
-    constructor(props: IFlyoutProps);
-    render(): JSX.Element;
-}
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+import type * as React from 'react';
+
+import type {Constructor} from '../../../types/private/Utilities';
+import type {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+export type Placement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'full'
+  | 'top-edge-aligned-left'
+  | 'top-edge-aligned-right'
+  | 'bottom-edge-aligned-left'
+  | 'bottom-edge-aligned-right'
+  | 'left-edge-aligned-top'
+  | 'right-edge-aligned-top'
+  | 'left-edge-aligned-bottom'
+  | 'right-edge-aligned-bottom';
+
+export type ShowMode =
+  | 'auto'
+  | 'standard'
+  | 'transient'
+  | 'transient-with-dismiss-on-pointer-move-away';
+
+export interface IFlyoutProps extends ViewProps {
+  horizontalOffset?: number;
+  isLightDismissEnabled?: boolean;
+  autoFocus?: boolean;
+  shouldConstrainToRootBounds?: boolean;
+
+  /**
+   * Specifies whether the area outside the flyout is darkened
+   */
+  isOverlayEnabled?: boolean;
+
+  isOpen?: boolean;
+  onDismiss?: (isOpen: boolean) => void;
+  placement?: Placement;
+  showMode?: ShowMode;
+  target?: React.ReactNode;
+  verticalOffset?: number;
+}
+
+declare class FlyoutComponent extends React.Component<IFlyoutProps> {}
+declare const FlyoutBase: Constructor<NativeMethods> & typeof FlyoutComponent;
+
+export class Flyout extends FlyoutBase {}