@diwauhris/ui 1.7.37 → 1.7.39

package/lib/assets/ui.css

@@ -1328,6 +1328,10 @@
   max-width: 96px;
 }
 
+.max-w-\[calc\(100vw-16px\)\] {
+  max-width: calc(100vw - 16px);
+}
+
 .max-w-lg {
   max-width: 32rem;
 }

package/lib/index.cjs

@@ -3989,24 +3989,54 @@ function SidebarItem({ href, onClick, active = false, icon, badge, disabled = fa
 */
 function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassName = "", panelClassName = "" }) {
 	const ref = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
 	const triggerRef = (0, react.useRef)(null);
 	const panelId = `${(0, react.useId)().replace(/:/g, "")}-panel`;
 	const [panelStyle, setPanelStyle] = (0, react.useState)({});
+	const [positioned, setPositioned] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
-		if (!isOpen || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, 180)
+		if (!isOpen || !triggerRef.current) {
+			setPositioned(false);
+			return;
+		}
+		const GAP = 4;
+		const MARGIN = 8;
+		const updatePosition = () => {
+			if (!triggerRef.current) return;
+			const rect = triggerRef.current.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? 280;
+			const panelWidth = panelRef.current?.offsetWidth ?? Math.max(rect.width, 180);
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const spaceAbove = rect.top;
+			const top = spaceBelow >= panelHeight + GAP + MARGIN || spaceBelow >= spaceAbove ? Math.min(rect.bottom + GAP, window.innerHeight - panelHeight - MARGIN) : Math.max(rect.top - panelHeight - GAP, MARGIN);
+			const left = Math.max(MARGIN, Math.min(rect.left, window.innerWidth - panelWidth - MARGIN));
+			setPanelStyle({
+				position: "fixed",
+				top: Math.max(MARGIN, top),
+				left,
+				zIndex: 1e3,
+				minWidth: Math.max(rect.width, 180)
+			});
+		};
+		updatePosition();
+		const raf = requestAnimationFrame(() => {
+			updatePosition();
+			setPositioned(true);
 		});
+		window.addEventListener("scroll", updatePosition, true);
+		window.addEventListener("resize", updatePosition);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", updatePosition, true);
+			window.removeEventListener("resize", updatePosition);
+		};
 	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
 		const handlePointerDown = (e) => {
 			const target = e.target;
+			if (panelRef.current?.contains(target)) return;
+			if (target.closest?.(".pis-datepicker-popover")) return;
 			if (ref.current && !ref.current.contains(target)) {
 				onClose();
 				triggerRef.current?.focus();
@@ -4041,8 +4071,12 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 			children: trigger
 		}), isOpen && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			id: panelId,
-			style: panelStyle,
-			className: cn("max-h-[280px] overflow-y-auto", "rounded-xl border border-slate-200 bg-white shadow-lg", panelClassName),
+			ref: panelRef,
+			style: {
+				...panelStyle,
+				visibility: positioned ? "visible" : "hidden"
+			},
+			className: cn("w-max max-w-[calc(100vw-16px)] max-h-[280px] overflow-y-auto", "rounded-xl border border-slate-200 bg-white shadow-lg", panelClassName),
 			children
 		}), document.body)]
 	});

package/lib/index.mjs

@@ -3965,24 +3965,54 @@ function SidebarItem({ href, onClick, active = false, icon, badge, disabled = fa
 */
 function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassName = "", panelClassName = "" }) {
 	const ref = useRef(null);
+	const panelRef = useRef(null);
 	const triggerRef = useRef(null);
 	const panelId = `${useId().replace(/:/g, "")}-panel`;
 	const [panelStyle, setPanelStyle] = useState({});
+	const [positioned, setPositioned] = useState(false);
 	useEffect(() => {
-		if (!isOpen || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, 180)
+		if (!isOpen || !triggerRef.current) {
+			setPositioned(false);
+			return;
+		}
+		const GAP = 4;
+		const MARGIN = 8;
+		const updatePosition = () => {
+			if (!triggerRef.current) return;
+			const rect = triggerRef.current.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? 280;
+			const panelWidth = panelRef.current?.offsetWidth ?? Math.max(rect.width, 180);
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const spaceAbove = rect.top;
+			const top = spaceBelow >= panelHeight + GAP + MARGIN || spaceBelow >= spaceAbove ? Math.min(rect.bottom + GAP, window.innerHeight - panelHeight - MARGIN) : Math.max(rect.top - panelHeight - GAP, MARGIN);
+			const left = Math.max(MARGIN, Math.min(rect.left, window.innerWidth - panelWidth - MARGIN));
+			setPanelStyle({
+				position: "fixed",
+				top: Math.max(MARGIN, top),
+				left,
+				zIndex: 1e3,
+				minWidth: Math.max(rect.width, 180)
+			});
+		};
+		updatePosition();
+		const raf = requestAnimationFrame(() => {
+			updatePosition();
+			setPositioned(true);
 		});
+		window.addEventListener("scroll", updatePosition, true);
+		window.addEventListener("resize", updatePosition);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", updatePosition, true);
+			window.removeEventListener("resize", updatePosition);
+		};
 	}, [isOpen]);
 	useEffect(() => {
 		if (!isOpen) return;
 		const handlePointerDown = (e) => {
 			const target = e.target;
+			if (panelRef.current?.contains(target)) return;
+			if (target.closest?.(".pis-datepicker-popover")) return;
 			if (ref.current && !ref.current.contains(target)) {
 				onClose();
 				triggerRef.current?.focus();
@@ -4017,8 +4047,12 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 			children: trigger
 		}), isOpen && createPortal(/* @__PURE__ */ jsx("div", {
 			id: panelId,
-			style: panelStyle,
-			className: cn("max-h-[280px] overflow-y-auto", "rounded-xl border border-slate-200 bg-white shadow-lg", panelClassName),
+			ref: panelRef,
+			style: {
+				...panelStyle,
+				visibility: positioned ? "visible" : "hidden"
+			},
+			className: cn("w-max max-w-[calc(100vw-16px)] max-h-[280px] overflow-y-auto", "rounded-xl border border-slate-200 bg-white shadow-lg", panelClassName),
 			children
 		}), document.body)]
 	});

package/package.json

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