Add useContextMenuGroups hook (#7066)

* Add useContextMenuGroups hook

* Adding useContextMenuGroups to additionalHooks

Author: kraenhansen

configs/eslint-config-compass/index.js

@@ -44,7 +44,8 @@ const tsxRules = {
   'react-hooks/exhaustive-deps': [
     'warn',
     {
-      additionalHooks: '(useTrackOnChange|useContextMenuItems)',
+      additionalHooks:
+        '(useTrackOnChange|useContextMenuItems|useContextMenuGroups)',
     },
   ],
 };

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

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,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) => {