@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {LayoutEvent} from '../../Types/CoreEventTypes';
+import type {LayoutChangeEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
 import {isPublicInstance as isFabricPublicInstance} from '../../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
@@ -18,10 +18,10 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
 import * as React from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
-export type Props = $ReadOnly<{
-  children?: ExactReactElement_DEPRECATED<$FlowFixMe>,
+export type ScrollViewStickyHeaderProps = $ReadOnly<{
+  children?: React.Node,
   nextHeaderLayoutY: ?number,
-  onLayout: (event: LayoutEvent) => void,
+  onLayout: (event: LayoutChangeEvent) => void,
   scrollAnimatedValue: Animated.Value,
   // Will cause sticky headers to stick at the bottom of the ScrollView instead
   // of the top.
@@ -32,15 +32,13 @@ export type Props = $ReadOnly<{
   hiddenOnScroll?: ?boolean,
 }>;
 
-type Instance = {
-  ...React.ElementRef<typeof Animated.View>,
-  setNextHeaderY: number => void,
-  ...
-};
+interface Instance extends React.ElementRef<typeof Animated.View> {
+  +setNextHeaderY: number => void;
+}
 
 const ScrollViewStickyHeaderWithForwardedRef: component(
   ref: React.RefSetter<Instance>,
-  ...props: Props
+  ...props: ScrollViewStickyHeaderProps
 ) = React.forwardRef(function ScrollViewStickyHeader(props, forwardedRef) {
   const {
     inverted,
@@ -62,6 +60,7 @@ const ScrollViewStickyHeaderWithForwardedRef: component(
     if (ref == null) {
       return;
     }
+    // $FlowExpectedError[cannot-write]
     ref.setNextHeaderY = setNextHeaderLayoutY;
     setIsFabric(isFabricPublicInstance(ref));
   }, []);
@@ -253,7 +252,7 @@ const ScrollViewStickyHeaderWithForwardedRef: component(
     isFabric,
   ]);
 
-  const _onLayout = (event: LayoutEvent) => {
+  const _onLayout = (event: LayoutChangeEvent) => {
     setLayoutY(event.nativeEvent.layout.y);
     setLayoutHeight(event.nativeEvent.layout.height);
     setMeasured(true);

package/Libraries/Components/ScrollView/processDecelerationRate.js

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

package/Libraries/Components/Sound/NativeSoundManager.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs/modules/NativeSoundManager';
-import NativeSoundManager from '../../../src/private/specs/modules/NativeSoundManager';
+export * from '../../../src/private/specs_DEPRECATED/modules/NativeSoundManager';
+import NativeSoundManager from '../../../src/private/specs_DEPRECATED/modules/NativeSoundManager';
 export default NativeSoundManager;

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/NativeStatusBarManagerAndroid.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs/modules/NativeStatusBarManagerAndroid';
-import NativeStatusBarManagerAndroid from '../../../src/private/specs/modules/NativeStatusBarManagerAndroid';
+export * from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerAndroid';
+import NativeStatusBarManagerAndroid from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerAndroid';
 export default NativeStatusBarManagerAndroid;

package/Libraries/Components/StatusBar/NativeStatusBarManagerIOS.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs/modules/NativeStatusBarManagerIOS';
-import NativeStatusBarManagerIOS from '../../../src/private/specs/modules/NativeStatusBarManagerIOS';
+export * from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS';
+import NativeStatusBarManagerIOS from '../../../src/private/specs_DEPRECATED/modules/NativeStatusBarManagerIOS';
 export default NativeStatusBarManagerIOS;

package/Libraries/Components/StatusBar/StatusBar.js

@@ -55,7 +55,7 @@ export type StatusBarAnimation = $Keys<{
   ...
 }>;
 
-type AndroidProps = $ReadOnly<{|
+export type StatusBarPropsAndroid = $ReadOnly<{
   /**
    * The background color of the status bar.
    * @platform android
@@ -69,9 +69,9 @@ type AndroidProps = $ReadOnly<{|
    * @platform android
    */
   translucent?: ?boolean,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+export type StatusBarPropsIOS = $ReadOnly<{
   /**
    * If the network activity indicator should be visible.
    *
@@ -85,11 +85,9 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   showHideTransition?: ?('fade' | 'slide' | 'none'),
-|}>;
+}>;
 
-type Props = $ReadOnly<{|
-  ...AndroidProps,
-  ...IOSProps,
+type StatusBarBaseProps = $ReadOnly<{
   /**
    * If the status bar is hidden.
    */
@@ -103,7 +101,31 @@ type Props = $ReadOnly<{|
    * Sets the color of the status bar text.
    */
   barStyle?: ?('default' | 'light-content' | 'dark-content'),
-|}>;
+}>;
+
+export type StatusBarProps = $ReadOnly<{
+  ...StatusBarPropsAndroid,
+  ...StatusBarPropsIOS,
+  ...StatusBarBaseProps,
+}>;
+
+type StackProps = {
+  backgroundColor: ?{
+    value: StatusBarProps['backgroundColor'],
+    animated: boolean,
+  },
+  barStyle: ?{
+    value: StatusBarProps['barStyle'],
+    animated: boolean,
+  },
+  translucent: StatusBarProps['translucent'],
+  hidden: ?{
+    value: boolean,
+    animated: boolean,
+    transition: StatusBarProps['showHideTransition'],
+  },
+  networkActivityIndicatorVisible: StatusBarProps['networkActivityIndicatorVisible'],
+};
 
 /**
  * Merges the prop stack with the default values.
@@ -129,7 +151,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: StatusBarProps): StackProps {
   const animated = props.animated ?? false;
   const showHideTransition = props.showHideTransition ?? 'fade';
   return {
@@ -202,8 +224,8 @@ function createStackEntry(props: any): any {
  *
  * `currentHeight` (Android only) The height of the status bar.
  */
-class StatusBar extends React.Component<Props> {
-  static _propsStack: Array<any> = [];
+class StatusBar extends React.Component<StatusBarProps> {
+  static _propsStack: Array<StackProps> = [];
 
   static _defaultProps: any = createStackEntry({
     backgroundColor:
@@ -218,12 +240,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.
@@ -293,7 +313,7 @@ class StatusBar extends React.Component<Props> {
    * @param color Background color.
    * @param animated Animate the style change.
    */
-  static setBackgroundColor(color: string, animated?: boolean): void {
+  static setBackgroundColor(color: ColorValue, animated?: boolean): void {
     if (Platform.OS !== 'android') {
       console.warn('`setBackgroundColor` is only available on Android');
       return;
@@ -304,7 +324,7 @@ class StatusBar extends React.Component<Props> {
     const processedColor = processColor(color);
     if (processedColor == null) {
       console.warn(
-        `\`StatusBar.setBackgroundColor\`: Color ${color} parsed to null or undefined`,
+        `\`StatusBar.setBackgroundColor\`: Color ${String(color)} parsed to null or undefined`,
       );
       return;
     }
@@ -335,7 +355,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param props Object containing the StatusBar props to use in the stack entry.
    */
-  static pushStackEntry(props: any): any {
+  static pushStackEntry(props: StatusBarProps): StackProps {
     const entry = createStackEntry(props);
     StatusBar._propsStack.push(entry);
     StatusBar._updatePropsStack();
@@ -347,7 +367,7 @@ class StatusBar extends React.Component<Props> {
    *
    * @param entry Entry returned from `pushStackEntry`.
    */
-  static popStackEntry(entry: any) {
+  static popStackEntry(entry: StackProps) {
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
       StatusBar._propsStack.splice(index, 1);
@@ -361,7 +381,10 @@ class StatusBar extends React.Component<Props> {
    * @param entry Entry returned from `pushStackEntry` to replace.
    * @param props Object containing the StatusBar props to use in the replacement stack entry.
    */
-  static replaceStackEntry(entry: any, props: any): any {
+  static replaceStackEntry(
+    entry: StackProps,
+    props: StatusBarProps,
+  ): StackProps {
     const newEntry = createStackEntry(props);
     const index = StatusBar._propsStack.indexOf(entry);
     if (index !== -1) {
@@ -371,8 +394,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
@@ -385,14 +407,18 @@ class StatusBar extends React.Component<Props> {
   componentWillUnmount() {
     // When a StatusBar is unmounted, remove itself from the stack and update
     // the native bar with the next props.
-    StatusBar.popStackEntry(this._stackEntry);
+    if (this._stackEntry != null) {
+      StatusBar.popStackEntry(this._stackEntry);
+    }
   }
 
   componentDidUpdate() {
-    this._stackEntry = StatusBar.replaceStackEntry(
-      this._stackEntry,
-      this.props,
-    );
+    if (this._stackEntry != null) {
+      this._stackEntry = StatusBar.replaceStackEntry(
+        this._stackEntry,
+        this.props,
+      );
+    }
   }
 
   /**
@@ -412,14 +438,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 +482,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 +504,4 @@ class StatusBar extends React.Component<Props> {
   }
 }
 
-module.exports = StatusBar;
+export default StatusBar;

package/Libraries/Components/Switch/AndroidSwitchNativeComponent.js

@@ -8,6 +8,6 @@
  * @flow strict-local
  */
 
-export * from '../../../src/private/specs/components/AndroidSwitchNativeComponent';
-import AndroidSwitchNativeComponent from '../../../src/private/specs/components/AndroidSwitchNativeComponent';
+export * from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';
+import AndroidSwitchNativeComponent from '../../../src/private/specs_DEPRECATED/components/AndroidSwitchNativeComponent';
 export default AndroidSwitchNativeComponent;

package/Libraries/Components/Switch/Switch.js

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -23,16 +23,37 @@ import SwitchNativeComponent, {
 } from './SwitchNativeComponent';
 import * as React from 'react';
 
-type SwitchChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
-    value: boolean,
-    target: number,
-  |}>,
->;
+export type SwitchPropsIOS = {
+  /**
+   * Background color when the switch is turned on.
+   *
+   * @deprecated use trackColor instead
+   */
+  onTintColor?: ?ColorValue,
 
-export type Props = $ReadOnly<{|
-  ...ViewProps,
+  /**
+   * Color of the foreground switch grip.
+   *
+   * @deprecated use thumbColor instead
+   */
+  thumbTintColor?: ?ColorValue,
+
+  /**
+   * Background color when the switch is turned off.
+   *
+   * @deprecated use trackColor instead
+   */
+  tintColor?: ?ColorValue,
+};
+
+export type SwitchChangeEventData = $ReadOnly<{
+  target: number,
+  value: boolean,
+}>;
 
+export type SwitchChangeEvent = NativeSyntheticEvent<SwitchChangeEventData>;
+
+type SwitchPropsBase = {
   /**
     If true the user won't be able to toggle the switch.
 
@@ -41,53 +62,64 @@ export type Props = $ReadOnly<{|
   disabled?: ?boolean,
 
   /**
-    The value of the switch. If true the switch will be turned on.
+      The value of the switch. If true the switch will be turned on.
 
-    @default false
-   */
+      @default false
+     */
   value?: ?boolean,
 
   /**
-    Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-   */
+      Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
+     */
   thumbColor?: ?ColorValue,
 
   /**
-    Custom colors for the switch track.
+      Custom colors for the switch track.
 
-    _iOS_: When the switch value is false, the track shrinks into the border. If you want to change the
-    color of the background exposed by the shrunken track, use
-     [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
-   */
-  trackColor?: ?$ReadOnly<{|
+      _iOS_: When the switch value is false, the track shrinks into the border. If you want to change the
+      color of the background exposed by the shrunken track, use
+       [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
+     */
+  trackColor?: ?$ReadOnly<{
     false?: ?ColorValue,
     true?: ?ColorValue,
-  |}>,
+  }>,
 
   /**
-    On iOS, custom color for the background. This background color can be
-    seen either when the switch value is false or when the switch is
-    disabled (and the switch is translucent).
-   */
+      On iOS, custom color for the background. This background color can be
+      seen either when the switch value is false or when the switch is
+      disabled (and the switch is translucent).
+     */
   ios_backgroundColor?: ?ColorValue,
 
   /**
-    Invoked when the user tries to change the value of the switch. Receives
-    the change event as an argument. If you want to only receive the new
-    value, use `onValueChange` instead.
-   */
+      Invoked when the user tries to change the value of the switch. Receives
+      the change event as an argument. If you want to only receive the new
+      value, use `onValueChange` instead.
+     */
   onChange?: ?(event: SwitchChangeEvent) => Promise<void> | void,
 
   /**
-    Invoked when the user tries to change the value of the switch. Receives
-    the new value as an argument. If you want to instead receive an event,
-    use `onChange`.
-   */
+      Invoked when the user tries to change the value of the switch. Receives
+      the new value as an argument. If you want to instead receive an event,
+      use `onChange`.
+     */
   onValueChange?: ?(value: boolean) => Promise<void> | void,
-|}>;
+};
+
+export type SwitchProps = $ReadOnly<{
+  ...ViewProps,
+  ...SwitchPropsIOS,
+  ...SwitchPropsBase,
+}>;
+
 const returnsFalse = () => false;
 const returnsTrue = () => true;
 
+type SwitchRef = React.ElementRef<
+  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+>;
+
 /**
   Renders a boolean input.
 
@@ -129,14 +161,9 @@ const returnsTrue = () => true;
   export default App;
   ```
  */
-
-type SwitchRef = React.ElementRef<
-  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
->;
-
-const SwitchWithForwardedRef: component(
-  ref: React.RefSetter<SwitchRef>,
-  ...props: Props
+const Switch: component(
+  ref?: React.RefSetter<SwitchRef>,
+  ...props: SwitchProps
 ) = React.forwardRef(function Switch(props, forwardedRef): React.Node {
   const {
     disabled,
@@ -177,6 +204,7 @@ const SwitchWithForwardedRef: component(
       native.value != null && native.value !== jsValue;
     if (
       shouldUpdateNativeSwitch &&
+      // $FlowIssue[method-unbinding]
       nativeSwitchRef.current?.setNativeProps != null
     ) {
       if (Platform.OS === 'android') {
@@ -188,7 +216,8 @@ const SwitchWithForwardedRef: component(
   }, [value, native]);
 
   if (Platform.OS === 'android') {
-    const {accessibilityState} = restProps;
+    const {onTintColor, tintColor, ...androidProps} = restProps;
+    const {accessibilityState} = androidProps;
     const _disabled =
       disabled != null ? disabled : accessibilityState?.disabled;
 
@@ -210,7 +239,7 @@ const SwitchWithForwardedRef: component(
 
     return (
       <AndroidSwitchNativeComponent
-        {...restProps}
+        {...androidProps}
         {...platformProps}
         accessibilityRole={props.accessibilityRole ?? 'switch'}
         onChange={handleChange}
@@ -254,4 +283,4 @@ const SwitchWithForwardedRef: component(
   }
 });
 
-export default SwitchWithForwardedRef;
+export default Switch;

package/Libraries/Components/Switch/SwitchNativeComponent.js

@@ -8,6 +8,6 @@
  * @flow strict-local
  */
 
-export * from '../../../src/private/specs/components/SwitchNativeComponent';
-import SwitchNativeComponent from '../../../src/private/specs/components/SwitchNativeComponent';
+export * from '../../../src/private/specs_DEPRECATED/components/SwitchNativeComponent';
+import SwitchNativeComponent from '../../../src/private/specs_DEPRECATED/components/SwitchNativeComponent';
 export default SwitchNativeComponent;