not-react-native-macos 0.87.1-rc.4 → 0.87.1-rc.6

package/Libraries/Components/View/ViewPropTypes.js

@@ -22,6 +22,7 @@ import type {
   LayoutChangeEvent,
   LayoutRectangle,
   MouseEvent,
+  NativeSyntheticEvent, // [macOS] DragEvent below is built on it
   PointerEvent,
 } from '../../Types/CoreEventTypes';
 import type {
@@ -132,7 +133,106 @@ type FocusEventProps = Readonly<{
 // a .macos file because ViewPropTypes is shared, and a prop that is simply
 // absent on other platforms costs them nothing. The native side is
 // HostPlatformViewProps under components/view/platform/macos. macOS]
+/**
+ * A key the view means to act on itself. A modifier left out is a wildcard:
+ * `{key: 'c'}` matches Cmd-C and a bare c alike.
+ *
+ * @platform macos
+ */
+export type HandledKeyEvent = Readonly<{
+  key: string,
+  altKey?: ?boolean,
+  ctrlKey?: ?boolean,
+  metaKey?: ?boolean,
+  shiftKey?: ?boolean,
+}>;
+
+/**
+ * A dragged file, or dragged image data with no file behind it -- in which case
+ * `uri` is a data: URL rather than a path.
+ *
+ * @platform macos
+ */
+export type DataTransferFile = Readonly<{
+  name: string,
+  type: string,
+  uri: string,
+  size?: number,
+  width?: number,
+  height?: number,
+}>;
+
+/**
+ * The pasteboard contents of a drag, shaped like the DOM DataTransfer.
+ *
+ * @platform macos
+ */
+export type DataTransfer = Readonly<{
+  files: $ReadOnlyArray<DataTransferFile>,
+  items: $ReadOnlyArray<Readonly<{kind: string, type: string}>>,
+  types: $ReadOnlyArray<string>,
+}>;
+
+export type DragEvent = NativeSyntheticEvent<
+  Readonly<{
+    clientX: number,
+    clientY: number,
+    pageX: number,
+    pageY: number,
+    screenX: number,
+    screenY: number,
+    altKey: boolean,
+    ctrlKey: boolean,
+    metaKey: boolean,
+    shiftKey: boolean,
+    button: number,
+    dataTransfer: DataTransfer,
+  }>,
+>;
+
 type MacOSViewProps = Readonly<{
+  /**
+   * What kinds of dragged content the view accepts: 'fileUrl', 'image',
+   * 'string'. Required for the drag handlers to fire at all -- AppKit routes a
+   * drag only to views that registered for one of the pasteboard types it
+   * carries.
+   *
+   * @platform macos
+   */
+  draggedTypes?: ?$ReadOnlyArray<'fileUrl' | 'image' | 'string'>,
+
+  /**
+   * Called as a drag enters, leaves, or is released over the view.
+   *
+   * @platform macos
+   */
+  onDragEnter?: ?(event: DragEvent) => void,
+
+  /** @platform macos */
+  onDragLeave?: ?(event: DragEvent) => void,
+
+  /** @platform macos */
+  onDrop?: ?(event: DragEvent) => void,
+
+  /**
+   * Keys this view handles itself, suppressing AppKit's own interpretation of
+   * them -- Tab moving focus, Escape cancelling, an unclaimed key beeping.
+   *
+   * Separate from `onKeyDown`, deliberately: listening to a key does not change
+   * what it does, so a view that observes Tab still lets Tab move focus. Only
+   * listing a key here claims it.
+   *
+   * @platform macos
+   */
+  keyDownEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+
+  /**
+   * As `keyDownEvents`, for key release.
+   *
+   * @platform macos
+   */
+  keyUpEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+
   /**
    * The view's help tag, shown when the pointer rests over it.
    *

package/Libraries/NativeComponent/BaseViewConfig.macos.js

@@ -44,13 +44,19 @@ const directEventTypes = {
   topAuxClick: {registrationName: 'onAuxClick'},
   topMouseEnter: {registrationName: 'onMouseEnter'},
   topMouseLeave: {registrationName: 'onMouseLeave'},
+  topDragEnter: {registrationName: 'onDragEnter'},
+  topDragLeave: {registrationName: 'onDragLeave'},
+  topDrop: {registrationName: 'onDrop'},
 };
 
 const validAttributesForNonEventProps = {
   acceptsFirstMouse: true,
   allowsVibrancy: true,
+  draggedTypes: true,
   enableFocusRing: true,
   focusable: true,
+  keyDownEvents: true,
+  keyUpEvents: true,
   mouseDownCanMoveWindow: true,
   tooltip: true,
 };
@@ -58,6 +64,9 @@ const validAttributesForNonEventProps = {
 const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onAuxClick: true,
   onDoubleClick: true,
+  onDragEnter: true,
+  onDragLeave: true,
+  onDrop: true,
   onKeyDown: true,
   onKeyUp: true,
   onMouseEnter: true,

package/Libraries/Types/CoreEventTypes.js

@@ -351,6 +351,17 @@ export type KeyEvent = Readonly<{
    * @see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/isComposing
    */
   isComposing?: boolean,
+  // [macOS] Modifiers AppKit reports and no other platform has. Optional, so
+  // shared code that never reads them is unaffected.
+  /** @platform macos */
+  capsLockKey?: boolean,
+  /** @platform macos */
+  numericPadKey?: boolean,
+  /** @platform macos */
+  helpKey?: boolean,
+  /** @platform macos */
+  functionKey?: boolean,
+  // macOS]
 }>;
 
 export type KeyUpEvent = NativeSyntheticEvent<KeyEvent>;

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -10,6 +10,7 @@
 
 #import <CoreGraphics/CoreGraphics.h>
 #import <QuartzCore/QuartzCore.h>
+#import <algorithm> // [macOS] std::find, for matching a press against keyDownEvents
 #import <objc/runtime.h>
 #import <ranges>
 
@@ -22,6 +23,11 @@
 #import <React/RCTLinearGradient.h>
 #import <React/RCTLocalizedString.h>
 #import <React/RCTRadialGradient.h>
+#if TARGET_OS_OSX // [macOS] drag and drop: RCTDataURL for dragged image data,
+                  // UTType to name what was dropped.
+#import <React/RCTUtils.h>
+#import <UniformTypeIdentifiers/UniformTypeIdentifiers.h>
+#endif // macOS]
 #import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/view/ViewComponentDescriptor.h>
 #import <react/renderer/components/view/ViewEventEmitter.h>
@@ -663,6 +669,38 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
   if (oldViewProps.hostPlatformEvents != newViewProps.hostPlatformEvents) {
     [self _updateMouseTracking:newViewProps.hostPlatformEvents.wantsMouseTracking()];
   }
+
+  if (oldViewProps.draggedTypes != newViewProps.draggedTypes) {
+    [self _updateDraggedTypes:newViewProps.draggedTypes];
+  }
+}
+
+/**
+ * AppKit delivers a drag only to views that registered for one of the
+ * pasteboard types it carries, so without this the drag handlers are
+ * unreachable. The three names are the kinds React Native models; each maps to
+ * the pasteboard types AppKit actually uses for it.
+ */
+- (void)_updateDraggedTypes:(const std::vector<std::string> &)draggedTypes
+{
+  [self unregisterDraggedTypes];
+
+  if (draggedTypes.empty()) {
+    return;
+  }
+
+  NSMutableArray<NSPasteboardType> *types = [NSMutableArray arrayWithCapacity:draggedTypes.size()];
+  for (const auto &draggedType : draggedTypes) {
+    if (draggedType == "fileUrl") {
+      [types addObject:NSPasteboardTypeFileURL];
+    } else if (draggedType == "image") {
+      [types addObject:NSPasteboardTypePNG];
+      [types addObject:NSPasteboardTypeTIFF];
+    } else if (draggedType == "string") {
+      [types addObject:NSPasteboardTypeString];
+    }
+  }
+  [self registerForDraggedTypes:types];
 }
 
 /**
@@ -740,6 +778,277 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
   }
 }
 
+#pragma mark - Drag and Drop Events
+
+/**
+ * The pasteboard, shaped like the DOM DataTransfer so a drop handler reads the
+ * same on macOS as on the web.
+ *
+ * Dragged files are reported by path. Dragged image *data* -- an image dragged
+ * out of a browser, say, with no file behind it -- has no path to give, so it
+ * is reported as a data: URL instead; `uri` is what a consumer feeds to
+ * <Image> either way.
+ */
+- (DataTransfer)_dataTransferForPasteboard:(NSPasteboard *)pasteboard
+{
+  DataTransfer dataTransfer{};
+
+  NSArray<NSURL *> *fileURLs = [pasteboard readObjectsForClasses:@[ [NSURL class] ]
+                                                         options:@{NSPasteboardURLReadingFileURLsOnlyKey : @YES}]
+      ?: @[];
+
+  for (NSURL *fileURL in fileURLs) {
+    BOOL isDirectory = NO;
+    if (![NSFileManager.defaultManager fileExistsAtPath:fileURL.path isDirectory:&isDirectory] || isDirectory) {
+      continue;
+    }
+
+    UTType *type = [UTType typeWithFilenameExtension:fileURL.pathExtension];
+    NSString *mimeType = type.preferredMIMEType;
+    std::string typeString = mimeType != nil ? mimeType.UTF8String : "";
+
+    DataTransferFile file = {
+        .name = fileURL.lastPathComponent != nil ? fileURL.lastPathComponent.UTF8String : "",
+        .type = typeString,
+        .uri = fileURL.path != nil ? fileURL.path.UTF8String : "",
+    };
+
+    NSNumber *fileSize = nil;
+    if ([fileURL getResourceValue:&fileSize forKey:NSURLFileSizeKey error:NULL]) {
+      file.size = fileSize.intValue;
+    }
+
+    if ([mimeType hasPrefix:@"image/"]) {
+      NSImage *image = [[NSImage alloc] initWithContentsOfURL:fileURL];
+      CGImageRef cgImage = [image CGImageForProposedRect:NULL context:nil hints:nil];
+      if (cgImage != NULL) {
+        file.width = static_cast<int>(CGImageGetWidth(cgImage));
+        file.height = static_cast<int>(CGImageGetHeight(cgImage));
+      }
+    }
+
+    dataTransfer.files.push_back(file);
+    dataTransfer.items.push_back({.kind = "file", .type = typeString});
+    dataTransfer.types.push_back(typeString);
+  }
+
+  NSPasteboardType imageType = [pasteboard availableTypeFromArray:@[ NSPasteboardTypePNG, NSPasteboardTypeTIFF ]];
+  if (imageType != nil && fileURLs.count == 0) {
+    NSString *mimeType = [imageType isEqualToString:NSPasteboardTypePNG] ? UTTypePNG.preferredMIMEType
+                                                                        : UTTypeTIFF.preferredMIMEType;
+    NSData *imageData = [pasteboard dataForType:imageType];
+    std::string typeString = mimeType != nil ? mimeType.UTF8String : "";
+
+    NSString *dataURL = RCTDataURL(mimeType, imageData).absoluteString;
+    DataTransferFile file = {
+        .name = "",
+        .type = typeString,
+        .uri = dataURL != nil ? dataURL.UTF8String : "",
+    };
+    file.size = static_cast<int>(imageData.length);
+
+    NSImage *image = [[NSImage alloc] initWithData:imageData];
+    CGImageRef cgImage = [image CGImageForProposedRect:NULL context:nil hints:nil];
+    if (cgImage != NULL) {
+      file.width = static_cast<int>(CGImageGetWidth(cgImage));
+      file.height = static_cast<int>(CGImageGetHeight(cgImage));
+    }
+
+    dataTransfer.files.push_back(file);
+    dataTransfer.items.push_back({.kind = "image", .type = typeString});
+    dataTransfer.types.push_back(typeString);
+  }
+
+  return dataTransfer;
+}
+
+- (DragEvent)_dragEventFromDraggingInfo:(id<NSDraggingInfo>)info
+{
+  NSPoint inWindow = info.draggingLocation;
+  NSPoint inView = [self convertPoint:inWindow fromView:nil];
+  NSEventModifierFlags flags = self.window.currentEvent.modifierFlags;
+
+  DragEvent event = {};
+  event.clientX = inView.x;
+  event.clientY = inView.y;
+  event.pageX = inWindow.x;
+  event.pageY = inWindow.y;
+  event.screenX = inWindow.x;
+  event.screenY = inWindow.y;
+  event.altKey = static_cast<bool>(flags & NSEventModifierFlagOption);
+  event.ctrlKey = static_cast<bool>(flags & NSEventModifierFlagControl);
+  event.shiftKey = static_cast<bool>(flags & NSEventModifierFlagShift);
+  event.metaKey = static_cast<bool>(flags & NSEventModifierFlagCommand);
+  event.dataTransfer = [self _dataTransferForPasteboard:info.draggingPasteboard];
+  return event;
+}
+
+- (NSDragOperation)draggingEntered:(id<NSDraggingInfo>)sender
+{
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onDragEnter([self _dragEventFromDraggingInfo:sender]);
+  }
+
+  // The answer is the cursor the user sees, so it has to reflect what this view
+  // would actually accept -- claiming a drag the pasteboard cannot satisfy shows
+  // a drop cursor over content that will refuse it.
+  if ([sender.draggingPasteboard availableTypeFromArray:self.registeredDraggedTypes] == nil) {
+    return NSDragOperationNone;
+  }
+
+  NSDragOperation offered = sender.draggingSourceOperationMask;
+  if (offered & NSDragOperationLink) {
+    return NSDragOperationLink;
+  }
+  if (offered & NSDragOperationCopy) {
+    return NSDragOperationCopy;
+  }
+  return NSDragOperationNone;
+}
+
+- (void)draggingExited:(id<NSDraggingInfo>)sender
+{
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onDragLeave([self _dragEventFromDraggingInfo:sender]);
+  }
+}
+
+- (BOOL)performDragOperation:(id<NSDraggingInfo>)sender
+{
+  if (_eventEmitter == nullptr) {
+    return NO;
+  }
+  _eventEmitter->onDrop([self _dragEventFromDraggingInfo:sender]);
+  return YES;
+}
+
+#pragma mark - Keyboard Events
+
+/**
+ * The W3C `key` name for a press, per https://www.w3.org/TR/uievents-key/.
+ *
+ * `charactersIgnoringModifiers` already gives the right answer for anything
+ * printable. The cases below are the ones where it gives a private-use unichar
+ * (the arrows, the function keys) or a control character (Return, Delete)
+ * instead of a name. Tab and Escape are matched on keyCode rather than
+ * character because AppKit reports them as \t and \e, which would otherwise
+ * arrive as those literal characters.
+ *
+ * Naming follows the cross-platform reconciliation react-native-windows and
+ * react-native-macos both use, so a key handler is portable between them.
+ */
+static NSString *RCTKeyFromNSEvent(NSEvent *event)
+{
+  NSString *characters = event.charactersIgnoringModifiers;
+  unichar code = characters.length > 0 ? [characters characterAtIndex:0] : 0;
+
+  switch (event.keyCode) {
+    case 48:
+      return @"Tab";
+    case 53:
+      return @"Escape";
+    default:
+      break;
+  }
+
+  switch (code) {
+    case NSEnterCharacter:
+    case NSNewlineCharacter:
+    case NSCarriageReturnCharacter:
+      return @"Enter";
+    case NSLeftArrowFunctionKey:
+      return @"ArrowLeft";
+    case NSRightArrowFunctionKey:
+      return @"ArrowRight";
+    case NSUpArrowFunctionKey:
+      return @"ArrowUp";
+    case NSDownArrowFunctionKey:
+      return @"ArrowDown";
+    case NSBackspaceCharacter:
+    case NSDeleteCharacter:
+      return @"Backspace";
+    case NSDeleteFunctionKey:
+      return @"Delete";
+    case NSHomeFunctionKey:
+      return @"Home";
+    case NSEndFunctionKey:
+      return @"End";
+    case NSPageUpFunctionKey:
+      return @"PageUp";
+    case NSPageDownFunctionKey:
+      return @"PageDown";
+    default:
+      break;
+  }
+
+  if (code >= NSF1FunctionKey && code <= NSF12FunctionKey) {
+    return [NSString stringWithFormat:@"F%u", (unsigned)(code - NSF1FunctionKey + 1)];
+  }
+
+  return characters;
+}
+
+/**
+ * Emits the press and reports whether the view claimed it.
+ *
+ * Claiming matters because AppKit interprets an unclaimed key itself once the
+ * responder chain is done with it: Tab moves focus, Escape cancels, anything
+ * else beeps. A view says which keys it means to act on through `keyDownEvents`
+ * / `keyUpEvents`, and only those suppress the default behaviour. Listening via
+ * `onKeyDown` alone deliberately does not, so observing a key does not change
+ * what it does.
+ */
+- (BOOL)_handleKeyboardEvent:(NSEvent *)event
+{
+  NSEventModifierFlags flags = event.modifierFlags;
+  KeyEvent keyEvent = {
+      .key = RCTStringFromNSString(RCTKeyFromNSEvent(event)),
+      .altKey = static_cast<bool>(flags & NSEventModifierFlagOption),
+      .ctrlKey = static_cast<bool>(flags & NSEventModifierFlagControl),
+      .shiftKey = static_cast<bool>(flags & NSEventModifierFlagShift),
+      .metaKey = static_cast<bool>(flags & NSEventModifierFlagCommand),
+      .capsLockKey = static_cast<bool>(flags & NSEventModifierFlagCapsLock),
+      .numericPadKey = static_cast<bool>(flags & NSEventModifierFlagNumericPad),
+      .helpKey = static_cast<bool>(flags & NSEventModifierFlagHelp),
+      .functionKey = static_cast<bool>(flags & NSEventModifierFlagFunction),
+  };
+
+  BOOL isKeyDown = event.type == NSEventTypeKeyDown;
+  const auto &viewProps = static_cast<const ViewProps &>(*_props);
+
+  // Calling super walks the responder chain, which is the view hierarchy, so
+  // every ancestor view would emit the same press. Fabric bubbles the event
+  // through the shadow tree on its own, so only the innermost view should emit.
+  // The flag rides on the NSEvent because that is the one object the whole
+  // chain shares.
+  static const char kEmittedKey = 0;
+  if (_eventEmitter != nullptr && !((NSNumber *)objc_getAssociatedObject(event, &kEmittedKey)).boolValue) {
+    if (isKeyDown) {
+      _eventEmitter->onKeyDown(keyEvent);
+    } else {
+      _eventEmitter->onKeyUp(keyEvent);
+    }
+    objc_setAssociatedObject(event, &kEmittedKey, @YES, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+  }
+
+  const auto &handled = isKeyDown ? viewProps.keyDownEvents : viewProps.keyUpEvents;
+  return std::find(handled.cbegin(), handled.cend(), keyEvent) != handled.cend();
+}
+
+- (void)keyDown:(NSEvent *)event
+{
+  if (![self _handleKeyboardEvent:event]) {
+    [super keyDown:event];
+  }
+}
+
+- (void)keyUp:(NSEvent *)event
+{
+  if (![self _handleKeyboardEvent:event]) {
+    [super keyUp:event];
+  }
+}
+
 - (BOOL)allowsVibrancy
 {
   return _allowsVibrancy;
@@ -1922,7 +2231,16 @@ static NSString *RCTRecursiveAccessibilityLabel(UIView *view)
 
 - (void)focus
 {
+#if TARGET_OS_OSX // [macOS] On AppKit -becomeFirstResponder is the window
+  // notifying the view that it happened, not the view asking. Sending it
+  // directly changes nothing: -makeFirstResponder: is the request. Without
+  // this, `focusable` views never receive key events, because nothing ever
+  // makes them first responder -- AppKit moves focus on Tab only, and only
+  // when Full Keyboard Access is on.
+  [self.window makeFirstResponder:self];
+#else // [macOS]
   [self becomeFirstResponder];
+#endif // [macOS]
 
 #if TARGET_OS_TV
   RCTSurfaceHostingProxyRootView *rootView = [self containingRootView];
@@ -1938,7 +2256,14 @@ static NSString *RCTRecursiveAccessibilityLabel(UIView *view)
 
 - (void)blur
 {
+#if TARGET_OS_OSX // [macOS] Symmetrically: resigning is granted by the window,
+  // and only if this view still holds the focus.
+  if (self.window.firstResponder == self) {
+    [self.window makeFirstResponder:nil];
+  }
+#else // [macOS]
   [self resignFirstResponder];
+#endif // [macOS]
 }
 
 - (BOOL)becomeFirstResponder

package/React/React-RCTFabric.podspec

@@ -50,6 +50,10 @@ Pod::Spec.new do |s|
   s.module_name            = module_name
   s.weak_framework         = "JavaScriptCore"
   s.framework              = "MobileCoreServices"
+  # [macOS] Drag and drop names what was dropped with UTType. On iOS the symbols
+  # come in with MobileCoreServices; the macOS remap of that is CoreServices,
+  # which does not carry them.
+  s.osx.framework          = "UniformTypeIdentifiers"
   s.pod_target_xcconfig    = {
     "HEADER_SEARCH_PATHS" => header_search_paths,
     "OTHER_CFLAGS" => "$(inherited) " + new_arch_flags,

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -11,7 +11,8 @@
 
 namespace facebook::react {
 
-static jsi::Value mouseEventPayload(jsi::Runtime &runtime, const HostPlatformViewEventEmitter::MouseEvent &event)
+// Returns an Object, not a Value: dragEventPayload starts from one and adds to it.
+static jsi::Object mouseEventPayload(jsi::Runtime &runtime, const MouseEvent &event)
 {
   auto payload = jsi::Object(runtime);
   payload.setProperty(runtime, "clientX", event.clientX);
@@ -20,6 +21,30 @@ static jsi::Value mouseEventPayload(jsi::Runtime &runtime, const HostPlatformVie
   payload.setProperty(runtime, "screenY", event.screenY);
   payload.setProperty(runtime, "pageX", event.pageX);
   payload.setProperty(runtime, "pageY", event.pageY);
+  payload.setProperty(runtime, "altKey", event.altKey);
+  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
+  payload.setProperty(runtime, "shiftKey", event.shiftKey);
+  payload.setProperty(runtime, "metaKey", event.metaKey);
+  payload.setProperty(runtime, "button", event.button);
+  // Pressability's click guard reads this to tell a real mouse click apart from
+  // one synthesised by the responder system, which would otherwise fire onPress
+  // twice.
+  payload.setProperty(runtime, "pointerType", "mouse");
+  return payload;
+}
+
+static jsi::Value keyEventPayload(jsi::Runtime &runtime, const KeyEvent &event)
+{
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
+  payload.setProperty(runtime, "altKey", event.altKey);
+  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
+  payload.setProperty(runtime, "shiftKey", event.shiftKey);
+  payload.setProperty(runtime, "metaKey", event.metaKey);
+  payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
+  payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
+  payload.setProperty(runtime, "helpKey", event.helpKey);
+  payload.setProperty(runtime, "functionKey", event.functionKey);
   return payload;
 }
 
@@ -36,4 +61,74 @@ RCT_MACOS_MOUSE_EVENT(onMouseLeave)
 RCT_MACOS_MOUSE_EVENT(onDoubleClick)
 RCT_MACOS_MOUSE_EVENT(onAuxClick)
 
+#define RCT_MACOS_KEY_EVENT(name)                                                     \
+  void HostPlatformViewEventEmitter::name(const KeyEvent &event) const                \
+  {                                                                                   \
+    dispatchEvent(#name, [event](jsi::Runtime &runtime) {                             \
+      return keyEventPayload(runtime, event);                                         \
+    });                                                                               \
+  }
+
+RCT_MACOS_KEY_EVENT(onKeyDown)
+RCT_MACOS_KEY_EVENT(onKeyUp)
+
+static jsi::Value dragEventPayload(jsi::Runtime &runtime, const DragEvent &event)
+{
+  auto dataTransfer = jsi::Object(runtime);
+
+  auto files = jsi::Array(runtime, event.dataTransfer.files.size());
+  for (size_t i = 0; i < event.dataTransfer.files.size(); i++) {
+    const auto &file = event.dataTransfer.files[i];
+    auto entry = jsi::Object(runtime);
+    entry.setProperty(runtime, "name", jsi::String::createFromUtf8(runtime, file.name));
+    entry.setProperty(runtime, "type", jsi::String::createFromUtf8(runtime, file.type));
+    entry.setProperty(runtime, "uri", jsi::String::createFromUtf8(runtime, file.uri));
+    // Absent rather than zero when unknown: a directory has no meaningful size,
+    // and only an image has dimensions.
+    if (file.size.has_value()) {
+      entry.setProperty(runtime, "size", *file.size);
+    }
+    if (file.width.has_value()) {
+      entry.setProperty(runtime, "width", *file.width);
+    }
+    if (file.height.has_value()) {
+      entry.setProperty(runtime, "height", *file.height);
+    }
+    files.setValueAtIndex(runtime, i, entry);
+  }
+  dataTransfer.setProperty(runtime, "files", files);
+
+  auto items = jsi::Array(runtime, event.dataTransfer.items.size());
+  for (size_t i = 0; i < event.dataTransfer.items.size(); i++) {
+    const auto &item = event.dataTransfer.items[i];
+    auto entry = jsi::Object(runtime);
+    entry.setProperty(runtime, "kind", jsi::String::createFromUtf8(runtime, item.kind));
+    entry.setProperty(runtime, "type", jsi::String::createFromUtf8(runtime, item.type));
+    items.setValueAtIndex(runtime, i, entry);
+  }
+  dataTransfer.setProperty(runtime, "items", items);
+
+  auto types = jsi::Array(runtime, event.dataTransfer.types.size());
+  for (size_t i = 0; i < event.dataTransfer.types.size(); i++) {
+    types.setValueAtIndex(runtime, i, jsi::String::createFromUtf8(runtime, event.dataTransfer.types[i]));
+  }
+  dataTransfer.setProperty(runtime, "types", types);
+
+  auto payload = mouseEventPayload(runtime, event);
+  payload.setProperty(runtime, "dataTransfer", dataTransfer);
+  return payload;
+}
+
+#define RCT_MACOS_DRAG_EVENT(name)                                                    \
+  void HostPlatformViewEventEmitter::name(const DragEvent &event) const               \
+  {                                                                                   \
+    dispatchEvent(#name, [event](jsi::Runtime &runtime) {                             \
+      return dragEventPayload(runtime, event);                                        \
+    });                                                                               \
+  }
+
+RCT_MACOS_DRAG_EVENT(onDragEnter)
+RCT_MACOS_DRAG_EVENT(onDragLeave)
+RCT_MACOS_DRAG_EVENT(onDrop)
+
 } // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -5,12 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// [macOS] Adds the pointer events AppKit can report and UIKit cannot.
+// [macOS] Adds the pointer and key events AppKit can report and UIKit cannot.
 
 #pragma once
 
 #include <react/renderer/components/view/BaseViewEventEmitter.h>
 
+#include "KeyEvent.h"
+#include "MouseEvent.h"
+
 namespace facebook::react {
 
 class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
@@ -18,22 +21,28 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
   using BaseViewEventEmitter::BaseViewEventEmitter;
 
   /**
-   * A mouse crossing into or out of the view. There is no touch equivalent, so
-   * these have no counterpart in BaseViewEventEmitter.
+   * Named here as well so `HostPlatformViewEventEmitter::MouseEvent` keeps
+   * working; the type itself is free-standing, in MouseEvent.h.
    */
-  struct MouseEvent {
-    Float clientX{};
-    Float clientY{};
-    Float screenX{};
-    Float screenY{};
-    Float pageX{};
-    Float pageY{};
-  };
+  using MouseEvent = ::facebook::react::MouseEvent;
 
   void onMouseEnter(const MouseEvent &event) const;
   void onMouseLeave(const MouseEvent &event) const;
   void onDoubleClick(const MouseEvent &event) const;
   void onAuxClick(const MouseEvent &event) const;
+
+  void onKeyDown(const KeyEvent &event) const;
+  void onKeyUp(const KeyEvent &event) const;
+
+  /**
+   * A drag passing over or finishing on the view. Only reported for views that
+   * registered interest through the `draggedTypes` prop -- AppKit routes a drag
+   * to the topmost view that registered for one of the pasteboard types it
+   * carries, and ignores the rest.
+   */
+  void onDragEnter(const DragEvent &event) const;
+  void onDragLeave(const DragEvent &event) const;
+  void onDrop(const DragEvent &event) const;
 };
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEvents.h

@@ -20,13 +20,18 @@
 namespace facebook::react {
 
 struct HostPlatformViewEvents {
-  std::bitset<8> bits{};
+  std::bitset<16> bits{};
 
   enum class Offset : std::size_t {
     MouseEnter = 0,
     MouseLeave = 1,
     DoubleClick = 2,
     AuxClick = 3,
+    KeyDown = 4,
+    KeyUp = 5,
+    DragEnter = 6,
+    DragLeave = 7,
+    Drop = 8,
   };
 
   constexpr bool operator[](Offset offset) const
@@ -34,7 +39,7 @@ struct HostPlatformViewEvents {
     return bits[static_cast<std::size_t>(offset)];
   }
 
-  std::bitset<8>::reference operator[](Offset offset)
+  std::bitset<16>::reference operator[](Offset offset)
   {
     return bits[static_cast<std::size_t>(offset)];
   }

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -33,6 +33,11 @@ static inline HostPlatformViewEvents convertRawProp(
   RCT_MACOS_CONVERT_EVENT("onMouseLeave", MouseLeave);
   RCT_MACOS_CONVERT_EVENT("onDoubleClick", DoubleClick);
   RCT_MACOS_CONVERT_EVENT("onAuxClick", AuxClick);
+  RCT_MACOS_CONVERT_EVENT("onKeyDown", KeyDown);
+  RCT_MACOS_CONVERT_EVENT("onKeyUp", KeyUp);
+  RCT_MACOS_CONVERT_EVENT("onDragEnter", DragEnter);
+  RCT_MACOS_CONVERT_EVENT("onDragLeave", DragLeave);
+  RCT_MACOS_CONVERT_EVENT("onDrop", Drop);
 
 #undef RCT_MACOS_CONVERT_EVENT
 
@@ -59,6 +64,9 @@ HostPlatformViewProps::HostPlatformViewProps(
               : convertRawProp(context, rawProps, sourceProps.hostPlatformEvents, {})),
       RCT_MACOS_PROP(focusable),
       RCT_MACOS_PROP(enableFocusRing),
+      RCT_MACOS_PROP(keyDownEvents),
+      RCT_MACOS_PROP(keyUpEvents),
+      RCT_MACOS_PROP(draggedTypes),
       RCT_MACOS_PROP(tooltip),
       RCT_MACOS_PROP(acceptsFirstMouse),
       RCT_MACOS_PROP(allowsVibrancy),
@@ -99,8 +107,16 @@ void HostPlatformViewProps::setProp(
     RCT_MACOS_EVENT_CASE(MouseLeave);
     RCT_MACOS_EVENT_CASE(DoubleClick);
     RCT_MACOS_EVENT_CASE(AuxClick);
+    RCT_MACOS_EVENT_CASE(KeyDown);
+    RCT_MACOS_EVENT_CASE(KeyUp);
+    RCT_MACOS_EVENT_CASE(DragEnter);
+    RCT_MACOS_EVENT_CASE(DragLeave);
+    RCT_MACOS_EVENT_CASE(Drop);
     RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
     RAW_SET_PROP_SWITCH_CASE_BASIC(enableFocusRing);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(keyDownEvents);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(keyUpEvents);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(draggedTypes);
     RAW_SET_PROP_SWITCH_CASE_BASIC(tooltip);
     RAW_SET_PROP_SWITCH_CASE_BASIC(acceptsFirstMouse);
     RAW_SET_PROP_SWITCH_CASE_BASIC(allowsVibrancy);

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.h

@@ -20,8 +20,10 @@
 
 #include <optional>
 #include <string>
+#include <vector>
 
 #include "HostPlatformViewEvents.h"
+#include "KeyEvent.h"
 
 namespace facebook::react {
 
@@ -47,6 +49,22 @@ class HostPlatformViewProps : public BaseViewProps {
   /** Draws the focus ring while first responder. On by default, as in AppKit. */
   bool enableFocusRing{true};
 
+  /**
+   * Keys the view handles itself, rather than letting AppKit interpret them.
+   * See HandledKey: a press not declared here still reaches onKeyDown, but
+   * AppKit's own handling runs afterwards.
+   */
+  std::vector<HandledKey> keyDownEvents{};
+  std::vector<HandledKey> keyUpEvents{};
+
+  /**
+   * Which kinds of dragged content the view accepts: "fileUrl", "image",
+   * "string". Empty means the view takes no part in drag and drop -- AppKit
+   * routes a drag only to views that registered for one of its pasteboard
+   * types, so this is what makes onDragEnter/onDrop reachable at all.
+   */
+  std::vector<std::string> draggedTypes{};
+
   /** The view's help tag. std::nullopt leaves any inherited tooltip alone. */
   std::optional<std::string> tooltip{};
 

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewTraitsInitializer.h

@@ -26,7 +26,8 @@ inline bool formsView(const ViewProps &props)
   // flattened away: a focusable view has to join the key view loop, a tooltip
   // has to attach to something, and mouse tracking needs an NSTrackingArea
   // owner. Flattening is otherwise invisible -- the handler simply never fires.
-  return props.focusable || props.tooltip.has_value() || props.hostPlatformEvents.bits.any();
+  return props.focusable || props.tooltip.has_value() || props.hostPlatformEvents.bits.any() ||
+      !props.keyDownEvents.empty() || !props.keyUpEvents.empty() || !props.draggedTypes.empty();
 }
 
 inline bool isKeyboardFocusable(const ViewProps &props)

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/KeyEvent.h

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Key input, which only a desktop platform has to model.
+//
+// Two shapes, and the distinction matters. `KeyEvent` is what a view reports
+// happened. `HandledKey` is what a view declares in advance that it wants,
+// which is a filter, not an event: AppKit gives a key to the responder chain
+// and then to its own interpretation -- Tab moves focus, Escape cancels, an
+// unclaimed key beeps -- so a view that means to act on a key has to say so
+// before the press, or the default behaviour happens as well.
+//
+// Names follow https://www.w3.org/TR/uievents-key/ rather than AppKit's
+// keyCodes, so `keyDownEvents={[{key: 'Enter'}]}` is the same declaration it
+// would be on the web, and matches microsoft/react-native-macos.
+
+#pragma once
+
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+#include <optional>
+#include <string>
+#include <unordered_map>
+
+namespace facebook::react {
+
+/**
+ * A key the view intends to handle itself.
+ *
+ * A modifier left unset means "don't care": `{key: 'c'}` matches Cmd-C and a
+ * bare c alike, while `{key: 'c', metaKey: true}` matches only the former.
+ */
+struct HandledKey {
+  std::string key{};
+  std::optional<bool> altKey{};
+  std::optional<bool> ctrlKey{};
+  std::optional<bool> shiftKey{};
+  std::optional<bool> metaKey{};
+};
+
+inline bool operator==(const HandledKey &lhs, const HandledKey &rhs)
+{
+  return lhs.key == rhs.key && lhs.altKey == rhs.altKey && lhs.ctrlKey == rhs.ctrlKey &&
+      lhs.shiftKey == rhs.shiftKey && lhs.metaKey == rhs.metaKey;
+}
+
+/** A key press, as reported to `onKeyDown` / `onKeyUp`. */
+struct KeyEvent {
+  std::string key{};
+  bool altKey{false};
+  bool ctrlKey{false};
+  bool shiftKey{false};
+  bool metaKey{false};
+  bool capsLockKey{false};
+  bool numericPadKey{false};
+  bool helpKey{false};
+  bool functionKey{false};
+};
+
+/** Whether an actual press satisfies a declaration; unset modifiers match anything. */
+inline bool operator==(const KeyEvent &lhs, const HandledKey &rhs)
+{
+  return lhs.key == rhs.key && (!rhs.altKey.has_value() || lhs.altKey == *rhs.altKey) &&
+      (!rhs.ctrlKey.has_value() || lhs.ctrlKey == *rhs.ctrlKey) &&
+      (!rhs.shiftKey.has_value() || lhs.shiftKey == *rhs.shiftKey) &&
+      (!rhs.metaKey.has_value() || lhs.metaKey == *rhs.metaKey);
+}
+
+/**
+ * Accepts either the object form or a bare string, so `keyDownEvents={['Enter']}`
+ * works as shorthand for the common no-modifier case.
+ */
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, HandledKey &result)
+{
+  if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
+    auto map = static_cast<std::unordered_map<std::string, RawValue>>(value);
+    for (const auto &pair : map) {
+      if (pair.first == "key") {
+        result.key = static_cast<std::string>(pair.second);
+      } else if (pair.first == "altKey") {
+        result.altKey = static_cast<bool>(pair.second);
+      } else if (pair.first == "ctrlKey") {
+        result.ctrlKey = static_cast<bool>(pair.second);
+      } else if (pair.first == "shiftKey") {
+        result.shiftKey = static_cast<bool>(pair.second);
+      } else if (pair.first == "metaKey") {
+        result.metaKey = static_cast<bool>(pair.second);
+      }
+    }
+  } else if (value.hasType<std::string>()) {
+    result.key = static_cast<std::string>(value);
+  }
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MouseEvent.h

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Pointer and drag payloads, which only a desktop platform reports.
+//
+// Free-standing rather than nested in the event emitter, because
+// microsoft/react-native-macos puts `facebook::react::MouseEvent` and
+// `DragEvent` here and third-party Fabric components name them directly.
+
+#pragma once
+
+#include <react/renderer/graphics/Float.h>
+
+#include <optional>
+#include <string>
+#include <vector>
+
+namespace facebook::react {
+
+/** A mouse crossing, click or drag position. Fields follow the DOM MouseEvent. */
+struct MouseEvent {
+  /** Pointer location in the target view. */
+  Float clientX{0};
+  Float clientY{0};
+
+  /** Pointer location in the window. */
+  Float screenX{0};
+  Float screenY{0};
+
+  /**
+   * Pointer location in the window as well. The DOM distinguishes page from
+   * screen coordinates; AppKit has no document scroll offset to make them
+   * differ, so both report the window position.
+   */
+  Float pageX{0};
+  Float pageY{0};
+
+  bool altKey{false};
+  bool ctrlKey{false};
+  bool shiftKey{false};
+  bool metaKey{false};
+
+  /** DOM button numbering: 0 primary, 1 auxiliary, 2 secondary. */
+  int button{0};
+};
+
+/** One dragged file, described the way the DOM File interface does. */
+struct DataTransferFile {
+  std::string name{};
+  std::string type{};
+
+  /** A file path for a dragged file, or a data: URL for dragged image data. */
+  std::string uri{};
+
+  std::optional<int> size{};
+  std::optional<int> width{};
+  std::optional<int> height{};
+};
+
+struct DataTransferItem {
+  /** "file" or "image". */
+  std::string kind{};
+  std::string type{};
+};
+
+/** The pasteboard contents of a drag, shaped like the DOM DataTransfer. */
+struct DataTransfer {
+  std::vector<DataTransferFile> files{};
+  std::vector<DataTransferItem> items{};
+  std::vector<std::string> types{};
+};
+
+struct DragEvent : MouseEvent {
+  DataTransfer dataTransfer{};
+};
+
+} // namespace facebook::react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-react-native-macos",
-  "version": "0.87.1-rc.4",
+  "version": "0.87.1-rc.6",
   "description": "A framework for building native apps using React",
   "license": "MIT",
   "repository": {