@diwauhris/ui 1.7.38 → 1.7.40

package/lib/assets/ui.css

@@ -250,6 +250,10 @@
   pointer-events: none;
 }
 
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
 .\!visible {
   visibility: visible !important;
 }
@@ -1328,6 +1332,10 @@
   max-width: 96px;
 }
 
+.max-w-\[calc\(100vw-16px\)\] {
+  max-width: calc(100vw - 16px);
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -2560,6 +2568,10 @@
   background-color: rgb(0 55 123 / 0.5);
 }
 
+.bg-brand-navy\/60 {
+  background-color: rgb(0 55 123 / 0.6);
+}
+
 .bg-brand-navy\/\[0\.03\] {
   background-color: rgb(0 55 123 / 0.03);
 }
@@ -4157,6 +4169,11 @@
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -4232,6 +4249,14 @@
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.will-change-\[opacity\] {
+  will-change: opacity;
+}
+
+.will-change-\[transform\2c opacity\] {
+  will-change: transform,opacity;
+}
+
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);

package/lib/index.cjs

@@ -2462,73 +2462,76 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
-			style: { padding: 0 },
-			onOpenAutoFocus,
-			onCloseAutoFocus,
-			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: (e) => {
-				if (e.target?.closest(".pis-datepicker-popover")) {
-					e.preventDefault();
-					return;
-				}
-				if (preventClose) {
-					e.preventDefault();
-					return;
-				}
-				onInteractOutside?.(e);
-			},
-			children: [
-				!preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
-					asChild: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-label": closeLabel,
-						className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-							size: 16,
-							"aria-hidden": "true"
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "will-change-[transform,opacity]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-150 ease-out"),
+				style: { padding: 0 },
+				onOpenAutoFocus,
+				onCloseAutoFocus,
+				onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
+				onInteractOutside: (e) => {
+					if (e.target?.closest(".pis-datepicker-popover")) {
+						e.preventDefault();
+						return;
+					}
+					if (preventClose) {
+						e.preventDefault();
+						return;
+					}
+					onInteractOutside?.(e);
+				},
+				children: [
+					!preventClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": closeLabel,
+							className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+								size: 16,
+								"aria-hidden": "true"
+							})
 						})
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2.5",
-						children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: iconBadgeClass,
-							children: icon
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
-							className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
-							children: title
-						}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
-							className: "text-xs text-slate-500 mt-0.5",
-							children: subtitle
-						})] })]
-					}), headerMeta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mt-2",
-						children: headerMeta
-					})]
-				}),
-				onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-					onSubmit,
-					className: "flex flex-col min-h-0 flex-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2.5",
+							children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: iconBadgeClass,
+								children: icon
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+								className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
+								children: title
+							}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
+								className: "text-xs text-slate-500 mt-0.5",
+								children: subtitle
+							})] })]
+						}), headerMeta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mt-2",
+							children: headerMeta
+						})]
+					}),
+					onSubmit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+						onSubmit,
+						className: "flex flex-col min-h-0 flex-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex-1 overflow-y-auto px-6 py-5",
+							children: bodyContent
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "px-6 py-4 border-t border-slate-100",
+							children: resolvedFooter
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex-1 overflow-y-auto px-6 py-5",
 						children: bodyContent
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "px-6 py-4 border-t border-slate-100",
 						children: resolvedFooter
-					})]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex-1 overflow-y-auto px-6 py-5",
-					children: bodyContent
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "px-6 py-4 border-t border-slate-100",
-					children: resolvedFooter
-				})] })
-			]
+					})] })
+				]
+			})
 		})] })
 	});
 }
@@ -3989,26 +3992,44 @@ 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;
+		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: rect.bottom + 4,
-				left: rect.left,
-				zIndex: 9999,
+				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);
 		};
@@ -4017,6 +4038,8 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 		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();
@@ -4051,8 +4074,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

@@ -2438,73 +2438,76 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
-			style: { padding: 0 },
-			onOpenAutoFocus,
-			onCloseAutoFocus,
-			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: (e) => {
-				if (e.target?.closest(".pis-datepicker-popover")) {
-					e.preventDefault();
-					return;
-				}
-				if (preventClose) {
-					e.preventDefault();
-					return;
-				}
-				onInteractOutside?.(e);
-			},
-			children: [
-				!preventClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": closeLabel,
-						className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
-						children: /* @__PURE__ */ jsx(X, {
-							size: 16,
-							"aria-hidden": "true"
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
+			children: /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "will-change-[transform,opacity]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-150 ease-out"),
+				style: { padding: 0 },
+				onOpenAutoFocus,
+				onCloseAutoFocus,
+				onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
+				onInteractOutside: (e) => {
+					if (e.target?.closest(".pis-datepicker-popover")) {
+						e.preventDefault();
+						return;
+					}
+					if (preventClose) {
+						e.preventDefault();
+						return;
+					}
+					onInteractOutside?.(e);
+				},
+				children: [
+					!preventClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": closeLabel,
+							className: "absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+							children: /* @__PURE__ */ jsx(X, {
+								size: 16,
+								"aria-hidden": "true"
+							})
 						})
-					})
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2.5",
-						children: [icon && /* @__PURE__ */ jsx("div", {
-							className: iconBadgeClass,
-							children: icon
-						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
-							className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
-							children: title
-						}), subtitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-							className: "text-xs text-slate-500 mt-0.5",
-							children: subtitle
-						})] })]
-					}), headerMeta && /* @__PURE__ */ jsx("div", {
-						className: "mt-2",
-						children: headerMeta
-					})]
-				}),
-				onSubmit ? /* @__PURE__ */ jsxs("form", {
-					onSubmit,
-					className: "flex flex-col min-h-0 flex-1",
-					children: [/* @__PURE__ */ jsx("div", {
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "px-6 pt-6 pb-4 border-b-2 border-slate-100",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2.5",
+							children: [icon && /* @__PURE__ */ jsx("div", {
+								className: iconBadgeClass,
+								children: icon
+							}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+								className: cn(typography.titleOverlay, danger ? "text-rose-700" : "text-slate-900"),
+								children: title
+							}), subtitle && /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+								className: "text-xs text-slate-500 mt-0.5",
+								children: subtitle
+							})] })]
+						}), headerMeta && /* @__PURE__ */ jsx("div", {
+							className: "mt-2",
+							children: headerMeta
+						})]
+					}),
+					onSubmit ? /* @__PURE__ */ jsxs("form", {
+						onSubmit,
+						className: "flex flex-col min-h-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex-1 overflow-y-auto px-6 py-5",
+							children: bodyContent
+						}), /* @__PURE__ */ jsx("div", {
+							className: "px-6 py-4 border-t border-slate-100",
+							children: resolvedFooter
+						})]
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "flex-1 overflow-y-auto px-6 py-5",
 						children: bodyContent
 					}), /* @__PURE__ */ jsx("div", {
 						className: "px-6 py-4 border-t border-slate-100",
 						children: resolvedFooter
-					})]
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-					className: "flex-1 overflow-y-auto px-6 py-5",
-					children: bodyContent
-				}), /* @__PURE__ */ jsx("div", {
-					className: "px-6 py-4 border-t border-slate-100",
-					children: resolvedFooter
-				})] })
-			]
+					})] })
+				]
+			})
 		})] })
 	});
 }
@@ -3965,26 +3968,44 @@ 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;
+		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: rect.bottom + 4,
-				left: rect.left,
-				zIndex: 9999,
+				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);
 		};
@@ -3993,6 +4014,8 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 		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();
@@ -4027,8 +4050,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.38",
+  "version": "1.7.40",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [