Skip to content

Add useContextMenuGroups hook #7066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 1, 2025
Merged

Add useContextMenuGroups hook #7066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44f7861
Add useContextMenuGroups hook
kraenhansen Jul 1, 2025
129f840
Adding useContextMenuGroups to additionalHooks
kraenhansen Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion configs/eslint-config-compass/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ const tsxRules = {
'react-hooks/exhaustive-deps': [
'warn',
{
additionalHooks: '(useTrackOnChange|useContextMenuItems)',
additionalHooks:
'(useTrackOnChange|useContextMenuItems|useContextMenuGroups)',
},
],
};
Expand Down
25 changes: 19 additions & 6 deletions packages/compass-components/src/components/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
}: {
Expand Down Expand Up @@ -95,3 +98,13 @@ export function useContextMenuItems(
const contextMenu = useContextMenu();
return contextMenu.registerItems(memoizedItems);
}

export function useContextMenuGroups(
Copy link
Contributor

@gagik gagik Jul 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: You can add useContextMenuGroups to our linter's react-hooks/exhaustive-deps additionalHooks config to track dependencies. If you search for useContextMenuItems you will probably find it

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);
}
6 changes: 5 additions & 1 deletion packages/compass-components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/compass-context-menu/src/context-menu-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
8 changes: 4 additions & 4 deletions packages/compass-context-menu/src/use-context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand All @@ -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) => {
Expand Down