Add description to context menu + Improve context menu position and size

src/Components/Menu/Menu.tsx

@@ -1,3 +1,4 @@
+import useSize from '@react-hook/size';
 import * as React from 'react';
 import { IPoint } from '../../Interfaces/IPoint';
 import { MenuItem } from './MenuItem';
@@ -12,6 +13,9 @@ export interface IMenuAction {
   /** displayed  */
   text: string
 
+  /** title to show on hover */
+  title?: string
+
   /** function to be called on button click */
   action: (target: HTMLElement) => void
 }
@@ -60,6 +64,9 @@ function UseMouseEvents(
   });
 }
 
+const MENU_WIDTH_CLASS = 'w-52';
+const MENU_VERTICAL_PADDING_CLASS = 'py-1';
+
 export function Menu(props: IMenuProps): JSX.Element {
   const [isOpen, setIsOpen] = React.useState(false);
   const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
@@ -67,6 +74,8 @@ export function Menu(props: IMenuProps): JSX.Element {
     y: 0
   });
   const [target, setTarget] = React.useState<HTMLElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [menuWidth, menuHeight] = useSize(menuRef);
 
   UseMouseEvents(
     props.getListener,
@@ -89,21 +98,26 @@ export function Menu(props: IMenuProps): JSX.Element {
       actions.forEach((action, index) => {
         children.push(<MenuItem
           key={`contextmenu-item-${count}-${index}`}
-          className="contextmenu-item"
+          className={'contextmenu-item'}
           text={action.text}
+          title={action.title}
           onClick={() => action.action(target)} />);
       });
     };
   }
 
-  // TODO: Fix css
-  const visible = isOpen ? 'visible opacity-1' : 'invisible opacity-0';
+  const visible = isOpen && children.length > 0 ? 'visible opacity-1' : 'invisible opacity-0';
+  const isOutOfBoundHorizontally = contextMenuPosition.x + menuWidth > window.innerWidth;
+  const isOutOfBoundVertically = contextMenuPosition.y + menuHeight > window.innerHeight;
+  const finalHorizontalPosition = isOutOfBoundHorizontally ? contextMenuPosition.x - menuWidth : contextMenuPosition.x;
+  const finalVerticalPosition = isOutOfBoundVertically ? contextMenuPosition.y - menuWidth : contextMenuPosition.y;
   return (
     <div
-      className={`fixed ${props.className ?? ''} ${visible}`}
+      ref={menuRef}
+      className={`fixed context-menu ${MENU_VERTICAL_PADDING_CLASS} ${MENU_WIDTH_CLASS} ${props.className ?? ''} ${visible}`}
       style={{
-        left: contextMenuPosition.x,
-        top: contextMenuPosition.y
+        left: finalHorizontalPosition,
+        top: finalVerticalPosition
       }}>
       { children }
     </div>