@mhome/ui 0.1.1 → 0.1.3

package/package.json

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

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,11 +12,16 @@ 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 });
 
@@ -54,50 +60,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 +189,172 @@ 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, 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);
+          }
+          
+          setPosition({ top, left });
+        } 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, positionType]); // Re-run when menu opens or anchor changes
 
     // Handle backdrop click
     React.useEffect(() => {
@@ -154,12 +395,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 +412,17 @@ 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",
           height: "auto",
-          overflow: "visible", // Ensure content is visible
+          overflow: "visible",
           ...PaperProps?.style,
           ...props.style,
         }}
@@ -190,6 +433,16 @@ const Menu = React.forwardRef(
         {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;
   }
 );