@diwauhris/ui 1.7.26 → 1.7.28

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

@@ -1408,16 +1408,20 @@ function computePopupStyle(rect, placement = "auto", measuredHeight) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
+	const placeBelow = placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove;
+	if (placeBelow) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
 	else style.top = Math.max(rect.top - height - 6, 8);
-	return style;
+	return {
+		style,
+		placedAbove: !placeBelow
+	};
 }
 function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name, isDateDisabled, readOnly = false, open, defaultOpen = false }) {
 	const isControlled = open !== void 0;
 	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 placedAbove = (0, react.useRef)(false);
 	const wrapperRef = (0, react.useRef)(null);
 	const popoverRef = (0, react.useRef)(null);
 	const inputRef = (0, react.useRef)(null);
@@ -1455,9 +1459,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
-				setPopupStyle(style);
-				setPositioned(false);
+				const result = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
+				placedAbove.current = result.placedAbove;
 				setIsOpen(true);
 			});
 		}, 50);
@@ -1467,52 +1470,71 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		placement,
 		setIsOpen
 	]);
-	(0, react.useLayoutEffect)(() => {
+	const [popoverReady, setPopoverReady] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
 		if (!isOpen) {
-			setPositioned(false);
+			setPopoverReady(false);
+			setPopupStyle({});
 			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]);
+		const frameId = requestAnimationFrame(() => {
+			if (!popoverRef.current || !wrapperRef.current) return;
+			const measuredHeight = popoverRef.current.offsetHeight;
+			const result = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placedAbove.current ? "above" : "below", measuredHeight);
+			setPopupStyle(result.style);
+			setPopoverReady(true);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [isOpen]);
 	(0, react.useEffect)(() => {
+		if (!isOpen) return;
 		function handleClickOutside(e) {
 			const target = e.target;
-			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
+			if (!popoverRef.current) return;
+			const inWrapper = wrapperRef.current?.contains(target);
+			const inPopover = popoverRef.current.contains(target);
+			if (!inWrapper && !inPopover) setIsOpen(false);
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
+	}, [isOpen, setIsOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
+		let armed = false;
+		const armTimer = window.setTimeout(() => {
+			armed = true;
+		}, 100);
 		const close = () => setIsOpen(false);
+		const onScroll = () => {
+			if (armed) close();
+		};
 		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, setIsOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
 		function handleFocusOut(e) {
 			if (!e.relatedTarget) return;
 			const target = e.relatedTarget;
-			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
+			const inWrapper = wrapperRef.current?.contains(target);
+			const inPopover = popoverRef.current?.contains(target);
+			if (!inWrapper && !inPopover) setIsOpen(false);
 		}
 		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();
@@ -1578,7 +1600,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			className: "pis-datepicker-popover",
 			style: {
 				...popupStyle,
-				visibility: positioned ? void 0 : "hidden"
+				visibility: popoverReady ? "visible" : "hidden"
 			},
 			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, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, 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";
@@ -1384,16 +1384,20 @@ function computePopupStyle(rect, placement = "auto", measuredHeight) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
+	const placeBelow = placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove;
+	if (placeBelow) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
 	else style.top = Math.max(rect.top - height - 6, 8);
-	return style;
+	return {
+		style,
+		placedAbove: !placeBelow
+	};
 }
 function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name, isDateDisabled, readOnly = false, open, defaultOpen = false }) {
 	const isControlled = open !== void 0;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
 	const isOpen = isControlled ? open : uncontrolledOpen;
 	const [popupStyle, setPopupStyle] = useState({});
-	const [positioned, setPositioned] = useState(false);
+	const placedAbove = useRef(false);
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
@@ -1431,9 +1435,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
-				setPopupStyle(style);
-				setPositioned(false);
+				const result = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
+				placedAbove.current = result.placedAbove;
 				setIsOpen(true);
 			});
 		}, 50);
@@ -1443,52 +1446,71 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		placement,
 		setIsOpen
 	]);
-	useLayoutEffect(() => {
+	const [popoverReady, setPopoverReady] = useState(false);
+	useEffect(() => {
 		if (!isOpen) {
-			setPositioned(false);
+			setPopoverReady(false);
+			setPopupStyle({});
 			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]);
+		const frameId = requestAnimationFrame(() => {
+			if (!popoverRef.current || !wrapperRef.current) return;
+			const measuredHeight = popoverRef.current.offsetHeight;
+			const result = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placedAbove.current ? "above" : "below", measuredHeight);
+			setPopupStyle(result.style);
+			setPopoverReady(true);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [isOpen]);
 	useEffect(() => {
+		if (!isOpen) return;
 		function handleClickOutside(e) {
 			const target = e.target;
-			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
+			if (!popoverRef.current) return;
+			const inWrapper = wrapperRef.current?.contains(target);
+			const inPopover = popoverRef.current.contains(target);
+			if (!inWrapper && !inPopover) setIsOpen(false);
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
+	}, [isOpen, setIsOpen]);
 	useEffect(() => {
 		if (!isOpen) return;
+		let armed = false;
+		const armTimer = window.setTimeout(() => {
+			armed = true;
+		}, 100);
 		const close = () => setIsOpen(false);
+		const onScroll = () => {
+			if (armed) close();
+		};
 		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, setIsOpen]);
 	useEffect(() => {
 		if (!isOpen) return;
 		function handleFocusOut(e) {
 			if (!e.relatedTarget) return;
 			const target = e.relatedTarget;
-			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
+			const inWrapper = wrapperRef.current?.contains(target);
+			const inPopover = popoverRef.current?.contains(target);
+			if (!inWrapper && !inPopover) setIsOpen(false);
 		}
 		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();
@@ -1554,7 +1576,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			className: "pis-datepicker-popover",
 			style: {
 				...popupStyle,
-				visibility: positioned ? void 0 : "hidden"
+				visibility: popoverReady ? "visible" : "hidden"
 			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",

package/lib/types/ui-library/gallery/date-picker/DatePicker.d.ts

@@ -53,6 +53,9 @@ interface DatePickerProps {
     /** Initial open state when uncontrolled. Ignored when `open` is provided. */
     defaultOpen?: boolean;
 }
-export declare function computePopupStyle(rect: DOMRect, placement?: 'auto' | 'below' | 'above', measuredHeight?: number): React.CSSProperties;
+export declare function computePopupStyle(rect: DOMRect, placement?: 'auto' | 'below' | 'above', measuredHeight?: number): {
+    style: React.CSSProperties;
+    placedAbove: boolean;
+};
 export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, dateFormat, clearable, onOpenChange, placement, locale, name, isDateDisabled, readOnly, open, defaultOpen, }: DatePickerProps): import("react").JSX.Element;
 export {};

package/package.json

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