@office-iss/react-native-win32 0.74.4 → 0.75.0-preview.1

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,13 +23,17 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
+    maintainVisibleContentPosition: true,
     endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
     pagingEnabled: true,
     persistentScrollbar: true,
+    horizontal: true,
+    enableSyncOnScroll: true,
     scrollEnabled: true,
+    scrollEventThrottle: true,
     scrollPerfTag: true,
     sendMomentumEvents: true,
     showsHorizontalScrollIndicator: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -33,6 +33,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Dimensions from '../../Utilities/Dimensions';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
+import EventEmitter from '../../vendor/emitter/EventEmitter';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import View from '../View/View';
@@ -266,33 +267,6 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   canCancelContentTouches?: ?boolean,
-  /**
-   * When set, the scroll view will adjust the scroll position so that the first child that is
-   * currently visible and at or beyond `minIndexForVisible` will not change position. This is
-   * useful for lists that are loading content in both directions, e.g. a chat thread, where new
-   * messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
-   * but other values such as 1 can be used to skip loading spinners or other content that should
-   * not maintain position.
-   *
-   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
-   * to the top after making the adjustment if the user was within the threshold of the top before
-   * the adjustment was made. This is also useful for chat-like applications where you want to see
-   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
-   * disruptive to scroll a bunch.
-   *
-   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
-   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
-   * don't re-order the content of any ScrollViews or Lists that use this feature.
-   *
-   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
-   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
-   * whether content is "visible" or not.
-   *
-   */
-  maintainVisibleContentPosition?: ?$ReadOnly<{|
-    minIndexForVisible: number,
-    autoscrollToTopThreshold?: ?number,
-  |}>,
   /**
    * The maximum allowed zoom scale. The default value is 1.0.
    * @platform ios
@@ -465,6 +439,20 @@ export type Props = $ReadOnly<{|
    *   - `'fast'`: 0.99 on iOS, 0.9 on Android
    */
   decelerationRate?: ?DecelerationRateType,
+
+  /**
+   * *Experimental, iOS Only*. The API is experimental and will change in future releases.
+   *
+   * Controls how much distance is travelled after user stops scrolling.
+   * Value greater than 1 will increase the distance travelled.
+   * Value less than 1 will decrease the distance travelled.
+   *
+   * @deprecated
+   *
+   * The default value is 1.
+   */
+  experimental_endDraggingSensitivityMultiplier?: ?number,
+
   /**
    * When true, the scroll view's children are arranged horizontally in a row
    * instead of vertically in a column. The default value is false.
@@ -505,6 +493,33 @@ export type Props = $ReadOnly<{|
    *   - `true`, deprecated, use 'always' instead
    */
   keyboardShouldPersistTaps?: ?('always' | 'never' | 'handled' | true | false),
+  /**
+   * When set, the scroll view will adjust the scroll position so that the first child that is
+   * partially or fully visible and at or beyond `minIndexForVisible` will not change position.
+   * This is useful for lists that are loading content in both directions, e.g. a chat thread,
+   * where new messages coming in might otherwise cause the scroll position to jump. A value of 0
+   * is common, but other values such as 1 can be used to skip loading spinners or other content
+   * that should not maintain position.
+   *
+   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
+   * to the top after making the adjustment if the user was within the threshold of the top before
+   * the adjustment was made. This is also useful for chat-like applications where you want to see
+   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
+   * disruptive to scroll a bunch.
+   *
+   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
+   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
+   * don't re-order the content of any ScrollViews or Lists that use this feature.
+   *
+   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
+   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
+   * whether content is "visible" or not.
+   *
+   */
+  maintainVisibleContentPosition?: ?$ReadOnly<{|
+    minIndexForVisible: number,
+    autoscrollToTopThreshold?: ?number,
+  |}>,
   /**
    * Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
    */
@@ -662,6 +677,9 @@ export type Props = $ReadOnly<{|
 
 type State = {|
   layoutHeight: ?number,
+  onScrollEmitter: ?EventEmitter<{
+    scroll: [{x: number, y: number}],
+  }>,
 |};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
@@ -747,6 +765,7 @@ class ScrollView extends React.Component<Props, State> {
 
   state: State = {
     layoutHeight: null,
+    onScrollEmitter: null,
   };
 
   componentDidMount() {
@@ -815,6 +834,8 @@ class ScrollView extends React.Component<Props, State> {
     if (this._scrollAnimatedValueAttachment) {
       this._scrollAnimatedValueAttachment.detach();
     }
+
+    this.state.onScrollEmitter?.removeAllListeners();
   }
 
   /**
@@ -934,6 +955,44 @@ class ScrollView extends React.Component<Props, State> {
     Commands.flashScrollIndicators(this._scrollView.nativeInstance);
   };
 
+  _subscribeToOnScroll: (
+    callback: ({x: number, y: number}) => void,
+  ) => EventSubscription = callback => {
+    // An undefined value means the listener has not been added, yet.
+    // A null value means the listener has been removed.
+    let subscription: ?EventSubscription;
+
+    this.setState(
+      ({onScrollEmitter}) => {
+        if (onScrollEmitter) {
+          return null;
+        } else {
+          return {onScrollEmitter: new EventEmitter()};
+        }
+      },
+      () => {
+        // If `subscription` is null, that means it was removed before we got
+        // here so do nothing.
+        if (subscription !== null) {
+          subscription = nullthrows(this.state.onScrollEmitter).addListener(
+            'scroll',
+            callback,
+          );
+        }
+      },
+    );
+
+    return {
+      remove() {
+        // If `subscription` was created before this invocation, remove it.
+        subscription?.remove();
+        // Record this invocation by setting `subscription` to null, in case it
+        // ends up being created after this invocation.
+        subscription = null;
+      },
+    };
+  };
+
   /**
    * This method should be used as the callback to onFocus in a TextInputs'
    * parent view. Note that any module using this mixin needs to return
@@ -1140,6 +1199,11 @@ class ScrollView extends React.Component<Props, State> {
   _handleScroll = (e: ScrollEvent) => {
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
+
+    this.state.onScrollEmitter?.emit('scroll', {
+      x: e.nativeEvent.contentOffset.x,
+      y: e.nativeEvent.contentOffset.y,
+    });
   };
 
   _handleLayout = (e: LayoutEvent) => {
@@ -1188,6 +1252,8 @@ class ScrollView extends React.Component<Props, State> {
           scrollToEnd: this.scrollToEnd,
           flashScrollIndicators: this.flashScrollIndicators,
           scrollResponderZoomTo: this.scrollResponderZoomTo,
+          // TODO: Replace unstable_subscribeToOnScroll once scrollView.addEventListener('scroll', (e: ScrollEvent) => {}, {passive: false});
+          unstable_subscribeToOnScroll: this._subscribeToOnScroll,
           scrollResponderScrollNativeHandleToKeyboard:
             this.scrollResponderScrollNativeHandleToKeyboard,
         },
@@ -1702,6 +1768,13 @@ class ScrollView extends React.Component<Props, State> {
     const hasStickyHeaders =
       Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;
 
+    // Some ScrollView native component behaviors rely on using the metrics
+    // of mounted views for anchoring. Make sure not to flatten children if
+    // this is the case.
+    const preserveChildren =
+      this.props.maintainVisibleContentPosition != null ||
+      (Platform.OS === 'android' && this.props.snapToAlignment != null);
+
     const contentContainer = (
       <NativeDirectionalScrollContentView
         {...contentSizeChangeProps}
@@ -1714,7 +1787,8 @@ class ScrollView extends React.Component<Props, State> {
             ? false
             : this.props.removeClippedSubviews
         }
-        collapsable={false}>
+        collapsable={false}
+        collapsableChildren={!preserveChildren}>
         {children}
       </NativeDirectionalScrollContentView>
     );
@@ -1733,8 +1807,11 @@ class ScrollView extends React.Component<Props, State> {
       this.props.horizontal === true
         ? styles.baseHorizontal
         : styles.baseVertical;
+
+    const {experimental_endDraggingSensitivityMultiplier, ...otherProps} =
+      this.props;
     const props = {
-      ...this.props,
+      ...otherProps,
       alwaysBounceHorizontal,
       alwaysBounceVertical,
       style: StyleSheet.compose(baseStyle, this.props.style),
@@ -1759,6 +1836,9 @@ class ScrollView extends React.Component<Props, State> {
       onTouchStart: this._handleTouchStart,
       onTouchCancel: this._handleTouchCancel,
       onScroll: this._handleScroll,
+      endDraggingSensitivityMultiplier:
+        experimental_endDraggingSensitivityMultiplier,
+      enableSyncOnScroll: this.state.onScrollEmitter ? true : undefined,
       scrollEventThrottle: hasStickyHeaders
         ? 1
         : this.props.scrollEventThrottle,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -45,7 +45,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../../Utilities/differ/pointsDiffer'),
           },
           decelerationRate: true,
+          enableSyncOnScroll: true, // Fabric only.
           disableIntervalMomentum: true,
+          maintainVisibleContentPosition: true,
           pagingEnabled: true,
           scrollEnabled: true,
           showsVerticalScrollIndicator: true,
@@ -59,6 +61,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           sendMomentumEvents: true,
           borderRadius: true,
           nestedScrollEnabled: true,
+          scrollEventThrottle: true,
           borderStyle: true,
           borderRightColor: {
             process: require('../../StyleSheet/processColor').default,
@@ -70,6 +73,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
+          horizontal: true,
           endFillColor: {
             process: require('../../StyleSheet/processColor').default,
           },
@@ -130,6 +134,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           },
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
+          endDraggingSensitivityMultiplier: true,
+          enableSyncOnScroll: true, // Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -267,7 +267,16 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
 
   const child = React.Children.only<$FlowFixMe>(props.children);
 
+  const passthroughAnimatedPropExplicitValues =
+    isFabric && translateY != null
+      ? {
+          style: {transform: [{translateY: translateY}]},
+        }
+      : null;
+
   return (
+    /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly
+       included in the Animated.View flow type. */
     <Animated.View
       collapsable={false}
       nativeID={props.nativeID}
@@ -277,7 +286,10 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
         child.props.style,
         styles.header,
         {transform: [{translateY: animatedTranslateY}]},
-      ]}>
+      ]}
+      passthroughAnimatedPropExplicitValues={
+        passthroughAnimatedPropExplicitValues
+      }>
       {React.cloneElement(child, {
         style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout

package/Libraries/Components/StatusBar/StatusBar.js

@@ -163,29 +163,9 @@ function createStackEntry(props: any): any {
 /**
  * Component to control the app status bar.
  *
- * ### Usage with Navigator
- *
  * It is possible to have multiple `StatusBar` components mounted at the same
  * time. The props will be merged in the order the `StatusBar` components were
- * mounted. One use case is to specify status bar styles per route using `Navigator`.
- *
- * ```
- *  <View>
- *    <StatusBar
- *      backgroundColor="blue"
- *      barStyle="light-content"
- *    />
- *    <Navigator
- *      initialRoute={{statusBarHidden: true}}
- *      renderScene={(route, navigator) =>
- *        <View>
- *          <StatusBar hidden={route.statusBarHidden} />
- *          ...
- *        </View>
- *      }
- *    />
- *  </View>
- * ```
+ * mounted.
  *
  * ### Imperative API
  *

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -385,15 +385,6 @@ export type NativeProps = $ReadOnly<{|
     |}>,
   >,
 
-  onTextInput?: ?BubblingEventHandler<
-    $ReadOnly<{|
-      target: Int32,
-      text: string,
-      previousText: string,
-      range: $ReadOnly<{|start: Double, end: Double|}>,
-    |}>,
-  >,
-
   /**
    * Callback that is called when text input ends.
    */
@@ -662,12 +653,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
         captured: 'onSubmitEditingCapture',
       },
     },
-    topTextInput: {
-      phasedRegistrationNames: {
-        bubbled: 'onTextInput',
-        captured: 'onTextInputCapture',
-      },
-    },
   },
   directEventTypes: {
     topScroll: {

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -8,11 +8,13 @@
  * @format
  */
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import StyleSheet, {
   type ColorValue,
   type ViewStyleProp,
 } from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
+import useWindowDimensions from '../../Utilities/useWindowDimensions';
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 import * as React from 'react';
 
@@ -86,6 +88,8 @@ type Props = $ReadOnly<{|
 |}>;
 
 const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+  const {width} = useWindowDimensions();
+
   if (Platform.OS === 'ios') {
     if (React.Children.count(props.children) === 0) {
       return null;
@@ -96,7 +100,9 @@ const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
         style={[props.style, styles.container]}
         nativeID={props.nativeID}
         backgroundColor={props.backgroundColor}>
-        {props.children}
+        <SafeAreaView style={[styles.safeAreaView, {width}]}>
+          {props.children}
+        </SafeAreaView>
       </RCTInputAccessoryViewNativeComponent>
     );
   } else {
@@ -109,6 +115,9 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute',
   },
+  safeAreaView: {
+    flex: 1,
+  },
 });
 
 export default InputAccessoryView;

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -76,21 +76,12 @@ const RCTTextInputViewConfig = {
     },
   },
   directEventTypes: {
-    topTextInput: {
-      registrationName: 'onTextInput',
-    },
-    topKeyPressSync: {
-      registrationName: 'onKeyPressSync',
-    },
     topScroll: {
       registrationName: 'onScroll',
     },
     topSelectionChange: {
       registrationName: 'onSelectionChange',
     },
-    topChangeSync: {
-      registrationName: 'onChangeSync',
-    },
     topContentSizeChange: {
       registrationName: 'onContentSizeChange',
     },
@@ -159,9 +150,6 @@ const RCTTextInputViewConfig = {
       onSelectionChange: true,
       onContentSizeChange: true,
       onScroll: true,
-      onChangeSync: true,
-      onKeyPressSync: true,
-      onTextInput: true,
     }),
   },
 };

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -485,15 +485,6 @@ export interface TextInputSubmitEditingEventData {
   text: string;
 }
 
-/**
- * @see TextInputProps.onTextInput
- */
-export interface TextInputTextInputEventData {
-  text: string;
-  previousText: string;
-  range: {start: number; end: number};
-}
-
 /**
  * @see https://reactnative.dev/docs/textinput#props
  */
@@ -787,16 +778,6 @@ export interface TextInputProps
     | ((e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void)
     | undefined;
 
-  /**
-   * Callback that is called on new text input with the argument
-   *  `{ nativeEvent: { text, previousText, range: { start, end } } }`.
-   *
-   * This prop requires multiline={true} to be set.
-   */
-  onTextInput?:
-    | ((e: NativeSyntheticEvent<TextInputTextInputEventData>) => void)
-    | undefined;
-
   /**
    * Invoked on content scroll with
    *  `{ nativeEvent: { contentOffset: { x, y } } }`.

package/Libraries/Components/TextInput/TextInput.js

@@ -741,33 +741,12 @@ export type Props = $ReadOnly<{|
    */
   onChange?: ?(e: ChangeEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   *
-   * @platform ios
-   */
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
-
   /**
    * Callback that is called when the text input's text changes.
    * Changed text is passed as an argument to the callback handler.
    */
   onChangeText?: ?(text: string) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   * Changed text is passed as an argument to the callback handler.
-   *
-   * @platform ios
-   */
-  unstable_onChangeTextSync?: ?(text: string) => mixed,
-
   /**
    * Callback that is called when the text input's content size changes.
    * This will be called with
@@ -796,21 +775,6 @@ export type Props = $ReadOnly<{|
    */
   onKeyPress?: ?(e: KeyPressEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   *
-   * Callback that is called when a key is pressed.
-   * This will be called with `{ nativeEvent: { key: keyValue } }`
-   * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
-   * the typed-in character otherwise including `' '` for space.
-   * Fires before `onChange` callbacks.
-   *
-   * @platform ios
-   */
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
-
   /**
    * Called when a single tap gesture is detected.
    */
@@ -1160,8 +1124,8 @@ function InternalTextInput(props: Props): React.Node {
     typeof props.value === 'string'
       ? props.value
       : typeof props.defaultValue === 'string'
-      ? props.defaultValue
-      : '';
+        ? props.defaultValue
+        : '';
 
   // This is necessary in case native updates the text and JS decides
   // that the update should be ignored and we should stick with the value
@@ -1310,26 +1274,6 @@ function InternalTextInput(props: Props): React.Node {
     setMostRecentEventCount(event.nativeEvent.eventCount);
   };
 
-  const _onChangeSync = (event: ChangeEvent) => {
-    const currentText = event.nativeEvent.text;
-    props.unstable_onChangeSync && props.unstable_onChangeSync(event);
-    props.unstable_onChangeTextSync &&
-      props.unstable_onChangeTextSync(currentText);
-
-    if (inputRef.current == null) {
-      // calling `props.onChange` or `props.onChangeText`
-      // may clean up the input itself. Exits here.
-      return;
-    }
-
-    setLastNativeText(currentText);
-    // This must happen last, after we call setLastNativeText.
-    // Different ordering can cause bugs when editing AndroidTextInputs
-    // with multiple Fragments.
-    // We must update this so that controlled input updates work.
-    setMostRecentEventCount(event.nativeEvent.eventCount);
-  };
-
   const _onSelectionChange = (event: SelectionChangeEvent) => {
     props.onSelectionChange && props.onSelectionChange(event);
 
@@ -1459,6 +1403,12 @@ function InternalTextInput(props: Props): React.Node {
 
   const style = flattenStyle<TextStyleProp>(props.style);
 
+  if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
@@ -1472,10 +1422,6 @@ function InternalTextInput(props: Props): React.Node {
           style.paddingVertical == null &&
           style.paddingTop == null));
 
-    const useOnChangeSync =
-      (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
-      !(props.onChange || props.onChangeText);
-
     textInput = (
       <RCTTextInputView
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
@@ -1491,9 +1437,7 @@ function InternalTextInput(props: Props): React.Node {
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
-        onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
-        onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
         onScroll={_onScroll}
@@ -1739,12 +1683,12 @@ const ExportedForwardRef: React.AbstractComponent<
         textContentType != null
           ? textContentType
           : Platform.OS === 'ios' &&
-            autoComplete &&
-            autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
-            autoCompleteWebToTextContentTypeMap[autoComplete]
-          : textContentType
+              autoComplete &&
+              autoComplete in autoCompleteWebToTextContentTypeMap
+            ? // $FlowFixMe[invalid-computed-prop]
+              // $FlowFixMe[prop-missing]
+              autoCompleteWebToTextContentTypeMap[autoComplete]
+            : textContentType
       }
       {...restProps}
       forwardedRef={forwardedRef}