feat: display dev menu as a sheet when invoked from Metro (1/2) (#2750)

## Summary:

You can launch the dev menu 3 ways:

1. Via the hot key Cmd+D (not supported on macOS at time of writing, see
notes for why)
2. Via a right click (not enabled in Fabric yet, see #2749)
3. By pressing "d" in a metro server

This PR is focused on fixing issues with (3).

When the dev menu was presented from metro, we didn't have a window or
mouse location to key off of, so a context menu would present at
coordinates (0,0), AKA, the bottom left of your screen on macOS. This
isn't very discoverable or useful. To match other platforms, I think it
would be better to make the dev menu an NSAlert, presented on top of the
apps window.

Let's also preserve the right click context menu for now, since that is
still useful and muscle memory for most macOS devs. Let's also use some
newer NSMenu APIs to set the title / subtitle while we're here.

## Test Plan:


https://github.com/user-attachments/assets/64bc0bc1-c1b2-4b39-a0cb-def87baa91f2

## Notes

We don't want to support (1) because we don't want to register hotkeys
on the window, a window may have multiple instances of RN running. We
could register it on the root view... but on macOS, keyboard focus is
rarely in the root view (it's usually just on the window or application)
so this isn't very discoverable. I'll elect to skip implementing this
flow for now.

Author: Saadnajmi

packages/react-native/React/CoreModules/RCTDevMenu.mm

@@ -100,10 +100,10 @@ - (NSString *)title
 @end
 
 #if !TARGET_OS_OSX // [macOS]
-
 typedef void (^RCTDevMenuAlertActionHandler)(UIAlertAction *action);
-
-#endif // [macOS]
+#else // [macOS
+typedef void (^RCTDevMenuAlertActionHandler)(NSModalResponse response);
+#endif // macOS]
 
 @interface RCTDevMenu () <RCTBridgeModule, RCTInvalidating, NativeDevMenuSpec>
 
@@ -112,6 +112,8 @@ @interface RCTDevMenu () <RCTBridgeModule, RCTInvalidating, NativeDevMenuSpec>
 @implementation RCTDevMenu {
 #if !TARGET_OS_OSX // [macOS]
   UIAlertController *_actionSheet;
+#else // [macOS
+  NSAlert *_alert;
 #endif // [macOS]
   NSMutableArray<RCTDevMenuItem *> *_extraMenuItems;
 }
@@ -247,12 +249,16 @@ - (void)toggle
     [self show];
   }
 }
+#endif // macOS]
 
 - (BOOL)isActionSheetShown
 {
+#if !TARGET_OS_OSX // [macOS]
   return _actionSheet != nil;
+#else // [macOS
+  return _alert != nil;
+#endif // macOS]
 }
-#endif // [macOS]
 
 - (void)addItem:(NSString *)title handler:(void (^)(void))handler
 {
@@ -433,43 +439,42 @@ - (void)setDefaultJSBundle
                       [alert addButtonWithTitle:@"Cancel"];
                       [alert setAlertStyle:NSAlertStyleWarning];
 
-                      [alert beginSheetModalForWindow:[NSApp keyWindow]
-                                    completionHandler:^(NSModalResponse response) {
-                                      if (response == NSAlertFirstButtonReturn) {
-                                        // Apply Changes
-                                        NSString *ipAddress = ipTextField.stringValue;
-                                        NSString *port = portTextField.stringValue;
-                                        NSString *bundleRoot = entrypointTextField.stringValue;
-
-                                        if (ipAddress.length == 0 && port.length == 0) {
-                                          [weakSelf setDefaultJSBundle];
-                                          return;
-                                        }
-
-                                        NSNumberFormatter *formatter = [NSNumberFormatter new];
-                                        formatter.numberStyle = NSNumberFormatterDecimalStyle;
-                                        NSNumber *portNumber = [formatter numberFromString:port];
-                                        if (portNumber == nil) {
-                                          portNumber = [NSNumber numberWithInt:RCT_METRO_PORT];
-                                        }
-
-                                        [RCTBundleURLProvider sharedSettings].jsLocation =
-                                            [NSString stringWithFormat:@"%@:%d", ipAddress, portNumber.intValue];
-
-                                        if (bundleRoot.length == 0) {
-                                          [bundleManager resetBundleURL];
-                                        } else {
-                                          bundleManager.bundleURL = [[RCTBundleURLProvider sharedSettings]
-                                              jsBundleURLForBundleRoot:bundleRoot];
-                                        }
-
-                                        RCTTriggerReloadCommandListeners(@"Dev menu - apply changes");
-                                      } else if (response == NSAlertSecondButtonReturn) {
-                                        // Reset to Default
-                                        [weakSelf setDefaultJSBundle];
-                                      }
-                                      // Cancel - do nothing
-                                    }];
+                      NSModalResponse response = [alert runModal];
+                      
+                      if (response == NSAlertFirstButtonReturn) {
+                        // Apply Changes
+                        NSString *ipAddress = ipTextField.stringValue;
+                        NSString *port = portTextField.stringValue;
+                        NSString *bundleRoot = entrypointTextField.stringValue;
+
+                        if (ipAddress.length == 0 && port.length == 0) {
+                          [weakSelf setDefaultJSBundle];
+                          return;
+                        }
+
+                        NSNumberFormatter *formatter = [NSNumberFormatter new];
+                        formatter.numberStyle = NSNumberFormatterDecimalStyle;
+                        NSNumber *portNumber = [formatter numberFromString:port];
+                        if (portNumber == nil) {
+                          portNumber = [NSNumber numberWithInt:RCT_METRO_PORT];
+                        }
+
+                        [RCTBundleURLProvider sharedSettings].jsLocation =
+                            [NSString stringWithFormat:@"%@:%d", ipAddress, portNumber.intValue];
+
+                        if (bundleRoot.length == 0) {
+                          [bundleManager resetBundleURL];
+                        } else {
+                          bundleManager.bundleURL = [[RCTBundleURLProvider sharedSettings]
+                              jsBundleURLForBundleRoot:bundleRoot];
+                        }
+
+                        RCTTriggerReloadCommandListeners(@"Dev menu - apply changes");
+                      } else if (response == NSAlertSecondButtonReturn) {
+                        // Reset to Default
+                        [weakSelf setDefaultJSBundle];
+                      }
+                      // Cancel - do nothing
 #endif // macOS]
                     }]];
 
@@ -483,19 +488,29 @@ - (void)setDefaultJSBundle
   if (_actionSheet || RCTRunningInAppExtension()) {
     return;
   }
+#else // [macOS
+  if (_alert) {
+    return;
+  }
+#endif // [macOS]
 
   NSString *bridgeDescription = _bridge.bridgeDescription;
   NSString *description =
       bridgeDescription.length > 0 ? [NSString stringWithFormat:@"Running %@", bridgeDescription] : nil;
 
+#if !TARGET_OS_OSX // [macOS]
   // On larger devices we don't have an anchor point for the action sheet
   UIAlertControllerStyle style = [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone
       ? UIAlertControllerStyleActionSheet
       : UIAlertControllerStyleAlert;
+#else // [macOS
+  NSAlertStyle style = NSAlertStyleInformational;
+#endif // macOS]
 
   NSString *devMenuType = [self.bridge isKindOfClass:RCTBridge.class] ? @"Bridge" : @"Bridgeless";
   NSString *devMenuTitle = [NSString stringWithFormat:@"React Native Dev Menu (%@)", devMenuType];
 
+#if !TARGET_OS_OSX // [macOS]
   _actionSheet = [UIAlertController alertControllerWithTitle:devMenuTitle message:description preferredStyle:style];
 
   NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
@@ -513,20 +528,38 @@ - (void)setDefaultJSBundle
 
   _presentedItems = items;
   [RCTPresentedViewController() presentViewController:_actionSheet animated:YES completion:nil];
-
 #else // [macOS
-  NSMenu *menu = [self menu];
-  NSWindow *window = [NSApp keyWindow];
-  NSEvent *event = [NSEvent mouseEventWithType:NSEventTypeLeftMouseUp
-                                      location:CGPointMake(0, 0)
-                                 modifierFlags:0
-                                     timestamp:NSTimeIntervalSince1970
-                                  windowNumber:[window windowNumber]
-                                       context:nil
-                                   eventNumber:0
-                                    clickCount:0
-                                      pressure:0.1];
-  [NSMenu popUpContextMenu:menu withEvent:event forView:[window contentView]];
+  _alert = [NSAlert new];
+  [_alert setMessageText:devMenuTitle];
+  [_alert setInformativeText:description];
+  [_alert setAlertStyle:NSAlertStyleInformational];
+
+  NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
+  for (RCTDevMenuItem *item in items) {
+    [_alert addButtonWithTitle:item.title];
+  }
+
+  [_alert addButtonWithTitle:@"Cancel"];
+
+  _presentedItems = items;
+  
+  // If Invoked from Metro, both the key window and main window may be nil, so we fallback to the first window in that case
+  NSWindow *window = RCTKeyWindow() ?: [NSApp mainWindow] ?: [[NSApp windows] firstObject];
+
+
+  [_alert beginSheetModalForWindow:window completionHandler:^(NSModalResponse response) {
+    // Button responses are NSAlertFirstButtonReturn, NSAlertSecondButtonReturn, etc.
+    // The last button (Cancel) will have response = NSAlertFirstButtonReturn + menuItems.count
+    NSInteger buttonIndex = response - NSAlertFirstButtonReturn;
+
+    RCTDevMenuItem *selectedItem = nil;
+    if (buttonIndex >= 0 && buttonIndex < self->_presentedItems.count) {
+      // Execute the corresponding menu item
+      selectedItem = self->_presentedItems[buttonIndex];
+    }
+    RCTDevMenuAlertActionHandler handler = [self alertActionHandlerForDevItem:selectedItem];
+    handler(response);
+  }];
 #endif // macOS]
 
   [_callableJSModules invokeModule:@"RCTNativeAppEventEmitter" method:@"emit" withArgs:@[ @"RCTDevMenuShown" ]];
@@ -544,37 +577,44 @@ - (RCTDevMenuAlertActionHandler)alertActionHandlerForDevItem:(RCTDevMenuItem *__
   };
 }
 #else // [macOS
+- (RCTDevMenuAlertActionHandler)alertActionHandlerForDevItem:(RCTDevMenuItem *__nullable)item
+{
+  return ^(NSModalResponse response) {
+    if (item) {
+      [item callHandler];
+    }
+    
+    self->_alert = nil;
+  };
+}
+#endif // [macOS]
+
+#if TARGET_OS_OSX // [macOS
 - (NSMenu *)menu
 {
-  if ([_bridge.devSettings isSecondaryClickToShowDevMenuEnabled]) {
-    NSMenu *menu = nil;
-    if (_bridge) {
-      NSString *desc = _bridge.bridgeDescription;
-      if (desc.length == 0) {
-        desc = NSStringFromClass([_bridge class]);
-      }
-      NSString *title = [NSString stringWithFormat:@"React Native: Development\n(%@)", desc];
-
-      menu = [NSMenu new];
-
-      NSMutableAttributedString *attributedTitle = [[NSMutableAttributedString alloc] initWithString:title];
-      [attributedTitle setAttributes:@{NSFontAttributeName : [NSFont menuFontOfSize:0]}
-                               range:NSMakeRange(0, [attributedTitle length])];
-      NSMenuItem *titleItem = [NSMenuItem new];
-      [titleItem setAttributedTitle:attributedTitle];
-      [menu addItem:titleItem];
-
-      [menu addItem:[NSMenuItem separatorItem]];
-
-      NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
-      for (RCTDevMenuItem *item in items) {
-        NSMenuItem *menuItem = [[NSMenuItem alloc] initWithTitle:[item title]
-                                                          action:@selector(menuItemSelected:)
-                                                   keyEquivalent:@""];
-        [menuItem setTarget:self];
-        [menuItem setRepresentedObject:item];
-        [menu addItem:menuItem];
-      }
+  if ([((RCTDevSettings *)[_moduleRegistry moduleForName:"DevSettings"]) isSecondaryClickToShowDevMenuEnabled]) {
+    NSMenu *menu = [NSMenu new];
+    
+    NSString *devMenuType = [self.bridge isKindOfClass:RCTBridge.class] ? @"Bridge" : @"Bridgeless";
+    NSString *devMenuTitle = [NSString stringWithFormat:@"React Native Dev Menu (%@)", devMenuType];
+    
+    NSMenuItem *titleItem = [NSMenuItem sectionHeaderWithTitle:devMenuTitle];
+    if (@available(macOS 14.4, *)) {
+      NSString *bridgeDescription = _bridge.bridgeDescription;
+      NSString *description =
+      bridgeDescription.length > 0 ? [NSString stringWithFormat:@"Running %@", bridgeDescription] : nil;
+      [titleItem setSubtitle:description];
+    }
+    [menu addItem:titleItem];
+    
+    NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
+    for (RCTDevMenuItem *item in items) {
+      NSMenuItem *menuItem = [[NSMenuItem alloc] initWithTitle:[item title]
+                                                        action:@selector(menuItemSelected:)
+                                                 keyEquivalent:@""];
+      [menuItem setTarget:self];
+      [menuItem setRepresentedObject:item];
+      [menu addItem:menuItem];
     }
     return menu;
   }