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

package/Libraries/Components/ScrollView/ScrollView.js

@@ -127,7 +127,7 @@ import * as React from 'react';
  */
 
 // Public methods for ScrollView
-export type ScrollViewImperativeMethods = $ReadOnly<{|
+export type ScrollViewImperativeMethods = $ReadOnly<{
   getScrollResponder: $PropertyType<ScrollView, 'getScrollResponder'>,
   getScrollableNode: $PropertyType<ScrollView, 'getScrollableNode'>,
   getInnerViewNode: $PropertyType<ScrollView, 'getInnerViewNode'>,
@@ -141,19 +141,19 @@ export type ScrollViewImperativeMethods = $ReadOnly<{|
     ScrollView,
     'scrollResponderScrollNativeHandleToKeyboard',
   >,
-|}>;
+}>;
 
 export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
-type PublicScrollViewInstance = $ReadOnly<{|
+type PublicScrollViewInstance = $ReadOnly<{
   ...HostInstance,
   ...ScrollViewImperativeMethods,
-|}>;
+}>;
 
 type InnerViewInstance = React.ElementRef<View>;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   /**
    * Controls whether iOS should automatically adjust the content inset
    * for scroll views that are placed behind a navigation bar or
@@ -307,9 +307,9 @@ type IOSProps = $ReadOnly<{|
     | 'never'
     | 'always'
   ),
-|}>;
+}>;
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   /**
    * Enables nested scrolling for Android API level 21+.
    * Nested scrolling is supported by default on iOS
@@ -364,14 +364,14 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   fadingEdgeLength?: ?number,
-|}>;
+}>;
 
 type StickyHeaderComponentType = component(
   ref?: React.RefSetter<$ReadOnly<interface {setNextHeaderY: number => void}>>,
   ...ScrollViewStickyHeaderProps
 );
 
-export type Props = $ReadOnly<{|
+export type Props = $ReadOnly<{
   ...ViewProps,
   ...IOSProps,
   ...AndroidProps,
@@ -494,10 +494,10 @@ export type Props = $ReadOnly<{|
    * whether content is "visible" or not.
    *
    */
-  maintainVisibleContentPosition?: ?$ReadOnly<{|
+  maintainVisibleContentPosition?: ?$ReadOnly<{
     minIndexForVisible: number,
     autoscrollToTopThreshold?: ?number,
-  |}>,
+  }>,
   /**
    * Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
    */
@@ -651,17 +651,17 @@ export type Props = $ReadOnly<{|
    * measure, measureLayout, etc.
    */
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
-|}>;
+}>;
 
-type State = {|
+type State = {
   layoutHeight: ?number,
-|};
+};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
 
-export type ScrollViewComponentStatics = $ReadOnly<{|
+export type ScrollViewComponentStatics = $ReadOnly<{
   Context: typeof ScrollViewContext,
-|}>;
+}>;
 
 /**
  * Component that wraps platform ScrollView while providing
@@ -712,9 +712,11 @@ class ScrollView extends React.Component<Props, State> {
 
   _scrollAnimatedValue: AnimatedImplementation.Value;
   _scrollAnimatedValueAttachment: ?{detach: () => void, ...} = null;
-  _stickyHeaderRefs: Map<string, React.ElementRef<StickyHeaderComponentType>> =
-    new Map();
-  _headerLayoutYs: Map<string, number> = new Map();
+  _stickyHeaderRefs: Map<
+    React.Key,
+    React.ElementRef<StickyHeaderComponentType>,
+  > = new Map();
+  _headerLayoutYs: Map<React.Key, number> = new Map();
 
   _keyboardMetrics: ?KeyboardMetrics = null;
   _additionalScrollOffset: number = 0;
@@ -976,22 +978,22 @@ class ScrollView extends React.Component<Props, State> {
    * @platform ios
    */
   scrollResponderZoomTo: (
-    rect: {|
+    rect: {
       x: number,
       y: number,
       width: number,
       height: number,
       animated?: boolean,
-    |},
+    },
     animated?: boolean, // deprecated, put this inside the rect argument instead
   ) => void = (
-    rect: {|
+    rect: {
       x: number,
       y: number,
       width: number,
       height: number,
       animated?: boolean,
-    |},
+    },
     animated?: boolean, // deprecated, put this inside the rect argument instead
   ) => {
     invariant(Platform.OS === 'ios', 'zoomToRect is not implemented');
@@ -1066,7 +1068,11 @@ class ScrollView extends React.Component<Props, State> {
     }
   };
 
-  _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe): $FlowFixMe {
+  _getKeyForIndex(
+    index: number,
+    // $FlowFixMe[unclear-type] - The children and its key is unknown.
+    childArray: any,
+  ): React.Key {
     const child = childArray[index];
     return child && child.key;
   }
@@ -1099,7 +1105,7 @@ class ScrollView extends React.Component<Props, State> {
     }
   }
 
-  _onStickyHeaderLayout(index: $FlowFixMe, event: $FlowFixMe, key: $FlowFixMe) {
+  _onStickyHeaderLayout(index: number, event: LayoutEvent, key: React.Key) {
     const {stickyHeaderIndices} = this.props;
     if (!stickyHeaderIndices) {
       return;
@@ -1913,5 +1919,5 @@ Wrapper.displayName = 'ScrollView';
 // $FlowExpectedError[prop-missing]
 Wrapper.Context = ScrollViewContext;
 
-module.exports = ((Wrapper: $FlowFixMe): typeof Wrapper &
+export default ((Wrapper: $FlowFixMe): typeof Wrapper &
   ScrollViewComponentStatics);

package/Libraries/Components/ScrollView/ScrollViewCommands.js

@@ -31,13 +31,13 @@ interface NativeCommands {
   ) => void;
   +zoomToRect: (
     viewRef: React.ElementRef<ScrollViewNativeComponentType>,
-    rect: {|
+    rect: {
       x: Double,
       y: Double,
       width: Double,
       height: Double,
       animated?: boolean,
-    |},
+    },
     animated?: boolean,
   ) => void;
 }

package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -13,7 +13,7 @@
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {ScrollEvent} from '../../Types/CoreEventTypes';
+import type {PressEvent, ScrollEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 export type ScrollViewNativeProps = $ReadOnly<{
@@ -76,6 +76,6 @@ export type ScrollViewNativeProps = $ReadOnly<{
   snapToStart?: ?boolean,
   zoomScale?: ?number,
   // Overrides
-  onResponderGrant?: ?(e: $FlowFixMe) => void | boolean,
+  onResponderGrant?: ?(e: PressEvent) => void | boolean,
   ...
 }>;

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -19,7 +19,7 @@ import * as React from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 export type Props = $ReadOnly<{
-  children?: ExactReactElement_DEPRECATED<$FlowFixMe>,
+  children?: React.Node,
   nextHeaderLayoutY: ?number,
   onLayout: (event: LayoutEvent) => void,
   scrollAnimatedValue: Animated.Value,

package/Libraries/Components/ScrollView/processDecelerationRate.js

@@ -27,4 +27,4 @@ function processDecelerationRate(
   return decelerationRate;
 }
 
-module.exports = processDecelerationRate;
+export default processDecelerationRate;

package/Libraries/Components/Sound/SoundManager.js

@@ -18,4 +18,4 @@ const SoundManager = {
   },
 };
 
-module.exports = SoundManager;
+export default SoundManager;

package/Libraries/Components/StaticRenderer.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const React = require('react');
+import React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   /**
    * Indicates whether the render function needs to be called again
    */
@@ -22,7 +22,7 @@ type Props = $ReadOnly<{|
    * A function that returns a renderable component
    */
   render: () => React.Node,
-|}>;
+}>;
 
 class StaticRenderer extends React.Component<Props> {
   shouldComponentUpdate(nextProps: Props): boolean {
@@ -34,4 +34,4 @@ class StaticRenderer extends React.Component<Props> {
   }
 }
 
-module.exports = StaticRenderer;
+export default StaticRenderer;

package/Libraries/Components/StatusBar/StatusBar.js

@@ -55,7 +55,7 @@ export type StatusBarAnimation = $Keys<{
   ...
 }>;
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   /**
    * The background color of the status bar.
    * @platform android
@@ -69,9 +69,9 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   translucent?: ?boolean,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -85,9 +85,9 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   showHideTransition?: ?('fade' | 'slide' | 'none'),
-|}>;
+}>;
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   ...AndroidProps,
   ...IOSProps,
   /**
@@ -103,7 +103,25 @@ type Props = $ReadOnly<{|
    * Sets the color of the status bar text.
    */
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
-|}>;
+}>;
+
+type StackProps = {
+  backgroundColor: ?{
+    value: Props['backgroundColor'],
+    animated: boolean,
+  },
+  barStyle: ?{
+    value: Props['barStyle'],
+    animated: boolean,
+  },
+  translucent: Props['translucent'],
+  hidden: ?{
+    value: boolean,
+    animated: boolean,
+    transition: Props['showHideTransition'],
+  },
+  networkActivityIndicatorVisible: Props['networkActivityIndicatorVisible'],
+};
 
 /**
  * Merges the prop stack with the default values.
@@ -129,7 +147,7 @@ function mergePropsStack(
  * Returns an object to insert in the props stack from the props
  * and the transition/animation info.
  */
-function createStackEntry(props: any): any {
+function createStackEntry(props: Props): StackProps {
   const animated = props.animated ?? false;
   const showHideTransition = props.showHideTransition ?? 'fade';
   return {
@@ -203,7 +221,7 @@ function createStackEntry(props: any): any {
  * `currentHeight` (Android only) The height of the status bar.
  */
 class StatusBar extends React.Component<Props> {
-  static _propsStack: Array<any> = [];
+  static _propsStack: Array<StackProps> = [];
 
   static _defaultProps: any = createStackEntry({
     backgroundColor:
@@ -218,12 +236,10 @@ class StatusBar extends React.Component<Props> {
   });
 
   // Timer for updating the native module values at the end of the frame.
-  // $FlowFixMe[missing-local-annot]
-  static _updateImmediate = null;
+  static _updateImmediate: ?number = null;
 
   // The current merged values from the props stack.
-  // $FlowFixMe[missing-local-annot]
-  static _currentValues = null;
+  static _currentValues: ?StackProps = null;
 
   // TODO(janic): Provide a real API to deal with status bar height. See the
   // discussion in #6195.
@@ -371,8 +387,7 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
-  // $FlowFixMe[missing-local-annot]
-  _stackEntry = null;
+  _stackEntry: ?StackProps = null;
 
   componentDidMount() {
     // Every time a StatusBar component is mounted, we push it's prop to a stack
@@ -412,14 +427,14 @@ class StatusBar extends React.Component<Props> {
       if (Platform.OS === 'ios') {
         if (
           !oldProps ||
-          oldProps.barStyle.value !== mergedProps.barStyle.value
+          oldProps.barStyle?.value !== mergedProps.barStyle.value
         ) {
           NativeStatusBarManagerIOS.setStyle(
             mergedProps.barStyle.value,
             mergedProps.barStyle.animated || false,
           );
         }
-        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+        if (!oldProps || oldProps.hidden?.value !== mergedProps.hidden.value) {
           NativeStatusBarManagerIOS.setHidden(
             mergedProps.hidden.value,
             mergedProps.hidden.animated
@@ -456,7 +471,7 @@ class StatusBar extends React.Component<Props> {
             mergedProps.backgroundColor.animated,
           );
         }
-        if (!oldProps || oldProps.hidden.value !== mergedProps.hidden.value) {
+        if (!oldProps || oldProps.hidden?.value !== mergedProps.hidden.value) {
           NativeStatusBarManagerAndroid.setHidden(mergedProps.hidden.value);
         }
         // Activities are not translucent by default, so always set if true.
@@ -478,4 +493,4 @@ class StatusBar extends React.Component<Props> {
   }
 }
 
-module.exports = StatusBar;
+export default StatusBar;

package/Libraries/Components/Switch/Switch.js

@@ -24,13 +24,13 @@ import SwitchNativeComponent, {
 import * as React from 'react';
 
 type SwitchChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
+  $ReadOnly<{
     value: boolean,
     target: number,
-  |}>,
+  }>,
 >;
 
-export type Props = $ReadOnly<{|
+export type Props = $ReadOnly<{
   ...ViewProps,
 
   /**
@@ -59,10 +59,10 @@ export type Props = $ReadOnly<{|
     color of the background exposed by the shrunken track, use
      [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
    */
-  trackColor?: ?$ReadOnly<{|
+  trackColor?: ?$ReadOnly<{
     false?: ?ColorValue,
     true?: ?ColorValue,
-  |}>,
+  }>,
 
   /**
     On iOS, custom color for the background. This background color can be
@@ -84,7 +84,7 @@ export type Props = $ReadOnly<{|
     use `onChange`.
    */
   onValueChange?: ?(value: boolean) => Promise<void> | void,
-|}>;
+}>;
 const returnsFalse = () => false;
 const returnsTrue = () => true;
 

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -69,10 +69,10 @@ export type ReturnKeyType =
 
 export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
 
-export type NativeProps = $ReadOnly<{|
+export type NativeProps = $ReadOnly<{
   // This allows us to inherit everything from ViewProps except for style (see below)
   // This must be commented for Fabric codegen to work.
-  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
+  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
 
   /**
    * Android props after this
@@ -345,13 +345,13 @@ export type NativeProps = $ReadOnly<{|
    * Callback that is called when the text input is blurred.
    * `target` is the reactTag of the element
    */
-  onBlur?: ?BubblingEventHandler<$ReadOnly<{|target: Int32|}>>,
+  onBlur?: ?BubblingEventHandler<$ReadOnly<{target: Int32}>>,
 
   /**
    * Callback that is called when the text input is focused.
    * `target` is the reactTag of the element
    */
-  onFocus?: ?BubblingEventHandler<$ReadOnly<{|target: Int32|}>>,
+  onFocus?: ?BubblingEventHandler<$ReadOnly<{target: Int32}>>,
 
   /**
    * Callback that is called when the text input's text changes.
@@ -359,7 +359,7 @@ export type NativeProps = $ReadOnly<{|
    * TODO: differentiate between onChange and onChangeText
    */
   onChange?: ?BubblingEventHandler<
-    $ReadOnly<{|target: Int32, eventCount: Int32, text: string|}>,
+    $ReadOnly<{target: Int32, eventCount: Int32, text: string}>,
   >,
 
   /**
@@ -368,7 +368,7 @@ export type NativeProps = $ReadOnly<{|
    * TODO: differentiate between onChange and onChangeText
    */
   onChangeText?: ?BubblingEventHandler<
-    $ReadOnly<{|target: Int32, eventCount: Int32, text: string|}>,
+    $ReadOnly<{target: Int32, eventCount: Int32, text: string}>,
   >,
 
   /**
@@ -379,17 +379,17 @@ export type NativeProps = $ReadOnly<{|
    * Only called for multiline text inputs.
    */
   onContentSizeChange?: ?DirectEventHandler<
-    $ReadOnly<{|
+    $ReadOnly<{
       target: Int32,
-      contentSize: $ReadOnly<{|width: Double, height: Double|}>,
-    |}>,
+      contentSize: $ReadOnly<{width: Double, height: Double}>,
+    }>,
   >,
 
   /**
    * Callback that is called when text input ends.
    */
   onEndEditing?: ?BubblingEventHandler<
-    $ReadOnly<{|target: Int32, text: string|}>,
+    $ReadOnly<{target: Int32, text: string}>,
   >,
 
   /**
@@ -398,10 +398,10 @@ export type NativeProps = $ReadOnly<{|
    * `{ nativeEvent: { selection: { start, end } } }`.
    */
   onSelectionChange?: ?DirectEventHandler<
-    $ReadOnly<{|
+    $ReadOnly<{
       target: Int32,
-      selection: $ReadOnly<{|start: Double, end: Double|}>,
-    |}>,
+      selection: $ReadOnly<{start: Double, end: Double}>,
+    }>,
   >,
 
   /**
@@ -409,7 +409,7 @@ export type NativeProps = $ReadOnly<{|
    * Invalid if `multiline={true}` is specified.
    */
   onSubmitEditing?: ?BubblingEventHandler<
-    $ReadOnly<{|target: Int32, text: string|}>,
+    $ReadOnly<{target: Int32, text: string}>,
   >,
 
   /**
@@ -419,7 +419,7 @@ export type NativeProps = $ReadOnly<{|
    * the typed-in character otherwise including `' '` for space.
    * Fires before `onChange` callbacks.
    */
-  onKeyPress?: ?BubblingEventHandler<$ReadOnly<{|target: Int32, key: string|}>>,
+  onKeyPress?: ?BubblingEventHandler<$ReadOnly<{target: Int32, key: string}>>,
 
   /**
    * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
@@ -427,32 +427,32 @@ export type NativeProps = $ReadOnly<{|
    * is not provided for performance reasons.
    */
   onScroll?: ?DirectEventHandler<
-    $ReadOnly<{|
+    $ReadOnly<{
       target: Int32,
       responderIgnoreScroll: boolean,
-      contentInset: $ReadOnly<{|
+      contentInset: $ReadOnly<{
         top: Double, // always 0 on Android
         bottom: Double, // always 0 on Android
         left: Double, // always 0 on Android
         right: Double, // always 0 on Android
-      |}>,
-      contentOffset: $ReadOnly<{|
+      }>,
+      contentOffset: $ReadOnly<{
         x: Double,
         y: Double,
-      |}>,
-      contentSize: $ReadOnly<{|
+      }>,
+      contentSize: $ReadOnly<{
         width: Double, // always 0 on Android
         height: Double, // always 0 on Android
-      |}>,
-      layoutMeasurement: $ReadOnly<{|
+      }>,
+      layoutMeasurement: $ReadOnly<{
         width: Double,
         height: Double,
-      |}>,
-      velocity: $ReadOnly<{|
+      }>,
+      velocity: $ReadOnly<{
         x: Double, // always 0 on Android
         y: Double, // always 0 on Android
-      |}>,
-    |}>,
+      }>,
+    }>,
   >,
 
   /**
@@ -485,10 +485,10 @@ export type NativeProps = $ReadOnly<{|
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
    */
-  selection?: ?$ReadOnly<{|
+  selection?: ?$ReadOnly<{
     start: Int32,
     end?: ?Int32,
-  |}>,
+  }>,
 
   /**
    * The value to show for the text input. `TextInput` is a controlled
@@ -588,7 +588,7 @@ export type NativeProps = $ReadOnly<{|
   textShadowRadius?: ?Float,
   textDecorationLine?: ?string,
   fontStyle?: ?string,
-  textShadowOffset?: ?$ReadOnly<{|width?: ?Double, height?: ?Double|}>,
+  textShadowOffset?: ?$ReadOnly<{width?: ?Double, height?: ?Double}>,
   lineHeight?: ?Float,
   textTransform?: ?string,
   color?: ?Int32,
@@ -610,7 +610,7 @@ export type NativeProps = $ReadOnly<{|
    */
   mostRecentEventCount: Int32,
   text?: ?string,
-|}>;
+}>;
 
 type NativeType = HostComponent<NativeProps>;
 

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -76,7 +76,7 @@ import * as React from 'react';
  * For an example, look at InputAccessoryViewExample.js in RNTester.
  */
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   +children: React.Node,
   /**
    * An ID which is used to associate this `InputAccessoryView` to
@@ -85,7 +85,7 @@ type Props = $ReadOnly<{|
   nativeID?: ?string,
   style?: ?ViewStyleProp,
   backgroundColor?: ?ColorValue,
-|}>;
+}>;
 
 const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
   const {width} = useWindowDimensions();