refactor: minor stylistic changes

Author: gagik

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

@@ -35,13 +35,14 @@ export function ContextMenuProvider({
         },
       });
     }
-    document.addEventListener('contextmenu', handleContextMenu);
 
     function handleClosingEvent(event: Event) {
       if (!event.defaultPrevented) {
         setMenu({ isOpen: false });
       }
     }
+
+    document.addEventListener('contextmenu', handleContextMenu);
     document.addEventListener('click', handleClosingEvent);
     window.addEventListener('resize', handleClosingEvent);
 

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

@@ -3,16 +3,25 @@ import { Context } from './context-menu-provider';
 import { appendContextMenuContent } from './context-menu-content';
 import type { MenuItem } from './types';
 
-/**
- * @returns an object with methods to {@link register} content for the menu and {@link close} the menu
- */
+export type ContextMenuMethods<T extends MenuItem> = {
+  /**
+   * Close the context menu.
+   */
+  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[]) => (trigger: HTMLElement | null) => void;
+};
+
 export function useContextMenu<T extends MenuItem>({
   Menu,
 }: {
   Menu: React.ComponentType<{
     items: T[];
   }>;
-}) {
+}): ContextMenuMethods<T> {
   // Get the close function from the ContextProvider
   const context = useContext(Context);
   const previous = useRef<null | [HTMLElement, (event: MouseEvent) => void]>(
@@ -24,31 +33,29 @@ export function useContextMenu<T extends MenuItem>({
       throw new Error('useContextMenu called outside of the provider');
     }
 
+    const register = (content: React.ComponentType) => {
+      function listener(event: MouseEvent) {
+        appendContextMenuContent(event, content);
+      }
+      return (trigger: HTMLElement | null) => {
+        if (previous.current) {
+          const [previousTrigger, previousListener] = previous.current;
+          previousTrigger.removeEventListener('contextmenu', previousListener);
+        }
+        if (trigger) {
+          trigger.addEventListener('contextmenu', listener);
+          previous.current = [trigger, listener];
+        }
+      };
+    };
+
     return {
       close: context.close.bind(context),
       /**
        * @returns a callback ref, passed onto the element responsible for triggering the menu.
        */
-      register(content: React.ComponentType) {
-        function listener(event: MouseEvent) {
-          appendContextMenuContent(event, content);
-        }
-        return (trigger: HTMLElement | null) => {
-          if (previous.current) {
-            const [previousTrigger, previousListener] = previous.current;
-            previousTrigger.removeEventListener(
-              'contextmenu',
-              previousListener
-            );
-          }
-          if (trigger) {
-            trigger.addEventListener('contextmenu', listener);
-            previous.current = [trigger, listener];
-          }
-        };
-      },
       registerItems(items: T[]) {
-        return this.register(() => <Menu items={items} />);
+        return register(() => <Menu items={items} />);
       },
     };
   }, [context, Menu]);