Update context menu component

src/components/ContextMenu/index.tsx

@@ -4,7 +4,7 @@ import { Text } from '..';
 
 type ContextMenuProps = {
   className?: string;
-  items: Array<{ label: string; action: () => void }>;
+  items: Array<{ label: string; action?: () => void }>;
   component: string;
 };
 
@@ -13,28 +13,26 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const openMenu = () => setOpen(true);
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
+    const wrapper = ref.current;
+
+    const openMenu = () => setOpen(true);
+    const closeMenu = () => setOpen(false);
 
-    document.addEventListener('mousedown', handleClickOutside);
     (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
       'mouseenter',
       openMenu
     );
+    ref.current?.addEventListener('mouseleave', closeMenu);
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
       (document.querySelector(
         `#${component}`
       ) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
+      wrapper?.removeEventListener('mouseleave', closeMenu);
     };
 
     // eslint-disable-next-line
-  }, [ref]);
+  }, [ref.current]);
 
   return (
     <Wrapper
@@ -54,8 +52,10 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
             // eslint-disable-next-line
             <li
               onClick={() => {
+                if (action) {
                   setOpen(false);
                   action();
+                }
               }}
               key={label}
             >