react-native-windows 0.72.13 → 0.73.0-preview.1

package/Libraries/Components/Switch/Switch.windows.js

@@ -0,0 +1,259 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @generate-docs
+ */
+
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import useMergeRefs from '../../Utilities/useMergeRefs';
+import AndroidSwitchNativeComponent, {
+  Commands as AndroidSwitchCommands,
+} from './AndroidSwitchNativeComponent';
+import SwitchNativeComponent, {
+  Commands as SwitchCommands,
+} from './SwitchNativeComponent';
+import * as React from 'react';
+
+type SwitchChangeEvent = SyntheticEvent<
+  $ReadOnly<{|
+    value: boolean,
+    target: number,
+  |}>,
+>;
+
+export type Props = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+    If true the user won't be able to toggle the switch.
+
+    @default false
+   */
+  disabled?: ?boolean,
+
+  /**
+    The value of the switch. If true the switch will be turned on.
+
+    @default false
+   */
+  value?: ?boolean,
+
+  /**
+    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.
+
+    _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).
+   */
+  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.
+   */
+  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`.
+   */
+  onValueChange?: ?(value: boolean) => Promise<void> | void,
+|}>;
+const returnsFalse = () => false;
+const returnsTrue = () => true;
+
+/**
+  Renders a boolean input.
+
+  This is a controlled component that requires an `onValueChange`
+  callback that updates the `value` prop in order for the component to
+  reflect user actions. If the `value` prop is not updated, the
+  component will continue to render the supplied `value` prop instead of
+  the expected result of any user actions.
+
+  ```SnackPlayer name=Switch
+  import React, { useState } from "react";
+  import { View, Switch, StyleSheet } from "react-native";
+
+  const App = () => {
+    const [isEnabled, setIsEnabled] = useState(false);
+    const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+    return (
+      <View style={styles.container}>
+        <Switch
+          trackColor={{ false: "#767577", true: "#81b0ff" }}
+          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
+          ios_backgroundColor="#3e3e3e"
+          onValueChange={toggleSwitch}
+          value={isEnabled}
+        />
+      </View>
+    );
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  });
+
+  export default App;
+  ```
+ */
+
+const SwitchWithForwardedRef: React.AbstractComponent<
+  Props,
+  React.ElementRef<
+    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+  >,
+> = React.forwardRef(function Switch(props, forwardedRef): React.Node {
+  const {
+    disabled,
+    focusable, // [Windows]
+    ios_backgroundColor,
+    onChange,
+    onValueChange,
+    style,
+    thumbColor,
+    trackColor,
+    value,
+    ...restProps
+  } = props;
+  const trackColorForFalse = trackColor?.false;
+  const trackColorForTrue = trackColor?.true;
+
+  const nativeSwitchRef = React.useRef<React.ElementRef<
+    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+  > | null>(null);
+
+  // $FlowFixMe[incompatible-call]
+  const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
+
+  const [native, setNative] = React.useState({value: (null: ?boolean)});
+
+  const handleChange = (event: SwitchChangeEvent) => {
+    // $FlowFixMe[unused-promise]
+    onChange?.(event);
+    // $FlowFixMe[unused-promise]
+    onValueChange?.(event.nativeEvent.value);
+    setNative({value: event.nativeEvent.value});
+  };
+
+  React.useLayoutEffect(() => {
+    // This is necessary in case native updates the switch and JS decides
+    // that the update should be ignored and we should stick with the value
+    // that we have in JS.
+    const jsValue = value === true;
+    const shouldUpdateNativeSwitch =
+      native.value != null && native.value !== jsValue;
+    if (
+      shouldUpdateNativeSwitch &&
+      nativeSwitchRef.current?.setNativeProps != null
+    ) {
+      if (Platform.OS === 'android') {
+        AndroidSwitchCommands.setNativeValue(nativeSwitchRef.current, jsValue);
+      } else {
+        SwitchCommands.setValue(nativeSwitchRef.current, jsValue);
+      }
+    }
+  }, [value, native]);
+
+  if (Platform.OS === 'android') {
+    const {accessibilityState} = restProps;
+    const _disabled =
+      disabled != null ? disabled : accessibilityState?.disabled;
+
+    const _accessibilityState =
+      _disabled !== accessibilityState?.disabled
+        ? {...accessibilityState, disabled: _disabled}
+        : accessibilityState;
+
+    const platformProps = {
+      accessibilityState: _accessibilityState,
+      enabled: _disabled !== true,
+      on: value === true,
+      style,
+      thumbTintColor: thumbColor,
+      trackColorForFalse: trackColorForFalse,
+      trackColorForTrue: trackColorForTrue,
+      trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
+    };
+
+    return (
+      <AndroidSwitchNativeComponent
+        {...restProps}
+        {...platformProps}
+        accessibilityRole={props.accessibilityRole ?? 'switch'}
+        onChange={handleChange}
+        onResponderTerminationRequest={returnsFalse}
+        onStartShouldSetResponder={returnsTrue}
+        ref={ref}
+      />
+    );
+  } else {
+    const platformProps = {
+      disabled,
+      onTintColor: trackColorForTrue,
+      style: StyleSheet.compose(
+        {height: 31, width: 51},
+        StyleSheet.compose(
+          style,
+          ios_backgroundColor == null
+            ? null
+            : {
+                backgroundColor: ios_backgroundColor,
+                borderRadius: 16,
+              },
+        ),
+      ),
+      thumbTintColor: thumbColor,
+      tintColor: trackColorForFalse,
+      value: value === true,
+    };
+
+    return (
+      <SwitchNativeComponent
+        {...restProps}
+        {...platformProps}
+        focusable={focusable === undefined ? true : focusable} // [Windows]
+        accessibilityRole={props.accessibilityRole ?? 'switch'}
+        onChange={handleChange}
+        onResponderTerminationRequest={returnsFalse}
+        onStartShouldSetResponder={returnsTrue}
+        ref={ref}
+      />
+    );
+  }
+});
+
+export default SwitchWithForwardedRef;

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;
   }