@office-iss/react-native-win32 0.72.7 → 0.73.0-preview.1

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -11,7 +11,7 @@
 import type {LayoutEvent} from '../../Types/CoreEventTypes';
 
 import Animated from '../../Animated/Animated';
-import {isPublicInstance as isFabricPublicInstance} from '../../Renderer/public/ReactFabricPublicInstanceUtils';
+import {isPublicInstance as isFabricPublicInstance} from '../../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -58,17 +58,16 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     useState<?number>(_nextHeaderLayoutY);
   const [isFabric, setIsFabric] = useState<boolean>(false);
 
-  const callbackRef = (ref: Instance | null): void => {
+  const callbackRef = useCallback((ref: Instance | null): void => {
     if (ref == null) {
       return;
     }
-    ref.setNextHeaderY = value => {
-      setNextHeaderLayoutY(value);
-    };
+    ref.setNextHeaderY = setNextHeaderLayoutY;
     setIsFabric(isFabricPublicInstance(ref));
-  };
+  }, []);
   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);
 
   const offset = useMemo(
@@ -108,12 +107,12 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
     },
   );
 
-  const _haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const _timer = useRef<?TimeoutID>(null);
+  const haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
+  const translateYDebounceTimer = useRef<?TimeoutID>(null);
 
   useEffect(() => {
     if (translateY !== 0 && translateY != null) {
-      _haveReceivedInitialZeroTranslateY.current = false;
+      haveReceivedInitialZeroTranslateY.current = false;
     }
   }, [translateY]);
 
@@ -131,26 +130,22 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
   //    your finger, the hit-detection moves from the Android
   //    platform to JS, so we need the ShadowTree to have knowledge
   //    of the current position.
-  const animatedValueListener = useCallback(
-    ({value}: $FlowFixMe) => {
-      const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
-      // When the AnimatedInterpolation is recreated, it always initializes
-      // to a value of zero and emits a value change of 0 to its listeners.
-      if (value === 0 && !_haveReceivedInitialZeroTranslateY.current) {
-        _haveReceivedInitialZeroTranslateY.current = true;
-        return;
-      }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
-      }
-      _timer.current = setTimeout(() => {
-        if (value !== translateY) {
-          setTranslateY(value);
-        }
-      }, _debounceTimeout);
-    },
-    [translateY],
-  );
+  const animatedValueListener = useCallback(({value}: $FlowFixMe) => {
+    const debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
+    // When the AnimatedInterpolation is recreated, it always initializes
+    // to a value of zero and emits a value change of 0 to its listeners.
+    if (value === 0 && !haveReceivedInitialZeroTranslateY.current) {
+      haveReceivedInitialZeroTranslateY.current = true;
+      return;
+    }
+    if (translateYDebounceTimer.current != null) {
+      clearTimeout(translateYDebounceTimer.current);
+    }
+    translateYDebounceTimer.current = setTimeout(
+      () => setTranslateY(value),
+      debounceTimeout,
+    );
+  }, []);
 
   useEffect(() => {
     const inputRange: Array<number> = [-1, 0];
@@ -242,11 +237,22 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
       if (animatedListenerId) {
         newAnimatedTranslateY.removeListener(animatedListenerId);
       }
-      if (_timer.current != null) {
-        clearTimeout(_timer.current);
+      if (translateYDebounceTimer.current != null) {
+        clearTimeout(translateYDebounceTimer.current);
       }
     };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+  }, [
+    nextHeaderLayoutY,
+    measured,
+    layoutHeight,
+    layoutY,
+    scrollViewHeight,
+    scrollAnimatedValue,
+    inverted,
+    offset,
+    animatedValueListener,
+    isFabric,
+  ]);
 
   const _onLayout = (event: LayoutEvent) => {
     setLayoutY(event.nativeEvent.layout.y);
@@ -262,17 +268,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
 
   const child = React.Children.only<$FlowFixMe>(props.children);
 
-  // TODO T68319535: remove this if NativeAnimated is rewritten for Fabric
-  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}
@@ -282,10 +278,7 @@ 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/Switch/Switch.js

@@ -155,6 +155,7 @@ 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/Text/TextWin32.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { ITextWin32Props } from './TextWin32.Props';
 export declare class TextWin32 extends React.Component<ITextWin32Props, {}> {
     constructor(props: ITextWin32Props);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -156,6 +156,7 @@ const RCTTextInputViewConfig = {
     showSoftInputOnFocus: true,
     autoFocus: true,
     lineBreakStrategyIOS: true,
+    smartInsertDelete: true,
     ...ConditionallyIgnoredEventHandlers({
       onChange: true,
       onSelectionChange: true,

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

@@ -205,13 +205,6 @@ export interface TextInputIOSProps {
    * Give the keyboard and the system information about the expected
    * semantic meaning for the content that users enter.
    *
-   * For iOS 11+ you can set `textContentType` to `username` or `password` to
-   * enable autofill of login details from the device keychain.
-   *
-   * For iOS 12+ `newPassword` can be used to indicate a new password input the
-   * user may want to save in the keychain, and `oneTimeCode` can be used to indicate
-   * that a field can be autofilled by a code arriving in an SMS.
-   *
    * To disable autofill, set textContentType to `none`.
    *
    * Possible values for `textContentType` are:
@@ -223,6 +216,15 @@ export interface TextInputIOSProps {
    *  - `'addressState'`
    *  - `'countryName'`
    *  - `'creditCardNumber'`
+   *  - `'creditCardExpiration'` (iOS 17+)
+   *  - `'creditCardExpirationMonth'` (iOS 17+)
+   *  - `'creditCardExpirationYear'` (iOS 17+)
+   *  - `'creditCardSecurityCode'` (iOS 17+)
+   *  - `'creditCardType'` (iOS 17+)
+   *  - `'creditCardName'` (iOS 17+)
+   *  - `'creditCardGivenName'` (iOS 17+)
+   *  - `'creditCardMiddleName'` (iOS 17+)
+   *  - `'creditCardFamilyName'` (iOS 17+)
    *  - `'emailAddress'`
    *  - `'familyName'`
    *  - `'fullStreetAddress'`
@@ -244,6 +246,10 @@ export interface TextInputIOSProps {
    *  - `'password'`
    *  - `'newPassword'`
    *  - `'oneTimeCode'`
+   *  - `'birthdate'` (iOS 17+)
+   *  - `'birthdateDay'` (iOS 17+)
+   *  - `'birthdateMonth'` (iOS 17+)
+   *  - `'birthdateYear'` (iOS 17+)
    *
    */
   textContentType?:
@@ -254,6 +260,15 @@ export interface TextInputIOSProps {
     | 'addressState'
     | 'countryName'
     | 'creditCardNumber'
+    | 'creditCardExpiration'
+    | 'creditCardExpirationMonth'
+    | 'creditCardExpirationYear'
+    | 'creditCardSecurityCode'
+    | 'creditCardType'
+    | 'creditCardName'
+    | 'creditCardGivenName'
+    | 'creditCardMiddleName'
+    | 'creditCardFamilyName'
     | 'emailAddress'
     | 'familyName'
     | 'fullStreetAddress'
@@ -275,6 +290,10 @@ export interface TextInputIOSProps {
     | 'password'
     | 'newPassword'
     | 'oneTimeCode'
+    | 'birthdate'
+    | 'birthdateDay'
+    | 'birthdateMonth'
+    | 'birthdateYear'
     | undefined;
 
   /**
@@ -291,6 +310,14 @@ export interface TextInputIOSProps {
     | 'hangul-word'
     | 'push-out'
     | undefined;
+
+  /**
+   * If `false`, the iOS system will not insert an extra space after a paste operation
+   * neither delete one or two spaces after a cut or delete operation.
+   *
+   * The default value is `true`.
+   */
+  smartInsertDelete?: boolean | undefined;
 }
 
 /**
@@ -561,6 +588,11 @@ export interface TextInputProps
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-middle-name'
+    | 'cc-family-name'
+    | 'cc-type'
     | 'country'
     | 'current-password'
     | 'email'
@@ -782,6 +814,11 @@ export interface TextInputProps
    */
   placeholderTextColor?: ColorValue | undefined;
 
+  /**
+   * If `true`, text is not editable. The default value is `false`.
+   */
+  readOnly?: boolean | undefined;
+
   /**
    * enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
    * Determines how the return key should look.
@@ -912,4 +949,9 @@ export class TextInput extends TextInputBase {
    * Removes all text from the input.
    */
   clear: () => void;
+
+  /**
+   * Sets the start and end positions of text selection.
+   */
+  setSelection: (start: number, end: number) => void;
 }

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -162,6 +162,15 @@ export type TextContentType =
   | 'addressState'
   | 'countryName'
   | 'creditCardNumber'
+  | 'creditCardExpiration'
+  | 'creditCardExpirationMonth'
+  | 'creditCardExpirationYear'
+  | 'creditCardSecurityCode'
+  | 'creditCardType'
+  | 'creditCardName'
+  | 'creditCardGivenName'
+  | 'creditCardMiddleName'
+  | 'creditCardFamilyName'
   | 'emailAddress'
   | 'familyName'
   | 'fullStreetAddress'
@@ -182,7 +191,11 @@ export type TextContentType =
   | 'username'
   | 'password'
   | 'newPassword'
-  | 'oneTimeCode';
+  | 'oneTimeCode'
+  | 'birthdate'
+  | 'birthdateDay'
+  | 'birthdateMonth'
+  | 'birthdateYear';
 
 export type enterKeyHintType =
   | 'enter'
@@ -295,6 +308,16 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
+
+  /**
+   * If `false`, the iOS system will not insert an extra space after a paste operation
+   * neither delete one or two spaces after a cut or delete operation.
+   *
+   * The default value is `true`.
+   *
+   * @platform ios
+   */
+  smartInsertDelete?: ?boolean,
 |}>;
 
 type AndroidProps = $ReadOnly<{|
@@ -408,7 +431,16 @@ export type Props = $ReadOnly<{|
    * - `additional-name`
    * - `address-line1`
    * - `address-line2`
+   * - `birthdate-day` (iOS 17+)
+   * - `birthdate-full` (iOS 17+)
+   * - `birthdate-month` (iOS 17+)
+   * - `birthdate-year` (iOS 17+)
    * - `cc-number`
+   * - `cc-csc` (iOS 17+)
+   * - `cc-exp` (iOS 17+)
+   * - `cc-exp-day` (iOS 17+)
+   * - `cc-exp-month` (iOS 17+)
+   * - `cc-exp-year` (iOS 17+)
    * - `country`
    * - `current-password`
    * - `email`
@@ -427,6 +459,11 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on iOS only:
    *
+   * - `cc-name` (iOS 17+)
+   * - `cc-given-name` (iOS 17+)
+   * - `cc-middle-name` (iOS 17+)
+   * - `cc-family-name` (iOS 17+)
+   * - `cc-type` (iOS 17+)
    * - `nickname`
    * - `organization`
    * - `organization-title`
@@ -434,15 +471,6 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on Android only:
    *
-   * - `birthdate-day`
-   * - `birthdate-full`
-   * - `birthdate-month`
-   * - `birthdate-year`
-   * - `cc-csc`
-   * - `cc-exp`
-   * - `cc-exp-day`
-   * - `cc-exp-month`
-   * - `cc-exp-year`
    * - `gender`
    * - `name-family`
    * - `name-given`
@@ -478,6 +506,11 @@ export type Props = $ReadOnly<{|
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-middle-name'
+    | 'cc-family-name'
+    | 'cc-type'
     | 'country'
     | 'current-password'
     | 'email'

package/Libraries/Components/TextInput/TextInput.js

@@ -200,6 +200,15 @@ export type TextContentType =
   | 'addressState'
   | 'countryName'
   | 'creditCardNumber'
+  | 'creditCardExpiration'
+  | 'creditCardExpirationMonth'
+  | 'creditCardExpirationYear'
+  | 'creditCardSecurityCode'
+  | 'creditCardType'
+  | 'creditCardName'
+  | 'creditCardGivenName'
+  | 'creditCardMiddleName'
+  | 'creditCardFamilyName'
   | 'emailAddress'
   | 'familyName'
   | 'fullStreetAddress'
@@ -220,7 +229,11 @@ export type TextContentType =
   | 'username'
   | 'password'
   | 'newPassword'
-  | 'oneTimeCode';
+  | 'oneTimeCode'
+  | 'birthdate'
+  | 'birthdateDay'
+  | 'birthdateMonth'
+  | 'birthdateYear';
 
 export type enterKeyHintType =
   // Cross Platform
@@ -339,6 +352,16 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
+
+  /**
+   * If `false`, the iOS system will not insert an extra space after a paste operation
+   * neither delete one or two spaces after a cut or delete operation.
+   *
+   * The default value is `true`.
+   *
+   * @platform ios
+   */
+  smartInsertDelete?: ?boolean,
 |}>;
 
 type AndroidProps = $ReadOnly<{|
@@ -452,7 +475,16 @@ export type Props = $ReadOnly<{|
    * - `additional-name`
    * - `address-line1`
    * - `address-line2`
+   * - `birthdate-day` (iOS 17+)
+   * - `birthdate-full` (iOS 17+)
+   * - `birthdate-month` (iOS 17+)
+   * - `birthdate-year` (iOS 17+)
    * - `cc-number`
+   * - `cc-csc` (iOS 17+)
+   * - `cc-exp` (iOS 17+)
+   * - `cc-exp-day` (iOS 17+)
+   * - `cc-exp-month` (iOS 17+)
+   * - `cc-exp-year` (iOS 17+)
    * - `country`
    * - `current-password`
    * - `email`
@@ -471,6 +503,11 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on iOS only:
    *
+   * - `cc-name` (iOS 17+)
+   * - `cc-given-name` (iOS 17+)
+   * - `cc-middle-name` (iOS 17+)
+   * - `cc-family-name` (iOS 17+)
+   * - `cc-type` (iOS 17+)
    * - `nickname`
    * - `organization`
    * - `organization-title`
@@ -478,15 +515,6 @@ export type Props = $ReadOnly<{|
    *
    * The following values work on Android only:
    *
-   * - `birthdate-day`
-   * - `birthdate-full`
-   * - `birthdate-month`
-   * - `birthdate-year`
-   * - `cc-csc`
-   * - `cc-exp`
-   * - `cc-exp-day`
-   * - `cc-exp-month`
-   * - `cc-exp-year`
    * - `gender`
    * - `name-family`
    * - `name-given`
@@ -522,6 +550,11 @@ export type Props = $ReadOnly<{|
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-middle-name'
+    | 'cc-family-name'
+    | 'cc-type'
     | 'country'
     | 'current-password'
     | 'email'
@@ -1564,7 +1597,20 @@ const autoCompleteWebToAutoCompleteAndroidMap = {
 const autoCompleteWebToTextContentTypeMap = {
   'address-line1': 'streetAddressLine1',
   'address-line2': 'streetAddressLine2',
+  bday: 'birthdate',
+  'bday-day': 'birthdateDay',
+  'bday-month': 'birthdateMonth',
+  'bday-year': 'birthdateYear',
+  'cc-csc': 'creditCardSecurityCode',
+  'cc-exp-month': 'creditCardExpirationMonth',
+  'cc-exp-year': 'creditCardExpirationYear',
+  'cc-exp': 'creditCardExpiration',
+  'cc-given-name': 'creditCardGivenName',
+  'cc-additional-name': 'creditCardMiddleName',
+  'cc-family-name': 'creditCardFamilyName',
+  'cc-name': 'creditCardName',
   'cc-number': 'creditCardNumber',
+  'cc-type': 'creditCardType',
   'current-password': 'password',
   country: 'countryName',
   email: 'emailAddress',
@@ -1590,6 +1636,7 @@ const autoCompleteWebToTextContentTypeMap = {
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   TextInputInstance,
+  // $FlowFixMe[incompatible-call]
 > = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
@@ -1612,8 +1659,13 @@ const ExportedForwardRef: React.AbstractComponent<
   let style = flattenStyle(restProps.style);
 
   if (style?.verticalAlign != null) {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     style.textAlignVertical =
+      // $FlowFixMe[invalid-computed-prop]
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
     delete style.verticalAlign;
   }