@diwauhris/ui 1.7.29 → 1.7.30

package/lib/index.cjs

@@ -1229,7 +1229,7 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		if (!isOpen || !wrapperRef.current) return;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPanelStyle({
@@ -1242,6 +1242,19 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const close = () => setIsOpen(false);
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
+		};
+	}, [isOpen]);
 	(0, react.useEffect)(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);

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";
@@ -1205,7 +1205,7 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
 	}, []);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!isOpen || !wrapperRef.current) return;
 		const rect = wrapperRef.current.getBoundingClientRect();
 		setPanelStyle({
@@ -1218,6 +1218,19 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 			overscrollBehavior: "contain"
 		});
 	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const close = () => setIsOpen(false);
+		window.addEventListener("scroll", close, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("scroll", close, { capture: true });
+			window.removeEventListener("resize", close);
+		};
+	}, [isOpen]);
 	useEffect(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);

package/package.json

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