feat(fabric): Implement Drag and Drop on View (#2713)

## Summary:

Cherry pick more commits from #2117 to implement Drag and Drop Support
on View.
## Test Plan:

Moved the TextInput example (which doesn't work on Fabric yet) to a new
page, and added a View example (which does work on Fabric)


https://github.com/user-attachments/assets/b00b25fc-24b9-4587-865f-a05f305d0f40

---------

Co-authored-by: Nick Lefever <[email protected]>
Co-authored-by: Tommy Nguyen <[email protected]>

Author: 3 people

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -12,6 +12,7 @@ import type {
   BlurEvent,
   // [macOS
   FocusEvent,
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   GestureResponderEvent,
@@ -198,21 +199,21 @@ type PressableBaseProps = $ReadOnly<{
    *
    * @platform macos
    */
-  onDragEnter?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dragged out of the Pressable via the mouse.
    *
    * @platform macos
    */
-  onDragLeave?: (event: MouseEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dropped on the Pressable via the mouse.
    *
    * @platform macos
    */
-  onDrop?: (event: MouseEvent) => void,
+  onDrop?: (event: DragEvent) => void,
 
   /**
    * The types of dragged files that the Pressable will accept.

packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,8 +13,8 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
-  // [macOS]
-  MouseEvent,
+  MouseEvent, // [macOS]
+  DragEvent, // [macOS]
   GestureResponderEvent,
   LayoutChangeEvent,
 } from '../../Types/CoreEventTypes';
@@ -36,9 +36,9 @@ export type TouchableWithoutFeedbackPropsIOS = {
   tooltip?: ?string,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
-  onDragEnter?: (event: MouseEvent) => void,
-  onDragLeave?: (event: MouseEvent) => void,
-  onDrop?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
+  onDrop?: (event: DragEvent) => void,
   draggedTypes?: ?DraggedTypesType,
   // macOS]
 };

packages/react-native/Libraries/Components/View/DraggedType.js

@@ -12,10 +12,10 @@
 
 'use strict';
 
-export type DraggedType = 'fileUrl';
+export type DraggedType = 'fileUrl' | 'image' | 'string';
 
 export type DraggedTypesType = DraggedType | $ReadOnlyArray<DraggedType>;
 
 module.exports = {
-  DraggedTypes: ['fileUrl'],
+  DraggedTypes: ['fileUrl', 'image', 'string'],
 };

packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts

@@ -13,6 +13,7 @@ import {GestureResponderHandlers} from '../../../types/public/ReactNativeRendere
 import {StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   LayoutChangeEvent,
@@ -108,7 +109,7 @@ export interface ViewPropsAndroid {
   tabIndex?: 0 | -1 | undefined;
 }
 
-export type DraggedType = 'fileUrl';
+export type DraggedType = 'fileUrl' | 'image' | 'string';
 export type DraggedTypesType = DraggedType | DraggedType[];
 
 export interface ViewPropsMacOS {
@@ -118,9 +119,9 @@ export interface ViewPropsMacOS {
   enableFocusRing?: boolean | undefined;
   onMouseEnter?: ((event: MouseEvent) => void) | undefined;
   onMouseLeave?: ((event: MouseEvent) => void) | undefined;
-  onDragEnter?: ((event: MouseEvent) => void) | undefined;
-  onDragLeave?: ((event: MouseEvent) => void) | undefined;
-  onDrop?: ((event: MouseEvent) => void) | undefined;
+  onDragEnter?: ((event: DragEvent) => void) | undefined;
+  onDragLeave?: ((event: DragEvent) => void) | undefined;
+  onDrop?: ((event: DragEvent) => void) | undefined;
   onKeyDown?: ((event: KeyEvent) => void) | undefined;
   onKeyUp?: ((event: KeyEvent) => void) | undefined;
   keyDownEvents?: HandledKeyEvent[] | undefined;

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -16,6 +16,7 @@ import type {
   BlurEvent,
   FocusEvent,
   // [macOS]
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   LayoutChangeEvent,
@@ -410,21 +411,21 @@ type MacOSViewProps = $ReadOnly<{|
    *
    * @platform macos
    */
-  onDragEnter?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dragged out of the view via the mouse.
    *
    * @platform macos
    */
-  onDragLeave?: (event: MouseEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
 
   /**
    * Fired when an element is dropped on a valid drop target
    *
    * @platform macos
    */
-  onDrop?: (event: MouseEvent) => void,
+  onDrop?: (event: DragEvent) => void,
 
   /**
    * Specifies the Tooltip for the view

packages/react-native/Libraries/Types/CoreEventTypes.d.ts

@@ -305,4 +305,26 @@ export interface NativeBlurEvent extends TargetedEvent {}
 export interface FocusEvent extends NativeSyntheticEvent<NativeFocusEvent> {}
 
 export interface BlueEvent extends NativeSyntheticEvent<NativeBlurEvent> {}
+
+// Drag and Drop types
+export interface DataTransferItem {
+  name: string;
+  kind: string;
+  type: string;
+  uri: string;
+  size?: number | undefined;
+  width?: number | undefined;
+  height?: number | undefined;
+}
+
+export interface DataTransfer {
+  files: ReadonlyArray<DataTransferItem>;
+  types: ReadonlyArray<string>;
+}
+
+export interface DragEvent extends MouseEvent {
+  nativeEvent: NativeMouseEvent & {
+    dataTransfer?: DataTransfer | undefined;
+  };
+}
 // macOS]

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -221,13 +221,10 @@ export interface NativePointerEvent extends NativeMouseEvent {
 export type PointerEvent = NativeSyntheticEvent<NativePointerEvent>;
 
 export type NativeTouchEvent = $ReadOnly<{
-  altKey?: ?boolean, // [macOS]
-  button?: ?number, // [macOS]
   /**
    * Array of all touch events that have changed since the last event
    */
   changedTouches: $ReadOnlyArray<NativeTouchEvent>,
-  ctrlKey?: ?boolean, // [macOS]
   /**
    * 3D Touch reported force
    * @platform ios
@@ -245,7 +242,7 @@ export type NativeTouchEvent = $ReadOnly<{
    * The Y position of the touch, relative to the element
    */
   locationY: number,
-  metaKey?: ?boolean, // [macOS]
+
   /**
    * The X position of the touch, relative to the screen
    */
@@ -254,7 +251,6 @@ export type NativeTouchEvent = $ReadOnly<{
    * The Y position of the touch, relative to the screen
    */
   pageY: number,
-  shiftKey?: ?boolean, // [macOS]
   /**
    * The node id of the element receiving the touch event
    */
@@ -267,6 +263,13 @@ export type NativeTouchEvent = $ReadOnly<{
    * Array of all current touches on the screen
    */
   touches: $ReadOnlyArray<NativeTouchEvent>,
+  // [macOS
+  ctrlKey?: ?boolean,
+  altKey?: ?boolean,
+  shiftKey?: ?boolean,
+  metaKey?: ?boolean,
+  button?: ?number,
+  // macOS]
 }>;
 
 export type GestureResponderEvent = ResponderSyntheticEvent<NativeTouchEvent>;
@@ -283,48 +286,6 @@ export type NativeScrollPoint = $ReadOnly<{
   x: number,
 }>;
 
-// [macOS
-export type KeyEvent = NativeSyntheticEvent<
-  $ReadOnly<{|
-    // Modifier keys
-    capsLockKey: boolean,
-    shiftKey: boolean,
-    ctrlKey: boolean,
-    altKey: boolean,
-    metaKey: boolean,
-    numericPadKey: boolean,
-    helpKey: boolean,
-    functionKey: boolean,
-    // Key options
-    ArrowLeft: boolean,
-    ArrowRight: boolean,
-    ArrowUp: boolean,
-    ArrowDown: boolean,
-    key: string,
-  |}>,
->;
-
-/**
- * Represents a key that could be passed to `KeyDownEvents` and `KeyUpEvents`.
- *
- * `key` is the actual key, such as "a", or one of the special values:
- * "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
- * "Backspace", "Delete", "Home", "End", "PageUp", "PageDown".
- *
- * The rest are modifiers that when absent mean false.
- *
- * @platform macos
- */
-export type HandledKeyEvent = $ReadOnly<{|
-  altKey?: ?boolean,
-  ctrlKey?: ?boolean,
-  metaKey?: ?boolean,
-  shiftKey?: ?boolean,
-  key: string,
-|}>;
-
-// macOS]
-
 export type NativeScrollVelocity = $ReadOnly<{
   y: number,
   x: number,
@@ -370,3 +331,70 @@ export type MouseEvent = NativeSyntheticEvent<
     timestamp: number,
   }>,
 >;
+
+// [macOS
+export type DataTransferItem = $ReadOnly<{
+  name: string,
+  kind: string,
+  type: string,
+  uri: string,
+  size?: number,
+  width?: number,
+  height?: number,
+}>;
+
+export type DataTransfer = $ReadOnly<{
+  files: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<string>,
+}>;
+
+export type DragEvent = NativeSyntheticEvent<
+  $ReadOnly<{
+    clientX: number,
+    clientY: number,
+    pageX: number,
+    pageY: number,
+    timestamp: number,
+    dataTransfer?: DataTransfer,
+  }>,
+>;
+
+export type KeyEvent = NativeSyntheticEvent<
+  $ReadOnly<{|
+    // Modifier keys
+    capsLockKey: boolean,
+    shiftKey: boolean,
+    ctrlKey: boolean,
+    altKey: boolean,
+    metaKey: boolean,
+    numericPadKey: boolean,
+    helpKey: boolean,
+    functionKey: boolean,
+    // Key options
+    ArrowLeft: boolean,
+    ArrowRight: boolean,
+    ArrowUp: boolean,
+    ArrowDown: boolean,
+    key: string,
+  |}>,
+>;
+
+/**
+ * Represents a key that could be passed to `KeyDownEvents` and `KeyUpEvents`.
+ *
+ * `key` is the actual key, such as "a", or one of the special values:
+ * "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
+ * "Backspace", "Delete", "Home", "End", "PageUp", "PageDown".
+ *
+ * The rest are modifiers that when absent mean false.
+ *
+ * @platform macos
+ */
+export type HandledKeyEvent = $ReadOnly<{|
+  ctrlKey?: ?boolean,
+  altKey?: ?boolean,
+  shiftKey?: ?boolean,
+  metaKey?: ?boolean,
+  key: string,
+|}>;
+// macOS]