@mhome/ui 0.1.2 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mhome/ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "description": "mHome UI Component Library",
   "main": "dist/index.cjs.js",

package/src/components/dialog.jsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { cn, spacingToPx, useIsDarkMode } from "../lib/utils";
 import { getBackground } from "../common/adaptive-theme-provider";
-import { useRecoilValue, backgroundTypeState } from "../global-state";
+import { backgroundTypeState, useRecoilValue } from "../global-state";
 
 const Dialog = ({
   open,
@@ -330,14 +330,23 @@ const DialogContent = React.forwardRef(
 );
 DialogContent.displayName = "DialogContent";
 
+// Context to track if DialogTitle is inside DialogHeader
+const DialogHeaderContext = React.createContext(false);
+
 const DialogHeader = ({ className, ...props }) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6",
-      className
-    )}
-    {...props}
-  />
+  <DialogHeaderContext.Provider value={true}>
+    <div
+      className={cn(
+        "flex flex-col space-y-1.5 px-6 pt-6",
+        className
+      )}
+      style={{
+        textAlign: "left", // Ensure left alignment for all children
+        ...props.style,
+      }}
+      {...props}
+    />
+  </DialogHeaderContext.Provider>
 );
 DialogHeader.displayName = "DialogHeader";
 
@@ -364,6 +373,9 @@ const DialogTitle = React.forwardRef(
         bgColor.startsWith("radial-gradient") ||
         bgColor.startsWith("conic-gradient"));
 
+    // Check if DialogTitle is inside DialogHeader
+    const isInsideDialogHeader = React.useContext(DialogHeaderContext);
+
     // Convert sx prop to style if provided, handling MUI spacing
     const sxStyles = React.useMemo(() => {
       if (!sx) return {};
@@ -455,14 +467,30 @@ const DialogTitle = React.forwardRef(
       ...restStyle
     } = style || {};
 
-    // Check if padding is explicitly set (if padding is set, individual paddings should be undefined)
-    // If no padding is set at all, use defaults
+    // Check if padding is explicitly set in style, sxStyles, or className
+    // Check for padding-related Tailwind classes in className
+    const hasPaddingInClassName = className && (
+      /\b(p|px|py|pt|pb|pl|pr)-\d+/.test(className) ||
+      /\bpadding/.test(className)
+    );
+    
     const hasAnyPadding =
       padding !== undefined ||
       paddingTop !== undefined ||
       paddingBottom !== undefined ||
       paddingLeft !== undefined ||
-      paddingRight !== undefined;
+      paddingRight !== undefined ||
+      sxStyles.padding !== undefined ||
+      sxStyles.paddingTop !== undefined ||
+      sxStyles.paddingBottom !== undefined ||
+      sxStyles.paddingLeft !== undefined ||
+      sxStyles.paddingRight !== undefined ||
+      hasPaddingInClassName;
+
+    // DialogTitle should have default padding when used standalone (not inside DialogHeader)
+    // When inside DialogHeader, DialogHeader provides px-6 pt-6, so DialogTitle doesn't need padding
+    // When used standalone, DialogTitle should have px-6 pt-6 to match DialogHeader's padding
+    const defaultPaddingClass = !isInsideDialogHeader && !hasAnyPadding ? "px-6 pt-6" : "";
 
     return (
       <h2
@@ -471,9 +499,8 @@ const DialogTitle = React.forwardRef(
           "rounded-t-[inherit]",
           "text-lg font-semibold leading-none tracking-tight",
           "text-foreground",
-          // DialogTitle is typically used inside DialogHeader which has padding
-          // Only add padding if explicitly needed (when used standalone)
-          // For normal use, padding is handled by DialogHeader
+          "text-left", // Always left align
+          defaultPaddingClass,
           className
         )}
         style={{
@@ -485,12 +512,13 @@ const DialogTitle = React.forwardRef(
               ? { background: backgroundColor }
               : { backgroundColor }
             : {}),
-          // Allow padding override via style prop
+          // Allow padding override via style prop (for standalone use)
           padding: padding,
           paddingLeft: paddingLeft,
           paddingRight: paddingRight,
           paddingTop: paddingTop,
           paddingBottom: paddingBottom,
+          textAlign: "left", // Ensure left alignment
           ...sxStyles,
           ...restStyle,
         }}

package/src/components/drawer.jsx

@@ -17,6 +17,7 @@ const Drawer = React.forwardRef(
       variant = "temporary",
       ModalProps,
       SlideProps,
+      BackdropProps,
       ...props
     },
     ref
@@ -173,9 +174,13 @@ const Drawer = React.forwardRef(
               opacity: open ? 1 : 0,
               transition: `opacity ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
               pointerEvents: open ? "auto" : "none",
+              ...BackdropProps?.style,
             }}
             onClick={handleBackdropClick}
             aria-hidden="true"
+            {...Object.fromEntries(
+              Object.entries(BackdropProps || {}).filter(([key]) => key !== "style")
+            )}
           />
         )}
 
@@ -200,7 +205,7 @@ const Drawer = React.forwardRef(
           }}
           role="presentation"
           {...Object.fromEntries(
-            Object.entries(props).filter(([key]) => key !== "style")
+            Object.entries(props).filter(([key]) => key !== "style" && key !== "BackdropProps")
           )}
         >
           {/* Paper (drawer content) */}

package/src/components/menu.jsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../lib/utils";
 
 const Menu = React.forwardRef(
@@ -11,13 +12,68 @@ const Menu = React.forwardRef(
       PaperProps,
       anchorOrigin = { vertical: "bottom", horizontal: "left" },
       transformOrigin = { vertical: "top", horizontal: "left" },
+      position: positionProp = "fixed",
+      disablePortal = false,
+      border = false,
       children,
       ...props
     },
     ref
   ) => {
+    // If using Portal, position must be fixed to work correctly
+    const positionType = disablePortal ? positionProp : "fixed";
     const menuRef = React.useRef(null);
     const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    const previousPositionRef = React.useRef({ top: 0, left: 0 });
+    
+    // Extract borderRadius to a stable value to prevent infinite loops
+    // Use a ref to track the last borderRadius value to avoid dependency issues
+    // MUST be called before any early returns (React Hooks rule)
+    const borderRadiusRef = React.useRef(PaperProps?.style?.borderRadius || "8px");
+    if (PaperProps?.style?.borderRadius !== undefined) {
+      borderRadiusRef.current = PaperProps.style.borderRadius;
+    }
+    
+    // Process children to add borderRadius info to MenuItems
+    // We'll do this in the render phase instead of useMemo to avoid issues
+    const processChildren = (childrenToProcess) => {
+      if (!childrenToProcess) return childrenToProcess;
+      
+      const borderRadius = borderRadiusRef.current;
+      
+      // Get all MenuItem children first
+      const childrenArray = React.Children.toArray(childrenToProcess).filter(
+        (c) => {
+          if (!React.isValidElement(c)) return false;
+          const type = c.type;
+          return type?.displayName === "MenuItem" || 
+                 (typeof type === 'function' && type.name === 'MenuItem');
+        }
+      );
+      
+      return React.Children.map(childrenToProcess, (child) => {
+        if (!React.isValidElement(child)) return child;
+        
+        // Check if child is a MenuItem
+        const type = child.type;
+        const isMenuItem = type?.displayName === "MenuItem" || 
+                          (typeof type === 'function' && type.name === 'MenuItem');
+        
+        if (!isMenuItem) return child;
+        
+        const childIndex = childrenArray.findIndex((c) => c === child);
+        const isFirst = childIndex === 0;
+        const isLast = childIndex === childrenArray.length - 1;
+        
+        // Clone child and pass borderRadius info
+        return React.cloneElement(child, {
+          ...child.props,
+          _isFirst: isFirst,
+          _isLast: isLast,
+          _menuBorderRadius: borderRadius,
+        });
+      });
+    };
 
     React.useImperativeHandle(ref, () => menuRef.current);
 
@@ -54,50 +110,126 @@ const Menu = React.forwardRef(
             }
             return;
           }
-          
-          // Find the nearest positioned ancestor (position: relative, absolute, or fixed)
-          let container = anchorEl.parentElement;
-          while (container && container !== document.body && container.isConnected) {
-            try {
-              const style = window.getComputedStyle(container);
-              if (style.position === 'relative' || style.position === 'absolute' || style.position === 'fixed') {
+
+          if (positionType === "fixed") {
+            // Fixed positioning: use viewport coordinates
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            
+            // Get menu dimensions (estimate if not yet rendered)
+            const menuWidth = menuRef.current?.offsetWidth || PaperProps?.style?.minWidth || 180;
+            const menuHeight = menuRef.current?.offsetHeight || 100;
+            
+            // Calculate initial position based on anchorOrigin
+            let top = 0;
+            let left = 0;
+            const gap = 8;
+            
+            // Vertical positioning
+            if (anchorOrigin.vertical === 'bottom') {
+              top = anchorRect.bottom + gap;
+            } else if (anchorOrigin.vertical === 'top') {
+              top = anchorRect.top - menuHeight - gap;
+            } else {
+              // center
+              top = anchorRect.top + (anchorRect.height - menuHeight) / 2;
+            }
+            
+            // Horizontal positioning
+            if (anchorOrigin.horizontal === 'left') {
+              left = anchorRect.left;
+            } else if (anchorOrigin.horizontal === 'right') {
+              left = anchorRect.right - menuWidth;
+            } else {
+              // center
+              left = anchorRect.left + (anchorRect.width - menuWidth) / 2;
+            }
+            
+            // Boundary detection and adjustment
+            const padding = 16;
+            
+            // Adjust horizontal position if menu would overflow
+            if (left + menuWidth > viewportWidth - padding) {
+              left = viewportWidth - menuWidth - padding;
+            }
+            if (left < padding) {
+              left = padding;
+            }
+            
+            // Adjust vertical position if menu would overflow
+            if (top + menuHeight > viewportHeight - padding) {
+              if (anchorOrigin.vertical === 'bottom') {
+                // Try to show above anchor
+                top = anchorRect.top - menuHeight - gap;
+              }
+              // Clamp to viewport
+              if (top + menuHeight > viewportHeight - padding) {
+                top = viewportHeight - menuHeight - padding;
+              }
+            }
+            if (top < padding) {
+              top = padding;
+            }
+            
+            if (isMounted) {
+              setPosition({ top, left });
+            }
+          } else {
+            // Absolute positioning: use relative coordinates
+            // Find the nearest positioned ancestor
+            let container = anchorEl.parentElement;
+            while (container && container !== document.body && container.isConnected) {
+              try {
+                const style = window.getComputedStyle(container);
+                if (style.position === 'relative' || style.position === 'absolute' || style.position === 'fixed') {
+                  break;
+                }
+                container = container.parentElement;
+              } catch (e) {
                 break;
               }
-              container = container.parentElement;
-            } catch (e) {
-              // If getComputedStyle fails, break the loop
-              break;
             }
-          }
-          
-          let containerRect = { top: 0, left: 0 };
-          if (container && container !== document.body && container.isConnected && container.getBoundingClientRect) {
-            try {
-              containerRect = container.getBoundingClientRect();
-              // Validate containerRect
-              if (!containerRect || isNaN(containerRect.top) || isNaN(containerRect.left)) {
+            
+            let containerRect = { top: 0, left: 0 };
+            if (container && container !== document.body && container.isConnected && container.getBoundingClientRect) {
+              try {
+                containerRect = container.getBoundingClientRect();
+                if (!containerRect || isNaN(containerRect.top) || isNaN(containerRect.left)) {
+                  containerRect = { top: 0, left: 0 };
+                }
+              } catch (e) {
                 containerRect = { top: 0, left: 0 };
               }
-            } catch (e) {
-              containerRect = { top: 0, left: 0 };
             }
-          }
-          
-          // Calculate relative position - menu appears below the button
-          const relativeTop = anchorRect.bottom - containerRect.top + 8;
-          const relativeLeft = anchorRect.left - containerRect.left;
-          
-          // Validate calculated values
-          if (isNaN(relativeTop) || isNaN(relativeLeft)) {
+            
+            // Calculate relative position
+            const gap = 8;
+            let relativeTop = 0;
+            let relativeLeft = 0;
+            
+            if (anchorOrigin.vertical === 'bottom') {
+              relativeTop = anchorRect.bottom - containerRect.top + gap;
+            } else if (anchorOrigin.vertical === 'top') {
+              const menuHeight = menuRef.current?.offsetHeight || 100;
+              relativeTop = anchorRect.top - containerRect.top - menuHeight - gap;
+            } else {
+              const menuHeight = menuRef.current?.offsetHeight || 100;
+              relativeTop = anchorRect.top - containerRect.top + (anchorRect.height - menuHeight) / 2;
+            }
+            
+            if (anchorOrigin.horizontal === 'left') {
+              relativeLeft = anchorRect.left - containerRect.left;
+            } else if (anchorOrigin.horizontal === 'right') {
+              const menuWidth = menuRef.current?.offsetWidth || PaperProps?.style?.minWidth || 180;
+              relativeLeft = anchorRect.right - containerRect.left - menuWidth;
+            } else {
+              const menuWidth = menuRef.current?.offsetWidth || PaperProps?.style?.minWidth || 180;
+              relativeLeft = anchorRect.left - containerRect.left + (anchorRect.width - menuWidth) / 2;
+            }
+            
             if (isMounted) {
-              setPosition({ top: 50, left: 0 });
+              setPosition({ top: relativeTop, left: relativeLeft });
             }
-            return;
-          }
-          
-          // Only update state if component is still mounted
-          if (isMounted) {
-            setPosition({ top: relativeTop, left: relativeLeft });
           }
         } catch (e) {
           // Fallback position - only update if mounted
@@ -107,13 +239,180 @@ const Menu = React.forwardRef(
         }
       });
 
+      // Update position on scroll and resize (only for fixed positioning)
+      if (positionType === "fixed") {
+        const handleUpdate = () => {
+          rafId = requestAnimationFrame(() => {
+            if (isMounted) {
+              // Re-run position calculation
+              const anchorRect = anchorEl?.getBoundingClientRect();
+              if (anchorRect) {
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                const menuWidth = menuRef.current?.offsetWidth || PaperProps?.style?.minWidth || 180;
+                const menuHeight = menuRef.current?.offsetHeight || 100;
+                const gap = 8;
+                const padding = 16;
+                
+                let top = anchorOrigin.vertical === 'bottom' 
+                  ? anchorRect.bottom + gap
+                  : anchorOrigin.vertical === 'top'
+                  ? anchorRect.top - menuHeight - gap
+                  : anchorRect.top + (anchorRect.height - menuHeight) / 2;
+                
+                let left = anchorOrigin.horizontal === 'left'
+                  ? anchorRect.left
+                  : anchorOrigin.horizontal === 'right'
+                  ? anchorRect.right - menuWidth
+                  : anchorRect.left + (anchorRect.width - menuWidth) / 2;
+                
+                if (left + menuWidth > viewportWidth - padding) {
+                  left = viewportWidth - menuWidth - padding;
+                }
+                if (left < padding) left = padding;
+                if (top + menuHeight > viewportHeight - padding) {
+                  if (anchorOrigin.vertical === 'bottom') {
+                    top = anchorRect.top - menuHeight - gap;
+                  }
+                  if (top + menuHeight > viewportHeight - padding) {
+                    top = viewportHeight - menuHeight - padding;
+                  }
+                }
+                if (top < padding) top = padding;
+                
+                setPosition({ top, left });
+              }
+            }
+          });
+        };
+        
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        
+        return () => {
+          isMounted = false;
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+          }
+          window.removeEventListener('scroll', handleUpdate, true);
+          window.removeEventListener('resize', handleUpdate);
+        };
+      } else {
+        return () => {
+          isMounted = false;
+          if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+          }
+        };
+      }
+    }, [open, anchorEl, anchorOrigin.vertical, anchorOrigin.horizontal, positionType, PaperProps?.style?.minWidth]);
+
+    // Recalculate position after menu is rendered (to get actual dimensions)
+    React.useLayoutEffect(() => {
+      if (!open || !anchorEl || !menuRef.current || positionType !== "fixed") return;
+
+      const updatePositionWithRealSize = () => {
+        try {
+          const anchorRect = anchorEl.getBoundingClientRect();
+          if (!anchorRect) return;
+
+          const viewportWidth = window.innerWidth;
+          const viewportHeight = window.innerHeight;
+          
+          // Get actual menu dimensions
+          const menuWidth = menuRef.current.offsetWidth;
+          const menuHeight = menuRef.current.offsetHeight;
+          
+          if (!menuWidth || !menuHeight) return; // Menu not fully rendered yet
+          
+          const gap = 8;
+          const padding = 16;
+          
+          // Calculate initial position based on anchorOrigin
+          let top = 0;
+          let left = 0;
+          
+          // Vertical positioning
+          if (anchorOrigin.vertical === 'bottom') {
+            top = anchorRect.bottom + gap;
+          } else if (anchorOrigin.vertical === 'top') {
+            top = anchorRect.top - menuHeight - gap;
+          } else {
+            top = anchorRect.top + (anchorRect.height - menuHeight) / 2;
+          }
+          
+          // Horizontal positioning
+          if (anchorOrigin.horizontal === 'left') {
+            left = anchorRect.left;
+          } else if (anchorOrigin.horizontal === 'right') {
+            left = anchorRect.right - menuWidth;
+          } else {
+            left = anchorRect.left + (anchorRect.width - menuWidth) / 2;
+          }
+          
+          // Strict boundary detection - ensure menu is fully within viewport
+          // Adjust horizontal position
+          if (left + menuWidth > viewportWidth - padding) {
+            // Menu would overflow on the right, align to right edge
+            left = viewportWidth - menuWidth - padding;
+          }
+          if (left < padding) {
+            // Menu would overflow on the left
+            left = padding;
+          }
+          
+          // Adjust vertical position
+          if (top + menuHeight > viewportHeight - padding) {
+            // Menu would overflow on the bottom
+            if (anchorOrigin.vertical === 'bottom') {
+              // Try to show above anchor
+              top = anchorRect.top - menuHeight - gap;
+            }
+            // If still overflowing, clamp to viewport
+            if (top + menuHeight > viewportHeight - padding) {
+              top = viewportHeight - menuHeight - padding;
+            }
+          }
+          if (top < padding) {
+            // Menu would overflow on the top
+            top = padding;
+          }
+          
+          // Ensure menu doesn't exceed viewport in any direction
+          if (left < 0) left = padding;
+          if (top < 0) top = padding;
+          if (left + menuWidth > viewportWidth) {
+            left = Math.max(padding, viewportWidth - menuWidth - padding);
+          }
+          if (top + menuHeight > viewportHeight) {
+            top = Math.max(padding, viewportHeight - menuHeight - padding);
+          }
+          
+          // Only update position if it actually changed to prevent infinite loops
+          const newPosition = { top, left };
+          if (
+            Math.abs(previousPositionRef.current.top - newPosition.top) > 0.5 ||
+            Math.abs(previousPositionRef.current.left - newPosition.left) > 0.5
+          ) {
+            previousPositionRef.current = newPosition;
+            setPosition(newPosition);
+          }
+        } catch (e) {
+          // Silently fail if calculation error
+        }
+      };
+
+      // Use requestAnimationFrame to ensure DOM is updated
+      const rafId = requestAnimationFrame(() => {
+        updatePositionWithRealSize();
+      });
+
       return () => {
-        isMounted = false;
-        if (rafId !== null) {
+        if (rafId) {
           cancelAnimationFrame(rafId);
         }
       };
-    }, [open, anchorEl]);
+    }, [open, anchorEl, anchorOrigin.vertical, anchorOrigin.horizontal, positionType]); // Re-run when menu opens or anchor changes
 
     // Handle backdrop click
     React.useEffect(() => {
@@ -154,12 +453,12 @@ const Menu = React.forwardRef(
     const isDark = document.documentElement.classList.contains('dark') || 
                    window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    return (
+    const menuElement = (
       <div
         ref={menuRef}
         className={cn("rounded-lg shadow-lg", className)}
         style={{
-          position: "absolute",
+          position: positionType,
           top: `${position.top}px`,
           left: `${position.left}px`,
           zIndex: 1300,
@@ -171,15 +470,19 @@ const Menu = React.forwardRef(
           boxShadow: isDark
             ? "0px 4px 12px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.1)"
             : "0px 4px 12px rgba(0, 0, 0, 0.15)",
-          border: isDark
-            ? "1px solid rgba(255, 255, 255, 0.1)"
-            : "1px solid hsl(var(--border))",
+          ...(border || PaperProps?.style?.border ? {
+            border: PaperProps?.style?.border || (isDark
+              ? "1px solid rgba(255, 255, 255, 0.1)"
+              : "1px solid hsl(var(--border))")
+          } : {}),
           borderRadius: PaperProps?.style?.borderRadius || "8px",
           minWidth: PaperProps?.style?.minWidth || 180,
           maxWidth: "calc(100vw - 32px)",
-          padding: "4px 0",
+          padding: "4px 0", // Vertical padding only, no horizontal padding so MenuItem hover extends to border
           height: "auto",
-          overflow: "visible", // Ensure content is visible
+          overflow: "hidden", // Ensure children don't overflow rounded corners, but allow MenuItem hover to extend to edges
+          // Ensure MenuItem can extend to edges
+          boxSizing: "border-box",
           ...PaperProps?.style,
           ...props.style,
         }}
@@ -187,9 +490,19 @@ const Menu = React.forwardRef(
           Object.entries(props || {}).filter(([key]) => key !== "style")
         )}
       >
-        {children}
+        {processChildren(children)}
       </div>
     );
+
+    // Use Portal to render menu at body level to avoid positioning constraints
+    // Only use Portal if not disabled
+    if (disablePortal) {
+      return menuElement;
+    }
+    
+    return typeof document !== "undefined"
+      ? createPortal(menuElement, document.body)
+      : null;
   }
 );
 
@@ -197,7 +510,7 @@ Menu.displayName = "Menu";
 
 const MenuItem = React.forwardRef(
   (
-    { className, onClick, disabled = false, sx, style, children, ...props },
+    { className, onClick, disabled = false, sx, style, children, _isFirst, _isLast, _menuBorderRadius, ...props },
     ref
   ) => {
     const [hovered, setHovered] = React.useState(false);
@@ -222,13 +535,13 @@ const MenuItem = React.forwardRef(
       paddingRight: `${menuItemPadding.x}px`,
       paddingTop: `${menuItemPadding.y}px`,
       paddingBottom: `${menuItemPadding.y}px`,
+      margin: 0, // Ensure no margin that could cause overflow
       cursor: disabled ? "not-allowed" : "pointer",
       fontSize: menuItemFontSize,
       color: disabled
         ? "#666666"
         : "#000000", // Use fixed color for testing
-      backgroundColor:
-        hovered && !disabled ? "hsl(var(--accent))" : "transparent",
+      backgroundColor: hovered && !disabled ? "hsl(var(--accent))" : "transparent",
       opacity: disabled
         ? 0.5
         : sxStyles.opacity !== undefined
@@ -240,7 +553,16 @@ const MenuItem = React.forwardRef(
       textAlign: "left",
       fontWeight: "normal",
       width: "100%",
+      maxWidth: "100%", // Ensure it doesn't exceed parent width
       boxSizing: "border-box",
+      position: "relative",
+      // Ensure MenuItem doesn't overflow Menu boundaries
+      overflow: "hidden",
+      // Apply border radius to match Menu's borderRadius
+      borderTopLeftRadius: _isFirst ? _menuBorderRadius : 0,
+      borderTopRightRadius: _isFirst ? _menuBorderRadius : 0,
+      borderBottomLeftRadius: _isLast ? _menuBorderRadius : 0,
+      borderBottomRightRadius: _isLast ? _menuBorderRadius : 0,
       ...sxStyles,
       ...style,
     };
@@ -280,7 +602,11 @@ const MenuItem = React.forwardRef(
           "focus:outline-none focus:bg-accent focus:text-accent-foreground",
           className
         )}
-        style={mergedStyle}
+        style={{
+          ...mergedStyle,
+          // Use pseudo-element approach: extend hover background to edges
+          position: "relative",
+        }}
         onClick={handleClick}
         onMouseDown={handleMouseDown}
         onKeyDown={handleKeyDown}