@diwauhris/ui 1.7.25 → 1.7.26

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) {
@@ -1569,7 +1576,10 @@ 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,
+			style: {
+				...popupStyle,
+				visibility: positioned ? void 0 : "hidden"
+			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",

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) {
@@ -1545,7 +1552,10 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		}), isOpen && !disabled && !readOnly && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: popoverRef,
 			className: "pis-datepicker-popover",
-			style: popupStyle,
+			style: {
+				...popupStyle,
+				visibility: positioned ? void 0 : "hidden"
+			},
 			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.25",
+  "version": "1.7.26",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [