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

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -10,11 +10,13 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {
+  KeyEvent, // Windows
+  MouseEvent, // Windows
   PressEvent,
   ScrollEvent,
   SyntheticEvent,
 } from '../../Types/CoreEventTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
+import type {HandledKeyboardEvent, ViewProps} from '../View/ViewPropTypes';
 import type {TextInputType} from './TextInput.flow';
 
 import usePressability from '../../Pressability/usePressability';
@@ -50,7 +52,6 @@ let RCTMultilineTextInputView;
 let RCTMultilineTextInputNativeCommands;
 let WindowsTextInput; // [Windows]
 let WindowsTextInputCommands; // [Windows]
-import type {KeyEvent} from '../../Types/CoreEventTypes'; // [Windows]
 
 // [Windows
 if (Platform.OS === 'android') {
@@ -211,6 +212,15 @@ export type TextContentType =
   | 'addressState'
   | 'countryName'
   | 'creditCardNumber'
+  | 'creditCardExpiration'
+  | 'creditCardExpirationMonth'
+  | 'creditCardExpirationYear'
+  | 'creditCardSecurityCode'
+  | 'creditCardType'
+  | 'creditCardName'
+  | 'creditCardGivenName'
+  | 'creditCardMiddleName'
+  | 'creditCardFamilyName'
   | 'emailAddress'
   | 'familyName'
   | 'fullStreetAddress'
@@ -231,7 +241,11 @@ export type TextContentType =
   | 'username'
   | 'password'
   | 'newPassword'
-  | 'oneTimeCode';
+  | 'oneTimeCode'
+  | 'birthdate'
+  | 'birthdateDay'
+  | 'birthdateMonth'
+  | 'birthdateYear';
 
 export type enterKeyHintType =
   // Cross Platform
@@ -347,6 +361,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<{|
@@ -457,6 +481,39 @@ type WindowsProps = $ReadOnly<{|
    * @platform windows
    */
   submitKeyEvents?: ?$ReadOnlyArray<SubmitKeyEvent>,
+
+  /**
+   * Specifies the Tooltip for the view
+   */
+  tooltip?: string,
+
+  /**
+   * Indicates the TabIndex to use for this view
+   */
+  tabIndex?: number,
+
+  /**
+   * Specifies if the control should show System focus visuals
+   */
+  enableFocusRing?: boolean,
+
+  /**
+   * Event fired when the mouse leaves the view
+   */
+  onMouseLeave?: (args: MouseEvent) => void,
+
+  /**
+   * Event fired when the mouse enters the view
+   */
+  onMouseEnter?: (args: MouseEvent) => void,
+
+  onKeyDown?: (args: KeyEvent) => void,
+  onKeyDownCapture?: (args: KeyEvent) => void,
+  onKeyUp?: (args: KeyEvent) => void,
+  onKeyUpCapture?: (args: KeyEvent) => void,
+
+  keyDownEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
+  keyUpEvents?: ?$ReadOnlyArray<HandledKeyboardEvent>,
 |}>;
 
 // Windows]
@@ -495,7 +552,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`
@@ -514,6 +580,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`
@@ -521,15 +592,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`
@@ -565,6 +627,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'
@@ -629,7 +696,7 @@ export type Props = $ReadOnly<{|
    * On Android devices manufactured by Xiaomi with Android Q,
    * when keyboardType equals 'email-address'this will be set
    * in native to 'true' to prevent a system related crash. This
-   * will cause cursor to be diabled as a side-effect.
+   * will cause cursor to be disabled as a side-effect.
    *
    */
   caretHidden?: ?boolean,
@@ -1506,7 +1573,7 @@ function InternalTextInput(props: Props): React.Node {
 
   if (focusable && !accessible) {
     console.warn(
-      'All focusable views should report proper accessiblity information. TextInputs marked as focusable should always be accessible.',
+      'All focusable views should report proper accessibility information. TextInputs marked as focusable should always be accessible.',
     );
   }
 
@@ -1704,7 +1771,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',
@@ -1730,6 +1810,7 @@ const autoCompleteWebToTextContentTypeMap = {
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   TextInputInstance,
+  // $FlowFixMe[incompatible-call]
 > = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
@@ -1752,8 +1833,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;
   }
 

package/Libraries/Components/ToastAndroid/{ToastAndroid.ios.js → ToastAndroid.js}

@@ -5,12 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @noflow
+ * @flow strict-local
  */
 
 'use strict';
 
 const ToastAndroid = {
+  // Dummy fallback toast duration constants
+  SHORT: (0: number),
+  LONG: (0: number),
+  // Dummy fallback toast gravity constants
+  TOP: (0: number),
+  BOTTOM: (0: number),
+  CENTER: (0: number),
+
   show: function (message: string, duration: number): void {
     console.warn('ToastAndroid is not supported on this platform.');
   },

package/Libraries/Components/ToastAndroid/ToastAndroid.windows.js

@@ -5,12 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @noflow
+ * @flow strict-local
  */
 
 'use strict';
 
 const ToastAndroid = {
+  // Dummy fallback toast duration constants
+  SHORT: (0: number),
+  LONG: (0: number),
+  // Dummy fallback toast gravity constants
+  TOP: (0: number),
+  BOTTOM: (0: number),
+  CENTER: (0: number),
+
   show: function (message: string, duration: number): void {
     console.warn('ToastAndroid is not supported on this platform.');
   },

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -181,7 +181,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}
         focusable={

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -344,7 +344,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         focusable={
           this.props.focusable !== false && this.props.onPress !== undefined
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>

package/Libraries/Components/Touchable/TouchableHighlight.windows.js

@@ -352,7 +352,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         focusable={
           this.props.focusable !== false && this.props.onPress !== undefined
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}
         accessibilityPosInSet={this.props.accessibilityPosInSet} // [Windows]

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -322,7 +322,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props.focusable !== false &&
           this.props.onPress !== undefined &&
           !this.props.disabled,
-        nativeID: this.props.nativeID,
+        nativeID: this.props.id ?? this.props.nativeID,
         nextFocusDown: this.props.nextFocusDown,
         nextFocusForward: this.props.nextFocusForward,
         nextFocusLeft: this.props.nextFocusLeft,

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -207,6 +207,7 @@ class TouchableOpacity extends React.Component<Props, State> {
 
   _getChildStyleOpacityWithDefault(): number {
     // $FlowFixMe[underconstrained-implicit-instantiation]
+    // $FlowFixMe[prop-missing]
     const opacity = flattenStyle(this.props.style)?.opacity;
     return typeof opacity === 'number' ? opacity : 1;
   }
@@ -275,7 +276,7 @@ class TouchableOpacity extends React.Component<Props, State> {
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
         style={[this.props.style, {opacity: this.state.anim}]}
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         nextFocusDown={this.props.nextFocusDown}
@@ -303,8 +304,10 @@ class TouchableOpacity extends React.Component<Props, State> {
     if (
       this.props.disabled !== prevProps.disabled ||
       // $FlowFixMe[underconstrained-implicit-instantiation]
+      // $FlowFixMe[prop-missing]
       flattenStyle(prevProps.style)?.opacity !==
         // $FlowFixMe[underconstrained-implicit-instantiation]
+        // $FlowFixMe[prop-missing]
         flattenStyle(this.props.style)?.opacity
     ) {
       this._opacityInactive(250);

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -209,6 +209,7 @@ class TouchableOpacity extends React.Component<Props, State> {
 
   _getChildStyleOpacityWithDefault(): number {
     // $FlowFixMe[underconstrained-implicit-instantiation]
+    // $FlowFixMe[prop-missing]
     const opacity = flattenStyle(this.props.style)?.opacity;
     return typeof opacity === 'number' ? opacity : 1;
   }
@@ -283,7 +284,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         }
         disabled={this.props.disabled}
         style={[this.props.style, {opacity: this.state.anim}]}
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         nextFocusDown={this.props.nextFocusDown}
@@ -318,8 +319,10 @@ class TouchableOpacity extends React.Component<Props, State> {
     if (
       this.props.disabled !== prevProps.disabled ||
       // $FlowFixMe[underconstrained-implicit-instantiation]
+      // $FlowFixMe[prop-missing]
       flattenStyle(prevProps.style)?.opacity !==
         // $FlowFixMe[underconstrained-implicit-instantiation]
+        // $FlowFixMe[prop-missing]
         flattenStyle(this.props.style)?.opacity
     ) {
       this._opacityInactive(250);

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -181,6 +181,7 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
       }
     }
 
+    // $FlowFixMe[incompatible-call]
     return React.cloneElement(element, elementProps, ...children);
   }
 

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -196,6 +196,7 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
       }
     }
 
+    // $FlowFixMe[incompatible-call]
     return React.cloneElement(element, elementProps, ...children);
   }
 

package/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js

@@ -33,10 +33,7 @@ interface Agent {
   removeListener(event: $Keys<AgentEvents>, listener: () => void): void;
 }
 
-type TraceNode = {
-  publicInstance?: TraceNode,
-  // TODO: remove this field when syncing the new version of the renderer from React to React Native.
-  canonical?: TraceNode,
+type PublicInstance = {
   measure?: (
     (
       x: number,
@@ -49,6 +46,16 @@ type TraceNode = {
   ) => void,
 };
 
+type TraceNode =
+  | PublicInstance
+  | {
+      canonical?:
+        | PublicInstance // TODO: remove this variant when syncing the new version of the renderer from React to React Native.
+        | {
+            publicInstance?: PublicInstance,
+          },
+    };
+
 type ReactDevToolsGlobalHook = {
   on: (eventName: string, (agent: Agent) => void) => void,
   off: (eventName: string, (agent: Agent) => void) => void,
@@ -102,11 +109,14 @@ export default function TraceUpdateOverlay(): React.Node {
 
       const newFramesToDraw: Array<Promise<Overlay>> = [];
       nodesToDraw.forEach(({node, color}) => {
-        // `publicInstance` => Fabric
+        // `canonical.publicInstance` => Fabric
         // TODO: remove this check when syncing the new version of the renderer from React to React Native.
         // `canonical` => Legacy Fabric
         // `node` => Legacy renderer
-        const component = node.publicInstance ?? node.canonical ?? node;
+        const component =
+          (node.canonical && node.canonical.publicInstance) ??
+          node.canonical ??
+          node;
         if (!component || !component.measure) {
           return;
         }

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -14,6 +14,7 @@ import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
 import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
+import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
 const colorAttributes = {process: processColor};
@@ -46,6 +47,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexWrap: true,
   gap: true,
   height: true,
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
   justifyContent: true,
   left: true,
   margin: true,
@@ -104,6 +112,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    * Transform
    */
   transform: {process: processTransform},
+  transformOrigin: {process: processTransformOrigin},
 
   /**
    * View

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -35,6 +35,7 @@ const UIView = {
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
+  role: true,
 };
 
 const RCTView = {

package/Libraries/Components/View/ReactNativeViewAttributes.windows.js

@@ -35,6 +35,7 @@ const UIView = {
   collapsable: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
+  role: true,
   // [Windows
   onMouseEnter: true,
   onMouseLeave: true,

package/Libraries/Components/View/View.js

@@ -10,9 +10,9 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
-import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 
@@ -35,7 +35,6 @@ const View: React.AbstractComponent<
       accessibilityLabel,
       accessibilityLabelledBy,
       accessibilityLiveRegion,
-      accessibilityRole,
       accessibilityState,
       accessibilityValue,
       'aria-busy': ariaBusy,
@@ -56,12 +55,12 @@ const View: React.AbstractComponent<
       importantForAccessibility,
       nativeID,
       pointerEvents,
-      role,
       tabIndex,
       ...otherProps
     }: ViewProps,
     forwardedRef,
   ) => {
+    const hasTextAncestor = React.useContext(TextAncestor);
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
@@ -101,38 +100,53 @@ const View: React.AbstractComponent<
     // $FlowFixMe[underconstrained-implicit-instantiation]
     let style = flattenStyle(otherProps.style);
 
+    // $FlowFixMe[sketchy-null-mixed]
     const newPointerEvents = style?.pointerEvents || pointerEvents;
-
-    return (
-      <TextAncestor.Provider value={false}>
-        <ViewNativeComponent
-          {...otherProps}
-          accessibilityLiveRegion={
-            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
-          }
-          accessibilityLabel={ariaLabel ?? accessibilityLabel}
-          focusable={tabIndex !== undefined ? !tabIndex : focusable}
-          accessibilityState={_accessibilityState}
-          accessibilityRole={
-            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-          }
-          accessibilityElementsHidden={
-            ariaHidden ?? accessibilityElementsHidden
-          }
-          accessibilityLabelledBy={_accessibilityLabelledBy}
-          accessibilityValue={_accessibilityValue}
-          importantForAccessibility={
-            ariaHidden === true
-              ? 'no-hide-descendants'
-              : importantForAccessibility
+    const collapsableOverride =
+      ReactNativeFeatureFlags.shouldForceUnflattenForElevation()
+        ? {
+            collapsable:
+              style != null && style.elevation != null && style.elevation !== 0
+                ? false
+                : otherProps.collapsable,
           }
-          nativeID={id ?? nativeID}
-          style={style}
-          pointerEvents={newPointerEvents}
-          ref={forwardedRef}
-        />
-      </TextAncestor.Provider>
+        : {};
+
+    const actualView = (
+      <ViewNativeComponent
+        {...otherProps}
+        {...collapsableOverride}
+        accessibilityLiveRegion={
+          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+        }
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        accessibilityState={_accessibilityState}
+        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
+        accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessibilityValue={_accessibilityValue}
+        importantForAccessibility={
+          ariaHidden === true
+            ? 'no-hide-descendants'
+            : importantForAccessibility
+        }
+        nativeID={id ?? nativeID}
+        style={style}
+        // $FlowFixMe[incompatible-type]
+        pointerEvents={newPointerEvents}
+        ref={forwardedRef}
+      />
     );
+
+    if (hasTextAncestor) {
+      return (
+        <TextAncestor.Provider value={false}>
+          {actualView}
+        </TextAncestor.Provider>
+      );
+    }
+
+    return actualView;
   },
 );