react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/StyleSheet/splitLayoutProps.js

@@ -49,13 +49,18 @@ export default function splitLayoutProps(props: ?____ViewStyle_Internal): {
         case 'bottom':
         case 'top':
         case 'transform':
+        case 'rowGap':
+        case 'columnGap':
+        case 'gap':
           // $FlowFixMe[cannot-write]
           // $FlowFixMe[incompatible-use]
+          // $FlowFixMe[prop-missing]
           outer[prop] = props[prop];
           break;
         default:
           // $FlowFixMe[cannot-write]
           // $FlowFixMe[incompatible-use]
+          // $FlowFixMe[prop-missing]
           inner[prop] = props[prop];
           break;
       }

package/Libraries/Text/Text.d.ts

@@ -0,0 +1,209 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../types/private/Utilities';
+import {AccessibilityProps} from '../Components/View/ViewAccessibility';
+import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
+import {TextStyle} from '../StyleSheet/StyleSheetTypes';
+import {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextLayoutEventData,
+} from '../Types/CoreEventTypes';
+
+export interface TextPropsIOS {
+  /**
+   * Specifies whether font should be scaled down automatically to fit given style constraints.
+   */
+  adjustsFontSizeToFit?: boolean | undefined;
+
+  /**
+   * The Dynamic Text scale ramp to apply to this element on iOS.
+   */
+  dynamicTypeRamp?:
+    | 'caption2'
+    | 'caption1'
+    | 'footnote'
+    | 'subheadline'
+    | 'callout'
+    | 'body'
+    | 'headline'
+    | 'title3'
+    | 'title2'
+    | 'title1'
+    | 'largeTitle'
+    | undefined;
+
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number | undefined;
+
+  /**
+   * When `true`, no visual change is made when text is pressed down. By
+   * default, a gray oval highlights the text on press down.
+   */
+  suppressHighlighting?: boolean | undefined;
+}
+
+export interface TextPropsAndroid {
+  /**
+   * Specifies the disabled state of the text view for testing purposes.
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * Lets the user select text, to use the native copy and paste functionality.
+   */
+  selectable?: boolean | undefined;
+
+  /**
+   * The highlight color of the text.
+   */
+  selectionColor?: ColorValue | undefined;
+
+  /**
+   * Set text break strategy on Android API Level 23+
+   * default is `highQuality`.
+   */
+  textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined;
+
+  /**
+   * Determines the types of data converted to clickable URLs in the text element.
+   * By default no data types are detected.
+   */
+  dataDetectorType?:
+    | null
+    | 'phoneNumber'
+    | 'link'
+    | 'email'
+    | 'none'
+    | 'all'
+    | undefined;
+
+  /**
+   * Hyphenation strategy
+   */
+  android_hyphenationFrequency?: 'normal' | 'none' | 'full' | undefined;
+}
+
+// https://reactnative.dev/docs/text#props
+export interface TextProps
+  extends TextPropsIOS,
+    TextPropsAndroid,
+    AccessibilityProps {
+  /**
+   * Specifies whether fonts should scale to respect Text Size accessibility settings.
+   * The default is `true`.
+   */
+  allowFontScaling?: boolean | undefined;
+
+  children?: React.ReactNode;
+
+  /**
+   * This can be one of the following values:
+   *
+   * - `head` - The line is displayed so that the end fits in the container and the missing text
+   * at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+   * - `middle` - The line is displayed so that the beginning and end fit in the container and the
+   * missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+   * - `tail` - The line is displayed so that the beginning fits in the container and the
+   * missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+   * - `clip` - Lines are not drawn past the edge of the text container.
+   *
+   * The default is `tail`.
+   *
+   * `numberOfLines` must be set in conjunction with this prop.
+   *
+   * > `clip` is working only for iOS
+   */
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;
+
+  /**
+   * Used to reference react managed views from native code.
+   */
+  id?: string | undefined;
+
+  /**
+   * Line Break mode. Works only with numberOfLines.
+   * clip is working only for iOS
+   */
+  lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;
+
+  /**
+   * Used to truncate the text with an ellipsis after computing the text
+   * layout, including line wrapping, such that the total number of lines
+   * does not exceed this number.
+   *
+   * This prop is commonly used with `ellipsizeMode`.
+   */
+  numberOfLines?: number | undefined;
+
+  /**
+   * Invoked on mount and layout changes with
+   *
+   * {nativeEvent: { layout: {x, y, width, height}}}.
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  /**
+   * Invoked on Text layout
+   */
+  onTextLayout?:
+    | ((event: NativeSyntheticEvent<TextLayoutEventData>) => void)
+    | undefined;
+
+  /**
+   * This function is called on press.
+   * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
+   */
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
+  onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * This function is called on long press.
+   * e.g., `onLongPress={this.increaseSize}>``
+   */
+  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * @see https://reactnative.dev/docs/text#style
+   */
+  style?: StyleProp<TextStyle> | undefined;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string | undefined;
+
+  /**
+   * Used to reference react managed views from native code.
+   */
+  nativeID?: string | undefined;
+
+  /**
+   * Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+   * - null/undefined (default): inherit from the parent node or the global default (0)
+   * - 0: no max, ignore parent/global default
+   * - >= 1: sets the maxFontSizeMultiplier of this node to this value
+   */
+  maxFontSizeMultiplier?: number | null | undefined;
+}
+
+/**
+ * A React component for displaying text which supports nesting, styling, and touch handling.
+ */
+declare class TextComponent extends React.Component<TextProps> {}
+declare const TextBase: Constructor<NativeMethods> & typeof TextComponent;
+export class Text extends TextBase {}

package/Libraries/Text/Text.js

@@ -10,11 +10,13 @@
 
 import type {PressEvent} from '../Types/CoreEventTypes';
 
-import Platform from '../Utilities/Platform';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
-import StyleSheet from '../StyleSheet/StyleSheet';
+import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
+import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import {type TextProps} from './TextProps';
@@ -32,8 +34,18 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabel,
+    accessibilityRole,
     allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
     ellipsizeMode,
+    id,
+    nativeID,
     onLongPress,
     onPress,
     onPressIn,
@@ -45,20 +57,30 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    role,
     suppressHighlighting,
     ...restProps
   } = props;
 
   const [isHighlighted, setHighlighted] = useState(false);
 
+  const _accessibilityState = {
+    busy: ariaBusy ?? props.accessibilityState?.busy,
+    checked: ariaChecked ?? props.accessibilityState?.checked,
+    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
+    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    selected: ariaSelected ?? props.accessibilityState?.selected,
+  };
+
   const _disabled =
     restProps.disabled != null
       ? restProps.disabled
-      : props.accessibilityState?.disabled;
-  const _accessibilityState =
-    _disabled !== props.accessibilityState?.disabled
-      ? {...props.accessibilityState, disabled: _disabled}
-      : props.accessibilityState;
+      : _accessibilityState?.disabled;
+
+  const nativeTextAccessibilityState =
+    _disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled: _disabled}
+      : _accessibilityState;
 
   const isPressable =
     (onPress != null ||
@@ -152,7 +174,20 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = restProps.style;
+  let style = flattenStyle(restProps.style);
+
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    _selectable = userSelectToSelectableMap[style.userSelect];
+  }
+
+  if (style?.verticalAlign != null) {
+    style = StyleSheet.compose(style, {
+      textAlignVertical:
+        verticalAlignToTextAlignVerticalMap[style.verticalAlign],
+    });
+  }
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -176,15 +211,31 @@ const Text: React.AbstractComponent<
     default: accessible,
   });
 
+  let flattenedStyle = flattenStyle(style);
+
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
+  }
+
+  const _hasOnPressOrOnLongPress =
+    props.onPress != null || props.onLongPress != null;
+
   return hasTextAncestor ? (
     <NativeVirtualText
       {...restProps}
+      accessibilityState={_accessibilityState}
       {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
+      accessibilityRole={
+        role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+      }
       isHighlighted={isHighlighted}
       isPressable={isPressable}
+      selectable={_selectable}
+      nativeID={id ?? nativeID}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
-      style={style}
+      style={flattenedStyle}
       ref={forwardedRef}
     />
   ) : (
@@ -193,14 +244,24 @@ const Text: React.AbstractComponent<
         {...restProps}
         {...eventHandlersForText}
         disabled={_disabled}
-        accessible={_accessible}
-        accessibilityState={_accessibilityState}
+        selectable={_selectable}
+        accessible={
+          accessible == null && Platform.OS === 'android'
+            ? _hasOnPressOrOnLongPress
+            : _accessible
+        }
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityState={nativeTextAccessibilityState}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
+        nativeID={id ?? nativeID}
         numberOfLines={numberOfLines}
         selectionColor={selectionColor}
-        style={style}
+        style={flattenedStyle}
         ref={forwardedRef}
       />
     </TextAncestor.Provider>
@@ -209,6 +270,12 @@ const Text: React.AbstractComponent<
 
 Text.displayName = 'Text';
 
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+Text.propTypes = require('deprecated-react-native-prop-types').TextPropTypes;
+
 /**
  * Returns false until the first time `newValue` is true, after which this will
  * always return true. This is necessary to lazily initialize `Pressability` so
@@ -222,4 +289,19 @@ function useLazyInitialization(newValue: boolean): boolean {
   return oldValue;
 }
 
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 module.exports = Text;

package/Libraries/Text/Text.windows.js

@@ -11,11 +11,13 @@
 
 import type {PressEvent} from '../Types/CoreEventTypes';
 
-import Platform from '../Utilities/Platform';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
-import StyleSheet from '../StyleSheet/StyleSheet';
+import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
+import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import {type TextProps} from './TextProps';
@@ -36,8 +38,18 @@ const Text: React.AbstractComponent<
 > = React.forwardRef((props: TextProps, forwardedRef) => {
   const {
     accessible,
+    accessibilityLabel,
+    accessibilityRole,
     allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
     ellipsizeMode,
+    id,
+    nativeID,
     onLongPress,
     onPress,
     onPressIn,
@@ -49,20 +61,30 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    role,
     suppressHighlighting,
     ...restProps
   } = props;
 
   const [isHighlighted, setHighlighted] = useState(false);
 
+  const _accessibilityState = {
+    busy: ariaBusy ?? props.accessibilityState?.busy,
+    checked: ariaChecked ?? props.accessibilityState?.checked,
+    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
+    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    selected: ariaSelected ?? props.accessibilityState?.selected,
+  };
+
   const _disabled =
     restProps.disabled != null
       ? restProps.disabled
-      : props.accessibilityState?.disabled;
-  const _accessibilityState =
-    _disabled !== props.accessibilityState?.disabled
-      ? {...props.accessibilityState, disabled: _disabled}
-      : props.accessibilityState;
+      : _accessibilityState?.disabled;
+
+  const nativeTextAccessibilityState =
+    _disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled: _disabled}
+      : _accessibilityState;
 
   const isPressable =
     (onPress != null ||
@@ -156,7 +178,20 @@ const Text: React.AbstractComponent<
       ? null
       : processColor(restProps.selectionColor);
 
-  let style = restProps.style;
+  let style = flattenStyle(restProps.style);
+
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    _selectable = userSelectToSelectableMap[style.userSelect];
+  }
+
+  if (style?.verticalAlign != null) {
+    style = StyleSheet.compose(style, {
+      textAlignVertical:
+        verticalAlignToTextAlignVerticalMap[style.verticalAlign],
+    });
+  }
+
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
       style = StyleSheet.compose(restProps.style, {
@@ -179,21 +214,41 @@ const Text: React.AbstractComponent<
     ios: accessible !== false,
     default: accessible,
   });
+
+  let flattenedStyle = flattenStyle(style);
+
+  if (typeof flattenedStyle?.fontWeight === 'number') {
+    flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
+  }
+
+  const _hasOnPressOrOnLongPress =
+    props.onPress != null || props.onLongPress != null;
+
   if (hasTextAncestor) {
     return (
       <NativeVirtualText
         {...restProps}
         {...eventHandlersForText}
         disabled={_disabled}
-        accessible={_accessible}
-        accessibilityState={_accessibilityState}
+        selectable={_selectable}
+        accessible={
+          accessible == null && Platform.OS === 'android'
+            ? _hasOnPressOrOnLongPress
+            : _accessible
+        }
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityState={nativeTextAccessibilityState}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
+        nativeID={id ?? nativeID}
         isPressable={isPressable}
         numberOfLines={numberOfLines}
         selectionColor={selectionColor}
-        style={style}
+        style={flattenedStyle}
         ref={forwardedRef}
       />
     );
@@ -275,6 +330,12 @@ const Text: React.AbstractComponent<
 
 Text.displayName = 'Text';
 
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+Text.propTypes = require('deprecated-react-native-prop-types').TextPropTypes;
+
 /**
  * Returns false until the first time `newValue` is true, after which this will
  * always return true. This is necessary to lazily initialize `Pressability` so
@@ -288,4 +349,19 @@ function useLazyInitialization(newValue: boolean): boolean {
   return oldValue;
 }
 
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 module.exports = Text;

package/Libraries/Text/TextNativeComponent.js

@@ -8,13 +8,13 @@
  * @format
  */
 
-import ReactNativeViewAttributes from '../Components/View/ReactNativeViewAttributes';
+import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
-import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
+import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import {type ProcessedColorValue} from '../StyleSheet/processColor';
-import {type TextProps} from './TextProps';
 import {type PressEvent} from '../Types/CoreEventTypes';
+import {type TextProps} from './TextProps';
 
 type NativeTextProps = $ReadOnly<{
   ...TextProps,
@@ -27,47 +27,55 @@ type NativeTextProps = $ReadOnly<{
   isPressable?: ?boolean,
 }>;
 
-export const NativeText: HostComponent<NativeTextProps> =
-  (createReactNativeComponentClass('RCTText', () => ({
-    validAttributes: {
-      ...ReactNativeViewAttributes.UIView,
-      isHighlighted: true,
-      isPressable: true,
-      numberOfLines: true,
-      ellipsizeMode: true,
-      allowFontScaling: true,
-      maxFontSizeMultiplier: true,
-      disabled: true,
-      selectable: true,
-      selectionColor: true,
-      adjustsFontSizeToFit: true,
-      minimumFontScale: true,
-      textBreakStrategy: true,
-      onTextLayout: true,
-      onInlineViewLayout: true,
-      dataDetectorType: true,
-      android_hyphenationFrequency: true,
+const textViewConfig = {
+  validAttributes: {
+    isHighlighted: true,
+    isPressable: true,
+    numberOfLines: true,
+    ellipsizeMode: true,
+    allowFontScaling: true,
+    dynamicTypeRamp: true,
+    maxFontSizeMultiplier: true,
+    disabled: true,
+    selectable: true,
+    selectionColor: true,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: true,
+    textBreakStrategy: true,
+    onTextLayout: true,
+    onInlineViewLayout: true,
+    dataDetectorType: true,
+    android_hyphenationFrequency: true,
+    lineBreakStrategyIOS: true,
+  },
+  directEventTypes: {
+    topTextLayout: {
+      registrationName: 'onTextLayout',
     },
-    directEventTypes: {
-      topTextLayout: {
-        registrationName: 'onTextLayout',
-      },
-      topInlineViewLayout: {
-        registrationName: 'onInlineViewLayout',
-      },
+    topInlineViewLayout: {
+      registrationName: 'onInlineViewLayout',
     },
-    uiViewClassName: 'RCTText',
-  })): any);
+  },
+  uiViewClassName: 'RCTText',
+};
+
+const virtualTextViewConfig = {
+  validAttributes: {
+    isHighlighted: true,
+    isPressable: true,
+    maxFontSizeMultiplier: true,
+  },
+  uiViewClassName: 'RCTVirtualText',
+};
+
+export const NativeText: HostComponent<NativeTextProps> =
+  (createReactNativeComponentClass('RCTText', () =>
+    createViewConfig(textViewConfig),
+  ): any);
 
 export const NativeVirtualText: HostComponent<NativeTextProps> =
   !global.RN$Bridgeless && !UIManager.hasViewManagerConfig('RCTVirtualText')
     ? NativeText
-    : (createReactNativeComponentClass('RCTVirtualText', () => ({
-        validAttributes: {
-          ...ReactNativeViewAttributes.UIView,
-          isHighlighted: true,
-          isPressable: true,
-          maxFontSizeMultiplier: true,
-        },
-        uiViewClassName: 'RCTVirtualText',
-      })): any);
+    : (createReactNativeComponentClass('RCTVirtualText', () =>
+        createViewConfig(virtualTextViewConfig),
+      ): any);