react-native-windows 0.74.10 → 0.75.0-preview.1

package/Libraries/Text/Text.windows.js

@@ -52,8 +52,10 @@ const Text: React.AbstractComponent<
     'aria-setsize': ariaSetsize, // Windows
     'aria-selected': ariaSelected,
     ellipsizeMode,
+    disabled,
     id,
     nativeID,
+    numberOfLines,
     onLongPress,
     onPress,
     onPressIn,
@@ -65,34 +67,47 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    selectable,
+    selectionColor,
     suppressHighlighting,
+    style,
     ...restProps
   } = props;
 
   const [isHighlighted, setHighlighted] = useState(false);
 
-  let _accessibilityState;
+  const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+
+  let _accessibilityState: ?TextProps['accessibilityState'] =
+    accessibilityState;
   if (
-    accessibilityState != null ||
     ariaBusy != null ||
     ariaChecked != null ||
     ariaDisabled != null ||
     ariaExpanded != null ||
     ariaSelected != null
   ) {
-    _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? accessibilityState?.selected,
-    };
+    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 _disabled =
-    restProps.disabled != null
-      ? restProps.disabled
-      : _accessibilityState?.disabled;
+  const _accessibilityStateDisabled = _accessibilityState?.disabled;
+  const _disabled = disabled ?? _accessibilityStateDisabled;
 
   const nativeTextAccessibilityState =
     _disabled !== _accessibilityState?.disabled
@@ -106,46 +121,47 @@ const Text: React.AbstractComponent<
     _disabled !== true;
 
   const initialized = useLazyInitialization(isPressable);
-  const config = useMemo(
-    () =>
-      initialized
-        ? {
-            disabled: !isPressable,
-            pressRectOffset: pressRetentionOffset,
-            onLongPress,
-            onPress,
-            onPressIn(event: PressEvent) {
-              // 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.
-              setHighlighted(
-                (suppressHighlighting == null || !suppressHighlighting) &&
-                  Platform.OS === 'ios',
-              );
-              onPressIn?.(event);
-            },
-            onPressOut(event: PressEvent) {
-              setHighlighted(false);
-              onPressOut?.(event);
-            },
-            onResponderTerminationRequest_DEPRECATED:
-              onResponderTerminationRequest,
-            onStartShouldSetResponder_DEPRECATED: onStartShouldSetResponder,
-          }
-        : null,
-    [
-      initialized,
-      isPressable,
-      pressRetentionOffset,
+  const config = useMemo(() => {
+    if (!initialized) {
+      return null;
+    }
+
+    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: !isPressable,
+      pressRectOffset: pressRetentionOffset,
       onLongPress,
       onPress,
-      onPressIn,
-      onPressOut,
-      onResponderTerminationRequest,
-      onStartShouldSetResponder,
-      suppressHighlighting,
-    ],
-  );
+      onPressIn: _onPressIn,
+      onPressOut: _onPressOut,
+    };
+  }, [
+    initialized,
+    isPressable,
+    pressRetentionOffset,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    suppressHighlighting,
+  ]);
 
   const eventHandlers = usePressability(config);
   const eventHandlersForText = useMemo(
@@ -179,8 +195,13 @@ const Text: React.AbstractComponent<
             },
             onClick: eventHandlers.onClick,
             onResponderTerminationRequest:
-              eventHandlers.onResponderTerminationRequest,
-            onStartShouldSetResponder: eventHandlers.onStartShouldSetResponder,
+              onResponderTerminationRequest != null
+                ? onResponderTerminationRequest
+                : eventHandlers.onResponderTerminationRequest,
+            onStartShouldSetResponder:
+              onStartShouldSetResponder != null
+                ? onStartShouldSetResponder
+                : eventHandlers.onStartShouldSetResponder,
           },
     [
       eventHandlers,
@@ -188,96 +209,99 @@ const Text: React.AbstractComponent<
       onResponderMove,
       onResponderRelease,
       onResponderTerminate,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
     ],
   );
 
   // TODO: Move this processing to the view configuration.
-  const selectionColor =
-    restProps.selectionColor == null
-      ? null
-      : processColor(restProps.selectionColor);
-
-  let style = restProps.style;
+  const _selectionColor =
+    selectionColor == null ? null : processColor(selectionColor);
 
+  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;
   }
 
-  const hasTextAncestor = useContext(TextAncestor);
-
-  const _accessible = Platform.select({
-    ios: accessible !== false,
-    windows: accessible !== false,
-    default: accessible,
-  });
+  let _selectable = selectable;
+  const processedStyle = flattenStyle(_style);
+  if (processedStyle != null) {
+    if (typeof processedStyle.fontWeight === 'number') {
+      // $FlowFixMe[cannot-write]
+      processedStyle.fontWeight = processedStyle.fontWeight.toString();
+    }
 
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  style = flattenStyle(style);
+    if (processedStyle.userSelect != null) {
+      _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+      // $FlowFixMe[cannot-write]
+      delete processedStyle.userSelect;
+    }
 
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    style.fontWeight = style?.fontWeight.toString();
+    if (processedStyle.verticalAlign != null) {
+      // $FlowFixMe[cannot-write]
+      processedStyle.textAlignVertical =
+        verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+      // $FlowFixMe[cannot-write]
+      delete processedStyle.verticalAlign;
+    }
   }
 
-  let _selectable = restProps.selectable;
-  if (style?.userSelect != null) {
-    // $FlowFixMe[invalid-computed-prop]
-    _selectable = userSelectToSelectableMap[style.userSelect];
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    delete style.userSelect;
-  }
+  const _nativeID = id ?? nativeID;
 
-  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;
+  // 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 _hasOnPressOrOnLongPress =
-    props.onPress != null || props.onLongPress != null;
+  const _accessible = Platform.select({
+    ios: accessible !== false,
+    android:
+      accessible == null ? onPress != null || onLongPress != null : accessible,
+    default: accessible !== false,
+  });
 
+  const hasTextAncestor = useContext(TextAncestor);
   if (hasTextAncestor) {
     return (
       <NativeVirtualText
         {...restProps}
         {...eventHandlersForText}
-        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityLabel={_accessibilityLabel}
+        accessibilityState={_accessibilityState}
         accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
         accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
         accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-        accessibilityState={_accessibilityState}
-        allowFontScaling={allowFontScaling !== false}
-        disabled={_disabled}
-        ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         isPressable={isPressable}
-        nativeID={id ?? nativeID}
-        numberOfLines={numberOfLines}
+        nativeID={_nativeID}
+        numberOfLines={_numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
-        selectionColor={selectionColor}
-        style={style}
+        selectionColor={_selectionColor}
+        style={processedStyle}
       />
     );
+  // [Windows] Following else statement forked due to PR #5740
   } else {
-    let styleProps: ViewStyleProp = (restProps.style: any);
+    let styleProps: ViewStyleProp = (style: any);
     if (
       styleProps &&
       styleProps.borderColor &&
@@ -341,16 +365,12 @@ const Text: React.AbstractComponent<
             <NativeText
               {...textPropsLessStyle}
               {...eventHandlersForText}
-              accessibilityLabel={ariaLabel ?? accessibilityLabel}
+              accessibilityLabel={_accessibilityLabel}
               accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
               accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
               accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-              accessibilityState={nativeTextAccessibilityState}
-              accessible={
-                accessible == null && Platform.OS === 'android'
-                  ? _hasOnPressOrOnLongPress
-                  : _accessible
-              }
+              accessibilityState={_accessibilityState}
+              accessible={_accessible}
               allowFontScaling={allowFontScaling !== false}
               disabled={_disabled}
               ellipsizeMode={ellipsizeMode ?? 'tail'}
@@ -359,7 +379,7 @@ const Text: React.AbstractComponent<
               numberOfLines={numberOfLines}
               ref={forwardedRef}
               selectable={_selectable}
-              selectionColor={selectionColor}
+              selectionColor={_selectionColor}
               style={((rest: any): TextStyleProp)}
             />
           </TextAncestor.Provider>
@@ -371,31 +391,28 @@ const Text: React.AbstractComponent<
           <NativeText
             {...restProps}
             {...eventHandlersForText}
-            accessibilityLabel={ariaLabel ?? accessibilityLabel}
+            accessibilityLabel={_accessibilityLabel}
             accessibilityLevel={ariaLevel ?? accessibilityLevel} // Windows
             accessibilityPosInSet={ariaPosinset ?? accessibilityPosInSet} // Windows
             accessibilitySetSize={ariaSetsize ?? accessibilitySetSize} // Windows
-            accessibilityState={nativeTextAccessibilityState}
-            accessible={
-              accessible == null && Platform.OS === 'android'
-                ? _hasOnPressOrOnLongPress
-                : _accessible
-            }
+            accessibilityState={_accessibilityState}
+            accessible={_accessible}
             allowFontScaling={allowFontScaling !== false}
             disabled={_disabled}
             ellipsizeMode={ellipsizeMode ?? 'tail'}
             isHighlighted={isHighlighted}
-            nativeID={id ?? nativeID}
+            nativeID={_nativeID}
             numberOfLines={numberOfLines}
             ref={forwardedRef}
             selectable={_selectable}
-            selectionColor={selectionColor}
-            style={style}
+            selectionColor={_selectionColor}
+            style={processedStyle}
           />
         </TextAncestor.Provider>
       );
     }
   }
+  // [Windows #5740]
 });
 
 Text.displayName = 'Text';
@@ -428,4 +445,4 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
-module.exports = Text;
+module.exports = Text;

package/Libraries/Text/TextNativeComponent.js

@@ -8,13 +8,14 @@
  * @format
  */
 
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {ProcessedColorValue} from '../StyleSheet/processColor';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {TextProps} from './TextProps';
+
 import {createViewConfig} from '../NativeComponent/ViewConfig';
 import UIManager from '../ReactNative/UIManager';
 import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass';
-import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
-import {type ProcessedColorValue} from '../StyleSheet/processColor';
-import {type PressEvent} from '../Types/CoreEventTypes';
-import {type TextProps} from './TextProps';
 
 type NativeTextProps = $ReadOnly<{
   ...TextProps,

package/Libraries/Text/TextProps.js

@@ -26,23 +26,23 @@ import type {
 } from '../Types/CoreEventTypes';
 import type {Node} from 'react';
 
-export type PressRetentionOffset = $ReadOnly<{|
+export type PressRetentionOffset = $ReadOnly<{
   top: number,
   left: number,
   bottom: number,
   right: number,
-|}>;
+}>;
 
-type PointerEventProps = $ReadOnly<{|
+type PointerEventProps = $ReadOnly<{
   onPointerEnter?: (event: PointerEvent) => void,
   onPointerLeave?: (event: PointerEvent) => void,
   onPointerMove?: (event: PointerEvent) => void,
-|}>;
+}>;
 
 /**
  * @see https://reactnative.dev/docs/text#reference
  */
-export type TextProps = $ReadOnly<{|
+export type TextProps = $ReadOnly<{
   ...PointerEventProps,
 
   /**
@@ -265,4 +265,4 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text.html#linebreakstrategyios
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
-|}>;
+}>;

package/Libraries/Text/TextProps.windows.js

@@ -26,23 +26,23 @@ import type {
 } from '../Types/CoreEventTypes';
 import type {Node} from 'react';
 
-export type PressRetentionOffset = $ReadOnly<{|
+export type PressRetentionOffset = $ReadOnly<{
   top: number,
   left: number,
   bottom: number,
   right: number,
-|}>;
+}>;
 
-type PointerEventProps = $ReadOnly<{|
+type PointerEventProps = $ReadOnly<{
   onPointerEnter?: (event: PointerEvent) => void,
   onPointerLeave?: (event: PointerEvent) => void,
   onPointerMove?: (event: PointerEvent) => void,
-|}>;
+}>;
 
 /**
  * @see https://reactnative.dev/docs/text#reference
  */
-export type TextProps = $ReadOnly<{|
+export type TextProps = $ReadOnly<{
   ...PointerEventProps,
 
   /**
@@ -272,4 +272,4 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text.html#linebreakstrategyios
    */
   lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
-|}>;
+}>;

package/Libraries/TurboModule/TurboModuleRegistry.js

@@ -76,7 +76,8 @@ export function getEnforcing<T: TurboModule>(name: string): T {
     'Verify that a module by this name is registered in the native binary.';
 
   if (shouldReportDebugInfo()) {
-    message += 'Bridgeless mode: ' + (isBridgeless() ? 'true' : 'false') + '. ';
+    message +=
+      ' Bridgeless mode: ' + (isBridgeless() ? 'true' : 'false') + '. ';
     message +=
       'TurboModule interop: ' +
       (isTurboModuleInteropEnabled() ? 'true' : 'false') +

package/Libraries/Types/CodegenTypes.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import type {SyntheticEvent} from './CoreEventTypes';
 
 // Event types
@@ -40,3 +41,5 @@ type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 //
 // eslint-disable-next-line no-unused-vars
 export type WithDefault<Type: DefaultTypes, Value: ?Type | string> = ?Type;
+
+export type EventEmitter<T> = (handler: (T) => mixed) => EventSubscription;

package/Libraries/Utilities/{LoadingView.android.js → DevLoadingView.js}

@@ -12,23 +12,45 @@ import processColor from '../StyleSheet/processColor';
 import Appearance from './Appearance';
 import NativeDevLoadingView from './NativeDevLoadingView';
 
+const COLOR_SCHEME = {
+  dark: {
+    refresh: {
+      backgroundColor: '#2584e8',
+      textColor: '#ffffff',
+    },
+    load: {
+      backgroundColor: '#fafafa',
+      textColor: '#242526',
+    },
+  },
+  default: {
+    refresh: {
+      backgroundColor: '#2584e8',
+      textColor: '#ffffff',
+    },
+    load: {
+      backgroundColor: '#404040',
+      textColor: '#ffffff',
+    },
+  },
+};
+
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
+      const colorScheme =
+        Appearance.getColorScheme() === 'dark'
+          ? COLOR_SCHEME.dark
+          : COLOR_SCHEME.default;
+
+      const colorSet = colorScheme[type];
+
       let backgroundColor;
       let textColor;
 
-      if (type === 'refresh') {
-        backgroundColor = processColor('#2584e8');
-        textColor = processColor('#ffffff');
-      } else if (type === 'load') {
-        if (Appearance.getColorScheme() === 'dark') {
-          backgroundColor = processColor('#fafafa');
-          textColor = processColor('#242526');
-        } else {
-          backgroundColor = processColor('#404040');
-          textColor = processColor('#ffffff');
-        }
+      if (colorSet) {
+        backgroundColor = processColor(colorSet.backgroundColor);
+        textColor = processColor(colorSet.textColor);
       }
 
       NativeDevLoadingView.showMessage(

package/Libraries/Utilities/Dimensions.js

@@ -44,6 +44,7 @@ class Dimensions {
    * @returns {DisplayMetrics? | DisplayMetricsAndroid?} Value for the dimension.
    */
   static get(dim: string): DisplayMetrics | DisplayMetricsAndroid {
+    // $FlowFixMe[invalid-computed-prop]
     invariant(dimensions[dim], 'No dimension set for key ' + dim);
     return dimensions[dim];
   }