react-native-windows 0.74.12 → 0.75.0-preview.2

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

@@ -25,11 +25,11 @@ 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';
+import Animated from '../../Animated/Animated'; // Windows
 
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
@@ -91,10 +91,7 @@ type Props = $ReadOnly<{|
   onMouseLeave?: ?(event: MouseEvent) => void, // [Windows]
   tabIndex?: ?number, // [Windows]
   tooltip?: ?Stringish, // [Windows]
-|}>;
-
-type State = $ReadOnly<{|
-  pressability: Pressability,
+  hostRef?: ?React.Ref<typeof Animated.View>, // [Windows]
 |}>;
 
 const PASSTHROUGH_PROPS = [
@@ -130,117 +127,139 @@ const PASSTHROUGH_PROPS = [
   'tooltip', // [Windows]
 ];
 
-class TouchableWithoutFeedback extends React.Component<Props, State> {
-  state: State = {
-    pressability: new Pressability(createPressabilityConfig(this.props)),
-  };
+// Modify the function to accept the ref prop and forward it
+const TouchableWithoutFeedback: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof Animated.View>,
+> = React.forwardRef(function TouchableWithoutFeedback(props: Props, ref): React.Node {
+  const {
+    disabled,
+    rejectResponderTermination,
+    'aria-disabled': ariaDisabled,
+    accessibilityState,
+    hitSlop,
+    delayLongPress,
+    delayPressIn,
+    delayPressOut,
+    pressRetentionOffset,
+    touchSoundDisabled,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onMouseEnter, // [Windows]
+    onMouseLeave, // [Windows]
+  } = 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,
+  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,
+      onMouseEnter: onMouseEnter, // [Windows]
+      onMouseLeave: onMouseLeave, // [Windows]
+    }),
+    [
+      rejectResponderTermination,
+      disabled,
+      ariaDisabled,
+      accessibilityState?.disabled,
+      hitSlop,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      pressRetentionOffset,
+      touchSoundDisabled,
+      _onBlur,
+      _onFocus,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onMouseEnter, // [Windows]
+      onMouseLeave, // [Windows]
+    ],
+  );
 
-    // $FlowFixMe[incompatible-call]
-    return React.cloneElement(element, elementProps, ...children);
-  }
+  const eventHandlers = usePressability(pressabilityConfig);
 
-  componentDidUpdate(): void {
-    this.state.pressability.configure(createPressabilityConfig(this.props));
-  }
+  const element = React.Children.only<$FlowFixMe>(props.children);
+  const children: Array<React.Node> = [element.props.children];
+  const ariaLive = props['aria-live'];
 
-  componentDidMount(): mixed {
-    this.state.pressability.configure(createPressabilityConfig(this.props));
+  if (__DEV__) {
+    if (element.type === View) {
+      children.push(
+        <PressabilityDebugView color="red" hitSlop={props.hitSlop} />,
+      );
+    }
   }
 
-  componentWillUnmount(): void {
-    this.state.pressability.reset();
-  }
-}
-
-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,
-    onMouseEnter: props.onMouseEnter, // [Windows]
-    onMouseLeave: props.onMouseLeave, // [Windows]
+  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,
+  };
+
+  // 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];
+    }
+  }
+
+  // $FlowFixMe[incompatible-call]
+  return React.cloneElement(element, {...elementProps, ref}, ...children);
+});
 
-module.exports = TouchableWithoutFeedback;
+module.exports = TouchableWithoutFeedback;

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -12,6 +12,7 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
+import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
 import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
@@ -114,6 +115,11 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   transform: {process: processTransform},
   transformOrigin: {process: processTransformOrigin},
 
+  /**
+   * Filter
+   */
+  experimental_filter: {process: processFilter},
+
   /**
    * View
    */

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -33,6 +33,7 @@ const UIView = {
   onMagicTap: true,
   onAccessibilityEscape: true,
   collapsable: true,
+  collapsableChildren: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
   role: true,

package/Libraries/Components/View/ReactNativeViewAttributes.windows.js

@@ -33,6 +33,7 @@ const UIView = {
   onMagicTap: true,
   onAccessibilityEscape: true,
   collapsable: true,
+  collapsableChildren: true,
   needsOffscreenAlphaCompositing: true,
   style: ReactNativeStyleAttributes,
   role: true,

package/Libraries/Components/View/View.js

@@ -10,7 +10,6 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
@@ -53,7 +52,6 @@ const View: React.AbstractComponent<
       id,
       importantForAccessibility,
       nativeID,
-      pointerEvents,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -96,12 +94,6 @@ const View: React.AbstractComponent<
       };
     }
 
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    let style = flattenStyle(otherProps.style);
-
-    // $FlowFixMe[sketchy-null-mixed]
-    const newPointerEvents = style?.pointerEvents || pointerEvents;
-
     const actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -120,9 +112,6 @@ const View: React.AbstractComponent<
             : importantForAccessibility
         }
         nativeID={id ?? nativeID}
-        style={style}
-        // $FlowFixMe[incompatible-type]
-        pointerEvents={newPointerEvents}
         ref={forwardedRef}
       />
     );

package/Libraries/Components/View/View.windows.js

@@ -10,7 +10,6 @@
 
 import type {ViewProps} from './ViewPropTypes';
 
-import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
@@ -64,7 +63,6 @@ const View: React.AbstractComponent<
       id,
       importantForAccessibility,
       nativeID,
-      pointerEvents,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -106,12 +104,6 @@ const View: React.AbstractComponent<
       };
     }
 
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    let style = flattenStyle(otherProps.style);
-
-    // $FlowFixMe[sketchy-null-mixed]
-    const newPointerEvents = style?.pointerEvents || pointerEvents;
-
     const _keyDown = (event: KeyEvent) => {
       if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
         // $FlowFixMe - keyDownEvents was already checked to not be undefined
@@ -254,9 +246,6 @@ const View: React.AbstractComponent<
                   : importantForAccessibility
               }
               nativeID={id ?? nativeID}
-              style={style}
-              // $FlowFixMe[incompatible-type]
-              pointerEvents={newPointerEvents}
               ref={forwardedRef}
               onKeyDown={_keyDown}
               onKeyDownCapture={_keyDownCapture}

package/Libraries/Components/View/ViewAccessibility.js

@@ -136,11 +136,11 @@ export type AccessibilityActionEvent = SyntheticEvent<
 >;
 
 export type AccessibilityState = {
-  disabled?: boolean,
-  selected?: boolean,
+  disabled?: ?boolean,
+  selected?: ?boolean,
   checked?: ?boolean | 'mixed',
-  busy?: boolean,
-  expanded?: boolean,
+  busy?: ?boolean,
+  expanded?: ?boolean,
   ...
 };
 

package/Libraries/Components/View/ViewAccessibility.windows.js

@@ -176,11 +176,11 @@ export type AccessibilityActionEvent = SyntheticEvent<
 >;
 
 export type AccessibilityState = {
-  disabled?: boolean,
-  selected?: boolean,
+  disabled?: ?boolean,
+  selected?: ?boolean,
   checked?: ?boolean | 'mixed',
-  busy?: boolean,
-  expanded?: boolean,
+  busy?: ?boolean,
+  expanded?: ?boolean,
   ...
 };
 

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -23,48 +23,6 @@ import {IKeyboardProps} from '../Keyboard/KeyboardExtProps'; // Windows
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
-export type TVParallaxProperties = {
-  /**
-   * If true, parallax effects are enabled.  Defaults to true.
-   */
-  enabled?: boolean | undefined;
-
-  /**
-   * Defaults to 2.0.
-   */
-  shiftDistanceX?: number | undefined;
-
-  /**
-   * Defaults to 2.0.
-   */
-  shiftDistanceY?: number | undefined;
-
-  /**
-   * Defaults to 0.05.
-   */
-  tiltAngle?: number | undefined;
-
-  /**
-   * Defaults to 1.0
-   */
-  magnification?: number | undefined;
-
-  /**
-   * Defaults to 1.0
-   */
-  pressMagnification?: number | undefined;
-
-  /**
-   * Defaults to 0.3
-   */
-  pressDuration?: number | undefined;
-
-  /**
-   * Defaults to 0.3
-   */
-  pressDelay?: number | undefined;
-};
-
 export interface TVViewPropsIOS {
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
@@ -81,13 +39,6 @@ export interface TVViewPropsIOS {
    */
   hasTVPreferredFocus?: boolean | undefined;
 
-  /**
-   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
-   *
-   * @platform ios
-   */
-  tvParallaxProperties?: TVParallaxProperties | undefined;
-
   /**
    * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
    *
@@ -139,6 +90,13 @@ export interface ViewPropsAndroid {
    */
   collapsable?: boolean | undefined;
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: boolean | undefined;
+
   /**
    * Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.
    *
@@ -167,16 +125,16 @@ export interface ViewPropsAndroid {
 
 // [Windows
 
-export enum EventPhase {
-  None = 0,
-  Capturing,
-  AtTarget,
-  Bubbling,
+export namespace EventPhase {
+  export const None = 0;
+  export const Capturing = 1;
+  export const AtTarget = 2;
+  export const Bubbling = 3;
 }
 
-export enum HandledEventPhase {
-  Capturing = EventPhase.Capturing,
-  Bubbling = EventPhase.Bubbling,
+export namespace HandledEventPhase {
+  const Capturing = EventPhase.Capturing;
+  const Bubbling = EventPhase.Bubbling;
 }
 
 export interface INativeKeyboardEvent {
@@ -186,7 +144,11 @@ export interface INativeKeyboardEvent {
   shiftKey: boolean;
   key: string;
   code: string;
-  eventPhase: EventPhase;
+  eventPhase:
+    | EventPhase.None
+    | EventPhase.Capturing
+    | EventPhase.AtTarget
+    | EventPhase.Bubbling;
 }
 
 export interface IHandledKeyboardEvent {
@@ -195,7 +157,7 @@ export interface IHandledKeyboardEvent {
   metaKey?: boolean;
   shiftKey?: boolean;
   code: string;
-  handledEventPhase?: HandledEventPhase;
+  handledEventPhase?: EventPhase.Capturing | EventPhase.Bubbling;
 }
 
 export type IKeyboardEvent = NativeSyntheticEvent<INativeKeyboardEvent>;

package/Libraries/Components/View/ViewPropTypes.js

@@ -560,6 +560,13 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsable?: ?boolean,
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: ?boolean,
+
   /**
    * Contols whether this view, and its transitive children, are laid in a way
    * consistent with web browsers ('strict'), or consistent with existing

package/Libraries/Components/View/ViewPropTypes.windows.js

@@ -626,6 +626,13 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsable?: ?boolean,
 
+  /**
+   * Setting to false prevents direct children of the view from being removed
+   * from the native view hierarchy, similar to the effect of setting
+   * `collapsable={false}` on each child.
+   */
+  collapsableChildren?: ?boolean,
+
   /**
    * Contols whether this view, and its transitive children, are laid in a way
    * consistent with web browsers ('strict'), or consistent with existing

package/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -10,8 +10,8 @@
  */
 
 import Networking from '../../Network/RCTNetworking';
+import DevLoadingView from '../../Utilities/DevLoadingView';
 import HMRClient from '../../Utilities/HMRClient';
-import LoadingView from '../../Utilities/LoadingView';
 import getDevServer from './getDevServer';
 
 declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
@@ -110,7 +110,7 @@ module.exports = function (bundlePathAndQuery: string): Promise<void> {
   if (loadPromise) {
     return loadPromise;
   }
-  LoadingView.showMessage('Downloading...', 'load');
+  DevLoadingView.showMessage('Downloading...', 'load');
   ++pendingRequests;
 
   loadPromise = asyncRequest(requestUrl)
@@ -143,7 +143,7 @@ module.exports = function (bundlePathAndQuery: string): Promise<void> {
     })
     .finally(() => {
       if (!--pendingRequests) {
-        LoadingView.hide();
+        DevLoadingView.hide();
       }
     });