@diwauhris/ui 1.7.25 → 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

@@ -1417,6 +1417,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
 	const isOpen = isControlled ? open : uncontrolledOpen;
 	const [popupStyle, setPopupStyle] = (0, react.useState)({});
+	const [positioned, setPositioned] = (0, react.useState)(false);
 	const wrapperRef = (0, react.useRef)(null);
 	const popoverRef = (0, react.useRef)(null);
 	const inputRef = (0, react.useRef)(null);
@@ -1456,6 +1457,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				if (!wrapperRef.current) return;
 				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
+				setPositioned(false);
 				setIsOpen(true);
 			});
 		}, 50);
@@ -1465,11 +1467,16 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		placement,
 		setIsOpen
 	]);
-	(0, react.useEffect)(() => {
-		if (!isOpen || !popoverRef.current || !wrapperRef.current) return;
+	(0, react.useLayoutEffect)(() => {
+		if (!isOpen) {
+			setPositioned(false);
+			return;
+		}
+		if (!popoverRef.current || !wrapperRef.current) return;
 		const measuredHeight = popoverRef.current.offsetHeight;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+		setPositioned(true);
 	}, [isOpen, placement]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
@@ -1478,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) {
@@ -1505,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();
@@ -1568,7 +1587,7 @@ 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",
+			className: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
 			style: popupStyle,
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React$1 from "react";
-import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, RotateCcw, Search as Search$1, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -1393,6 +1393,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
 	const isOpen = isControlled ? open : uncontrolledOpen;
 	const [popupStyle, setPopupStyle] = useState({});
+	const [positioned, setPositioned] = useState(false);
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
@@ -1432,6 +1433,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				if (!wrapperRef.current) return;
 				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
+				setPositioned(false);
 				setIsOpen(true);
 			});
 		}, 50);
@@ -1441,11 +1443,16 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		placement,
 		setIsOpen
 	]);
-	useEffect(() => {
-		if (!isOpen || !popoverRef.current || !wrapperRef.current) return;
+	useLayoutEffect(() => {
+		if (!isOpen) {
+			setPositioned(false);
+			return;
+		}
+		if (!popoverRef.current || !wrapperRef.current) return;
 		const measuredHeight = popoverRef.current.offsetHeight;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+		setPositioned(true);
 	}, [isOpen, placement]);
 	useEffect(() => {
 		function handleClickOutside(e) {
@@ -1454,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) {
@@ -1481,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();
@@ -1544,7 +1563,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			})]
 		}), isOpen && !disabled && !readOnly && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: popoverRef,
-			className: "pis-datepicker-popover",
+			className: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
 			style: popupStyle,
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",

package/package.json

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