@diwauhris/ui 1.7.26 → 1.7.27

package/lib/assets/ui.css

@@ -4442,6 +4442,12 @@ body {
   animation: datepickerIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden;
 }
+/* Hidden during initial measurement — no animation until final position is set */
+.pis-datepicker-popover--measuring {
+  opacity: 0;
+  pointer-events: none;
+  animation: none;
+}
 @keyframes datepickerIn {
   from { opacity: 0; transform: translateY(6px) scale(0.97); }
   to   { opacity: 1; transform: translateY(0)   scale(1);    }

package/lib/index.cjs

@@ -1485,23 +1485,35 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
+	}, [setIsOpen]);
 	(0, react.useEffect)(() => {
-		if (!isOpen) return;
+		if (!isOpen || !positioned) return;
+		let armed = false;
+		const armTimer = window.setTimeout(() => {
+			armed = true;
+		}, 150);
 		const close = () => setIsOpen(false);
+		const onScroll = () => {
+			if (armed) setIsOpen(false);
+		};
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
-		if (scrollParent) scrollParent.addEventListener("scroll", close, { passive: true });
-		window.addEventListener("scroll", close, {
+		if (scrollParent) scrollParent.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("scroll", onScroll, {
 			capture: true,
 			passive: true
 		});
 		window.addEventListener("resize", close);
 		return () => {
-			if (scrollParent) scrollParent.removeEventListener("scroll", close);
-			window.removeEventListener("scroll", close, { capture: true });
+			window.clearTimeout(armTimer);
+			if (scrollParent) scrollParent.removeEventListener("scroll", onScroll);
+			window.removeEventListener("scroll", onScroll, { capture: true });
 			window.removeEventListener("resize", close);
 		};
-	}, [isOpen]);
+	}, [
+		isOpen,
+		positioned,
+		setIsOpen
+	]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
 		function handleFocusOut(e) {
@@ -1512,7 +1524,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const wrapper = wrapperRef.current;
 		wrapper?.addEventListener("focusout", handleFocusOut);
 		return () => wrapper?.removeEventListener("focusout", handleFocusOut);
-	}, [isOpen]);
+	}, [isOpen, setIsOpen]);
 	function handleKeyDown(e) {
 		if (e.key === "Escape") {
 			e.preventDefault();
@@ -1575,11 +1587,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			})]
 		}), isOpen && !disabled && !readOnly && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: popoverRef,
-			className: "pis-datepicker-popover",
-			style: {
-				...popupStyle,
-				visibility: positioned ? void 0 : "hidden"
-			},
+			className: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
+			style: popupStyle,
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",

package/lib/index.mjs

@@ -1461,23 +1461,35 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
+	}, [setIsOpen]);
 	useEffect(() => {
-		if (!isOpen) return;
+		if (!isOpen || !positioned) return;
+		let armed = false;
+		const armTimer = window.setTimeout(() => {
+			armed = true;
+		}, 150);
 		const close = () => setIsOpen(false);
+		const onScroll = () => {
+			if (armed) setIsOpen(false);
+		};
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
-		if (scrollParent) scrollParent.addEventListener("scroll", close, { passive: true });
-		window.addEventListener("scroll", close, {
+		if (scrollParent) scrollParent.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("scroll", onScroll, {
 			capture: true,
 			passive: true
 		});
 		window.addEventListener("resize", close);
 		return () => {
-			if (scrollParent) scrollParent.removeEventListener("scroll", close);
-			window.removeEventListener("scroll", close, { capture: true });
+			window.clearTimeout(armTimer);
+			if (scrollParent) scrollParent.removeEventListener("scroll", onScroll);
+			window.removeEventListener("scroll", onScroll, { capture: true });
 			window.removeEventListener("resize", close);
 		};
-	}, [isOpen]);
+	}, [
+		isOpen,
+		positioned,
+		setIsOpen
+	]);
 	useEffect(() => {
 		if (!isOpen) return;
 		function handleFocusOut(e) {
@@ -1488,7 +1500,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const wrapper = wrapperRef.current;
 		wrapper?.addEventListener("focusout", handleFocusOut);
 		return () => wrapper?.removeEventListener("focusout", handleFocusOut);
-	}, [isOpen]);
+	}, [isOpen, setIsOpen]);
 	function handleKeyDown(e) {
 		if (e.key === "Escape") {
 			e.preventDefault();
@@ -1551,11 +1563,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			})]
 		}), isOpen && !disabled && !readOnly && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: popoverRef,
-			className: "pis-datepicker-popover",
-			style: {
-				...popupStyle,
-				visibility: positioned ? void 0 : "hidden"
-			},
+			className: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
+			style: popupStyle,
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",

package/package.json

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