@diwauhris/ui 1.7.31 → 1.7.33

package/lib/index.cjs

@@ -1229,34 +1229,37 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	(0, react.useLayoutEffect)(() => {
-		if (!isOpen || !wrapperRef.current) return;
-		const rect = wrapperRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			width: rect.width,
-			pointerEvents: "auto",
-			overscrollBehavior: "contain"
-		});
-	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) return;
-		const close = (e) => {
+		const updatePosition = () => {
+			if (!wrapperRef.current) return;
+			const rect = wrapperRef.current.getBoundingClientRect();
+			const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
+			setPanelStyle({
+				position: "fixed",
+				top: dropUp ? void 0 : rect.bottom + 4,
+				bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
+				left: rect.left,
+				zIndex: 9999,
+				width: rect.width,
+				pointerEvents: "auto",
+				overscrollBehavior: "contain"
+			});
+		};
+		const closeOnScroll = (e) => {
 			if (listRef.current && listRef.current.contains(e.target)) return;
 			setIsOpen(false);
 		};
-		const closeOnResize = () => setIsOpen(false);
-		window.addEventListener("scroll", close, {
+		const raf = requestAnimationFrame(updatePosition);
+		window.addEventListener("scroll", closeOnScroll, {
 			capture: true,
 			passive: true
 		});
-		window.addEventListener("resize", closeOnResize);
+		window.addEventListener("resize", updatePosition);
 		return () => {
-			window.removeEventListener("scroll", close, { capture: true });
-			window.removeEventListener("resize", closeOnResize);
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", closeOnScroll, { capture: true });
+			window.removeEventListener("resize", updatePosition);
 		};
 	}, [isOpen]);
 	(0, react.useEffect)(() => {

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";
@@ -1205,34 +1205,37 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	useLayoutEffect(() => {
-		if (!isOpen || !wrapperRef.current) return;
-		const rect = wrapperRef.current.getBoundingClientRect();
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: rect.left,
-			zIndex: 9999,
-			width: rect.width,
-			pointerEvents: "auto",
-			overscrollBehavior: "contain"
-		});
-	}, [isOpen]);
 	useEffect(() => {
 		if (!isOpen) return;
-		const close = (e) => {
+		const updatePosition = () => {
+			if (!wrapperRef.current) return;
+			const rect = wrapperRef.current.getBoundingClientRect();
+			const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
+			setPanelStyle({
+				position: "fixed",
+				top: dropUp ? void 0 : rect.bottom + 4,
+				bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
+				left: rect.left,
+				zIndex: 9999,
+				width: rect.width,
+				pointerEvents: "auto",
+				overscrollBehavior: "contain"
+			});
+		};
+		const closeOnScroll = (e) => {
 			if (listRef.current && listRef.current.contains(e.target)) return;
 			setIsOpen(false);
 		};
-		const closeOnResize = () => setIsOpen(false);
-		window.addEventListener("scroll", close, {
+		const raf = requestAnimationFrame(updatePosition);
+		window.addEventListener("scroll", closeOnScroll, {
 			capture: true,
 			passive: true
 		});
-		window.addEventListener("resize", closeOnResize);
+		window.addEventListener("resize", updatePosition);
 		return () => {
-			window.removeEventListener("scroll", close, { capture: true });
-			window.removeEventListener("resize", closeOnResize);
+			cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", closeOnScroll, { capture: true });
+			window.removeEventListener("resize", updatePosition);
 		};
 	}, [isOpen]);
 	useEffect(() => {

package/package.json

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