@diwauhris/ui 1.7.27 → 1.7.29

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,34 +1470,43 @@ 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);
-	}, [setIsOpen]);
+	}, [isOpen, setIsOpen]);
 	(0, react.useEffect)(() => {
-		if (!isOpen || !positioned) return;
+		if (!isOpen) return;
 		let armed = false;
 		const armTimer = window.setTimeout(() => {
 			armed = true;
-		}, 150);
+		}, 100);
 		const close = () => setIsOpen(false);
 		const onScroll = () => {
-			if (armed) setIsOpen(false);
+			if (armed) close();
 		};
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
 		if (scrollParent) scrollParent.addEventListener("scroll", onScroll, { passive: true });
@@ -1509,17 +1521,15 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			window.removeEventListener("scroll", onScroll, { capture: true });
 			window.removeEventListener("resize", close);
 		};
-	}, [
-		isOpen,
-		positioned,
-		setIsOpen
-	]);
+	}, [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);
@@ -1587,8 +1597,11 @@ 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: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
-			style: popupStyle,
+			className: "pis-datepicker-popover",
+			style: {
+				...popupStyle,
+				visibility: popoverReady ? "visible" : "hidden"
+			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",
@@ -4075,10 +4088,12 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				right: Math.max(MARGIN, window.innerWidth - rect.right),
 				left: "auto"
 			};
+			const maxHeight = flipUp ? Math.max(120, rect.top - GAP - MARGIN) : Math.max(120, spaceBelow - GAP - MARGIN);
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
 				...horizontal,
+				maxHeight,
 				zIndex: 9999,
 				minWidth: PANEL_MIN_WIDTH,
 				maxWidth: available
@@ -4189,7 +4204,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			role: "menu",
 			"aria-label": ariaLabel,
 			style: panelStyle,
-			className: cn("overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
+			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;

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,34 +1446,43 @@ 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);
-	}, [setIsOpen]);
+	}, [isOpen, setIsOpen]);
 	useEffect(() => {
-		if (!isOpen || !positioned) return;
+		if (!isOpen) return;
 		let armed = false;
 		const armTimer = window.setTimeout(() => {
 			armed = true;
-		}, 150);
+		}, 100);
 		const close = () => setIsOpen(false);
 		const onScroll = () => {
-			if (armed) setIsOpen(false);
+			if (armed) close();
 		};
 		const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
 		if (scrollParent) scrollParent.addEventListener("scroll", onScroll, { passive: true });
@@ -1485,17 +1497,15 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			window.removeEventListener("scroll", onScroll, { capture: true });
 			window.removeEventListener("resize", close);
 		};
-	}, [
-		isOpen,
-		positioned,
-		setIsOpen
-	]);
+	}, [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);
@@ -1563,8 +1573,11 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			})]
 		}), isOpen && !disabled && !readOnly && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: popoverRef,
-			className: cn("pis-datepicker-popover", !positioned && "pis-datepicker-popover--measuring"),
-			style: popupStyle,
+			className: "pis-datepicker-popover",
+			style: {
+				...popupStyle,
+				visibility: popoverReady ? "visible" : "hidden"
+			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",
@@ -4051,10 +4064,12 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				right: Math.max(MARGIN, window.innerWidth - rect.right),
 				left: "auto"
 			};
+			const maxHeight = flipUp ? Math.max(120, rect.top - GAP - MARGIN) : Math.max(120, spaceBelow - GAP - MARGIN);
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
 				...horizontal,
+				maxHeight,
 				zIndex: 9999,
 				minWidth: PANEL_MIN_WIDTH,
 				maxWidth: available
@@ -4165,7 +4180,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			role: "menu",
 			"aria-label": ariaLabel,
 			style: panelStyle,
-			className: cn("overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
+			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
 				ref: (node) => {
 					itemRefs.current[index] = node;

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.27",
+  "version": "1.7.29",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [