@diwauhris/ui 1.7.43 → 1.7.45

package/lib/index.cjs

@@ -739,21 +739,44 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
-			if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+			const target = e.target;
+			if (containerRef.current?.contains(target)) return;
+			if (listRef.current?.contains(target)) return;
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handlePointerDown);
 		return () => document.removeEventListener("mousedown", handlePointerDown);
 	}, [open]);
 	(0, react.useEffect)(() => {
-		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			width: rect.width
-		});
+		if (!open) return;
+		let raf = 0;
+		const place = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const MARGIN = 8;
+			const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+			const spaceAbove = rect.top - MARGIN;
+			const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
+			const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
+			const parent = trigger.closest("[role=\"dialog\"]") ?? document.body;
+			const isBody = parent === document.body;
+			const pr = isBody ? null : parent.getBoundingClientRect();
+			const left = rect.left - (pr?.left ?? 0) + parent.scrollLeft;
+			const topBelow = rect.bottom - (pr?.top ?? 0) + parent.scrollTop + 4;
+			const bottomAbove = (isBody ? window.innerHeight : parent.clientHeight) - (rect.top - (pr?.top ?? 0) + parent.scrollTop) + 4;
+			setPanelStyle({
+				position: "absolute",
+				top: openUp ? void 0 : topBelow,
+				bottom: openUp ? bottomAbove : void 0,
+				left,
+				zIndex: 9999,
+				width: rect.width,
+				maxHeight
+			});
+		};
+		raf = requestAnimationFrame(place);
+		return () => cancelAnimationFrame(raf);
 	}, [open]);
 	const handleSelect = (0, react.useCallback)((opt) => {
 		if (opt.disabled) return;
@@ -820,6 +843,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 		}
 	};
 	const effectiveTriggerId = id ?? triggerId;
+	const portalTarget = triggerRef.current?.closest("[role=\"dialog\"]") ?? (typeof document !== "undefined" ? document.body : null);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative",
 		ref: containerRef,
@@ -854,8 +878,12 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 				id: listboxId,
 				role: "listbox",
 				"aria-labelledby": effectiveTriggerId,
-				style: panelStyle,
-				className: "overflow-y-auto max-h-60 rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
+				"data-pis-floating": "",
+				style: {
+					...panelStyle,
+					pointerEvents: "auto"
+				},
+				className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
 				children: flatItems.map((fi, i) => {
 					if (fi.type === "group") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 						role: "presentation",
@@ -883,7 +911,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 						children: renderOption(opt)
 					}, opt.value);
 				})
-			}), document.body)
+			}), portalTarget)
 		]
 	});
 }

package/lib/index.mjs

@@ -715,21 +715,44 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
-			if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+			const target = e.target;
+			if (containerRef.current?.contains(target)) return;
+			if (listRef.current?.contains(target)) return;
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handlePointerDown);
 		return () => document.removeEventListener("mousedown", handlePointerDown);
 	}, [open]);
 	useEffect(() => {
-		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			width: rect.width
-		});
+		if (!open) return;
+		let raf = 0;
+		const place = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const MARGIN = 8;
+			const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
+			const spaceAbove = rect.top - MARGIN;
+			const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
+			const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
+			const parent = trigger.closest("[role=\"dialog\"]") ?? document.body;
+			const isBody = parent === document.body;
+			const pr = isBody ? null : parent.getBoundingClientRect();
+			const left = rect.left - (pr?.left ?? 0) + parent.scrollLeft;
+			const topBelow = rect.bottom - (pr?.top ?? 0) + parent.scrollTop + 4;
+			const bottomAbove = (isBody ? window.innerHeight : parent.clientHeight) - (rect.top - (pr?.top ?? 0) + parent.scrollTop) + 4;
+			setPanelStyle({
+				position: "absolute",
+				top: openUp ? void 0 : topBelow,
+				bottom: openUp ? bottomAbove : void 0,
+				left,
+				zIndex: 9999,
+				width: rect.width,
+				maxHeight
+			});
+		};
+		raf = requestAnimationFrame(place);
+		return () => cancelAnimationFrame(raf);
 	}, [open]);
 	const handleSelect = useCallback((opt) => {
 		if (opt.disabled) return;
@@ -796,6 +819,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 		}
 	};
 	const effectiveTriggerId = id ?? triggerId;
+	const portalTarget = triggerRef.current?.closest("[role=\"dialog\"]") ?? (typeof document !== "undefined" ? document.body : null);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		ref: containerRef,
@@ -830,8 +854,12 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 				id: listboxId,
 				role: "listbox",
 				"aria-labelledby": effectiveTriggerId,
-				style: panelStyle,
-				className: "overflow-y-auto max-h-60 rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
+				"data-pis-floating": "",
+				style: {
+					...panelStyle,
+					pointerEvents: "auto"
+				},
+				className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
 				children: flatItems.map((fi, i) => {
 					if (fi.type === "group") return /* @__PURE__ */ jsx("li", {
 						role: "presentation",
@@ -859,7 +887,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
 						children: renderOption(opt)
 					}, opt.value);
 				})
-			}), document.body)
+			}), portalTarget)
 		]
 	});
 }

package/package.json

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