Add useContextMenuGroups hook

Author: kraenhansen

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,
 }: {
@@ -100,3 +103,13 @@ export function useContextMenuItems(
   const contextMenu = useContextMenu();
   return contextMenu.registerItems(memoizedItems);
 }
+
+export function useContextMenuGroups(
+  getGroups: () => ContextMenuItem[][],
+  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);
+}

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,

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);
 }

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,12 +34,15 @@ 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,
-            originListener: listener,
-          });
+          appendContextMenuContent(
+            event,
+            ...groups.map((items) => ({
+              items,
+              originListener: listener,
+            }))
+          );
         }
 
         return (trigger: HTMLElement | null) => {