diff --git a/packages/compass-components/src/components/context-menu.tsx b/packages/compass-components/src/components/context-menu.tsx
index bf1b4773e52..08c0ab13d3f 100644
--- a/packages/compass-components/src/components/context-menu.tsx
+++ b/packages/compass-components/src/components/context-menu.tsx
@@ -23,8 +23,7 @@ export function ContextMenuProvider({
export function ContextMenu({ menu }: ContextMenuWrapperProps) {
const menuRef = useRef(null);
- const position = menu.position;
- const itemGroups = menu.itemGroups;
+ const { position, itemGroups } = menu;
useEffect(() => {
if (!menu.isOpen) {
@@ -50,42 +49,38 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
setOpen={menu.close}
justify="start"
>
- {itemGroups.map(
- (itemGroup: ContextMenuItemGroup, groupIndex: number) => {
- return (
-
- {itemGroup.items.map(
- (item: ContextMenuItem, itemIndex: number) => {
- return (
-
- );
- }
- )}
- {groupIndex < itemGroups.length - 1 && (
-
{
+ return (
+
+ {items.map((item: ContextMenuItem, itemIndex: number) => {
+ return (
+
- )}
-
- );
- }
- )}
+ {item.label}
+
+ );
+ })}
+ {groupIndex < itemGroups.length - 1 && (
+
+
+
+ )}
+
+ );
+ })}
);
diff --git a/packages/compass-context-menu/src/types.ts b/packages/compass-context-menu/src/types.ts
index 163abe56132..1b342f9a3da 100644
--- a/packages/compass-context-menu/src/types.ts
+++ b/packages/compass-context-menu/src/types.ts
@@ -1,7 +1,4 @@
-export interface ContextMenuItemGroup {
- items: ContextMenuItem[];
- originListener: (event: MouseEvent) => void;
-}
+export type ContextMenuItemGroup = ContextMenuItem[];
export type ContextMenuState = {
isOpen: boolean;
diff --git a/packages/compass-context-menu/src/use-context-menu.tsx b/packages/compass-context-menu/src/use-context-menu.tsx
index a0b874b656c..1ff36305487 100644
--- a/packages/compass-context-menu/src/use-context-menu.tsx
+++ b/packages/compass-context-menu/src/use-context-menu.tsx
@@ -36,10 +36,7 @@ export function useContextMenu<
*/
registerItems(items: ContextMenuItem[]) {
function listener(event: MouseEvent): void {
- appendContextMenuContent(event, {
- items,
- originListener: listener,
- });
+ appendContextMenuContent(event, items);
}
return (trigger: HTMLElement | null) => {