react-native-windows 0.76.3 → 0.77.0-preview.1

package/Libraries/Text/Text.js

@@ -33,231 +33,156 @@ type TextForwardRef = React.ElementRef<
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<TextProps, TextForwardRef> =
-  React.forwardRef(
-    (
-      {
-        accessible,
-        accessibilityLabel,
-        accessibilityState,
-        allowFontScaling,
-        'aria-busy': ariaBusy,
-        'aria-checked': ariaChecked,
-        'aria-disabled': ariaDisabled,
-        'aria-expanded': ariaExpanded,
-        'aria-label': ariaLabel,
-        'aria-selected': ariaSelected,
-        children,
-        ellipsizeMode,
-        disabled,
-        id,
-        nativeID,
-        numberOfLines,
-        onLongPress,
-        onPress,
-        onPressIn,
-        onPressOut,
-        onResponderGrant,
-        onResponderMove,
-        onResponderRelease,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onStartShouldSetResponder,
-        pressRetentionOffset,
-        selectable,
-        selectionColor,
-        suppressHighlighting,
-        style,
-        ...restProps
-      }: TextProps,
-      forwardedRef,
-    ) => {
-      const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
-
-      let _accessibilityState: ?TextProps['accessibilityState'] =
-        accessibilityState;
-      if (
-        ariaBusy != null ||
-        ariaChecked != null ||
-        ariaDisabled != null ||
-        ariaExpanded != null ||
-        ariaSelected != null
-      ) {
-        if (_accessibilityState != null) {
-          _accessibilityState = {
-            busy: ariaBusy ?? _accessibilityState.busy,
-            checked: ariaChecked ?? _accessibilityState.checked,
-            disabled: ariaDisabled ?? _accessibilityState.disabled,
-            expanded: ariaExpanded ?? _accessibilityState.expanded,
-            selected: ariaSelected ?? _accessibilityState.selected,
-          };
-        } else {
-          _accessibilityState = {
-            busy: ariaBusy,
-            checked: ariaChecked,
-            disabled: ariaDisabled,
-            expanded: ariaExpanded,
-            selected: ariaSelected,
-          };
-        }
+const Text: component(
+  ref: React.RefSetter<TextForwardRef>,
+  ...props: TextProps
+) = React.forwardRef(
+  (
+    {
+      accessible,
+      accessibilityLabel,
+      accessibilityState,
+      allowFontScaling,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
+      'aria-selected': ariaSelected,
+      children,
+      ellipsizeMode,
+      disabled,
+      id,
+      nativeID,
+      numberOfLines,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
+      pressRetentionOffset,
+      selectable,
+      selectionColor,
+      suppressHighlighting,
+      style,
+      ...restProps
+    }: TextProps,
+    forwardedRef,
+  ) => {
+    const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+
+    let _accessibilityState: ?TextProps['accessibilityState'] =
+      accessibilityState;
+    if (
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+    ) {
+      if (_accessibilityState != null) {
+        _accessibilityState = {
+          busy: ariaBusy ?? _accessibilityState.busy,
+          checked: ariaChecked ?? _accessibilityState.checked,
+          disabled: ariaDisabled ?? _accessibilityState.disabled,
+          expanded: ariaExpanded ?? _accessibilityState.expanded,
+          selected: ariaSelected ?? _accessibilityState.selected,
+        };
+      } else {
+        _accessibilityState = {
+          busy: ariaBusy,
+          checked: ariaChecked,
+          disabled: ariaDisabled,
+          expanded: ariaExpanded,
+          selected: ariaSelected,
+        };
       }
+    }
 
-      const _accessibilityStateDisabled = _accessibilityState?.disabled;
-      const _disabled = disabled ?? _accessibilityStateDisabled;
+    const _accessibilityStateDisabled = _accessibilityState?.disabled;
+    const _disabled = disabled ?? _accessibilityStateDisabled;
 
-      const isPressable =
-        (onPress != null ||
-          onLongPress != null ||
-          onStartShouldSetResponder != null) &&
-        _disabled !== true;
+    const isPressable =
+      (onPress != null ||
+        onLongPress != null ||
+        onStartShouldSetResponder != null) &&
+      _disabled !== true;
 
-      // TODO: Move this processing to the view configuration.
-      const _selectionColor =
-        selectionColor == null ? null : processColor(selectionColor);
+    // TODO: Move this processing to the view configuration.
+    const _selectionColor =
+      selectionColor != null ? processColor(selectionColor) : undefined;
 
-      let _style = style;
-      if (__DEV__) {
-        if (PressabilityDebug.isEnabled() && onPress != null) {
-          _style = [style, {color: 'magenta'}];
-        }
+    let _style = style;
+    if (__DEV__) {
+      if (PressabilityDebug.isEnabled() && onPress != null) {
+        _style = [style, {color: 'magenta'}];
       }
+    }
 
-      let _numberOfLines = numberOfLines;
-      if (_numberOfLines != null && !(_numberOfLines >= 0)) {
-        if (__DEV__) {
-          console.error(
-            `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
-          );
-        }
-        _numberOfLines = 0;
+    let _numberOfLines = numberOfLines;
+    if (_numberOfLines != null && !(_numberOfLines >= 0)) {
+      if (__DEV__) {
+        console.error(
+          `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
+        );
       }
+      _numberOfLines = 0;
+    }
 
-      let _selectable = selectable;
-
-      let processedStyle = flattenStyle<TextStyleProp>(_style);
-      if (processedStyle != null) {
-        let overrides: ?{...TextStyleInternal} = null;
-        if (typeof processedStyle.fontWeight === 'number') {
-          overrides = overrides || ({}: {...TextStyleInternal});
-          overrides.fontWeight =
-            // $FlowFixMe[incompatible-cast]
-            (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
-        }
-
-        if (processedStyle.userSelect != null) {
-          _selectable = userSelectToSelectableMap[processedStyle.userSelect];
-          overrides = overrides || ({}: {...TextStyleInternal});
-          overrides.userSelect = undefined;
-        }
-
-        if (processedStyle.verticalAlign != null) {
-          overrides = overrides || ({}: {...TextStyleInternal});
-          overrides.textAlignVertical =
-            verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
-          overrides.verticalAlign = undefined;
-        }
+    let _selectable = selectable;
 
-        if (overrides != null) {
-          // $FlowFixMe[incompatible-type]
-          _style = [_style, overrides];
-        }
+    let processedStyle = flattenStyle<TextStyleProp>(_style);
+    if (processedStyle != null) {
+      let overrides: ?{...TextStyleInternal} = null;
+      if (typeof processedStyle.fontWeight === 'number') {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.fontWeight =
+          // $FlowFixMe[incompatible-cast]
+          (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
       }
 
-      const _nativeID = id ?? nativeID;
-
-      const hasTextAncestor = useContext(TextAncestor);
-      if (hasTextAncestor) {
-        if (isPressable) {
-          return (
-            <NativePressableVirtualText
-              ref={forwardedRef}
-              textProps={{
-                ...restProps,
-                accessibilityLabel: _accessibilityLabel,
-                accessibilityState: _accessibilityState,
-                nativeID: _nativeID,
-                numberOfLines: _numberOfLines,
-                selectable: _selectable,
-                selectionColor: _selectionColor,
-                style: _style,
-                disabled: disabled,
-                children,
-              }}
-              textPressabilityProps={{
-                onLongPress,
-                onPress,
-                onPressIn,
-                onPressOut,
-                onResponderGrant,
-                onResponderMove,
-                onResponderRelease,
-                onResponderTerminate,
-                onResponderTerminationRequest,
-                onStartShouldSetResponder,
-                pressRetentionOffset,
-                suppressHighlighting,
-              }}
-            />
-          );
-        }
+      if (processedStyle.userSelect != null) {
+        _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.userSelect = undefined;
+      }
 
-        return (
-          <NativeVirtualText
-            {...restProps}
-            accessibilityLabel={_accessibilityLabel}
-            accessibilityState={_accessibilityState}
-            isHighlighted={false}
-            isPressable={false}
-            nativeID={_nativeID}
-            numberOfLines={_numberOfLines}
-            ref={forwardedRef}
-            selectable={_selectable}
-            selectionColor={_selectionColor}
-            style={_style}
-            disabled={disabled}>
-            {children}
-          </NativeVirtualText>
-        );
+      if (processedStyle.verticalAlign != null) {
+        overrides = overrides || ({}: {...TextStyleInternal});
+        overrides.textAlignVertical =
+          verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+        overrides.verticalAlign = undefined;
       }
 
-      // If the disabled prop and accessibilityState.disabled are out of sync but not both in
-      // falsy states we need to update the accessibilityState object to use the disabled prop.
-      if (
-        _disabled !== _accessibilityStateDisabled &&
-        ((_disabled != null && _disabled !== false) ||
-          (_accessibilityStateDisabled != null &&
-            _accessibilityStateDisabled !== false))
-      ) {
-        _accessibilityState = {..._accessibilityState, disabled: _disabled};
+      if (overrides != null) {
+        // $FlowFixMe[incompatible-type]
+        _style = [_style, overrides];
       }
+    }
 
-      const _accessible = Platform.select({
-        ios: accessible !== false,
-        android:
-          accessible == null
-            ? onPress != null || onLongPress != null
-            : accessible,
-        default: accessible,
-      });
+    const _nativeID = id ?? nativeID;
 
-      let nativeText = null;
+    const hasTextAncestor = useContext(TextAncestor);
+    if (hasTextAncestor) {
       if (isPressable) {
-        nativeText = (
-          <NativePressableText
+        return (
+          <NativePressableVirtualText
             ref={forwardedRef}
             textProps={{
               ...restProps,
               accessibilityLabel: _accessibilityLabel,
               accessibilityState: _accessibilityState,
-              accessible: _accessible,
-              allowFontScaling: allowFontScaling !== false,
-              disabled: _disabled,
-              ellipsizeMode: ellipsizeMode ?? 'tail',
               nativeID: _nativeID,
               numberOfLines: _numberOfLines,
               selectable: _selectable,
               selectionColor: _selectionColor,
               style: _style,
+              disabled: disabled,
               children,
             }}
             textPressabilityProps={{
@@ -276,58 +201,132 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
             }}
           />
         );
-      } else {
-        nativeText = (
-          <NativeText
-            {...restProps}
-            accessibilityLabel={_accessibilityLabel}
-            accessibilityState={_accessibilityState}
-            accessible={_accessible}
-            allowFontScaling={allowFontScaling !== false}
-            disabled={_disabled}
-            ellipsizeMode={ellipsizeMode ?? 'tail'}
-            isHighlighted={false}
-            nativeID={_nativeID}
-            numberOfLines={_numberOfLines}
-            ref={forwardedRef}
-            selectable={_selectable}
-            selectionColor={_selectionColor}
-            style={_style}>
-            {children}
-          </NativeText>
-        );
       }
 
-      if (children == null) {
-        return nativeText;
-      }
+      return (
+        <NativeVirtualText
+          {...restProps}
+          accessibilityLabel={_accessibilityLabel}
+          accessibilityState={_accessibilityState}
+          nativeID={_nativeID}
+          numberOfLines={_numberOfLines}
+          ref={forwardedRef}
+          selectable={_selectable}
+          selectionColor={_selectionColor}
+          style={_style}
+          disabled={disabled}>
+          {children}
+        </NativeVirtualText>
+      );
+    }
 
-      // If the children do not contain a JSX element it would not be possible to have a
-      // nested `Text` component so we can skip adding the `TextAncestor` context wrapper
-      // which has a performance overhead. Since we do this for performance reasons we need
-      // to keep the check simple to avoid regressing overall perf. For this reason the
-      // `children.length` constant is set to `3`, this should be a reasonable tradeoff
-      // to capture the majority of `Text` uses but also not make this check too expensive.
-      if (Array.isArray(children) && children.length <= 3) {
-        let hasNonTextChild = false;
-        for (let child of children) {
-          if (child != null && typeof child === 'object') {
-            hasNonTextChild = true;
-            break;
-          }
-        }
-        if (!hasNonTextChild) {
-          return nativeText;
+    // If the disabled prop and accessibilityState.disabled are out of sync but not both in
+    // falsy states we need to update the accessibilityState object to use the disabled prop.
+    if (
+      _disabled !== _accessibilityStateDisabled &&
+      ((_disabled != null && _disabled !== false) ||
+        (_accessibilityStateDisabled != null &&
+          _accessibilityStateDisabled !== false))
+    ) {
+      _accessibilityState = {..._accessibilityState, disabled: _disabled};
+    }
+
+    const _accessible = Platform.select({
+      ios: accessible !== false,
+      android:
+        accessible == null
+          ? onPress != null || onLongPress != null
+          : accessible,
+      default: accessible,
+    });
+
+    let nativeText = null;
+    if (isPressable) {
+      nativeText = (
+        <NativePressableText
+          ref={forwardedRef}
+          textProps={{
+            ...restProps,
+            accessibilityLabel: _accessibilityLabel,
+            accessibilityState: _accessibilityState,
+            accessible: _accessible,
+            allowFontScaling: allowFontScaling !== false,
+            disabled: _disabled,
+            ellipsizeMode: ellipsizeMode ?? 'tail',
+            nativeID: _nativeID,
+            numberOfLines: _numberOfLines,
+            selectable: _selectable,
+            selectionColor: _selectionColor,
+            style: _style,
+            children,
+          }}
+          textPressabilityProps={{
+            onLongPress,
+            onPress,
+            onPressIn,
+            onPressOut,
+            onResponderGrant,
+            onResponderMove,
+            onResponderRelease,
+            onResponderTerminate,
+            onResponderTerminationRequest,
+            onStartShouldSetResponder,
+            pressRetentionOffset,
+            suppressHighlighting,
+          }}
+        />
+      );
+    } else {
+      nativeText = (
+        <NativeText
+          {...restProps}
+          accessibilityLabel={_accessibilityLabel}
+          accessibilityState={_accessibilityState}
+          accessible={_accessible}
+          allowFontScaling={allowFontScaling !== false}
+          disabled={_disabled}
+          ellipsizeMode={ellipsizeMode ?? 'tail'}
+          nativeID={_nativeID}
+          numberOfLines={_numberOfLines}
+          ref={forwardedRef}
+          selectable={_selectable}
+          selectionColor={_selectionColor}
+          style={_style}>
+          {children}
+        </NativeText>
+      );
+    }
+
+    if (children == null) {
+      return nativeText;
+    }
+
+    // If the children do not contain a JSX element it would not be possible to have a
+    // nested `Text` component so we can skip adding the `TextAncestor` context wrapper
+    // which has a performance overhead. Since we do this for performance reasons we need
+    // to keep the check simple to avoid regressing overall perf. For this reason the
+    // `children.length` constant is set to `3`, this should be a reasonable tradeoff
+    // to capture the majority of `Text` uses but also not make this check too expensive.
+    if (Array.isArray(children) && children.length <= 3) {
+      let hasNonTextChild = false;
+      for (let child of children) {
+        if (child != null && typeof child === 'object') {
+          hasNonTextChild = true;
+          break;
         }
-      } else if (typeof children !== 'object') {
+      }
+      if (!hasNonTextChild) {
         return nativeText;
       }
+    } else if (typeof children !== 'object') {
+      return nativeText;
+    }
 
-      return (
-        <TextAncestor.Provider value={true}>{nativeText}</TextAncestor.Provider>
-      );
-    },
-  );
+    return (
+      <TextAncestor.Provider value={true}>{nativeText}</TextAncestor.Provider>
+    );
+  },
+);
 
 Text.displayName = 'Text';
 
@@ -476,10 +475,10 @@ type NativePressableTextProps = $ReadOnly<{
  * This logic is split out from the main Text component to enable the more
  * expensive pressability logic to be only initialized when needed.
  */
-const NativePressableVirtualText: React.AbstractComponent<
-  NativePressableTextProps,
-  TextForwardRef,
-> = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+const NativePressableVirtualText: component(
+  ref: React.RefSetter<TextForwardRef>,
+  ...props: NativePressableTextProps
+) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
@@ -501,10 +500,10 @@ const NativePressableVirtualText: React.AbstractComponent<
  * This logic is split out from the main Text component to enable the more
  * expensive pressability logic to be only initialized when needed.
  */
-const NativePressableText: React.AbstractComponent<
-  NativePressableTextProps,
-  TextForwardRef,
-> = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+const NativePressableText: component(
+  ref: React.RefSetter<TextForwardRef>,
+  ...props: NativePressableTextProps
+) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );