@diwauhris/ui 1.7.16 → 1.7.18

package/lib/assets/ui.css

@@ -4410,8 +4410,8 @@ body {
 
 /* ── Date Picker (react-calendar DIWA theme) ─────────────────────────────── */
 .pis-datepicker-popover {
-  position: absolute;
   z-index: 1050;
+  pointer-events: auto;
   margin-top: 6px;
   background: #fff;
   border: 1px solid #dde3ec;

package/lib/index.cjs

@@ -1237,7 +1237,9 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			top: rect.bottom + 4,
 			left: rect.left,
 			zIndex: 9999,
-			width: rect.width
+			width: rect.width,
+			pointerEvents: "auto",
+			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
 	(0, react.useEffect)(() => {
@@ -1338,6 +1340,12 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			role: "listbox",
 			style: panelStyle,
 			className: "bg-white border border-slate-200 rounded-xl shadow-lg max-h-60 overflow-y-auto",
+			onWheel: (e) => {
+				if (listRef.current) {
+					listRef.current.scrollTop += e.deltaY;
+					e.stopPropagation();
+				}
+			},
 			children: error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-3 py-2 text-sm text-rose-500 font-semibold",
 				children: error
@@ -1384,6 +1392,25 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 */
 var POPOVER_WIDTH = 352;
 var CALENDAR_HEIGHT = 360;
+function getScrollParent(el) {
+	if (!el || el === document.body) return null;
+	const { overflowY, overflow } = getComputedStyle(el);
+	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
+	return getScrollParent(el.parentElement);
+}
+function computePopupStyle(rect) {
+	const spaceBelow = window.innerHeight - rect.bottom;
+	const spaceAbove = rect.top;
+	const isNarrow = window.innerWidth < 368;
+	const style = {
+		position: "fixed",
+		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
+		width: isNarrow ? `calc(100vw - 16px)` : void 0
+	};
+	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
+	else style.top = rect.bottom + 6;
+	return style;
+}
 function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const [popupStyle, setPopupStyle] = (0, react.useState)({});
@@ -1405,46 +1432,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const displayValue = selectedDate ? (0, date_fns.format)(selectedDate, "MMM d, yyyy") : "";
 	const skipNextOpen = (0, react.useRef)(false);
 	const openPopup = (0, react.useCallback)(() => {
-		if (disabled || !wrapperRef.current) return;
+		if (disabled) return;
 		if (skipNextOpen.current) {
 			skipNextOpen.current = false;
 			return;
 		}
-		setPopupStyle({
-			position: "fixed",
-			top: -9999,
-			left: -9999,
-			visibility: "hidden"
-		});
-		setIsOpen(true);
-	}, [disabled]);
-	(0, react.useEffect)(() => {
-		if (!isOpen || !wrapperRef.current) return;
-		let frameId1;
-		let frameId2;
-		frameId1 = requestAnimationFrame(() => {
-			frameId2 = requestAnimationFrame(() => {
+		setTimeout(() => {
+			if (!wrapperRef.current) return;
+			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const rect = wrapperRef.current.getBoundingClientRect();
-				const spaceBelow = window.innerHeight - rect.bottom;
-				const spaceAbove = rect.top;
-				const isNarrow = window.innerWidth < 368;
-				const style = {
-					position: "fixed",
-					visibility: "visible",
-					left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
-					width: isNarrow ? `calc(100vw - 16px)` : void 0
-				};
-				if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
-				else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
 				setPopupStyle(style);
+				setIsOpen(true);
 			});
-		});
-		return () => {
-			cancelAnimationFrame(frameId1);
-			cancelAnimationFrame(frameId2);
-		};
-	}, [isOpen]);
+		}, 50);
+	}, [disabled]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1455,32 +1457,18 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	}, []);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
-		function getScrollParent(el) {
-			if (!el || el === document.body) return null;
-			const style = getComputedStyle(el);
-			if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
-			return getScrollParent(el.parentElement);
-		}
+		const close = () => setIsOpen(false);
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
-		let scrollHandler = null;
-		let resizeHandler = null;
-		const frameId = requestAnimationFrame(() => {
-			scrollHandler = () => setIsOpen(false);
-			resizeHandler = () => setIsOpen(false);
-			if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
-			window.addEventListener("scroll", scrollHandler, {
-				capture: true,
-				passive: true
-			});
-			window.addEventListener("resize", resizeHandler);
+		if (scrollParent) scrollParent.addEventListener("scroll", close, { passive: true });
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
 		});
+		window.addEventListener("resize", close);
 		return () => {
-			cancelAnimationFrame(frameId);
-			if (scrollHandler) {
-				if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
-				window.removeEventListener("scroll", scrollHandler, { capture: true });
-			}
-			if (resizeHandler) window.removeEventListener("resize", resizeHandler);
+			if (scrollParent) scrollParent.removeEventListener("scroll", close);
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
 		};
 	}, [isOpen]);
 	(0, react.useEffect)(() => {
@@ -2351,7 +2339,17 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 			onOpenAutoFocus,
 			onCloseAutoFocus,
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
+			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,
@@ -2465,7 +2463,17 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 		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 overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size], "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"),
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
+			onInteractOutside: (e) => {
+				if (e.target?.closest(".pis-datepicker-popover")) {
+					e.preventDefault();
+					return;
+				}
+				if (preventClose) {
+					e.preventDefault();
+					return;
+				}
+				onInteractOutside?.(e);
+			},
 			onOpenAutoFocus,
 			onCloseAutoFocus,
 			style: { padding: 0 },

package/lib/index.mjs

@@ -1213,7 +1213,9 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			top: rect.bottom + 4,
 			left: rect.left,
 			zIndex: 9999,
-			width: rect.width
+			width: rect.width,
+			pointerEvents: "auto",
+			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
 	useEffect(() => {
@@ -1314,6 +1316,12 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			role: "listbox",
 			style: panelStyle,
 			className: "bg-white border border-slate-200 rounded-xl shadow-lg max-h-60 overflow-y-auto",
+			onWheel: (e) => {
+				if (listRef.current) {
+					listRef.current.scrollTop += e.deltaY;
+					e.stopPropagation();
+				}
+			},
 			children: error ? /* @__PURE__ */ jsx("div", {
 				className: "px-3 py-2 text-sm text-rose-500 font-semibold",
 				children: error
@@ -1360,6 +1368,25 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 */
 var POPOVER_WIDTH = 352;
 var CALENDAR_HEIGHT = 360;
+function getScrollParent(el) {
+	if (!el || el === document.body) return null;
+	const { overflowY, overflow } = getComputedStyle(el);
+	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
+	return getScrollParent(el.parentElement);
+}
+function computePopupStyle(rect) {
+	const spaceBelow = window.innerHeight - rect.bottom;
+	const spaceAbove = rect.top;
+	const isNarrow = window.innerWidth < 368;
+	const style = {
+		position: "fixed",
+		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
+		width: isNarrow ? `calc(100vw - 16px)` : void 0
+	};
+	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
+	else style.top = rect.bottom + 6;
+	return style;
+}
 function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [popupStyle, setPopupStyle] = useState({});
@@ -1381,46 +1408,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const displayValue = selectedDate ? format(selectedDate, "MMM d, yyyy") : "";
 	const skipNextOpen = useRef(false);
 	const openPopup = useCallback(() => {
-		if (disabled || !wrapperRef.current) return;
+		if (disabled) return;
 		if (skipNextOpen.current) {
 			skipNextOpen.current = false;
 			return;
 		}
-		setPopupStyle({
-			position: "fixed",
-			top: -9999,
-			left: -9999,
-			visibility: "hidden"
-		});
-		setIsOpen(true);
-	}, [disabled]);
-	useEffect(() => {
-		if (!isOpen || !wrapperRef.current) return;
-		let frameId1;
-		let frameId2;
-		frameId1 = requestAnimationFrame(() => {
-			frameId2 = requestAnimationFrame(() => {
+		setTimeout(() => {
+			if (!wrapperRef.current) return;
+			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const rect = wrapperRef.current.getBoundingClientRect();
-				const spaceBelow = window.innerHeight - rect.bottom;
-				const spaceAbove = rect.top;
-				const isNarrow = window.innerWidth < 368;
-				const style = {
-					position: "fixed",
-					visibility: "visible",
-					left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
-					width: isNarrow ? `calc(100vw - 16px)` : void 0
-				};
-				if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
-				else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
 				setPopupStyle(style);
+				setIsOpen(true);
 			});
-		});
-		return () => {
-			cancelAnimationFrame(frameId1);
-			cancelAnimationFrame(frameId2);
-		};
-	}, [isOpen]);
+		}, 50);
+	}, [disabled]);
 	useEffect(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1431,32 +1433,18 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	}, []);
 	useEffect(() => {
 		if (!isOpen) return;
-		function getScrollParent(el) {
-			if (!el || el === document.body) return null;
-			const style = getComputedStyle(el);
-			if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
-			return getScrollParent(el.parentElement);
-		}
+		const close = () => setIsOpen(false);
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
-		let scrollHandler = null;
-		let resizeHandler = null;
-		const frameId = requestAnimationFrame(() => {
-			scrollHandler = () => setIsOpen(false);
-			resizeHandler = () => setIsOpen(false);
-			if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
-			window.addEventListener("scroll", scrollHandler, {
-				capture: true,
-				passive: true
-			});
-			window.addEventListener("resize", resizeHandler);
+		if (scrollParent) scrollParent.addEventListener("scroll", close, { passive: true });
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
 		});
+		window.addEventListener("resize", close);
 		return () => {
-			cancelAnimationFrame(frameId);
-			if (scrollHandler) {
-				if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
-				window.removeEventListener("scroll", scrollHandler, { capture: true });
-			}
-			if (resizeHandler) window.removeEventListener("resize", resizeHandler);
+			if (scrollParent) scrollParent.removeEventListener("scroll", close);
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
 		};
 	}, [isOpen]);
 	useEffect(() => {
@@ -2327,7 +2315,17 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 			onOpenAutoFocus,
 			onCloseAutoFocus,
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
+			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,
@@ -2441,7 +2439,17 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 		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 overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size], "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"),
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
-			onInteractOutside: preventClose ? (e) => e.preventDefault() : onInteractOutside,
+			onInteractOutside: (e) => {
+				if (e.target?.closest(".pis-datepicker-popover")) {
+					e.preventDefault();
+					return;
+				}
+				if (preventClose) {
+					e.preventDefault();
+					return;
+				}
+				onInteractOutside?.(e);
+			},
 			onOpenAutoFocus,
 			onCloseAutoFocus,
 			style: { padding: 0 },

package/package.json

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