react-native-windows 0.0.0-canary.813 → 0.0.0-canary.815

package/.flowconfig

@@ -146,4 +146,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.231.0
+^0.232.0

package/Libraries/Components/Button.js

@@ -280,7 +280,13 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
+const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof Touchable>,
+> = React.forwardRef((props: ButtonProps, ref) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -345,8 +351,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
   );
   const formattedTitle =
     Platform.OS === 'android' ? title.toUpperCase() : title;
-  const Touchable =
-    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
   // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
   const _importantForAccessibility =
@@ -374,7 +378,8 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       testID={testID}
       disabled={disabled}
       onPress={onPress}
-      touchSoundDisabled={touchSoundDisabled}>
+      touchSoundDisabled={touchSoundDisabled}
+      ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>
           {formattedTitle}
@@ -382,7 +387,7 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       </View>
     </Touchable>
   );
-};
+});
 
 Button.displayName = 'Button';
 

package/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -29,6 +29,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     overScrollMode: true,
     pagingEnabled: true,
     persistentScrollbar: true,
+    horizontal: true,
     scrollEnabled: true,
     scrollPerfTag: true,
     sendMomentumEvents: true,

package/Libraries/Components/ScrollView/ScrollView.js

@@ -33,6 +33,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Dimensions from '../../Utilities/Dimensions';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';
 import Platform from '../../Utilities/Platform';
+import EventEmitter from '../../vendor/emitter/EventEmitter';
 import Keyboard from '../Keyboard/Keyboard';
 import TextInputState from '../TextInput/TextInputState';
 import View from '../View/View';
@@ -676,6 +677,9 @@ export type Props = $ReadOnly<{|
 
 type State = {|
   layoutHeight: ?number,
+  onScrollEmitter: ?EventEmitter<{
+    scroll: [{x: number, y: number}],
+  }>,
 |};
 
 const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
@@ -761,6 +765,7 @@ class ScrollView extends React.Component<Props, State> {
 
   state: State = {
     layoutHeight: null,
+    onScrollEmitter: null,
   };
 
   componentDidMount() {
@@ -829,6 +834,8 @@ class ScrollView extends React.Component<Props, State> {
     if (this._scrollAnimatedValueAttachment) {
       this._scrollAnimatedValueAttachment.detach();
     }
+
+    this.state.onScrollEmitter?.removeAllListeners();
   }
 
   /**
@@ -948,6 +955,40 @@ class ScrollView extends React.Component<Props, State> {
     Commands.flashScrollIndicators(this._scrollView.nativeInstance);
   };
 
+  _subscribeToOnScroll: (
+    callback: ({x: number, y: number}) => void,
+  ) => EventSubscription = callback => {
+    // An undefined value means the listener has not been added, yet.
+    // A null value means the listener has been removed.
+    let subscription: ?EventSubscription;
+
+    this.setState(
+      ({onScrollEmitter}) => ({
+        onScrollEmitter: onScrollEmitter ?? new EventEmitter(),
+      }),
+      () => {
+        // If `subscription` is null, that means it was removed before we got
+        // here so do nothing.
+        if (subscription !== null) {
+          subscription = nullthrows(this.state.onScrollEmitter).addListener(
+            'scroll',
+            callback,
+          );
+        }
+      },
+    );
+
+    return {
+      remove() {
+        // If `subscription` was created before this invocation, remove it.
+        subscription?.remove();
+        // Record this invocation by setting `subscription` to null, in case it
+        // ends up being created after this invocation.
+        subscription = null;
+      },
+    };
+  };
+
   /**
    * This method should be used as the callback to onFocus in a TextInputs'
    * parent view. Note that any module using this mixin needs to return
@@ -1154,6 +1195,11 @@ class ScrollView extends React.Component<Props, State> {
   _handleScroll = (e: ScrollEvent) => {
     this._observedScrollSinceBecomingResponder = true;
     this.props.onScroll && this.props.onScroll(e);
+
+    this.state.onScrollEmitter?.emit('scroll', {
+      x: e.nativeEvent.contentOffset.x,
+      y: e.nativeEvent.contentOffset.y,
+    });
   };
 
   _handleLayout = (e: LayoutEvent) => {
@@ -1202,6 +1248,8 @@ class ScrollView extends React.Component<Props, State> {
           scrollToEnd: this.scrollToEnd,
           flashScrollIndicators: this.flashScrollIndicators,
           scrollResponderZoomTo: this.scrollResponderZoomTo,
+          // TODO: Replace unstable_subscribeToOnScroll once scrollView.addEventListener('scroll', (e: ScrollEvent) => {}, {passive: false});
+          unstable_subscribeToOnScroll: this._subscribeToOnScroll,
           scrollResponderScrollNativeHandleToKeyboard:
             this.scrollResponderScrollNativeHandleToKeyboard,
         },
@@ -1778,6 +1826,7 @@ class ScrollView extends React.Component<Props, State> {
       onScroll: this._handleScroll,
       endDraggingSensitivityMultiplier:
         experimental_endDraggingSensitivityMultiplier,
+      enableSyncOnScroll: this.state.onScrollEmitter ? true : undefined,
       scrollEventThrottle: hasStickyHeaders
         ? 1
         : this.props.scrollEventThrottle,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -72,6 +72,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
+          horizontal: true,
           endFillColor: {
             process: require('../../StyleSheet/processColor').default,
           },
@@ -133,6 +134,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
+          enableSyncOnScroll: true, // iOS-Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

package/Libraries/Components/ScrollView/ScrollViewNativeComponent.windows.js

@@ -72,6 +72,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
+          horizontal: true,
           endFillColor: {
             process: require('../../StyleSheet/processColor').default,
           },
@@ -133,6 +134,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           contentInsetAdjustmentBehavior: true,
           decelerationRate: true,
           endDraggingSensitivityMultiplier: true,
+          enableSyncOnScroll: true, // iOS-Fabric only.
           directionalLockEnabled: true,
           disableIntervalMomentum: true,
           indicatorStyle: true,

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

@@ -1310,9 +1310,9 @@ function InternalTextInput(props: Props): React.Node {
               );
             }
           },
-          // TODO: Fix this returning true on null === null, when no input is focused
           isFocused(): boolean {
-            return TextInputState.currentlyFocusedInput() === inputRef.current;
+            const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
+            return currentlyFocusedInput !== null && currentlyFocusedInput === inputRef.current;
           },
           getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
             return inputRef.current;

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

@@ -11,7 +11,6 @@ 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 {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
@@ -70,22 +69,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;
 }
 
 /**

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,123 @@ 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,
+
+    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);
+};