@mhome/ui 0.1.3 → 0.1.6

package/package.json

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

package/src/components/date-picker.jsx

@@ -26,6 +26,8 @@ const DatePicker = React.forwardRef(
     const inputRef = React.useRef(null);
     const yearPickerRef = React.useRef(null);
     const currentYearButtonRef = React.useRef(null);
+    const [viewMode, setViewMode] = React.useState("month"); // "month" or "year"
+    const [showYearPicker, setShowYearPicker] = React.useState(false);
 
     React.useImperativeHandle(ref, () => inputRef.current);
 
@@ -52,7 +54,7 @@ const DatePicker = React.forwardRef(
       }
     };
 
-    const handleClickOutside = (event) => {
+    const handleClickOutside = React.useCallback((event) => {
       if (
         calendarRef.current &&
         !calendarRef.current.contains(event.target) &&
@@ -65,7 +67,7 @@ const DatePicker = React.forwardRef(
           onOpenChange(false);
         }
       }
-    };
+    }, [onOpenChange]);
 
     React.useEffect(() => {
       if (open) {
@@ -74,12 +76,10 @@ const DatePicker = React.forwardRef(
           document.removeEventListener("mousedown", handleClickOutside);
         };
       }
-    }, [open]);
+    }, [open, handleClickOutside]);
 
     const textFieldProps = slotProps?.textField || {};
     const displayValue = selectedDate ? selectedDate.format("YYYY-MM-DD") : "";
-    const [viewMode, setViewMode] = React.useState("month"); // "month" or "year"
-    const [showYearPicker, setShowYearPicker] = React.useState(false);
 
     // Scroll to current year when year picker opens
     React.useEffect(() => {

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";
 
@@ -354,15 +363,8 @@ DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef(
   ({ className, style, sx, ...props }, ref) => {
-    const actualMode = useIsDarkMode();
-    const backgroundType = useRecoilValue(backgroundTypeState);
-    const bgColor = getBackground(backgroundType, actualMode === "dark");
-    const isGradient =
-      bgColor &&
-      typeof bgColor === "string" &&
-      (bgColor.startsWith("linear-gradient") ||
-        bgColor.startsWith("radial-gradient") ||
-        bgColor.startsWith("conic-gradient"));
+    // Check if DialogTitle is inside DialogHeader (DialogHeader already has padding)
+    const isInsideDialogHeader = React.useContext(DialogHeaderContext);
 
     // Convert sx prop to style if provided, handling MUI spacing
     const sxStyles = React.useMemo(() => {
@@ -444,26 +446,6 @@ const DialogTitle = React.forwardRef(
       return converted;
     }, [sx]);
 
-    // Extract padding from style to allow override
-    const {
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      backgroundColor,
-      ...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
-    const hasAnyPadding =
-      padding !== undefined ||
-      paddingTop !== undefined ||
-      paddingBottom !== undefined ||
-      paddingLeft !== undefined ||
-      paddingRight !== undefined;
-
     return (
       <h2
         ref={ref}
@@ -471,28 +453,14 @@ 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",
+          !isInsideDialogHeader && "px-6 pt-6", // Default padding only when not inside DialogHeader
           className
         )}
         style={{
-          // Only set background if explicitly provided, otherwise inherit from parent
-          ...(backgroundColor !== undefined
-            ? backgroundColor.startsWith("linear-gradient") ||
-              backgroundColor.startsWith("radial-gradient") ||
-              backgroundColor.startsWith("conic-gradient")
-              ? { background: backgroundColor }
-              : { backgroundColor }
-            : {}),
-          // Allow padding override via style prop
-          padding: padding,
-          paddingLeft: paddingLeft,
-          paddingRight: paddingRight,
-          paddingTop: paddingTop,
-          paddingBottom: paddingBottom,
+          textAlign: "left",
           ...sxStyles,
-          ...restStyle,
+          ...style,
         }}
         {...props}
       />

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/icon-button.jsx

@@ -70,8 +70,9 @@ const IconButton = React.forwardRef(
     }, [children, size]);
 
     // Warn if no aria-label is provided (accessibility best practice)
+    // Only warn in development mode
     React.useEffect(() => {
-      if (!ariaLabel && !props["aria-labelledby"]) {
+      if (process.env.NODE_ENV === "development" && !ariaLabel && !props["aria-labelledby"]) {
         console.warn(
           "IconButton: Missing aria-label or aria-labelledby. Icon-only buttons should have accessible labels."
         );

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/select.jsx

@@ -28,6 +28,8 @@ const Select = React.forwardRef(
       multiple = false,
       sx,
       style,
+      menuStyle, // Style for the dropdown menu (the open listbox)
+      menuClassName, // ClassName for the dropdown menu
       ...props
     },
     ref
@@ -154,7 +156,7 @@ const Select = React.forwardRef(
             paddingRight: endAdornment ? "8px" : "14px",
             paddingTop: "6px",
             paddingBottom: "6px",
-            // If borderRadius is provided in props.style, use it; otherwise let Tailwind's rounded-3xl class handle it
+            // If borderRadius is provided in props.style, use it; otherwise let Tailwind classes handle it
             ...(style?.borderRadius !== undefined
               ? { borderRadius: style.borderRadius }
               : {}),
@@ -194,16 +196,21 @@ const Select = React.forwardRef(
             id={`${selectId}-listbox`}
             role="listbox"
             aria-label={label || "Options"}
-            className="absolute z-50 w-full mt-1 rounded-lg shadow-lg"
+            className={cn(
+              "absolute z-50 w-full mt-1 shadow-lg",
+              menuClassName
+            )}
             style={{
               backgroundColor: "hsl(var(--card))",
               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.4)"
                 : "0px 4px 12px rgba(0, 0, 0, 0.15)",
               border: isDark
                 ? "1px solid rgba(255, 255, 255, 0.1)"
                 : "1px solid hsl(var(--border))",
               borderRadius: "8px",
+              overflow: "hidden", 
+              ...menuStyle,
             }}
           >
             {React.Children.map(children, (child) => {

package/src/components/tabs.jsx

@@ -218,7 +218,7 @@ const Tab = React.forwardRef(
             }
           }}
           className={cn(
-            "cursor-pointer transition-all duration-200 text-sm border-none bg-transparent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "cursor-pointer transition-all duration-200 text-sm border-none bg-transparent focus:outline-none",
             defaultPaddingClass,
             "min-w-[72px] min-h-[48px] flex-1",
             selected ? "font-semibold" : "font-medium",
@@ -320,7 +320,7 @@ const Tab = React.forwardRef(
             }
           }}
           className={cn(
-            "cursor-pointer transition-all duration-200 min-h-[32px] min-w-[100px] rounded-2xl text-sm border-none focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "cursor-pointer transition-all duration-200 min-h-[32px] min-w-[100px] rounded-2xl text-sm border-none focus:outline-none",
             defaultPaddingClass,
             defaultMarginClass,
             selected ? "font-semibold" : "font-medium",

package/src/components/text-field.jsx

@@ -74,7 +74,7 @@ const TextField = React.forwardRef(
       } else {
         // outlined (default)
         return focused
-          ? getComponentBgColor("hsl(var(--input))")
+          ? getComponentBgColor("hsl(var(--background))")
           : "transparent";
       }
     };

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, gutterBottom, ...props },
     ref
   ) => {
     // Map MUI color props to shadcn colors
@@ -66,7 +66,11 @@ const Typography = React.forwardRef(
           typographyVariants({ variant, color: mappedColor }),
           className
         )}
-        style={style}
+        style={{
+          ...(noWrap && { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }),
+          ...(gutterBottom && { marginBottom: "0.35em" }),
+          ...style,
+        }}
         {...props}
       />
     );