@office-iss/react-native-win32 0.0.0-canary.256 → 0.0.0-canary.258

package/Libraries/Text/Text.win32.js

@@ -11,6 +11,7 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -18,6 +19,7 @@ import processColor from '../StyleSheet/processColor';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import TextOptimized from './TextOptimized';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -26,7 +28,7 @@ import {useContext, useMemo, useState} from 'react';
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
+const TextLegacy: React.AbstractComponent<
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 > = React.forwardRef((props: TextProps, forwardedRef) => {
@@ -56,8 +58,10 @@ const Text: React.AbstractComponent<
     'aria-selected': ariaSelected,
     'aria-setsize': ariaSetsize, // Win32
     ellipsizeMode,
+    disabled,
     id,
     nativeID,
+    numberOfLines,
     onLongPress,
     onPress,
     onPressIn,
@@ -69,7 +73,10 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    selectable,
+    selectionColor,
     suppressHighlighting,
+    style,
     ...restProps
   } = props;
 
@@ -113,7 +120,7 @@ const Text: React.AbstractComponent<
   }
 
   const _accessibilityStateDisabled = _accessibilityState?.disabled;
-  const _disabled = restProps.disabled ?? _accessibilityStateDisabled;
+  const _disabled = disabled ?? _accessibilityStateDisabled;
 
   const isPressable =
     (onPress != null ||
@@ -216,29 +223,28 @@ const Text: React.AbstractComponent<
   );
 
   // TODO: Move this processing to the view configuration.
-  const selectionColor =
-    restProps.selectionColor == null
-      ? null
-      : processColor(restProps.selectionColor);
+  const _selectionColor =
+    selectionColor == null ? null : processColor(selectionColor);
 
-  let style = restProps.style;
+  let _style = style;
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
-      style = [restProps.style, {color: 'magenta'}];
+      _style = [style, {color: 'magenta'}];
     }
   }
 
-  let numberOfLines = restProps.numberOfLines;
-  if (numberOfLines != null && !(numberOfLines >= 0)) {
-    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 = restProps.selectable;
-
-  const processedStyle = flattenStyle(style);
+  let _selectable = selectable;
+  const processedStyle = flattenStyle(_style);
   if (processedStyle != null) {
     if (typeof processedStyle.fontWeight === 'number') {
       // $FlowFixMe[cannot-write]
@@ -279,11 +285,12 @@ const Text: React.AbstractComponent<
         isHighlighted={isHighlighted}
         isPressable={isPressable}
         nativeID={_nativeID}
-        numberOfLines={numberOfLines}
+        numberOfLines={_numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
-        selectionColor={selectionColor}
+        selectionColor={_selectionColor}
         style={processedStyle}
+        disabled={disabled}
       />
     );
   }
@@ -325,17 +332,17 @@ const Text: React.AbstractComponent<
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         nativeID={_nativeID}
-        numberOfLines={numberOfLines}
+        numberOfLines={_numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
-        selectionColor={selectionColor}
+        selectionColor={_selectionColor}
         style={processedStyle}
       />
     </TextAncestor.Provider>
   );
 });
 
-Text.displayName = 'Text';
+TextLegacy.displayName = 'TextLegacy';
 
 /**
  * Returns false until the first time `newValue` is true, after which this will
@@ -365,4 +372,17 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  if (ReactNativeFeatureFlags.shouldUseOptimizedText()) {
+    return <TextOptimized {...props} ref={forwardedRef} />;
+  } else {
+    return <TextLegacy {...props} ref={forwardedRef} />;
+  }
+});
+
+Text.displayName = 'Text';
+
 module.exports = Text;

package/Libraries/Text/TextNativeComponent.js

@@ -17,7 +17,7 @@ import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
 
-type NativeTextProps = $ReadOnly<{
+export type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,

package/Libraries/Text/TextNativeComponent.win32.js

@@ -17,7 +17,7 @@ import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
 
-type NativeTextProps = $ReadOnly<{
+export type NativeTextProps = $ReadOnly<{
   ...TextProps,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,

package/Libraries/Text/TextOptimized.js

@@ -0,0 +1,538 @@
+/**
+ * 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
+ */
+
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {NativeTextProps} from './TextNativeComponent';
+import type {PressRetentionOffset, TextProps} from './TextProps';
+
+import * as PressabilityDebug from '../Pressability/PressabilityDebug';
+import usePressability from '../Pressability/usePressability';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import processColor from '../StyleSheet/processColor';
+import Platform from '../Utilities/Platform';
+import TextAncestor from './TextAncestor';
+import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import * as React from 'react';
+import {useContext, useMemo, useState} from 'react';
+
+type TextForwardRef = React.ElementRef<
+  typeof NativeText | typeof NativeVirtualText,
+>;
+
+/**
+ * Text is the fundamental component for displaying text.
+ *
+ * @see https://reactnative.dev/docs/text
+ *
+ * NOTE: This file is a short term fork of `Text` for the purpose of performance
+ *       testing. Any changes to either this component or `Text` should be avoided
+ *       while this file exists.
+ *
+ *       Specific differences from `Text`:
+ *        - Lazy init Pressability via a nested component
+ *        - Skip children context wrapper when safe.
+ *        - Move props destructuring to function param.
+ */
+const TextOptimized: 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 _accessibilityStateDisabled = _accessibilityState?.disabled;
+      const _disabled = disabled ?? _accessibilityStateDisabled;
+
+      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);
+
+      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 _selectable = selectable;
+
+      const processedStyle = flattenStyle(_style);
+      if (processedStyle != null) {
+        if (typeof processedStyle.fontWeight === 'number') {
+          // $FlowFixMe[cannot-write]
+          processedStyle.fontWeight = processedStyle.fontWeight.toString();
+        }
+
+        if (processedStyle.userSelect != null) {
+          _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+          // $FlowFixMe[cannot-write]
+          delete processedStyle.userSelect;
+        }
+
+        if (processedStyle.verticalAlign != null) {
+          // $FlowFixMe[cannot-write]
+          processedStyle.textAlignVertical =
+            verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+          // $FlowFixMe[cannot-write]
+          delete processedStyle.verticalAlign;
+        }
+      }
+
+      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: processedStyle,
+                disabled: disabled,
+                children,
+              }}
+              textPressabilityProps={{
+                onLongPress,
+                onPress,
+                onPressIn,
+                onPressOut,
+                onResponderGrant,
+                onResponderMove,
+                onResponderRelease,
+                onResponderTerminate,
+                onResponderTerminationRequest,
+                onStartShouldSetResponder,
+                pressRetentionOffset,
+                suppressHighlighting,
+              }}
+            />
+          );
+        }
+
+        return (
+          <NativeVirtualText
+            {...restProps}
+            accessibilityLabel={_accessibilityLabel}
+            accessibilityState={_accessibilityState}
+            isHighlighted={false}
+            isPressable={false}
+            nativeID={_nativeID}
+            numberOfLines={_numberOfLines}
+            ref={forwardedRef}
+            selectable={_selectable}
+            selectionColor={_selectionColor}
+            style={processedStyle}
+            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,
+      });
+
+      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: processedStyle,
+              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'}
+            isHighlighted={false}
+            nativeID={_nativeID}
+            numberOfLines={_numberOfLines}
+            ref={forwardedRef}
+            selectable={_selectable}
+            selectionColor={_selectionColor}
+            style={processedStyle}>
+            {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;
+          }
+        }
+        if (!hasNonTextChild) {
+          return nativeText;
+        }
+      } else if (typeof children !== 'object') {
+        return nativeText;
+      }
+
+      return (
+        <TextAncestor.Provider value={true}>{nativeText}</TextAncestor.Provider>
+      );
+    },
+  );
+
+TextOptimized.displayName = 'TextOptimized';
+
+type TextPressabilityProps = $ReadOnly<{
+  onLongPress?: ?(event: PressEvent) => mixed,
+  onPress?: ?(event: PressEvent) => mixed,
+  onPressIn?: ?(event: PressEvent) => mixed,
+  onPressOut?: ?(event: PressEvent) => mixed,
+  onResponderGrant?: ?(event: PressEvent) => void,
+  onResponderMove?: ?(event: PressEvent) => void,
+  onResponderRelease?: ?(event: PressEvent) => void,
+  onResponderTerminate?: ?(event: PressEvent) => void,
+  onResponderTerminationRequest?: ?() => boolean,
+  onStartShouldSetResponder?: ?() => boolean,
+  pressRetentionOffset?: ?PressRetentionOffset,
+  suppressHighlighting?: ?boolean,
+}>;
+
+/**
+ * Hook that handles setting up Pressability of Text components.
+ *
+ * NOTE: This hook is relatively expensive so it should only be used absolutely necessary.
+ */
+function useTextPressability({
+  onLongPress,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  onResponderTerminationRequest,
+  onStartShouldSetResponder,
+  pressRetentionOffset,
+  suppressHighlighting,
+}: TextPressabilityProps) {
+  const [isHighlighted, setHighlighted] = useState(false);
+
+  // Setup pressability config and wrap callbacks needs to track the highlight state.
+  const config = useMemo(() => {
+    let _onPressIn = onPressIn;
+    let _onPressOut = onPressOut;
+
+    // Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
+    // in the best case, and cause issues with text selection in the worst case. Forcing
+    // the isHighlighted prop to false on all platforms except iOS.
+    if (Platform.OS === 'ios') {
+      _onPressIn = (event: PressEvent) => {
+        setHighlighted(suppressHighlighting == null || !suppressHighlighting);
+        onPressIn?.(event);
+      };
+
+      _onPressOut = (event: PressEvent) => {
+        setHighlighted(false);
+        onPressOut?.(event);
+      };
+    }
+
+    return {
+      disabled: false,
+      pressRectOffset: pressRetentionOffset,
+      onLongPress,
+      onPress,
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+    };
+  }, [
+    pressRetentionOffset,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    suppressHighlighting,
+  ]);
+
+  // Init the pressability class
+  const eventHandlers = usePressability(config);
+
+  // Create NativeText event handlers which proxy events to pressability
+  const eventHandlersForText = useMemo(
+    () =>
+      eventHandlers == null
+        ? null
+        : {
+            onResponderGrant(event: PressEvent) {
+              eventHandlers.onResponderGrant(event);
+              if (onResponderGrant != null) {
+                onResponderGrant(event);
+              }
+            },
+            onResponderMove(event: PressEvent) {
+              eventHandlers.onResponderMove(event);
+              if (onResponderMove != null) {
+                onResponderMove(event);
+              }
+            },
+            onResponderRelease(event: PressEvent) {
+              eventHandlers.onResponderRelease(event);
+              if (onResponderRelease != null) {
+                onResponderRelease(event);
+              }
+            },
+            onResponderTerminate(event: PressEvent) {
+              eventHandlers.onResponderTerminate(event);
+              if (onResponderTerminate != null) {
+                onResponderTerminate(event);
+              }
+            },
+            onClick: eventHandlers.onClick,
+            onResponderTerminationRequest:
+              onResponderTerminationRequest != null
+                ? onResponderTerminationRequest
+                : eventHandlers.onResponderTerminationRequest,
+            onStartShouldSetResponder:
+              onStartShouldSetResponder != null
+                ? onStartShouldSetResponder
+                : eventHandlers.onStartShouldSetResponder,
+          },
+    [
+      eventHandlers,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
+    ],
+  );
+
+  // Return the highlight state and NativeText event handlers
+  return useMemo(
+    () => [isHighlighted, eventHandlersForText],
+    [isHighlighted, eventHandlersForText],
+  );
+}
+
+type NativePressableTextProps = $ReadOnly<{
+  textProps: NativeTextProps,
+  textPressabilityProps: TextPressabilityProps,
+}>;
+
+/**
+ * Wrap the NativeVirtualText component and initialize pressability.
+ *
+ * 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 [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
+
+  return (
+    <NativeVirtualText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
+});
+
+/**
+ * Wrap the NativeText component and initialize pressability.
+ *
+ * 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 [isHighlighted, eventHandlersForText] = useTextPressability(
+    textPressabilityProps,
+  );
+
+  return (
+    <NativeText
+      {...textProps}
+      {...eventHandlersForText}
+      isHighlighted={isHighlighted}
+      isPressable={true}
+      ref={forwardedRef}
+    />
+  );
+});
+
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
+
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
+module.exports = TextOptimized;