react-native-windows 0.67.0 → 0.68.0-preview.3

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,7 +25,6 @@ import type {
 } from '../../StyleSheet/StyleSheet';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
-import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 
 export type KeyboardType =
@@ -73,42 +72,90 @@ export type NativeProps = $ReadOnly<{|
    * Android props after this
    */
   /**
-   * Determines which content to suggest on auto complete, e.g.`username`.
-   * To disable auto complete, use `off`.
+   * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content.
+   * To disable autocomplete, set `autoComplete` to `off`.
    *
    * *Android Only*
    *
-   * The following values work on Android only:
+   * Possible values for `autoComplete` are:
    *
-   * - `username`
-   * - `password`
-   * - `email`
-   * - `name`
-   * - `tel`
-   * - `street-address`
-   * - `postal-code`
-   * - `cc-number`
+   * - `birthdate-day`
+   * - `birthdate-full`
+   * - `birthdate-month`
+   * - `birthdate-year`
    * - `cc-csc`
    * - `cc-exp`
+   * - `cc-exp-day`
    * - `cc-exp-month`
    * - `cc-exp-year`
+   * - `cc-number`
+   * - `email`
+   * - `gender`
+   * - `name`
+   * - `name-family`
+   * - `name-given`
+   * - `name-middle`
+   * - `name-middle-initial`
+   * - `name-prefix`
+   * - `name-suffix`
+   * - `password`
+   * - `password-new`
+   * - `postal-address`
+   * - `postal-address-country`
+   * - `postal-address-extended`
+   * - `postal-address-extended-postal-code`
+   * - `postal-address-locality`
+   * - `postal-address-region`
+   * - `postal-code`
+   * - `street-address`
+   * - `sms-otp`
+   * - `tel`
+   * - `tel-country-code`
+   * - `tel-national`
+   * - `tel-device`
+   * - `username`
+   * - `username-new`
    * - `off`
    *
    * @platform android
    */
   autoComplete?: WithDefault<
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off',
     'off',
   >,
@@ -548,7 +595,121 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 
 let AndroidTextInputNativeComponent = NativeComponentRegistry.get<NativeProps>(
   'AndroidTextInput',
-  () => AndroidTextInputViewConfig,
+  () => ({
+    uiViewClassName: 'AndroidTextInput',
+    bubblingEventTypes: {
+      topBlur: {
+        phasedRegistrationNames: {
+          bubbled: 'onBlur',
+          captured: 'onBlurCapture',
+        },
+      },
+      topEndEditing: {
+        phasedRegistrationNames: {
+          bubbled: 'onEndEditing',
+          captured: 'onEndEditingCapture',
+        },
+      },
+      topFocus: {
+        phasedRegistrationNames: {
+          bubbled: 'onFocus',
+          captured: 'onFocusCapture',
+        },
+      },
+      topKeyPress: {
+        phasedRegistrationNames: {
+          bubbled: 'onKeyPress',
+          captured: 'onKeyPressCapture',
+        },
+      },
+      topSubmitEditing: {
+        phasedRegistrationNames: {
+          bubbled: 'onSubmitEditing',
+          captured: 'onSubmitEditingCapture',
+        },
+      },
+      topTextInput: {
+        phasedRegistrationNames: {
+          bubbled: 'onTextInput',
+          captured: 'onTextInputCapture',
+        },
+      },
+    },
+    directEventTypes: {
+      topScroll: {
+        registrationName: 'onScroll',
+      },
+    },
+    validAttributes: {
+      maxFontSizeMultiplier: true,
+      adjustsFontSizeToFit: true,
+      minimumFontScale: true,
+      autoFocus: true,
+      placeholder: true,
+      inlineImagePadding: true,
+      contextMenuHidden: true,
+      textShadowColor: {process: require('../../StyleSheet/processColor')},
+      maxLength: true,
+      selectTextOnFocus: true,
+      textShadowRadius: true,
+      underlineColorAndroid: {
+        process: require('../../StyleSheet/processColor'),
+      },
+      textDecorationLine: true,
+      blurOnSubmit: true,
+      textAlignVertical: true,
+      fontStyle: true,
+      textShadowOffset: true,
+      selectionColor: {process: require('../../StyleSheet/processColor')},
+      selection: true,
+      placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+      importantForAutofill: true,
+      lineHeight: true,
+      textTransform: true,
+      returnKeyType: true,
+      keyboardType: true,
+      multiline: true,
+      color: {process: require('../../StyleSheet/processColor')},
+      autoComplete: true,
+      numberOfLines: true,
+      letterSpacing: true,
+      returnKeyLabel: true,
+      fontSize: true,
+      onKeyPress: true,
+      cursorColor: {process: require('../../StyleSheet/processColor')},
+      text: true,
+      showSoftInputOnFocus: true,
+      textAlign: true,
+      autoCapitalize: true,
+      autoCorrect: true,
+      caretHidden: true,
+      secureTextEntry: true,
+      textBreakStrategy: true,
+      onScroll: true,
+      onContentSizeChange: true,
+      disableFullscreenUI: true,
+      includeFontPadding: true,
+      fontWeight: true,
+      fontFamily: true,
+      allowFontScaling: true,
+      onSelectionChange: true,
+      mostRecentEventCount: true,
+      inlineImageLeft: true,
+      editable: true,
+      fontVariant: true,
+      borderBottomRightRadius: true,
+      borderBottomColor: {process: require('../../StyleSheet/processColor')},
+      borderRadius: true,
+      borderRightColor: {process: require('../../StyleSheet/processColor')},
+      borderColor: {process: require('../../StyleSheet/processColor')},
+      borderTopRightRadius: true,
+      borderStyle: true,
+      borderBottomLeftRadius: true,
+      borderLeftColor: {process: require('../../StyleSheet/processColor')},
+      borderTopLeftRadius: true,
+      borderTopColor: {process: require('../../StyleSheet/processColor')},
+    },
+  }),
 );
 
 // flowlint-next-line unclear-type:off

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/TextInput/RCTMultilineTextInputNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,10 +22,15 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
 });
 
-const MultilineTextInputNativeComponent: HostComponent<mixed> = NativeComponentRegistry.get<mixed>(
-  'RCTMultilineTextInputView',
-  () => RCTTextInputViewConfig,
-);
+const MultilineTextInputNativeComponent: HostComponent<mixed> =
+  NativeComponentRegistry.get<mixed>('RCTMultilineTextInputView', () => ({
+    uiViewClassName: 'RCTMultilineTextInputView',
+    ...RCTTextInputViewConfig,
+    validAttributes: {
+      ...RCTTextInputViewConfig.validAttributes,
+      dataDetectorTypes: true,
+    },
+  }));
 
 // flowlint-next-line unclear-type:off
 export default ((MultilineTextInputNativeComponent: any): HostComponent<mixed>);

package/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,10 +22,11 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
 });
 
-const SinglelineTextInputNativeComponent: HostComponent<mixed> = NativeComponentRegistry.get<mixed>(
-  'RCTSinglelineTextInputView',
-  () => RCTTextInputViewConfig,
-);
+const SinglelineTextInputNativeComponent: HostComponent<mixed> =
+  NativeComponentRegistry.get<mixed>('RCTSinglelineTextInputView', () => ({
+    uiViewClassName: 'RCTSinglelineTextInputView',
+    ...RCTTextInputViewConfig,
+  }));
 
 // flowlint-next-line unclear-type:off
 export default ((SinglelineTextInputNativeComponent: any): HostComponent<mixed>);

package/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,10 +9,13 @@
  */
 
 import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
-import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig';
+
+type PartialViewConfigWithoutName = $Rest<
+  PartialViewConfig,
+  {uiViewClassName: string},
+>;
 
 const RCTTextInputViewConfig = {
-  uiViewClassName: 'RCTSinglelineTextInputView',
   bubblingEventTypes: {
     topBlur: {
       phasedRegistrationNames: {
@@ -26,6 +29,12 @@ const RCTTextInputViewConfig = {
         captured: 'onChangeCapture',
       },
     },
+    topContentSizeChange: {
+      phasedRegistrationNames: {
+        captured: 'onContentSizeChangeCapture',
+        bubbled: 'onContentSizeChange',
+      },
+    },
     topEndEditing: {
       phasedRegistrationNames: {
         bubbled: 'onEndEditing',
@@ -70,9 +79,24 @@ const RCTTextInputViewConfig = {
       },
     },
   },
-  directEventTypes: {},
+  directEventTypes: {
+    topTextInput: {
+      registrationName: 'onTextInput',
+    },
+    topKeyPressSync: {
+      registrationName: 'onKeyPressSync',
+    },
+    topScroll: {
+      registrationName: 'onScroll',
+    },
+    topSelectionChange: {
+      registrationName: 'onSelectionChange',
+    },
+    topChangeSync: {
+      registrationName: 'onChangeSync',
+    },
+  },
   validAttributes: {
-    ...ReactNativeViewViewConfig.validAttributes,
     fontSize: true,
     fontWeight: true,
     fontVariant: true,
@@ -99,23 +123,18 @@ const RCTTextInputViewConfig = {
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
     placeholderTextColor: {process: require('../../StyleSheet/processColor')},
-    onSelectionChange: true,
     clearButtonMode: true,
-    onContentSizeChange: true,
     keyboardType: true,
     selection: true,
     returnKeyType: true,
     blurOnSubmit: true,
     mostRecentEventCount: true,
-    onChange: true,
     scrollEnabled: true,
     selectionColor: {process: require('../../StyleSheet/processColor')},
     contextMenuHidden: true,
     secureTextEntry: true,
-    onTextInput: true,
     placeholder: true,
     autoCorrect: true,
-    onScroll: true,
     multiline: true,
     textContentType: true,
     maxLength: true,
@@ -126,7 +145,9 @@ const RCTTextInputViewConfig = {
     selectTextOnFocus: true,
     text: true,
     clearTextOnFocus: true,
+    showSoftInputOnFocus: true,
+    autoFocus: true,
   },
 };
 
-module.exports = (RCTTextInputViewConfig: PartialViewConfig);
+module.exports = (RCTTextInputViewConfig: PartialViewConfigWithoutName);

package/Libraries/Components/TextInput/TextInput.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,8 +10,6 @@
 
 import * as React from 'react';
 
-import DeprecatedTextInputPropTypes from '../../DeprecatedPropTypes/DeprecatedTextInputPropTypes';
-
 import Platform from '../../Utilities/Platform';
 import StyleSheet, {
   type TextStyleProp,
@@ -34,7 +32,6 @@ import type {
   PressEvent,
 } from '../../Types/CoreEventTypes';
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {TextInputNativeCommands} from './TextInputNativeCommands';
 
 const {useLayoutEffect, useRef, useState} = React;
 
@@ -49,17 +46,17 @@ let RCTMultilineTextInputNativeCommands;
 
 if (Platform.OS === 'android') {
   AndroidTextInput = require('./AndroidTextInputNativeComponent').default;
-  AndroidTextInputCommands = require('./AndroidTextInputNativeComponent')
-    .Commands;
+  AndroidTextInputCommands =
+    require('./AndroidTextInputNativeComponent').Commands;
 } else if (Platform.OS === 'ios') {
-  RCTSinglelineTextInputView = require('./RCTSingelineTextInputNativeComponent')
-    .default;
-  RCTSinglelineTextInputNativeCommands = require('./RCTSingelineTextInputNativeComponent')
-    .Commands;
-  RCTMultilineTextInputView = require('./RCTMultilineTextInputNativeComponent')
-    .default;
-  RCTMultilineTextInputNativeCommands = require('./RCTMultilineTextInputNativeComponent')
-    .Commands;
+  RCTSinglelineTextInputView =
+    require('./RCTSingelineTextInputNativeComponent').default;
+  RCTSinglelineTextInputNativeCommands =
+    require('./RCTSingelineTextInputNativeComponent').Commands;
+  RCTMultilineTextInputView =
+    require('./RCTMultilineTextInputNativeComponent').default;
+  RCTMultilineTextInputNativeCommands =
+    require('./RCTMultilineTextInputNativeComponent').Commands;
 }
 
 export type ChangeEvent = SyntheticEvent<
@@ -308,25 +305,49 @@ type IOSProps = $ReadOnly<{|
 
 type AndroidProps = $ReadOnly<{|
   /**
-   * Determines which content to suggest on auto complete, e.g.`username`.
-   * To disable auto complete, use `off`.
+   * Specifies autocomplete hints for the system, so it can provide autofill. On Android, the system will always attempt to offer autofill by using heuristics to identify the type of content.
+   * To disable autocomplete, set `autoComplete` to `off`.
    *
    * *Android Only*
    *
-   * The following values work on Android only:
+   * Possible values for `autoComplete` are:
    *
-   * - `username`
-   * - `password`
-   * - `email`
-   * - `name`
-   * - `tel`
-   * - `street-address`
-   * - `postal-code`
-   * - `cc-number`
+   * - `birthdate-day`
+   * - `birthdate-full`
+   * - `birthdate-month`
+   * - `birthdate-year`
    * - `cc-csc`
    * - `cc-exp`
+   * - `cc-exp-day`
    * - `cc-exp-month`
    * - `cc-exp-year`
+   * - `cc-number`
+   * - `email`
+   * - `gender`
+   * - `name`
+   * - `name-family`
+   * - `name-given`
+   * - `name-middle`
+   * - `name-middle-initial`
+   * - `name-prefix`
+   * - `name-suffix`
+   * - `password`
+   * - `password-new`
+   * - `postal-address`
+   * - `postal-address-country`
+   * - `postal-address-extended`
+   * - `postal-address-extended-postal-code`
+   * - `postal-address-locality`
+   * - `postal-address-region`
+   * - `postal-code`
+   * - `street-address`
+   * - `sms-otp`
+   * - `tel`
+   * - `tel-country-code`
+   * - `tel-national`
+   * - `tel-device`
+   * - `username`
+   * - `username-new`
    * - `off`
    *
    * @platform android
@@ -577,12 +598,33 @@ 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
@@ -611,6 +653,21 @@ 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 touch is engaged.
    */
@@ -745,6 +802,7 @@ type ImperativeMethods = $ReadOnly<{|
   clear: () => void,
   isFocused: () => boolean,
   getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  setSelection: (start: number, end: number) => void,
 |}>;
 
 const emptyFunctionThatReturnsTrue = () => true;
@@ -988,6 +1046,18 @@ function InternalTextInput(props: Props): React.Node {
     }
   }
 
+  function setSelection(start: number, end: number): void {
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        null,
+        start,
+        end,
+      );
+    }
+  }
+
   // TODO: Fix this returning true on null === null, when no input is focused
   function isFocused(): boolean {
     return TextInputState.currentlyFocusedInput() === inputRef.current;
@@ -1028,14 +1098,15 @@ function InternalTextInput(props: Props): React.Node {
         ref.clear = clear;
         ref.isFocused = isFocused;
         ref.getNativeRef = getNativeRef;
+        ref.setSelection = setSelection;
       }
     },
   });
 
   const _onChange = (event: ChangeEvent) => {
-    const text = event.nativeEvent.text;
+    const currentText = event.nativeEvent.text;
     props.onChange && props.onChange(event);
-    props.onChangeText && props.onChangeText(text);
+    props.onChangeText && props.onChangeText(currentText);
 
     if (inputRef.current == null) {
       // calling `props.onChange` or `props.onChangeText`
@@ -1043,7 +1114,27 @@ function InternalTextInput(props: Props): React.Node {
       return;
     }
 
-    setLastNativeText(text);
+    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 _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.
@@ -1137,6 +1228,10 @@ function InternalTextInput(props: Props): React.Node {
         ? [styles.multilineInput, props.style]
         : props.style;
 
+    const useOnChangeSync =
+      (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
+      !(props.onChange || props.onChangeText);
+
     textInput = (
       <RCTTextInputView
         ref={_setNativeRef}
@@ -1149,7 +1244,9 @@ function InternalTextInput(props: Props): React.Node {
         focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
+        onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
+        onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
         onScroll={_onScroll}
@@ -1244,8 +1341,12 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
-// TODO: Deprecate this
-ExportedForwardRef.propTypes = DeprecatedTextInputPropTypes;
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+ExportedForwardRef.propTypes =
+  require('deprecated-react-native-prop-types').TextInputPropTypes;
 
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
@@ -1263,7 +1364,6 @@ type TextInputComponentStatics = $ReadOnly<{|
     focusTextInput: typeof TextInputState.focusTextInput,
     blurTextInput: typeof TextInputState.blurTextInput,
   |}>,
-  propTypes: typeof DeprecatedTextInputPropTypes,
 |}>;
 
 const styles = StyleSheet.create({