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

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,136 @@ 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,
+
+    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/View.windows.js

@@ -175,6 +175,9 @@ const View: React.AbstractComponent<
     // [Windows
     // $FlowFixMe - children typing
     const childrenWithImportantForAccessibility = children => {
+      if (children == null) {
+        return children;
+      }
       const updatedChildren = React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           // $FlowFixMe[incompatible-use]

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.
    *

package/Libraries/Core/ExceptionsManager.js

@@ -126,8 +126,8 @@ function reportException(
 }
 
 declare var console: {
-  error: typeof console.error,
-  _errorOriginal: typeof console.error,
+  error: (...data: $ReadOnlyArray<mixed>) => void,
+  _errorOriginal: (...data: $ReadOnlyArray<mixed>) => void,
   reportErrorsAsExceptions: boolean,
   ...
 };

package/Libraries/Core/ReactNativeVersion.js

@@ -17,7 +17,7 @@ const version: $ReadOnly<{
   major: 0,
   minor: 75,
   patch: 0,
-  prerelease: 'nightly-20240321-7d180d712',
+  prerelease: 'nightly-20240406-a05466c5b',
 };
 
 module.exports = {version};

package/Libraries/ReactNative/AppContainer-dev.js

@@ -20,7 +20,6 @@ import View from '../Components/View/View';
 import DebuggingOverlay from '../Debugging/DebuggingOverlay';
 import useSubscribeToDebuggingOverlayRegistry from '../Debugging/useSubscribeToDebuggingOverlayRegistry';
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
-import ReactDevToolsOverlay from '../Inspector/ReactDevToolsOverlay';
 import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import {RootTagContext, createRootTag} from './RootTag';
@@ -64,6 +63,26 @@ const InspectorDeferred = ({
   );
 };
 
+type ReactDevToolsOverlayDeferredProps = {
+  inspectedViewRef: InspectedViewRef,
+  reactDevToolsAgent: ReactDevToolsAgent,
+};
+
+const ReactDevToolsOverlayDeferred = ({
+  inspectedViewRef,
+  reactDevToolsAgent,
+}: ReactDevToolsOverlayDeferredProps) => {
+  const ReactDevToolsOverlay =
+    require('../Inspector/ReactDevToolsOverlay').default;
+
+  return (
+    <ReactDevToolsOverlay
+      inspectedViewRef={inspectedViewRef}
+      reactDevToolsAgent={reactDevToolsAgent}
+    />
+  );
+};
+
 const AppContainer = ({
   children,
   fabric,
@@ -155,7 +174,7 @@ const AppContainer = ({
         <DebuggingOverlay ref={debuggingOverlayRef} />
 
         {reactDevToolsAgent != null && (
-          <ReactDevToolsOverlay
+          <ReactDevToolsOverlayDeferred
             inspectedViewRef={innerViewRef}
             reactDevToolsAgent={reactDevToolsAgent}
           />

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -7,7 +7,7 @@
  * @noformat
  * @flow strict
  * @nolint
- * @generated SignedSource<<fbf33f04ca9428c149262f17c8a4b6ab>>
+ * @generated SignedSource<<b35184ab7e1e173fd34278def089e277>>
  */
 
 import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
@@ -127,7 +127,7 @@ export type NativeMethods = $ReadOnly<{|
 |}>;
 
 // This validates that INativeMethods and NativeMethods stay in sync using Flow!
-declare var ensureNativeMethodsAreSynced: NativeMethods;
+declare const ensureNativeMethodsAreSynced: NativeMethods;
 (ensureNativeMethodsAreSynced: INativeMethods);
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;

package/Libraries/Utilities/NativePlatformConstantsWin.js

@@ -6,6 +6,6 @@
  * @flow strict
  */
 
-export * from '../../src/private/specs/modules/NativePlatformConstantsWin';
-import NativePlatformConstantsWin from '../../src/private/specs/modules/NativePlatformConstantsWin';
+export * from '../../src/private/specs/modules/NativePlatformConstantsWindows';
+import NativePlatformConstantsWin from '../../src/private/specs/modules/NativePlatformConstantsWindows';
 export default NativePlatformConstantsWin;

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -12,6 +12,8 @@
 
 import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-renderer';
 
+import TouchableWithoutFeedback from '../Components/Touchable/TouchableWithoutFeedback';
+
 const Switch = require('../Components/Switch/Switch').default;
 const TextInput = require('../Components/TextInput/TextInput');
 const View = require('../Components/View/View');
@@ -49,6 +51,9 @@ function byClickable(): Predicate {
       (node.type === Switch && node.props && node.props.disabled !== true) ||
       (node.type === View &&
         node?.props?.onStartShouldSetResponder?.testOnly_pressabilityConfig) ||
+      (node.type === TouchableWithoutFeedback &&
+        node.props &&
+        typeof node.props.onPress === 'function') ||
       // HACK: Find components that use `Pressability`.
       node.instance?.state?.pressability != null ||
       // TODO: Remove this after deleting `Touchable`.

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -26,6 +26,15 @@ namespace Microsoft.ReactNative.Composition
     Default       = 0x00000007, // ShadowProps | NativeBorder | Background
   };
 
+  namespace Experimental {
+    [webhosthidden]
+    [experimental]
+    interface IInternalCreateComponentViewArgs
+    {
+      ICompositionContext CompositionContext { get; };
+    }
+  }
+
   [experimental]
   [webhosthidden]
   runtimeclass CreateCompositionComponentViewArgs : Microsoft.ReactNative.CreateComponentViewArgs {
@@ -72,7 +81,7 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass SwitchComponentView : ComponentView {
+  unsealed runtimeclass SwitchComponentView : ViewComponentView {
   };
 
   [experimental]
@@ -90,31 +99,32 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ActivityIndicatorComponentView : ComponentView {
+  unsealed runtimeclass ActivityIndicatorComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass WindowsModalHostComponentView : ComponentView {
+  unsealed runtimeclass WindowsModalHostComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ImageComponentView : ComponentView {
+  unsealed runtimeclass ImageComponentView : ViewComponentView {
+    Microsoft.ReactNative.ImageProps ViewProps { get; };
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ParagraphComponentView : ComponentView {
+  unsealed runtimeclass ParagraphComponentView : ViewComponentView {
   };
 
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass ScrollViewComponentView : ComponentView {
+  unsealed runtimeclass ScrollViewComponentView : ViewComponentView {
   };
 
   [experimental]
@@ -126,7 +136,7 @@ namespace Microsoft.ReactNative.Composition
   [experimental]
   [webhosthidden]
   [default_interface]
-  unsealed runtimeclass WindowsTextInputComponentView : ComponentView {
+  unsealed runtimeclass WindowsTextInputComponentView : ViewComponentView {
   };
   
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -99,6 +99,7 @@ namespace Microsoft.ReactNative
     Microsoft.ReactNative.Composition.ICustomResourceLoader Resources;
 
     Microsoft.ReactNative.Composition.Theme Theme { get; };
+    Int64 RootTag { get; };
 
 #ifdef USE_WINUI3
     Microsoft.UI.Content.ContentIsland Island { get; };

package/Microsoft.ReactNative/CompositionUIService.idl

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import "ReactInstanceSettings.idl";
+import "ComponentView.idl";
 
 #include "DocString.h"
 
@@ -22,5 +23,8 @@ namespace Microsoft.ReactNative.Composition
       "Gets the Compositor used by this ReactNative instance.")
     static Microsoft.UI.Composition.Compositor GetCompositor(Microsoft.ReactNative.IReactPropertyBag properties);
 
+    DOC_STRING("Gets the ComponentView from a react tag.")
+    static Microsoft.ReactNative.ComponentView ComponentFromReactTag(Microsoft.ReactNative.IReactContext context, Int64 reactTag);
+
   }
 } // namespace Microsoft.ReactNative.Composition

package/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.cpp

@@ -99,7 +99,8 @@ facebook::react::Props::Shared AbiViewComponentDescriptor::cloneProps(
   // auto shadowNodeProps = std::make_shared<ShadowNodeT::Props>(context, rawProps, props);
   auto shadowNodeProps = std::make_shared<AbiViewProps>(
       context, props ? static_cast<AbiViewProps const &>(*props) : *ShadowNodeT::defaultSharedProps(), rawProps);
-  auto viewProps = winrt::make<winrt::Microsoft::ReactNative::implementation::UserViewProps>(shadowNodeProps);
+  auto viewProps =
+      winrt::make<winrt::Microsoft::ReactNative::implementation::ViewProps>(shadowNodeProps, false /*holdRef*/);
   auto userProps =
       winrt::get_self<winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder>(m_builder)
           ->CreateProps(viewProps);