@diwauhris/ui 1.7.28 → 1.7.30

package/lib/index.cjs

@@ -1229,7 +1229,7 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (!isOpen || !wrapperRef.current) return;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPanelStyle({
@@ -1242,6 +1242,19 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const close = () => setIsOpen(false);
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
+		};
+	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);
@@ -4088,10 +4101,12 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				right: Math.max(MARGIN, window.innerWidth - rect.right),
 				left: "auto"
 			};
+			const maxHeight = flipUp ? Math.max(120, rect.top - GAP - MARGIN) : Math.max(120, spaceBelow - GAP - MARGIN);
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
 				...horizontal,
+				maxHeight,
 				zIndex: 9999,
 				minWidth: PANEL_MIN_WIDTH,
 				maxWidth: available
@@ -4202,7 +4217,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			role: "menu",
 			"aria-label": ariaLabel,
 			style: panelStyle,
-			className: cn("overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
+			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React$1 from "react";
-import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, RotateCcw, Search as Search$1, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -1205,7 +1205,7 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!isOpen || !wrapperRef.current) return;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPanelStyle({
@@ -1218,6 +1218,19 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const close = () => setIsOpen(false);
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
+		};
+	}, [isOpen]);
 	useEffect(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);
@@ -4064,10 +4077,12 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				right: Math.max(MARGIN, window.innerWidth - rect.right),
 				left: "auto"
 			};
+			const maxHeight = flipUp ? Math.max(120, rect.top - GAP - MARGIN) : Math.max(120, spaceBelow - GAP - MARGIN);
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
 				...horizontal,
+				maxHeight,
 				zIndex: 9999,
 				minWidth: PANEL_MIN_WIDTH,
 				maxWidth: available
@@ -4178,7 +4193,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			role: "menu",
 			"aria-label": ariaLabel,
 			style: panelStyle,
-			className: cn("overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
+			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;

package/package.json

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