@mhome/ui 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mhome/ui",
-  "version": "0.1.3",
+  "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

@@ -24,6 +24,56 @@ const Menu = React.forwardRef(
     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);
 
@@ -255,7 +305,7 @@ const Menu = React.forwardRef(
           }
         };
       }
-    }, [open, anchorEl, anchorOrigin, positionType, PaperProps?.style?.minWidth]);
+    }, [open, anchorEl, anchorOrigin.vertical, anchorOrigin.horizontal, positionType, PaperProps?.style?.minWidth]);
 
     // Recalculate position after menu is rendered (to get actual dimensions)
     React.useLayoutEffect(() => {
@@ -338,7 +388,15 @@ const Menu = React.forwardRef(
             top = Math.max(padding, viewportHeight - menuHeight - padding);
           }
           
-          setPosition({ top, left });
+          // 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
         }
@@ -354,7 +412,7 @@ const Menu = React.forwardRef(
           cancelAnimationFrame(rafId);
         }
       };
-    }, [open, anchorEl, anchorOrigin, positionType]); // Re-run when menu opens or anchor changes
+    }, [open, anchorEl, anchorOrigin.vertical, anchorOrigin.horizontal, positionType]); // Re-run when menu opens or anchor changes
 
     // Handle backdrop click
     React.useEffect(() => {
@@ -420,9 +478,11 @@ const Menu = React.forwardRef(
           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",
+          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,
         }}
@@ -430,7 +490,7 @@ const Menu = React.forwardRef(
           Object.entries(props || {}).filter(([key]) => key !== "style")
         )}
       >
-        {children}
+        {processChildren(children)}
       </div>
     );
 
@@ -450,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);
@@ -475,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
@@ -493,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,
     };
@@ -533,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}

package/src/components/typography.jsx

@@ -46,7 +46,7 @@ const typographyVariants = cva("", {
 
 const Typography = React.forwardRef(
   (
-    { className, variant = "body1", component, style, color, ...props },
+    { className, variant = "body1", component, style, color, noWrap, ...props },
     ref
   ) => {
     // Map MUI color props to shadcn colors
@@ -66,7 +66,10 @@ const Typography = React.forwardRef(
           typographyVariants({ variant, color: mappedColor }),
           className
         )}
-        style={style}
+        style={{
+          ...(noWrap && { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }),
+          ...style,
+        }}
         {...props}
       />
     );