Properly implement DataTransfer object that matches paper and is closer to web

Saadnajmi · Saadnajmi · commit bb4d01537477 · 2025-10-08T19:24:37.000-07:00
diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js
@@ -10,6 +10,7 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
+  DataTransfer,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
@@ -108,20 +109,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 
diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js
@@ -11,6 +11,7 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
+  DataTransfer,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
@@ -143,20 +144,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 
diff --git a/packages/react-native/Libraries/Types/CoreEventTypes.js b/packages/react-native/Libraries/Types/CoreEventTypes.js
@@ -333,19 +333,24 @@ export type MouseEvent = NativeSyntheticEvent<
 >;
 
 // [macOS
-export type DataTransferItem = $ReadOnly<{
+export type DataTransferFile = $ReadOnly<{
   name: string,
-  kind: string,
-  type: string,
+  type: ?string,
   uri: string,
   size?: number,
   width?: number,
   height?: number,
 }>;
 
+export type DataTransferItem = $ReadOnly<{
+  kind: string,
+  type: ?string,
+}>;
+
 export type DataTransfer = $ReadOnly<{
-  files: $ReadOnlyArray<DataTransferItem>,
-  types: $ReadOnlyArray<string>,
+  files: $ReadOnlyArray<DataTransferFile>,
+  items: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<?string>,
 }>;
 
 export type DragEvent = NativeSyntheticEvent<
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
@@ -616,10 +616,8 @@ - (BOOL)textInputShouldHandlePaste:(nonnull id<RCTBackedTextInputViewProtocol>)s
   // If there's a fileType that is of interest, notify JS. Also blocks notifying JS if it's a text paste
   if (_eventEmitter && fileType != nil && [pastedTypes containsObject:fileType]) {
     auto const &textInputEventEmitter = *std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter);
-    std::vector<DataTransferItem> dataTransferItems{};
-    [self buildDataTransferItems:dataTransferItems forPasteboard:pasteboard];
-    
-    textInputEventEmitter.onPaste({.dataTransferItems = dataTransferItems});
+  DataTransfer dataTransfer = [self dataTransferForPasteboard:pasteboard];
+  textInputEventEmitter.onPaste({.dataTransfer = std::move(dataTransfer)});
   }
 
   // Only allow pasting text.
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h
@@ -85,7 +85,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 #if TARGET_OS_OSX // [macOS
 - (BOOL)handleKeyboardEvent:(NSEvent *)event;
-- (void)buildDataTransferItems:(std::vector<facebook::react::DataTransferItem> &)dataTransferItems forPasteboard:(NSPasteboard *)pasteboard;
+- (facebook::react::DataTransfer)dataTransferForPasteboard:(NSPasteboard *)pasteboard;
 #endif // macOS]
 
 /*
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
@@ -1714,7 +1714,12 @@ - (void)keyUp:(NSEvent *)event {
   Drop,
 };
 
-- (void)buildDataTransferItems:(std::vector<DataTransferItem> &)dataTransferItems forPasteboard:(NSPasteboard *)pasteboard {
+- (DataTransfer)dataTransferForPasteboard:(NSPasteboard *)pasteboard {
+  DataTransfer dataTransfer{};
+  auto &files = dataTransfer.files;
+  auto &items = dataTransfer.items;
+  auto &types = dataTransfer.types;
+
   NSArray *fileNames = [pasteboard propertyListForType:NSFilenamesPboardType] ?: @[];
   for (NSString *file in fileNames) {
     NSURL *fileURL = [NSURL fileURLWithPath:file];
@@ -1739,25 +1744,31 @@ - (void)buildDataTransferItems:(std::vector<DataTransferItem> &)dataTransferItem
                                         forKey:NSURLFileSizeKey
                                          error:&fileSizeError];
 
-      DataTransferItem transferItem = {
+      std::string typeString = MIMETypeString != nil ? [MIMETypeString UTF8String] : "";
+
+      DataTransferFile fileEntry = {
         .name = fileURL.lastPathComponent ? fileURL.lastPathComponent.UTF8String : "",
-        .kind = "file",
-        .type = MIMETypeString ? MIMETypeString.UTF8String : "",
+        .type = typeString,
         .uri = fileURL.path ? fileURL.path.UTF8String : "",
       };
-      
+
       if (success) {
-        transferItem.size = fileSizeValue.intValue;
+        fileEntry.size = fileSizeValue.intValue;
       }
 
-      if ([MIMETypeString hasPrefix:@"image/"]) {
+      if (MIMETypeString != nil && [MIMETypeString hasPrefix:@"image/"]) {
         NSImage *image = [[NSImage alloc] initWithContentsOfURL:fileURL];
         CGImageRef cgImage = [image CGImageForProposedRect:nil context:nil hints:nil];
-        transferItem.width = static_cast<int>(CGImageGetWidth(cgImage));
-        transferItem.height = static_cast<int>(CGImageGetHeight(cgImage));
+        fileEntry.width = static_cast<int>(CGImageGetWidth(cgImage));
+        fileEntry.height = static_cast<int>(CGImageGetHeight(cgImage));
       }
-      
-      dataTransferItems.push_back(transferItem);
+
+      files.push_back(fileEntry);
+      items.push_back({
+          .kind = "file",
+          .type = typeString,
+      });
+      types.push_back(typeString);
     }
   }
   
@@ -1769,18 +1780,26 @@ - (void)buildDataTransferItems:(std::vector<DataTransferItem> &)dataTransferItem
     CGImageRef cgImage = [image CGImageForProposedRect:nil context:nil hints:nil];
     
     NSString *dataURLString = RCTDataURL(MIMETypeString, imageData).absoluteString;
+    std::string typeString = MIMETypeString != nil ? [MIMETypeString UTF8String] : "";
     
-    DataTransferItem transferItem = {
-      .kind = "image",
-      .type = MIMETypeString ? MIMETypeString.UTF8String : "",
+    DataTransferFile fileEntry = {
+      .name = "",
+      .type = typeString,
       .uri = dataURLString ? dataURLString.UTF8String : "",
-      .size = static_cast<int>(imageData.length),
-      .width = static_cast<int>(CGImageGetWidth(cgImage)),
-      .height = static_cast<int>(CGImageGetHeight(cgImage)),
     };
 
-    dataTransferItems.push_back(transferItem);
+    fileEntry.size = static_cast<int>(imageData.length);
+    fileEntry.width = static_cast<int>(CGImageGetWidth(cgImage));
+    fileEntry.height = static_cast<int>(CGImageGetHeight(cgImage));
+
+    files.push_back(fileEntry);
+    items.push_back({
+        .kind = "image",
+        .type = typeString,
+    });
+    types.push_back(typeString);
   }
+  return dataTransfer;
 }
 
 - (void)emitDragEvent:(DragEventType)eventType draggingInfo:(id<NSDraggingInfo>)sender {
@@ -1791,8 +1810,7 @@ - (void)emitDragEvent:(DragEventType)eventType draggingInfo:(id<NSDraggingInfo>)
   NSPoint locationInWindow = sender.draggingLocation;
   NSPasteboard *pasteboard = sender.draggingPasteboard;
   
-  std::vector<DataTransferItem> dataTransferItems{};
-  [self buildDataTransferItems:dataTransferItems forPasteboard:pasteboard];
+  DataTransfer dataTransfer = [self dataTransferForPasteboard:pasteboard];
 
   NSPoint locationInView = [self convertPoint:locationInWindow fromView:nil];
   NSEventModifierFlags modifierFlags = self.window.currentEvent.modifierFlags;
@@ -1808,7 +1826,7 @@ - (void)emitDragEvent:(DragEventType)eventType draggingInfo:(id<NSDraggingInfo>)
       .shiftKey = static_cast<bool>(modifierFlags & NSEventModifierFlagShift),
       .metaKey = static_cast<bool>(modifierFlags & NSEventModifierFlagCommand),
     },
-    .dataTransferItems = dataTransferItems,
+    .dataTransfer = dataTransfer,
   };
   
   switch (eventType) {
diff --git a/packages/react-native/ReactCommon/react/renderer/components/textinput/TextInputEventEmitter.cpp b/packages/react-native/ReactCommon/react/renderer/components/textinput/TextInputEventEmitter.cpp
@@ -137,7 +137,9 @@ static jsi::Value pasteMetricsPayload(
     jsi::Runtime& runtime,
     const TextInputEventEmitter::PasteMetrics& pasteMetrics) {
   auto payload = jsi::Object(runtime);
-  auto dataTransferObject = HostPlatformViewEventEmitter::dataTransferPayload(runtime, pasteMetrics.dataTransferItems);
+  auto dataTransferObject = HostPlatformViewEventEmitter::dataTransferPayload(
+    runtime,
+    pasteMetrics.dataTransfer);
   payload.setProperty(runtime, "dataTransfer", dataTransferObject);
   return payload;
 };
diff --git a/packages/react-native/ReactCommon/react/renderer/components/textinput/TextInputEventEmitter.h b/packages/react-native/ReactCommon/react/renderer/components/textinput/TextInputEventEmitter.h
@@ -9,6 +9,9 @@
 
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/components/view/ViewEventEmitter.h>
+#if TARGET_OS_OSX // [macOS
+#include <react/renderer/components/view/MouseEvent.h>
+#endif // macOS]
 
 namespace facebook::react {
 
@@ -42,7 +45,7 @@ class TextInputEventEmitter : public ViewEventEmitter {
   
 #if TARGET_OS_OSX // [macOS
   struct PasteMetrics {
-    std::vector<DataTransferItem> dataTransferItems;
+    DataTransfer dataTransfer;
   };
 #endif // macOS]
 
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp
@@ -82,34 +82,73 @@ void HostPlatformViewEventEmitter::onMouseLeave(const MouseEvent& mouseEvent) co
 
 jsi::Value HostPlatformViewEventEmitter::dataTransferPayload(
     jsi::Runtime& runtime,
-    const std::vector<DataTransferItem>& dataTransferItems) {
-  auto filesArray = jsi::Array(runtime, dataTransferItems.size());
-  auto itemsArray = jsi::Array(runtime, dataTransferItems.size());
-  auto typesArray = jsi::Array(runtime, dataTransferItems.size());
-  int i = 0;
-  for (const auto& transferItem : dataTransferItems) {
+    DataTransfer const& dataTransfer) {
+  const auto& files = dataTransfer.files;
+  const auto& items = dataTransfer.items;
+  const auto& types = dataTransfer.types;
+  auto filesArray = jsi::Array(runtime, files.size());
+  auto itemsArray = jsi::Array(runtime, items.size());
+  auto maxEntries = std::max(files.size(), std::max(items.size(), types.size()));
+  auto typesArray = jsi::Array(runtime, maxEntries);
+
+  for (size_t fileIndex = 0; fileIndex < files.size(); ++fileIndex) {
+    const auto& fileItem = files[fileIndex];
     auto fileObject = jsi::Object(runtime);
-    fileObject.setProperty(runtime, "name", transferItem.name);
-    fileObject.setProperty(runtime, "type", transferItem.type);
-    fileObject.setProperty(runtime, "uri", transferItem.uri);
-    if (transferItem.size.has_value()) {
-      fileObject.setProperty(runtime, "size", *transferItem.size);
+    fileObject.setProperty(runtime, "name", fileItem.name);
+    if (!fileItem.type.empty()) {
+      fileObject.setProperty(runtime, "type", fileItem.type);
+    } else {
+      fileObject.setProperty(runtime, "type", jsi::Value::null());
     }
-    if (transferItem.width.has_value()) {
-      fileObject.setProperty(runtime, "width", *transferItem.width);
+    fileObject.setProperty(runtime, "uri", fileItem.uri);
+    if (fileItem.size.has_value()) {
+      fileObject.setProperty(runtime, "size", *fileItem.size);
     }
-    if (transferItem.height.has_value()) {
-      fileObject.setProperty(runtime, "height", *transferItem.height);
+    if (fileItem.width.has_value()) {
+      fileObject.setProperty(runtime, "width", *fileItem.width);
     }
-    filesArray.setValueAtIndex(runtime, i, fileObject);
+    if (fileItem.height.has_value()) {
+      fileObject.setProperty(runtime, "height", *fileItem.height);
+    }
+    filesArray.setValueAtIndex(runtime, static_cast<int>(fileIndex), fileObject);
+  }
 
+  for (size_t itemIndex = 0; itemIndex < items.size(); ++itemIndex) {
+    const auto& item = items[itemIndex];
     auto itemObject = jsi::Object(runtime);
-    itemObject.setProperty(runtime, "kind", transferItem.kind);
-    itemObject.setProperty(runtime, "type", transferItem.type);
-    itemsArray.setValueAtIndex(runtime, i, itemObject);
+    itemObject.setProperty(runtime, "kind", item.kind);
+    if (!item.type.empty()) {
+      itemObject.setProperty(runtime, "type", item.type);
+    } else {
+      itemObject.setProperty(runtime, "type", jsi::Value::null());
+    }
+    itemsArray.setValueAtIndex(runtime, static_cast<int>(itemIndex), itemObject);
+  }
 
-    typesArray.setValueAtIndex(runtime, i, transferItem.type);
-    i++;
+  for (size_t typeIndex = 0; typeIndex < maxEntries; ++typeIndex) {
+    if (typeIndex < types.size()) {
+      const auto& typeEntry = types[typeIndex];
+      if (!typeEntry.empty()) {
+        typesArray.setValueAtIndex(
+            runtime,
+            static_cast<int>(typeIndex),
+            jsi::String::createFromUtf8(runtime, typeEntry));
+        continue;
+      }
+    }
+
+    const std::string* fallbackType = nullptr;
+    if (typeIndex < items.size() && !items[typeIndex].type.empty()) {
+      fallbackType = &items[typeIndex].type;
+    } else if (typeIndex < files.size() && !files[typeIndex].type.empty()) {
+      fallbackType = &files[typeIndex].type;
+    }
+
+    if (fallbackType != nullptr) {
+      typesArray.setValueAtIndex(runtime, static_cast<int>(typeIndex), jsi::String::createFromUtf8(runtime, *fallbackType));
+    } else {
+      typesArray.setValueAtIndex(runtime, static_cast<int>(typeIndex), jsi::Value::null());
+    }
   }
 
   auto dataTransferObject = jsi::Object(runtime);
@@ -124,7 +163,9 @@ static jsi::Value dragEventPayload(
     jsi::Runtime& runtime,
     const DragEvent& event) {
   auto payload = mouseEventPayload(runtime, event);
-  auto dataTransferObject = HostPlatformViewEventEmitter::dataTransferPayload(runtime, event.dataTransferItems);
+  auto dataTransferObject = HostPlatformViewEventEmitter::dataTransferPayload(
+    runtime,
+    event.dataTransfer);
   payload.setProperty(runtime, "dataTransfer", dataTransferObject);
   return payload;
 }
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h b/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h
@@ -40,7 +40,9 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
   void onDragLeave(DragEvent const& dragEvent) const;
   void onDrop(DragEvent const& dragEvent) const;
 
-  static jsi::Value dataTransferPayload(jsi::Runtime& runtime, std::vector<DataTransferItem> const& dataTransferItems);
+  static jsi::Value dataTransferPayload(
+    jsi::Runtime& runtime,
+    DataTransfer const& dataTransfer);
 
 };
 
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MouseEvent.h b/packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MouseEvent.h
@@ -56,18 +56,28 @@ struct MouseEvent {
   bool metaKey{false};
 };
 
-struct DataTransferItem {
+struct DataTransferFile {
   std::string name{};
-  std::string kind{};
   std::string type{};
   std::string uri{};
   std::optional<int> size{};
   std::optional<int> width{};
   std::optional<int> height{};
 };
 
+struct DataTransferItem {
+  std::string kind{};
+  std::string type{};
+};
+
+struct DataTransfer {
+  std::vector<DataTransferFile> files{};
+  std::vector<DataTransferItem> items{};
+  std::vector<std::string> types{};
+};
+
 struct DragEvent : MouseEvent {
-  std::vector<DataTransferItem> dataTransferItems;
+  DataTransfer dataTransfer;
 };
 
 } // namespace facebook::react
diff --git a/packages/rn-tester/js/examples/DragAndDrop/DragAndDropExample.js b/packages/rn-tester/js/examples/DragAndDrop/DragAndDropExample.js
diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
