fix: basic UI implementation

Author: gagik

packages/compass-components/src/components/context-menu.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Menu, MenuItem, MenuSeparator } from './leafygreen';
+import type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
+import { useContextMenu } from '@mongodb-js/compass-context-menu';
+
+const menuStyle = css({
+  position: 'fixed',
+  zIndex: 9999,
+});
+
+export type ContextMenuProps = {
+  items: ContextMenuItem[];
+  className?: string;
+  'data-testid'?: string;
+};
+
+export function ContextMenu({
+  items,
+  className,
+  'data-testid': dataTestId,
+}: ContextMenuProps) {
+  return (
+    <Menu className={cx(menuStyle, className)} data-testid={dataTestId}>
+      {items.map((item, idx) => {
+        const { label, onAction } = item;
+        const isLastItem = idx === items.length - 1;
+
+        return (
+          <>
+            {!isLastItem && <MenuSeparator />}
+            <MenuItem
+              key={`${label}-${idx}`}
+              data-testid={`context-menu-item-${label}`}
+              onClick={(evt: React.MouseEvent) => {
+                evt.stopPropagation();
+                onAction?.(evt);
+              }}
+            >
+              {label}
+            </MenuItem>
+          </>
+        );
+      })}
+    </Menu>
+  );
+}
+
+export function useContextMenuItems(
+  items: ContextMenuItem[]
+): React.RefCallback<HTMLElement> {
+  const contextMenu = useContextMenu({ Menu: ContextMenu });
+  return contextMenu.registerItems(items);
+}

packages/compass-context-menu/src/index.ts

@@ -0,0 +1,2 @@
+export { useContextMenu } from './use-context-menu';
+export type { ContextMenuItem } from './types';

packages/compass-context-menu/src/types.ts

@@ -15,7 +15,7 @@ export type ContextMenuContext = {
   close(): void;
 };
 
-export type MenuItem = {
+export type ContextMenuItem = {
   label: string;
   onAction: (event: React.KeyboardEvent | React.MouseEvent) => void;
 };

packages/compass-context-menu/src/use-context-menu.spec.tsx

@@ -4,10 +4,10 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 import { useContextMenu } from './use-context-menu';
 import { ContextMenuProvider } from './context-menu-provider';
-import type { MenuItem } from './types';
+import type { ContextMenuItem } from './types';
 
 describe('useContextMenu', function () {
-  const TestMenu: React.FC<{ items: MenuItem[] }> = ({ items }) => (
+  const TestMenu: React.FC<{ items: ContextMenuItem[] }> = ({ items }) => (
     <div data-testid="test-menu">
       {items.map((item, idx) => (
         <div
@@ -36,7 +36,7 @@ describe('useContextMenu', function () {
     onAction?: (id) => void;
   }) => {
     const contextMenu = useContextMenu({ Menu: TestMenu });
-    const items: MenuItem[] = [
+    const items: ContextMenuItem[] = [
       {
         label: 'Test Item',
         onAction: () => onAction?.(1),
@@ -64,7 +64,7 @@ describe('useContextMenu', function () {
     children?: React.ReactNode;
   }) => {
     const contextMenu = useContextMenu({ Menu: TestMenu });
-    const parentItems: MenuItem[] = [
+    const parentItems: ContextMenuItem[] = [
       {
         label: 'Parent Item 1',
         onAction: () => onAction?.(1),
@@ -90,7 +90,7 @@ describe('useContextMenu', function () {
     onAction?: (id: number) => void;
   }) => {
     const contextMenu = useContextMenu({ Menu: TestMenu });
-    const childItems: MenuItem[] = [
+    const childItems: ContextMenuItem[] = [
       {
         label: 'Child Item 1',
         onAction: () => onAction?.(1),

packages/compass-context-menu/src/use-context-menu.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useMemo, useRef } from 'react';
 import { Context } from './context-menu-provider';
 import { appendContextMenuContent } from './context-menu-content';
-import type { MenuItem } from './types';
+import type { ContextMenuItem } from './types';
 
-export type ContextMenuMethods<T extends MenuItem> = {
+export type ContextMenuMethods<T extends ContextMenuItem> = {
   /**
    * Close the context menu.
    */
@@ -12,10 +12,10 @@ export type ContextMenuMethods<T extends MenuItem> = {
    * 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[]) => (trigger: HTMLElement | null) => void;
+  registerItems: (items: T[]) => React.RefCallback<HTMLElement>;
 };
 
-export function useContextMenu<T extends MenuItem>({
+export function useContextMenu<T extends ContextMenuItem>({
   Menu,
 }: {
   Menu: React.ComponentType<{
@@ -33,7 +33,9 @@ export function useContextMenu<T extends MenuItem>({
       throw new Error('useContextMenu called outside of the provider');
     }
 
-    const register = (content: React.ComponentType) => {
+    const register = (
+      content: React.ComponentType
+    ): React.RefCallback<HTMLElement> => {
       function listener(event: MouseEvent) {
         appendContextMenuContent(event, content);
       }