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

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -818,33 +818,12 @@ export type Props = $ReadOnly<{|
    */
   onChange?: ?(e: ChangeEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   *
-   * @platform ios
-   */
-  unstable_onChangeSync?: ?(e: ChangeEvent) => mixed,
-
   /**
    * Callback that is called when the text input's text changes.
    * Changed text is passed as an argument to the callback handler.
    */
   onChangeText?: ?(text: string) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   * Callback that is called when the text input's text changes.
-   * Changed text is passed as an argument to the callback handler.
-   *
-   * @platform ios
-   */
-  unstable_onChangeTextSync?: ?(text: string) => mixed,
-
   /**
    * Callback that is called when the text input's content size changes.
    * This will be called with
@@ -873,21 +852,6 @@ export type Props = $ReadOnly<{|
    */
   onKeyPress?: ?(e: KeyPressEvent) => mixed,
 
-  /**
-   * DANGER: this API is not stable and will change in the future.
-   *
-   * Callback will be called on the main thread and may result in dropped frames.
-   *
-   * Callback that is called when a key is pressed.
-   * This will be called with `{ nativeEvent: { key: keyValue } }`
-   * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
-   * the typed-in character otherwise including `' '` for space.
-   * Fires before `onChange` callbacks.
-   *
-   * @platform ios
-   */
-  unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
-
   /**
    * Called when a single tap gesture is detected.
    */
@@ -1212,12 +1176,14 @@ function InternalTextInput(props: Props): React.Node {
         };
 
   const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-
   const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
   const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: ?Selection,
+    selection: Selection,
     mostRecentEventCount: number,
-  |}>({selection, mostRecentEventCount});
+  |}>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
 
   const lastNativeSelection = lastNativeSelectionState.selection;
 
@@ -1347,12 +1313,8 @@ function InternalTextInput(props: Props): React.Node {
             }
           },
           isFocused(): boolean {
-            const currentlyFocusedInput =
-              TextInputState.currentlyFocusedInput();
-            return (
-              currentlyFocusedInput !== null &&
-              currentlyFocusedInput === inputRef.current
-            );
+            const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
+            return currentlyFocusedInput !== null && currentlyFocusedInput === inputRef.current;
           },
           getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
             return inputRef.current;
@@ -1395,26 +1357,6 @@ function InternalTextInput(props: Props): React.Node {
     setMostRecentEventCount(event.nativeEvent.eventCount);
   };
 
-  const _onChangeSync = (event: ChangeEvent) => {
-    const currentText = event.nativeEvent.text;
-    props.unstable_onChangeSync && props.unstable_onChangeSync(event);
-    props.unstable_onChangeTextSync &&
-      props.unstable_onChangeTextSync(currentText);
-
-    if (inputRef.current == null) {
-      // calling `props.onChange` or `props.onChangeText`
-      // may clean up the input itself. Exits here.
-      return;
-    }
-
-    setLastNativeText(currentText);
-    // This must happen last, after we call setLastNativeText.
-    // Different ordering can cause bugs when editing AndroidTextInputs
-    // with multiple Fragments.
-    // We must update this so that controlled input updates work.
-    setMostRecentEventCount(event.nativeEvent.eventCount);
-  };
-
   const _onSelectionChange = (event: SelectionChangeEvent) => {
     props.onSelectionChange && props.onSelectionChange(event);
 
@@ -1607,6 +1549,12 @@ function InternalTextInput(props: Props): React.Node {
 
   const style = flattenStyle<TextStyleProp>(props.style);
 
+  if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.fontWeight = style?.fontWeight.toString();
+  }
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
@@ -1620,10 +1568,6 @@ function InternalTextInput(props: Props): React.Node {
           style.paddingVertical == null &&
           style.paddingTop == null));
 
-    const useOnChangeSync =
-      (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
-      !(props.onChange || props.onChangeText);
-
     textInput = (
       <RCTTextInputView
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
@@ -1640,15 +1584,14 @@ function InternalTextInput(props: Props): React.Node {
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
-        onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
-        onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
+        selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
           style,
@@ -1926,10 +1869,13 @@ const ExportedForwardRef: React.AbstractComponent<
           : undefined
       }
       textContentType={
-        Platform.OS === 'ios' &&
-        autoComplete &&
-        autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe
+        textContentType != null
+          ? textContentType
+          : Platform.OS === 'ios' &&
+            autoComplete &&
+            autoComplete in autoCompleteWebToTextContentTypeMap
+          ? // $FlowFixMe[invalid-computed-prop]
+            // $FlowFixMe[prop-missing]
             autoCompleteWebToTextContentTypeMap[autoComplete]
           : textContentType
       }

package/Libraries/Components/TextInput/WindowsTextInputNativeComponent.js

@@ -385,15 +385,6 @@ export type NativeProps = $ReadOnly<{|
     |}>,
   >,
 
-  onTextInput?: ?BubblingEventHandler<
-    $ReadOnly<{|
-      target: Int32,
-      text: string,
-      previousText: string,
-      range: $ReadOnly<{|start: Double, end: Double|}>,
-    |}>,
-  >,
-
   /**
    * Callback that is called when text input ends.
    */
@@ -647,10 +638,34 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   uiViewClassName: 'WindowsTextInput',
   bubblingEventTypes: {
-    topTextInput: {
+    topBlur: {
+      phasedRegistrationNames: {
+        bubbled: 'onBlur',
+        captured: 'onBlurCapture',
+      },
+    },
+    topEndEditing: {
+      phasedRegistrationNames: {
+        bubbled: 'onEndEditing',
+        captured: 'onEndEditingCapture',
+      },
+    },
+    topFocus: {
+      phasedRegistrationNames: {
+        bubbled: 'onFocus',
+        captured: 'onFocusCapture',
+      },
+    },
+    topKeyPress: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyPress',
+        captured: 'onKeyPressCapture',
+      },
+    },
+    topSubmitEditing: {
       phasedRegistrationNames: {
-        bubbled: 'onTextInput',
-        captured: 'onTextInputCapture',
+        bubbled: 'onSubmitEditing',
+        captured: 'onSubmitEditingCapture',
       },
     },
   },

package/Libraries/Components/Touchable/Touchable.js

@@ -40,8 +40,8 @@ const extractSingleTouch = (nativeEvent: {
   return !hasTouches && hasChangedTouches
     ? changedTouches[0]
     : hasTouches
-    ? touches[0]
-    : nativeEvent;
+      ? touches[0]
+      : nativeEvent;
 };
 
 /**

package/Libraries/Components/Touchable/TouchableHighlight.d.ts

@@ -8,12 +8,9 @@
  */
 
 import type * as React from 'react';
-import {Constructor} from '../../../types/private/Utilities';
-import {TimerMixin} from '../../../types/private/TimerMixin';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
-import {TouchableMixin} from './Touchable';
+import {View} from '../../Components/View/View';
 import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 /**
@@ -60,9 +57,6 @@ export interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
  *
  * @see https://reactnative.dev/docs/touchablehighlight
  */
-declare class TouchableHighlightComponent extends React.Component<TouchableHighlightProps> {}
-declare const TouchableHighlightBase: Constructor<NativeMethods> &
-  Constructor<TimerMixin> &
-  Constructor<TouchableMixin> &
-  typeof TouchableHighlightComponent;
-export class TouchableHighlight extends TouchableHighlightBase {}
+export const TouchableHighlight: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<TouchableHighlightProps> & React.RefAttributes<View>
+>;

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -342,7 +342,9 @@ class TouchableHighlight extends React.Component<Props, State> {
         nextFocusRight={this.props.nextFocusRight}
         nextFocusUp={this.props.nextFocusUp}
         focusable={
-          this.props.focusable !== false && this.props.onPress !== undefined
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
         }
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}

package/Libraries/Components/Touchable/TouchableHighlight.windows.js

@@ -350,7 +350,9 @@ class TouchableHighlight extends React.Component<Props, State> {
         nextFocusRight={this.props.nextFocusRight}
         nextFocusUp={this.props.nextFocusUp}
         focusable={
-          this.props.focusable !== false && this.props.onPress !== undefined
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
         }
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}

package/Libraries/Components/Touchable/TouchableOpacity.d.ts

@@ -8,11 +8,7 @@
  */
 
 import type * as React from 'react';
-import {Constructor} from '../../../types/private/Utilities';
-import {TimerMixin} from '../../../types/private/TimerMixin';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
-import {TVParallaxProperties} from '../View/ViewPropTypes';
-import {TouchableMixin} from './Touchable';
+import {View} from '../../Components/View/View';
 import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 export interface TVProps {
@@ -70,22 +66,6 @@ export interface TouchableOpacityProps
    * Defaults to 0.2
    */
   activeOpacity?: number | undefined;
-
-  /**
-   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
-   *
-   * enabled: If true, parallax effects are enabled.  Defaults to true.
-   * shiftDistanceX: Defaults to 2.0.
-   * shiftDistanceY: Defaults to 2.0.
-   * tiltAngle: Defaults to 0.05.
-   * magnification: Defaults to 1.0.
-   * pressMagnification: Defaults to 1.0.
-   * pressDuration: Defaults to 0.3.
-   * pressDelay: Defaults to 0.0.
-   *
-   * @platform android
-   */
-  tvParallaxProperties?: TVParallaxProperties | undefined;
 }
 
 /**
@@ -96,14 +76,6 @@ export interface TouchableOpacityProps
  *
  * @see https://reactnative.dev/docs/touchableopacity
  */
-declare class TouchableOpacityComponent extends React.Component<TouchableOpacityProps> {}
-declare const TouchableOpacityBase: Constructor<TimerMixin> &
-  Constructor<TouchableMixin> &
-  Constructor<NativeMethods> &
-  typeof TouchableOpacityComponent;
-export class TouchableOpacity extends TouchableOpacityBase {
-  /**
-   * Animate the touchable to a new opacity.
-   */
-  setOpacityTo: (value: number) => void;
-}
+export const TouchableOpacity: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<TouchableOpacityProps> & React.RefAttributes<View>
+>;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -287,7 +287,9 @@ class TouchableOpacity extends React.Component<Props, State> {
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         hitSlop={this.props.hitSlop}
         focusable={
-          this.props.focusable !== false && this.props.onPress !== undefined
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
         }
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -295,7 +295,9 @@ class TouchableOpacity extends React.Component<Props, State> {
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         hitSlop={this.props.hitSlop}
         focusable={
-          this.props.focusable !== false && this.props.onPress !== undefined
+          this.props.focusable !== false &&
+          this.props.onPress !== undefined &&
+          !this.props.disabled
         }
         ref={this.props.hostRef}
         accessibilityPosInSet={this.props.accessibilityPosInSet} // [Windows]

package/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts

@@ -42,6 +42,8 @@ export interface TouchableWithoutFeedbackProps
     AccessibilityProps {
   children?: React.ReactNode | undefined;
 
+  rejectResponderTermination?: boolean | undefined;
+
   /**
    * Delay in ms, from onPressIn, before onLongPress is called.
    */
@@ -62,6 +64,12 @@ export interface TouchableWithoutFeedbackProps
    */
   disabled?: boolean | undefined;
 
+  /**
+   * Whether this View should be focusable with a non-touch input device,
+   * eg. receive focus with a hardware keyboard / TV remote.
+   */
+  focusable?: boolean | undefined;
+
   /**
    * This defines how far your touch can start away from the button.
    * This is added to pressRetentionOffset when moving off of the button.

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -24,11 +24,10 @@ import type {
 } from '../../Types/CoreEventTypes';
 
 import View from '../../Components/View/View';
-import Pressability, {
-  type PressabilityConfig,
-} from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import usePressability from '../../Pressability/usePressability';
 import * as React from 'react';
+import {useMemo} from 'react';
 
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
@@ -85,10 +84,6 @@ type Props = $ReadOnly<{|
   touchSoundDisabled?: ?boolean,
 |}>;
 
-type State = $ReadOnly<{|
-  pressability: Pressability,
-|}>;
-
 const PASSTHROUGH_PROPS = [
   'accessibilityActions',
   'accessibilityElementsHidden',
@@ -115,115 +110,126 @@ const PASSTHROUGH_PROPS = [
   'testID',
 ];
 
-class TouchableWithoutFeedback extends React.Component<Props, State> {
-  state: State = {
-    pressability: new Pressability(createPressabilityConfig(this.props)),
-  };
-
-  render(): React.Node {
-    const element = React.Children.only<$FlowFixMe>(this.props.children);
-    const children: Array<React.Node> = [element.props.children];
-    const ariaLive = this.props['aria-live'];
-
-    if (__DEV__) {
-      if (element.type === View) {
-        children.push(
-          <PressabilityDebugView color="red" hitSlop={this.props.hitSlop} />,
-        );
-      }
-    }
-
-    let _accessibilityState = {
-      busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
-      checked:
-        this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
+module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
+  const {
+    disabled,
+    rejectResponderTermination,
+    'aria-disabled': ariaDisabled,
+    accessibilityState,
+    hitSlop,
+    delayLongPress,
+    delayPressIn,
+    delayPressOut,
+    pressRetentionOffset,
+    touchSoundDisabled,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+  } = props;
+
+  const pressabilityConfig = useMemo(
+    () => ({
+      cancelable: !rejectResponderTermination,
       disabled:
-        this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
-      expanded:
-        this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
-      selected:
-        this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
-    };
-
-    // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
-    // adopting `Pressability`, so preserve that behavior.
-    const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
-      this.state.pressability.getEventHandlers();
-
-    const elementProps: {[string]: mixed, ...} = {
-      ...eventHandlersWithoutBlurAndFocus,
-      accessible: this.props.accessible !== false,
-      accessibilityState:
-        this.props.disabled != null
-          ? {
-              ..._accessibilityState,
-              disabled: this.props.disabled,
-            }
-          : _accessibilityState,
-      focusable:
-        this.props.focusable !== false && this.props.onPress !== undefined,
-
-      accessibilityElementsHidden:
-        this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
-      importantForAccessibility:
-        this.props['aria-hidden'] === true
-          ? 'no-hide-descendants'
-          : this.props.importantForAccessibility,
-      accessibilityLiveRegion:
-        ariaLive === 'off'
-          ? 'none'
-          : ariaLive ?? this.props.accessibilityLiveRegion,
-      nativeID: this.props.id ?? this.props.nativeID,
-    };
-    for (const prop of PASSTHROUGH_PROPS) {
-      if (this.props[prop] !== undefined) {
-        elementProps[prop] = this.props[prop];
-      }
+        disabled !== null
+          ? disabled
+          : ariaDisabled ?? accessibilityState?.disabled,
+      hitSlop: hitSlop,
+      delayLongPress: delayLongPress,
+      delayPressIn: delayPressIn,
+      delayPressOut: delayPressOut,
+      minPressDuration: 0,
+      pressRectOffset: pressRetentionOffset,
+      android_disableSound: touchSoundDisabled,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      onLongPress: onLongPress,
+      onPress: onPress,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+    }),
+    [
+      rejectResponderTermination,
+      disabled,
+      ariaDisabled,
+      accessibilityState?.disabled,
+      hitSlop,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      pressRetentionOffset,
+      touchSoundDisabled,
+      _onBlur,
+      _onFocus,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+    ],
+  );
+
+  const eventHandlers = usePressability(pressabilityConfig);
+
+  const element = React.Children.only<$FlowFixMe>(props.children);
+  const children: Array<React.Node> = [element.props.children];
+  const ariaLive = props['aria-live'];
+
+  if (__DEV__) {
+    if (element.type === View) {
+      children.push(
+        <PressabilityDebugView color="red" hitSlop={props.hitSlop} />,
+      );
     }
-
-    // $FlowFixMe[incompatible-call]
-    return React.cloneElement(element, elementProps, ...children);
-  }
-
-  componentDidUpdate(): void {
-    this.state.pressability.configure(createPressabilityConfig(this.props));
-  }
-
-  componentDidMount(): mixed {
-    this.state.pressability.configure(createPressabilityConfig(this.props));
   }
 
-  componentWillUnmount(): void {
-    this.state.pressability.reset();
-  }
-}
+  let _accessibilityState = {
+    busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+    checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+    disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+    expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+    selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+  };
 
-function createPressabilityConfig({
-  'aria-disabled': ariaDisabled,
-  ...props
-}: Props): PressabilityConfig {
-  const accessibilityStateDisabled =
-    ariaDisabled ?? props.accessibilityState?.disabled;
-  return {
-    cancelable: !props.rejectResponderTermination,
-    disabled:
-      props.disabled !== null ? props.disabled : accessibilityStateDisabled,
-    hitSlop: props.hitSlop,
-    delayLongPress: props.delayLongPress,
-    delayPressIn: props.delayPressIn,
-    delayPressOut: props.delayPressOut,
-    minPressDuration: 0,
-    pressRectOffset: props.pressRetentionOffset,
-    android_disableSound: props.touchSoundDisabled,
-    onBlur: props.onBlur,
-    onFocus: props.onFocus,
-    onLongPress: props.onLongPress,
-    onPress: props.onPress,
-    onPressIn: props.onPressIn,
-    onPressOut: props.onPressOut,
+  // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
+  // adopting `Pressability`, so preserve that behavior.
+  const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
+    eventHandlers || {};
+
+  const elementProps: {[string]: mixed, ...} = {
+    ...eventHandlersWithoutBlurAndFocus,
+    accessible: props.accessible !== false,
+    accessibilityState:
+      props.disabled != null
+        ? {
+            ..._accessibilityState,
+            disabled: props.disabled,
+          }
+        : _accessibilityState,
+    focusable:
+      props.focusable !== false &&
+      props.onPress !== undefined &&
+      !props.disabled,
+
+    accessibilityElementsHidden:
+      props['aria-hidden'] ?? props.accessibilityElementsHidden,
+    importantForAccessibility:
+      props['aria-hidden'] === true
+        ? 'no-hide-descendants'
+        : props.importantForAccessibility,
+    accessibilityLiveRegion:
+      ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion,
+    nativeID: props.id ?? props.nativeID,
   };
-}
 
-TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
+  for (const prop of PASSTHROUGH_PROPS) {
+    if (props[prop] !== undefined) {
+      elementProps[prop] = props[prop];
+    }
+  }
 
-module.exports = TouchableWithoutFeedback;
+  // $FlowFixMe[incompatible-call]
+  return React.cloneElement(element, elementProps, ...children);
+};