react-native-windows 0.80.1 → 0.81.0-preview.4

package/Libraries/Text/Text.windows.js

@@ -41,242 +41,164 @@ type TextForwardRef = React.ElementRef<
 const TextImpl: component(
   ref?: React.RefSetter<TextForwardRef>,
   ...props: TextProps
-) = React.forwardRef(
-  (
-    {
-      accessible,
-      accessibilityLabel,
-      accessibilityLevel, // Windows
-      accessibilityPosInSet, // Windows
-      accessibilitySetSize, // Windows
-      accessibilityState,
-      allowFontScaling,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-multiselectable': ariaMultiselectable, // Windows
-      'aria-required': ariaRequired, // Windows
-      'aria-label': ariaLabel,
-      'aria-level': ariaLevel, // Windows
-      'aria-posinset': ariaPosinset, // Windows
-      'aria-setsize': ariaSetsize, // Windows
-      'aria-selected': ariaSelected,
-      'aria-readonly': ariaReadOnly, //Windows
-      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;
-    const _accessibilityLevel = ariaLevel ?? accessibilityLevel; // Windows
-    const _accessibilityPosInSet = ariaPosinset ?? accessibilityPosInSet; // Windows
-    const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize; // Windows
-
-    let _accessibilityState: ?TextProps['accessibilityState'] =
-      accessibilityState;
-    if (
-      ariaBusy != null ||
-      ariaChecked != null ||
-      ariaDisabled != null ||
-      ariaExpanded != null ||
-      ariaSelected != null ||
-      ariaReadOnly != null || // Windows
-      ariaMultiselectable != null || // Windows
-      ariaRequired != null // Windows
-    ) {
-      if (_accessibilityState != null) {
-        _accessibilityState = {
-          busy: ariaBusy ?? _accessibilityState.busy,
-          checked: ariaChecked ?? _accessibilityState.checked,
-          disabled: ariaDisabled ?? _accessibilityState.disabled,
-          expanded: ariaExpanded ?? _accessibilityState.expanded,
-          selected: ariaSelected ?? _accessibilityState.selected,
-          readOnly: ariaReadOnly ?? _accessibilityState.readOnly, // Windows
-          multiselectable:
-            ariaMultiselectable ?? _accessibilityState.multiselectable, // Windows
-          required: ariaRequired ?? _accessibilityState.required, // Windows
-        };
-      } else {
-        _accessibilityState = {
-          busy: ariaBusy,
-          checked: ariaChecked,
-          disabled: ariaDisabled,
-          expanded: ariaExpanded,
-          selected: ariaSelected,
-          readOnly: ariaReadOnly, // Windows
-          multiselectable: ariaMultiselectable, // Windows
-          required: ariaRequired, // Windows
-        };
-      }
+) = ({
+  ref: forwardedRef,
+  accessible,
+  accessibilityLabel,
+  accessibilityLevel, // Windows
+  accessibilityPosInSet, // Windows
+  accessibilitySetSize, // Windows
+  accessibilityState,
+  allowFontScaling,
+  'aria-busy': ariaBusy,
+  'aria-checked': ariaChecked,
+  'aria-disabled': ariaDisabled,
+  'aria-expanded': ariaExpanded,
+  'aria-multiselectable': ariaMultiselectable, // Windows
+  'aria-required': ariaRequired, // Windows
+  'aria-label': ariaLabel,
+  'aria-level': ariaLevel, // Windows
+  'aria-posinset': ariaPosinset, // Windows
+  'aria-setsize': ariaSetsize, // Windows
+  'aria-readonly': ariaReadOnly, //Windows
+  '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
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...TextProps,
+}) => {
+  const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+  const _accessibilityLevel = ariaLevel ?? accessibilityLevel; // Windows
+  const _accessibilityPosInSet = ariaPosinset ?? accessibilityPosInSet; // Windows
+  const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize; // Windows
+
+  let _accessibilityState: ?TextProps['accessibilityState'] =
+    accessibilityState;
+  if (
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null ||
+    ariaReadOnly != null || // Windows
+    ariaMultiselectable != null || // Windows
+    ariaRequired != null // Windows
+  ) {
+    if (_accessibilityState != null) {
+      _accessibilityState = {
+        busy: ariaBusy ?? _accessibilityState.busy,
+        checked: ariaChecked ?? _accessibilityState.checked,
+        disabled: ariaDisabled ?? _accessibilityState.disabled,
+        expanded: ariaExpanded ?? _accessibilityState.expanded,
+        selected: ariaSelected ?? _accessibilityState.selected,
+        readOnly: ariaReadOnly ?? _accessibilityState.readOnly, // Windows
+        multiselectable:
+          ariaMultiselectable ?? _accessibilityState.multiselectable, // Windows
+        required: ariaRequired ?? _accessibilityState.required, // Windows
+      };
+    } else {
+      _accessibilityState = {
+        busy: ariaBusy,
+        checked: ariaChecked,
+        disabled: ariaDisabled,
+        expanded: ariaExpanded,
+        selected: ariaSelected,
+        readOnly: ariaReadOnly, // Windows
+        multiselectable: ariaMultiselectable, // Windows
+        required: ariaRequired, // Windows
+      };
     }
+  }
 
-    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 ? processColor(selectionColor) : undefined;
+  // 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.`,
+      );
     }
-
-    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;
-      }
-
-      if (overrides != null) {
-        // $FlowFixMe[incompatible-type]
-        _style = [_style, overrides];
-      }
+    _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']);
     }
 
-    const _nativeID = id ?? nativeID;
-
-    const hasTextAncestor = useContext(TextAncestor);
-    if (hasTextAncestor) {
-      if (isPressable) {
-        return (
-          <NativePressableVirtualText
-            ref={forwardedRef}
-            textProps={{
-              ...restProps,
-              accessibilityLabel: _accessibilityLabel,
-              accessibilityState: _accessibilityState,
-              accessibilityLevel: _accessibilityLevel, // Windows
-              accessibilityPosInSet: _accessibilityPosInSet, // Windows
-              accessibilitySetSize: _accessibilitySetSize, // Windows
-              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}
-          accessibilityLevel={_accessibilityLevel} // Windows
-          accessibilityPosInSet={_accessibilityPosInSet} // Windows
-          accessibilitySetSize={_accessibilitySetSize} // Windows
-          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 !== false, // [Windows #13996 - default value is accessible !== false]
-    });
+  const _nativeID = id ?? nativeID;
 
-    let nativeText = null;
+  const hasTextAncestor = useContext(TextAncestor);
+  if (hasTextAncestor) {
     if (isPressable) {
-      nativeText = (
-        <NativePressableText
+      return (
+        <NativePressableVirtualText
           ref={forwardedRef}
           textProps={{
             ...restProps,
@@ -285,15 +207,13 @@ const TextImpl: component(
             accessibilityLevel: _accessibilityLevel, // Windows
             accessibilityPosInSet: _accessibilityPosInSet, // Windows
             accessibilitySetSize: _accessibilitySetSize, // Windows
-            accessible: _accessible,
-            allowFontScaling: allowFontScaling !== false,
-            disabled: _disabled,
-            ellipsizeMode: ellipsizeMode ?? 'tail',
+            ellipsizeMode: ellipsizeMode ?? 'tail', // Windows
             nativeID: _nativeID,
             numberOfLines: _numberOfLines,
             selectable: _selectable,
             selectionColor: _selectionColor,
             style: _style,
+            disabled: disabled,
             children,
           }}
           textPressabilityProps={{
@@ -312,85 +232,132 @@ const TextImpl: component(
           }}
         />
       );
-    } else {
-      nativeText = (
-        <NativeText
-          {...restProps}
-          accessibilityLabel={_accessibilityLabel}
-          accessibilityState={_accessibilityState}
-          accessibilityLevel={_accessibilityLevel} // Windows
-          accessibilityPosInSet={_accessibilityPosInSet} // Windows
-          accessibilitySetSize={_accessibilitySetSize} // Windows
-          accessible={_accessible}
-          allowFontScaling={allowFontScaling !== false}
-          disabled={_disabled}
-          ellipsizeMode={ellipsizeMode ?? 'tail'}
-          nativeID={_nativeID}
-          numberOfLines={_numberOfLines}
-          ref={forwardedRef}
-          selectable={_selectable}
-          selectionColor={_selectionColor}
-          style={_style}>
-          {children}
-        </NativeText>
-      );
     }
 
-    // [Windows
-    // $FlowFixMe[unclear-type]
-    let styleProps: ViewStyleProp = (style: any); // Flow style type casting
-    if (
-      global.RN$Bridgeless !== true && // [Windows] Fabric text handles borders, but on paper we need to wrap it in an extra view
-      styleProps &&
-      styleProps.borderColor != null &&
-      (styleProps.borderWidth != null ||
-        styleProps.borderBottomWidth != null ||
-        styleProps.borderEndWidth != null ||
-        styleProps.borderLeftWidth != null ||
-        styleProps.borderRightWidth != null ||
-        styleProps.borderStartWidth != null ||
-        styleProps.borderTopWidth != null)
-    ) {
-      return (
-        <View style={styleProps}>
-          <TextAncestor.Provider value={true}>
-            {nativeText}
-          </TextAncestor.Provider>
-        </View>
-      );
+    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 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 !== false, // [Windows #13996 - default value is accessible !== false]
+  });
+
+  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}
+        accessibilityLevel={_accessibilityLevel} // Windows
+        accessibilityPosInSet={_accessibilityPosInSet} // Windows
+        accessibilitySetSize={_accessibilitySetSize} // Windows
+        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;
+      }
     }
-    // Windows]
-
-    if (children == null) {
+    if (!hasNonTextChild) {
       return nativeText;
     }
+  } else if (typeof children !== 'object') {
+    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;
-        }
-      }
-      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>
+  );
+};
 
 TextImpl.displayName = 'Text';
 
@@ -542,7 +509,14 @@ type NativePressableTextProps = $ReadOnly<{
 const NativePressableVirtualText: component(
   ref: React.RefSetter<TextForwardRef>,
   ...props: NativePressableTextProps
-) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+) = ({
+  ref: forwardedRef,
+  textProps,
+  textPressabilityProps,
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...NativePressableTextProps,
+}) => {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
@@ -556,7 +530,7 @@ const NativePressableVirtualText: component(
       ref={forwardedRef}
     />
   );
-});
+};
 
 /**
  * Wrap the NativeText component and initialize pressability.
@@ -567,7 +541,14 @@ const NativePressableVirtualText: component(
 const NativePressableText: component(
   ref: React.RefSetter<TextForwardRef>,
   ...props: NativePressableTextProps
-) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+) = ({
+  ref: forwardedRef,
+  textProps,
+  textPressabilityProps,
+}: {
+  ref?: React.RefSetter<TextForwardRef>,
+  ...NativePressableTextProps,
+}) => {
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
@@ -581,7 +562,7 @@ const NativePressableText: component(
       ref={forwardedRef}
     />
   );
-});
+};
 
 const userSelectToSelectableMap = {
   auto: true,
@@ -596,6 +577,6 @@ const verticalAlignToTextAlignVerticalMap = {
   top: 'top',
   bottom: 'bottom',
   middle: 'center',
-};
+} as const;
 
 export default TextImpl;