@office-iss/react-native-win32 0.73.2 → 0.74.0-preview.2

package/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent.js

@@ -8,19 +8,6 @@
  * @flow strict-local
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  removeClippedSubviews?: ?boolean,
-|}>;
-
-type NativeType = HostComponent<NativeProps>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'AndroidHorizontalScrollContentView',
-): NativeType);
+export * from '../../../src/private/specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+import AndroidHorizontalScrollContentViewNativeComponent from '../../../src/private/specs/components/AndroidHorizontalScrollContentViewNativeComponent';
+export default AndroidHorizontalScrollContentViewNativeComponent;

package/Libraries/Components/ScrollView/ScrollContentViewNativeComponent.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict-local
  */
 
 import type {

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -481,12 +481,12 @@ export interface ScrollViewPropsIOS {
   pinchGestureEnabled?: boolean | undefined;
 
   /**
-   * This controls how often the scroll event will be fired while scrolling (as a time interval in ms).
-   * A lower number yields better accuracy for code that is tracking the scroll position,
-   * but can lead to scroll performance problems due to the volume of information being sent over the bridge.
-   * The default value is zero, which means the scroll event will be sent only once each time the view is scrolled.
+   * Limits how often scroll events will be fired while scrolling, specified as
+   * a time interval in ms. This may be useful when expensive work is performed
+   * in response to scrolling. Values <= `16` will disable throttling,
+   * regardless of the refresh rate of the device.
    */
-  scrollEventThrottle?: number | undefined; // null
+  scrollEventThrottle?: number | undefined;
 
   /**
    * The amount by which the scroll view indicators are inset from the edges of the scroll view.
@@ -663,7 +663,6 @@ export interface ScrollViewProps
 
   /**
    * Fires at most once per frame during scrolling.
-   * The frequency of the events can be contolled using the scrollEventThrottle prop.
    */
   onScroll?:
     | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)

package/Libraries/Components/ScrollView/ScrollView.js

@@ -515,8 +515,7 @@ export type Props = $ReadOnly<{|
   onMomentumScrollEnd?: ?(event: ScrollEvent) => void,
 
   /**
-   * Fires at most once per frame during scrolling. The frequency of the
-   * events can be controlled using the `scrollEventThrottle` prop.
+   * Fires at most once per frame during scrolling.
    */
   onScroll?: ?(event: ScrollEvent) => void,
   /**
@@ -546,8 +545,6 @@ export type Props = $ReadOnly<{|
    * When true, the scroll view stops on multiples of the scroll view's size
    * when scrolling. This can be used for horizontal pagination. The default
    * value is false.
-   *
-   * Note: Vertical pagination is not supported on Android.
    */
   pagingEnabled?: ?boolean,
   /**
@@ -558,19 +555,10 @@ export type Props = $ReadOnly<{|
    */
   scrollEnabled?: ?boolean,
   /**
-   * This controls how often the scroll event will be fired while scrolling
-   * (as a time interval in ms). A lower number yields better accuracy for code
-   * that is tracking the scroll position, but can lead to scroll performance
-   * problems due to the volume of information being send over the bridge.
-   *
-   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
-   * will be disabled.
-   *
-   * If you do not need precise scroll position tracking, set this value higher
-   * to limit the information being sent across the bridge.
-   *
-   * The default value is zero, which results in the scroll event being sent only
-   * once each time the view is scrolled.
+   * Limits how often scroll events will be fired while scrolling, specified as
+   * a time interval in ms. This may be useful when expensive work is performed
+   * in response to scrolling. Values <= `16` will disable throttling,
+   * regardless of the refresh rate of the device.
    */
   scrollEventThrottle?: ?number,
   /**
@@ -1150,21 +1138,6 @@ class ScrollView extends React.Component<Props, State> {
   }
 
   _handleScroll = (e: ScrollEvent) => {
-    if (__DEV__) {
-      if (
-        this.props.onScroll &&
-        this.props.scrollEventThrottle == null &&
-        Platform.OS === 'ios'
-      ) {
-        console.log(
-          'You specified `onScroll` on a <ScrollView> but not ' +
-            '`scrollEventThrottle`. You will only receive one event. ' +
-            'Using `16` you get all the events but be aware that it may ' +
-            "cause frame drops, use a bigger number if you don't need as " +
-            'much precision.',
-        );
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1685,13 +1658,14 @@ class ScrollView extends React.Component<Props, State> {
 
     const {stickyHeaderIndices} = this.props;
     let children = this.props.children;
+    /**
+     * This function can cause unnecessary remount when nested in conditionals as it causes remap of children keys.
+     * https://react.dev/reference/react/Children#children-toarray-caveats
+     */
+    children = React.Children.toArray<$FlowFixMe>(children);
 
     if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
-      const childArray = React.Children.toArray<$FlowFixMe>(
-        this.props.children,
-      );
-
-      children = childArray.map((child, index) => {
+      children = children.map((child, index) => {
         const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
         if (indexOfIndex > -1) {
           const key = child.key;
@@ -1703,7 +1677,7 @@ class ScrollView extends React.Component<Props, State> {
               key={key}
               ref={ref => this._setStickyHeaderRef(key, ref)}
               nextHeaderLayoutY={this._headerLayoutYs.get(
-                this._getKeyForIndex(nextIndex, childArray),
+                this._getKeyForIndex(nextIndex, children),
               )}
               onLayout={event => this._onStickyHeaderLayout(index, event, key)}
               scrollAnimatedValue={this._scrollAnimatedValue}

package/Libraries/Components/ScrollView/ScrollView.win32.js

@@ -515,8 +515,7 @@ export type Props = $ReadOnly<{|
   onMomentumScrollEnd?: ?(event: ScrollEvent) => void,
 
   /**
-   * Fires at most once per frame during scrolling. The frequency of the
-   * events can be controlled using the `scrollEventThrottle` prop.
+   * Fires at most once per frame during scrolling.
    */
   onScroll?: ?(event: ScrollEvent) => void,
   /**
@@ -546,8 +545,6 @@ export type Props = $ReadOnly<{|
    * When true, the scroll view stops on multiples of the scroll view's size
    * when scrolling. This can be used for horizontal pagination. The default
    * value is false.
-   *
-   * Note: Vertical pagination is not supported on Android.
    */
   pagingEnabled?: ?boolean,
   /**
@@ -558,19 +555,10 @@ export type Props = $ReadOnly<{|
    */
   scrollEnabled?: ?boolean,
   /**
-   * This controls how often the scroll event will be fired while scrolling
-   * (as a time interval in ms). A lower number yields better accuracy for code
-   * that is tracking the scroll position, but can lead to scroll performance
-   * problems due to the volume of information being send over the bridge.
-   *
-   * Values between 0 and 17ms indicate 60fps updates are needed and throttling
-   * will be disabled.
-   *
-   * If you do not need precise scroll position tracking, set this value higher
-   * to limit the information being sent across the bridge.
-   *
-   * The default value is zero, which results in the scroll event being sent only
-   * once each time the view is scrolled.
+   * Limits how often scroll events will be fired while scrolling, specified as
+   * a time interval in ms. This may be useful when expensive work is performed
+   * in response to scrolling. Values <= `16` will disable throttling,
+   * regardless of the refresh rate of the device.
    */
   scrollEventThrottle?: ?number,
   /**
@@ -1150,21 +1138,6 @@ class ScrollView extends React.Component<Props, State> {
   }
 
   _handleScroll = (e: ScrollEvent) => {
-    if (__DEV__) {
-      if (
-        this.props.onScroll &&
-        this.props.scrollEventThrottle == null &&
-        Platform.OS === 'ios'
-      ) {
-        console.log(
-          'You specified `onScroll` on a <ScrollView> but not ' +
-            '`scrollEventThrottle`. You will only receive one event. ' +
-            'Using `16` you get all the events but be aware that it may ' +
-            "cause frame drops, use a bigger number if you don't need as " +
-            'much precision.',
-        );
-      }
-    }
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
   };
@@ -1685,13 +1658,14 @@ class ScrollView extends React.Component<Props, State> {
 
     const {stickyHeaderIndices} = this.props;
     let children = this.props.children;
+    /**
+     * This function can cause unnecessary remount when nested in conditionals as it causes remap of children keys.
+     * https://react.dev/reference/react/Children#children-toarray-caveats
+     */
+    children = React.Children.toArray<$FlowFixMe>(children);
 
     if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
-      const childArray = React.Children.toArray<$FlowFixMe>(
-        this.props.children,
-      );
-
-      children = childArray.map((child, index) => {
+      children = children.map((child, index) => {
         const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
         if (indexOfIndex > -1) {
           const key = child.key;
@@ -1703,7 +1677,7 @@ class ScrollView extends React.Component<Props, State> {
               key={key}
               ref={ref => this._setStickyHeaderRef(key, ref)}
               nextHeaderLayoutY={this._headerLayoutYs.get(
-                this._getKeyForIndex(nextIndex, childArray),
+                this._getKeyForIndex(nextIndex, children),
               )}
               onLayout={event => this._onStickyHeaderLayout(index, event, key)}
               scrollAnimatedValue={this._scrollAnimatedValue}

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -67,8 +67,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   }, []);
   const ref: (React.ElementRef<typeof Animated.View> | null) => void =
     // $FlowFixMe[incompatible-type] - Ref is mutated by `callbackRef`.
-    // $FlowFixMe[incompatible-call]
-    useMergeRefs<Instance | null>(callbackRef, forwardedRef);
+    useMergeRefs<Instance>(callbackRef, forwardedRef);
 
   const offset = useMemo(
     () =>

package/Libraries/Components/Sound/NativeSoundManager.js

@@ -8,15 +8,6 @@
  * @format
  */
 
-import type {TurboModule} from '../../TurboModule/RCTExport';
-
-import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
-
-/**
- * Native Module used for playing sounds in native platform.
- */
-export interface Spec extends TurboModule {
-  +playTouchSound: () => void;
-}
-
-export default (TurboModuleRegistry.get<Spec>('SoundManager'): ?Spec);
+export * from '../../../src/private/specs/modules/NativeSoundManager';
+import NativeSoundManager from '../../../src/private/specs/modules/NativeSoundManager';
+export default NativeSoundManager;

package/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid.js

@@ -8,61 +8,6 @@
  * @format
  */
 
-import type {TurboModule} from '../../TurboModule/RCTExport';
-
-import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
-
-export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    +HEIGHT: number,
-    +DEFAULT_BACKGROUND_COLOR: number,
-  |};
-  +setColor: (color: number, animated: boolean) => void;
-  +setTranslucent: (translucent: boolean) => void;
-
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   */
-  +setStyle: (statusBarStyle?: ?string) => void;
-  +setHidden: (hidden: boolean) => void;
-}
-
-const NativeModule = TurboModuleRegistry.getEnforcing<Spec>('StatusBarManager');
-let constants = null;
-
-const NativeStatusBarManager = {
-  getConstants(): {|
-    +HEIGHT: number,
-    +DEFAULT_BACKGROUND_COLOR?: number,
-  |} {
-    if (constants == null) {
-      constants = NativeModule.getConstants();
-    }
-    return constants;
-  },
-
-  setColor(color: number, animated: boolean): void {
-    NativeModule.setColor(color, animated);
-  },
-
-  setTranslucent(translucent: boolean): void {
-    NativeModule.setTranslucent(translucent);
-  },
-
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   */
-  setStyle(statusBarStyle?: ?string): void {
-    NativeModule.setStyle(statusBarStyle);
-  },
-
-  setHidden(hidden: boolean): void {
-    NativeModule.setHidden(hidden);
-  },
-};
-
-export default NativeStatusBarManager;
+export * from '../../../src/private/specs/modules/NativeStatusBarManagerAndroid';
+import NativeStatusBarManagerAndroid from '../../../src/private/specs/modules/NativeStatusBarManagerAndroid';
+export default NativeStatusBarManagerAndroid;

package/Libraries/Components/StatusBar/NativeStatusBarManagerIOS.js

@@ -8,82 +8,6 @@
  * @format
  */
 
-import type {TurboModule} from '../../TurboModule/RCTExport';
-
-import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
-
-export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    +HEIGHT: number,
-    +DEFAULT_BACKGROUND_COLOR?: number,
-  |};
-
-  // TODO(T47754272) Can we remove this method?
-  +getHeight: (callback: (result: {|height: number|}) => void) => void;
-  +setNetworkActivityIndicatorVisible: (visible: boolean) => void;
-  +addListener: (eventType: string) => void;
-  +removeListeners: (count: number) => void;
-
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   *    - 'light-content'
-   */
-  +setStyle: (statusBarStyle?: ?string, animated: boolean) => void;
-  /**
-   *  - withAnimation can be: 'none' | 'fade' | 'slide'
-   */
-  +setHidden: (hidden: boolean, withAnimation: string) => void;
-}
-
-const NativeModule = TurboModuleRegistry.getEnforcing<Spec>('StatusBarManager');
-let constants = null;
-
-const NativeStatusBarManager = {
-  getConstants(): {|
-    +HEIGHT: number,
-    +DEFAULT_BACKGROUND_COLOR?: number,
-  |} {
-    if (constants == null) {
-      constants = NativeModule.getConstants();
-    }
-    return constants;
-  },
-
-  // TODO(T47754272) Can we remove this method?
-  getHeight(callback: (result: {|height: number|}) => void): void {
-    NativeModule.getHeight(callback);
-  },
-
-  setNetworkActivityIndicatorVisible(visible: boolean): void {
-    NativeModule.setNetworkActivityIndicatorVisible(visible);
-  },
-
-  addListener(eventType: string): void {
-    NativeModule.addListener(eventType);
-  },
-
-  removeListeners(count: number): void {
-    NativeModule.removeListeners(count);
-  },
-
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   *    - 'light-content'
-   */
-  setStyle(statusBarStyle?: ?string, animated: boolean): void {
-    NativeModule.setStyle(statusBarStyle, animated);
-  },
-
-  /**
-   *  - withAnimation can be: 'none' | 'fade' | 'slide'
-   */
-  setHidden(hidden: boolean, withAnimation: string): void {
-    NativeModule.setHidden(hidden, withAnimation);
-  },
-};
-
-export default NativeStatusBarManager;
+export * from '../../../src/private/specs/modules/NativeStatusBarManagerIOS';
+import NativeStatusBarManagerIOS from '../../../src/private/specs/modules/NativeStatusBarManagerIOS';
+export default NativeStatusBarManagerIOS;

package/Libraries/Components/Switch/AndroidSwitchNativeComponent.js

@@ -4,59 +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
  * @format
+ * @flow strict-local
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {
-  BubblingEventHandler,
-  Int32,
-  WithDefault,
-} from '../../Types/CodegenTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import * as React from 'react';
-
-type SwitchChangeEvent = $ReadOnly<{|
-  value: boolean,
-  target: Int32,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  // Props
-  disabled?: WithDefault<boolean, false>,
-  enabled?: WithDefault<boolean, true>,
-  thumbColor?: ?ColorValue,
-  trackColorForFalse?: ?ColorValue,
-  trackColorForTrue?: ?ColorValue,
-  value?: WithDefault<boolean, false>,
-  on?: WithDefault<boolean, false>,
-  thumbTintColor?: ?ColorValue,
-  trackTintColor?: ?ColorValue,
-
-  // Events
-  onChange?: BubblingEventHandler<SwitchChangeEvent>,
-|}>;
-
-type NativeType = HostComponent<NativeProps>;
-
-interface NativeCommands {
-  +setNativeValue: (
-    viewRef: React.ElementRef<NativeType>,
-    value: boolean,
-  ) => void;
-}
-
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setNativeValue'],
-});
-
-export default (codegenNativeComponent<NativeProps>('AndroidSwitch', {
-  interfaceOnly: true,
-}): NativeType);
+export * from '../../../src/private/specs/components/AndroidSwitchNativeComponent';
+import AndroidSwitchNativeComponent from '../../../src/private/specs/components/AndroidSwitchNativeComponent';
+export default AndroidSwitchNativeComponent;

package/Libraries/Components/Switch/Switch.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @generate-docs
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
@@ -155,7 +154,6 @@ const SwitchWithForwardedRef: React.AbstractComponent<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
   > | null>(null);
 
-  // $FlowFixMe[incompatible-call]
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
   const [native, setNative] = React.useState({value: (null: ?boolean)});

package/Libraries/Components/Switch/SwitchNativeComponent.js

@@ -4,58 +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
  * @format
+ * @flow strict-local
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import type {
-  BubblingEventHandler,
-  Int32,
-  WithDefault,
-} from '../../Types/CodegenTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
-
-import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import * as React from 'react';
-
-type SwitchChangeEvent = $ReadOnly<{|
-  value: boolean,
-  target: Int32,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  // Props
-  disabled?: WithDefault<boolean, false>,
-  value?: WithDefault<boolean, false>,
-  tintColor?: ?ColorValue,
-  onTintColor?: ?ColorValue,
-  thumbTintColor?: ?ColorValue,
-
-  // Deprecated props
-  thumbColor?: ?ColorValue,
-  trackColorForFalse?: ?ColorValue,
-  trackColorForTrue?: ?ColorValue,
-
-  // Events
-  onChange?: ?BubblingEventHandler<SwitchChangeEvent>,
-|}>;
-
-type ComponentType = HostComponent<NativeProps>;
-
-interface NativeCommands {
-  +setValue: (viewRef: React.ElementRef<ComponentType>, value: boolean) => void;
-}
-
-export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setValue'],
-});
-
-export default (codegenNativeComponent<NativeProps>('Switch', {
-  paperComponentName: 'RCTSwitch',
-  excludedPlatforms: ['android'],
-}): ComponentType);
+export * from '../../../src/private/specs/components/SwitchNativeComponent';
+import SwitchNativeComponent from '../../../src/private/specs/components/SwitchNativeComponent';
+export default SwitchNativeComponent;

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -485,6 +485,11 @@ export type NativeProps = $ReadOnly<{|
    */
   selectionColor?: ?ColorValue,
 
+  /**
+   * The text selection handle color.
+   */
+  selectionHandleColor?: ?ColorValue,
+
   /**
    * The start and end of the text input's selection. Set start and end to
    * the same value to position the cursor.
@@ -692,6 +697,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     fontStyle: true,
     textShadowOffset: true,
     selectionColor: {process: require('../../StyleSheet/processColor').default},
+    selectionHandleColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     placeholderTextColor: {
       process: require('../../StyleSheet/processColor').default,
     },

package/Libraries/Components/TextInput/InputAccessoryView.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
+ * @flow strict-local
  * @format
  */
 
@@ -85,27 +85,25 @@ type Props = $ReadOnly<{|
   backgroundColor?: ?ColorValue,
 |}>;
 
-class InputAccessoryView extends React.Component<Props> {
-  render(): React.Node {
-    if (Platform.OS === 'ios') {
-      if (React.Children.count(this.props.children) === 0) {
-        return null;
-      }
-
-      return (
-        <RCTInputAccessoryViewNativeComponent
-          style={[this.props.style, styles.container]}
-          nativeID={this.props.nativeID}
-          backgroundColor={this.props.backgroundColor}>
-          {this.props.children}
-        </RCTInputAccessoryViewNativeComponent>
-      );
-    } else {
-      console.warn('<InputAccessoryView> is only supported on iOS.');
+const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+  if (Platform.OS === 'ios') {
+    if (React.Children.count(props.children) === 0) {
       return null;
     }
+
+    return (
+      <RCTInputAccessoryViewNativeComponent
+        style={[props.style, styles.container]}
+        nativeID={props.nativeID}
+        backgroundColor={props.backgroundColor}>
+        {props.children}
+      </RCTInputAccessoryViewNativeComponent>
+    );
+  } else {
+    console.warn('<InputAccessoryView> is only supported on iOS.');
+    return null;
   }
-}
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -113,4 +111,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = InputAccessoryView;
+export default InputAccessoryView;