@diwauhris/ui 1.7.19 → 1.7.20

package/lib/index.cjs

@@ -3957,16 +3957,40 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const [panelStyle, setPanelStyle] = (0, react.useState)({});
 	(0, react.useEffect)(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("scroll", reposition, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {

package/lib/index.mjs

@@ -3933,16 +3933,40 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const [panelStyle, setPanelStyle] = useState({});
 	useEffect(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("scroll", reposition, true);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.19",
+  "version": "1.7.20",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [