feat: support menu item tooltip positioning (#164)

magicbell · Nov 21, 2024 · ce45e86 · ce45e86
1 parent 3c865c3
commit ce45e86
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/silent-starfishes-sin.md b/.changeset/silent-starfishes-sin.md
@@ -0,0 +1,5 @@
+---
+'@darkmagic/react': minor
+---
+
+allow menu item tooltip positioning
diff --git a/packages/react/src/components/menu.tsx b/packages/react/src/components/menu.tsx
@@ -263,9 +263,10 @@ const MenuItem = React.forwardRef<React.ElementRef<typeof StyledMenuItem>, MenuI
 
   const collapsed = context?.collapsed ?? collapsedFromProps;
   const variant = context?.variant ?? variantFromProps;
+  const side = context?.tooltipSide ?? 'right';
 
   return (
-    <Tooltip content={children} enabled={collapsed} side="right">
+    <Tooltip content={children} enabled={collapsed} side={side}>
       <StyledMenuItem
         {...comp}
         variant={variant}
@@ -298,26 +299,30 @@ type MenuProps = {
    * This property is usually used in conbination with a collapsable sidebar.
    */
   collapsed?: boolean;
+  /**
+   * Position the tooltip
+   */
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
   /**
    * The vertical gap between menu items.
    */
   spacing?: StyledMenuProps['spacing'];
 } & StyledMenuProps;
 
 const Root = React.forwardRef<React.ElementRef<typeof StyledMenu>, MenuProps>(function Menu(
-  { children, collapsed = false, spacing, variant = 'primary', ...props },
+  { children, collapsed = false, spacing, variant = 'primary', tooltipSide = 'right', ...props },
   ref,
 ) {
   return (
-    <MenuContext.Provider value={{ collapsed, variant }}>
+    <MenuContext.Provider value={{ collapsed, variant, tooltipSide }}>
       <StyledMenu spacing={spacing} variant={variant} {...props} ref={ref}>
         {children}
       </StyledMenu>
     </MenuContext.Provider>
   );
 });
 
-const MenuContext = React.createContext<MenuProps>({ collapsed: false, variant: 'primary' });
+const MenuContext = React.createContext<MenuProps>({ collapsed: false, variant: 'primary', tooltipSide: 'right' });
 
 export const Menu = Object.assign(Root, {
   Title: MenuTitle,