feat(compass-context-menu): add a headless context menu package COMPASS-9386

packages/compass-context-menu/.depcheckrc

@@ -0,0 +1,8 @@
+ignores:
+ - '@mongodb-js/prettier-config-compass'
+ - '@mongodb-js/tsconfig-compass'
+ - '@types/chai'
+ - '@types/sinon-chai'
+ - 'sinon'
+ignore-patterns:
+ - 'dist'

packages/compass-context-menu/.eslintignore

@@ -0,0 +1,2 @@
+.nyc-output
+dist

packages/compass-context-menu/.eslintrc.js

@@ -0,0 +1,9 @@
+'use strict';
+module.exports = {
+  root: true,
+  extends: ['@mongodb-js/eslint-config-compass'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig-lint.json'],
+  },
+};

packages/compass-context-menu/.mocharc.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('@mongodb-js/mocha-config-compass/react');

packages/compass-context-menu/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@mongodb-js/compass-context-menu",
+  "author": {
+    "name": "MongoDB Inc",
+    "email": "[email protected]"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/COMPASS/issues",
+    "email": "[email protected]"
+  },
+  "homepage": "https://github.com/mongodb-js/compass",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb-js/compass.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "SSPL",
+  "main": "dist/index.js",
+  "compass:main": "src/index.ts",
+  "exports": {
+    "import": "./dist/.esm-wrapper.mjs",
+    "require": "./dist/index.js"
+  },
+  "compass:exports": {
+    ".": "./src/index.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "bootstrap": "npm run compile",
+    "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
+    "compile": "tsc -p tsconfig.json && gen-esm-wrapper . ./dist/.esm-wrapper.mjs",
+    "typecheck": "tsc -p tsconfig-lint.json --noEmit",
+    "eslint": "eslint-compass",
+    "prettier": "prettier-compass",
+    "lint": "npm run eslint . && npm run prettier -- --check .",
+    "depcheck": "compass-scripts check-peer-deps && depcheck",
+    "check": "npm run typecheck && npm run lint && npm run depcheck",
+    "check-ci": "npm run check",
+    "test": "mocha",
+    "test-cov": "nyc --compact=false --produce-source-map=false -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test",
+    "test-watch": "npm run test -- --watch",
+    "test-ci": "npm run test-cov",
+    "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ."
+  },
+  "dependencies": {
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@mongodb-js/eslint-config-compass": "^1.3.8",
+    "@mongodb-js/mocha-config-compass": "^1.6.8",
+    "@mongodb-js/prettier-config-compass": "^1.2.8",
+    "@mongodb-js/testing-library-compass": "^1.3.1",
+    "@mongodb-js/tsconfig-compass": "^1.2.8",
+    "@types/chai": "^4.2.21",
+    "@types/mocha": "^9.0.0",
+    "@types/react": "^17.0.5",
+    "@types/sinon-chai": "^3.2.5",
+    "chai": "^4.3.6",
+    "depcheck": "^1.4.1",
+    "gen-esm-wrapper": "^1.1.0",
+    "mocha": "^10.2.0",
+    "nyc": "^15.1.0",
+    "sinon": "^9.2.3",
+    "typescript": "^5.0.4"
+  }
+}

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

@@ -0,0 +1,24 @@
+import type { ContextMenuItemGroup } from './types';
+
+const CONTEXT_MENUS_SYMBOL = Symbol('context_menus');
+
+export type EnhancedMouseEvent = MouseEvent & {
+  [CONTEXT_MENUS_SYMBOL]?: ContextMenuItemGroup[];
+};
+
+export function getContextMenuContent(
+  event: EnhancedMouseEvent
+): ContextMenuItemGroup[] {
+  return event[CONTEXT_MENUS_SYMBOL] ?? [];
+}
+
+export function appendContextMenuContent(
+  event: EnhancedMouseEvent,
+  content: ContextMenuItemGroup
+) {
+  // Initialize if not already patched
+  if (!event[CONTEXT_MENUS_SYMBOL]) {
+    event[CONTEXT_MENUS_SYMBOL] = [];
+  }
+  event[CONTEXT_MENUS_SYMBOL].push(content);
+}

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

@@ -0,0 +1,86 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  createContext,
+} from 'react';
+import type { ContextMenuContextType, ContextMenuState } from './types';
+import type { EnhancedMouseEvent } from './context-menu-content';
+import { getContextMenuContent } from './context-menu-content';
+
+export const ContextMenuContext = createContext<ContextMenuContextType | null>(
+  null
+);
+
+export function ContextMenuProvider({
+  children,
+  menuWrapper,
+}: {
+  children: React.ReactNode;
+  menuWrapper: React.ComponentType<{
+    menu: ContextMenuState & { close: () => void };
+  }>;
+}) {
+  const [menu, setMenu] = useState<ContextMenuState>({
+    isOpen: false,
+    itemGroups: [],
+    position: { x: 0, y: 0 },
+  });
+  const close = useCallback(() => setMenu({ ...menu, isOpen: false }), [menu]);
+
+  const handleClosingEvent = useCallback(
+    (event: Event) => {
+      if (!event.defaultPrevented) {
+        setMenu({ ...menu, isOpen: false });
+      }
+    },
+    [menu]
+  );
+
+  useEffect(() => {
+    function handleContextMenu(event: MouseEvent) {
+      event.preventDefault();
+
+      const itemGroups = getContextMenuContent(event as EnhancedMouseEvent);
+
+      if (itemGroups.length === 0) {
+        return;
+      }
+
+      setMenu({
+        isOpen: true,
+        itemGroups,
+        position: {
+          // TODO: Fix handling offset while scrolling
+          x: event.clientX,
+          y: event.clientY,
+        },
+      });
+    }
+
+    document.addEventListener('contextmenu', handleContextMenu);
+    window.addEventListener('resize', handleClosingEvent);
+
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu);
+      window.removeEventListener('resize', handleClosingEvent);
+    };
+  }, [handleClosingEvent]);
+
+  const value = useMemo(
+    () => ({
+      close,
+    }),
+    [close]
+  );
+
+  const Wrapper = menuWrapper ?? React.Fragment;
+
+  return (
+    <ContextMenuContext.Provider value={value}>
+      {children}
+      <Wrapper menu={{ ...menu, close }} />
+    </ContextMenuContext.Provider>
+  );
+}

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

@@ -0,0 +1,7 @@
+export { useContextMenu } from './use-context-menu';
+export { ContextMenuProvider } from './context-menu-provider';
+export type {
+  ContextMenuItem,
+  ContextMenuItemGroup,
+  ContextMenuWrapperProps,
+} from './types';

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

@@ -0,0 +1,26 @@
+export interface ContextMenuItemGroup {
+  items: ContextMenuItem[];
+  originListener: (event: MouseEvent) => void;
+}
+
+export type ContextMenuState = {
+  isOpen: boolean;
+  itemGroups: ContextMenuItemGroup[];
+  position: {
+    x: number;
+    y: number;
+  };
+};
+
+export type ContextMenuWrapperProps = {
+  menu: ContextMenuState & { close: () => void };
+};
+
+export type ContextMenuContextType = {
+  close(): void;
+};
+
+export type ContextMenuItem = {
+  label: string;
+  onAction: (event: React.KeyboardEvent | React.MouseEvent) => void;
+};