From 44f78611ef0d2f53f6eec468d189e58ab033cebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 1 Jul 2025 09:15:00 +0200
Subject: [PATCH 1/2] Add useContextMenuGroups hook

---
 .../src/components/context-menu.tsx           | 25 ++++++++++++++-----
 packages/compass-components/src/index.ts      |  6 ++++-
 .../src/context-menu-content.ts               |  4 +--
 .../src/use-context-menu.tsx                  |  8 +++---
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/compass-components/src/components/context-menu.tsx b/packages/compass-components/src/components/context-menu.tsx
index 08c0ab13d3f..8941cbab1da 100644
--- a/packages/compass-components/src/components/context-menu.tsx
+++ b/packages/compass-components/src/components/context-menu.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
-import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
-import { useContextMenu } from '@mongodb-js/compass-context-menu';
-import { ContextMenuProvider as ContextMenuProviderBase } from '@mongodb-js/compass-context-menu';
-import type {
-  ContextMenuItemGroup,
-  ContextMenuWrapperProps,
+
+import {
+  ContextMenuProvider as ContextMenuProviderBase,
+  useContextMenu,
+  type ContextMenuItem,
+  type ContextMenuItemGroup,
+  type ContextMenuWrapperProps,
 } from '@mongodb-js/compass-context-menu';
 
+export type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
+
 export function ContextMenuProvider({
   children,
 }: {
@@ -95,3 +98,13 @@ export function useContextMenuItems(
   const contextMenu = useContextMenu();
   return contextMenu.registerItems(memoizedItems);
 }
+
+export function useContextMenuGroups(
+  getGroups: () => ContextMenuItemGroup[],
+  dependencies: React.DependencyList | undefined
+): React.RefCallback<HTMLElement> {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedGroups = useMemo(getGroups, dependencies);
+  const contextMenu = useContextMenu();
+  return contextMenu.registerItems(...memoizedGroups);
+}
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
index 9339b2a5fb5..6be7d8102eb 100644
--- a/packages/compass-components/src/index.ts
+++ b/packages/compass-components/src/index.ts
@@ -100,7 +100,11 @@ export { ModalHeader } from './components/modals/modal-header';
 export { FormModal } from './components/modals/form-modal';
 export { InfoModal } from './components/modals/info-modal';
 
-export { useContextMenuItems } from './components/context-menu';
+export {
+  useContextMenuItems,
+  useContextMenuGroups,
+  type ContextMenuItem,
+} from './components/context-menu';
 
 export type {
   FileInputBackend,
diff --git a/packages/compass-context-menu/src/context-menu-content.ts b/packages/compass-context-menu/src/context-menu-content.ts
index c301983a679..bbfd53ccea9 100644
--- a/packages/compass-context-menu/src/context-menu-content.ts
+++ b/packages/compass-context-menu/src/context-menu-content.ts
@@ -14,11 +14,11 @@ export function getContextMenuContent(
 
 export function appendContextMenuContent(
   event: EnhancedMouseEvent,
-  content: ContextMenuItemGroup
+  ...groups: ContextMenuItemGroup[]
 ) {
   // Initialize if not already patched
   if (!event[CONTEXT_MENUS_SYMBOL]) {
     event[CONTEXT_MENUS_SYMBOL] = [];
   }
-  event[CONTEXT_MENUS_SYMBOL].push(content);
+  event[CONTEXT_MENUS_SYMBOL].push(...groups);
 }
diff --git a/packages/compass-context-menu/src/use-context-menu.tsx b/packages/compass-context-menu/src/use-context-menu.tsx
index 1ff36305487..56754933c33 100644
--- a/packages/compass-context-menu/src/use-context-menu.tsx
+++ b/packages/compass-context-menu/src/use-context-menu.tsx
@@ -8,12 +8,12 @@ export type ContextMenuMethods<T extends ContextMenuItem> = {
   /**
    * Close the context menu.
    */
-  close: () => void;
+  close(): void;
   /**
    * Register the menu items for the context menu.
    * @returns a callback ref to be passed onto the element responsible for triggering the menu.
    */
-  registerItems: (items: T[]) => RefCallback<HTMLElement>;
+  registerItems(...groups: T[][]): RefCallback<HTMLElement>;
 };
 
 export function useContextMenu<
@@ -34,9 +34,9 @@ export function useContextMenu<
       /**
        * @returns a callback ref, passed onto the element responsible for triggering the menu.
        */
-      registerItems(items: ContextMenuItem[]) {
+      registerItems(...groups: ContextMenuItem[][]) {
         function listener(event: MouseEvent): void {
-          appendContextMenuContent(event, items);
+          appendContextMenuContent(event, ...groups);
         }
 
         return (trigger: HTMLElement | null) => {

From 129f84066ba8d2e5063ae112159ba23034bf4ea6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 1 Jul 2025 09:45:28 +0200
Subject: [PATCH 2/2] Adding useContextMenuGroups to additionalHooks

---
 configs/eslint-config-compass/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/configs/eslint-config-compass/index.js b/configs/eslint-config-compass/index.js
index b00fb753694..752f4daaaa1 100644
--- a/configs/eslint-config-compass/index.js
+++ b/configs/eslint-config-compass/index.js
@@ -44,7 +44,8 @@ const tsxRules = {
   'react-hooks/exhaustive-deps': [
     'warn',
     {
-      additionalHooks: '(useTrackOnChange|useContextMenuItems)',
+      additionalHooks:
+        '(useTrackOnChange|useContextMenuItems|useContextMenuGroups)',
     },
   ],
 };