@diwauhris/ui 1.7.35 → 1.7.36

package/lib/index.cjs

@@ -1233,40 +1233,40 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 	(0, react.useEffect)(() => {
 		isOpenRef.current = isOpen;
 	});
-	const doUpdatePosition = (0, react.useCallback)(() => {
-		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"
-		});
-	}, []);
-	(0, react.useEffect)(() => {
-		if (!isOpen) return;
-		const raf = requestAnimationFrame(doUpdatePosition);
-		return () => cancelAnimationFrame(raf);
-	}, [isOpen, doUpdatePosition]);
 	(0, react.useEffect)(() => {
-		const onScrollOrResize = () => {
-			if (isOpenRef.current) doUpdatePosition();
-		};
-		window.addEventListener("scroll", onScrollOrResize, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", onScrollOrResize);
-		return () => {
-			window.removeEventListener("scroll", onScrollOrResize, { capture: true });
-			window.removeEventListener("resize", onScrollOrResize);
+		let prevTop;
+		let prevBottom;
+		let prevLeft = 0;
+		let prevWidth = 0;
+		let rafId;
+		const loop = () => {
+			if (isOpenRef.current && wrapperRef.current) {
+				const rect = wrapperRef.current.getBoundingClientRect();
+				const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
+				const nextTop = dropUp ? void 0 : rect.bottom + 4;
+				const nextBottom = dropUp ? window.innerHeight - rect.top + 4 : void 0;
+				if (nextTop !== prevTop || nextBottom !== prevBottom || rect.left !== prevLeft || rect.width !== prevWidth) {
+					prevTop = nextTop;
+					prevBottom = nextBottom;
+					prevLeft = rect.left;
+					prevWidth = rect.width;
+					setPanelStyle({
+						position: "fixed",
+						top: nextTop,
+						bottom: nextBottom,
+						left: rect.left,
+						zIndex: 9999,
+						width: rect.width,
+						pointerEvents: "auto",
+						overscrollBehavior: "contain"
+					});
+				}
+			}
+			rafId = requestAnimationFrame(loop);
 		};
-	}, [doUpdatePosition]);
+		rafId = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(rafId);
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);

package/lib/index.mjs

@@ -1209,40 +1209,40 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 	useEffect(() => {
 		isOpenRef.current = isOpen;
 	});
-	const doUpdatePosition = useCallback(() => {
-		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"
-		});
-	}, []);
-	useEffect(() => {
-		if (!isOpen) return;
-		const raf = requestAnimationFrame(doUpdatePosition);
-		return () => cancelAnimationFrame(raf);
-	}, [isOpen, doUpdatePosition]);
 	useEffect(() => {
-		const onScrollOrResize = () => {
-			if (isOpenRef.current) doUpdatePosition();
-		};
-		window.addEventListener("scroll", onScrollOrResize, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", onScrollOrResize);
-		return () => {
-			window.removeEventListener("scroll", onScrollOrResize, { capture: true });
-			window.removeEventListener("resize", onScrollOrResize);
+		let prevTop;
+		let prevBottom;
+		let prevLeft = 0;
+		let prevWidth = 0;
+		let rafId;
+		const loop = () => {
+			if (isOpenRef.current && wrapperRef.current) {
+				const rect = wrapperRef.current.getBoundingClientRect();
+				const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
+				const nextTop = dropUp ? void 0 : rect.bottom + 4;
+				const nextBottom = dropUp ? window.innerHeight - rect.top + 4 : void 0;
+				if (nextTop !== prevTop || nextBottom !== prevBottom || rect.left !== prevLeft || rect.width !== prevWidth) {
+					prevTop = nextTop;
+					prevBottom = nextBottom;
+					prevLeft = rect.left;
+					prevWidth = rect.width;
+					setPanelStyle({
+						position: "fixed",
+						top: nextTop,
+						bottom: nextBottom,
+						left: rect.left,
+						zIndex: 9999,
+						width: rect.width,
+						pointerEvents: "auto",
+						overscrollBehavior: "contain"
+					});
+				}
+			}
+			rafId = requestAnimationFrame(loop);
 		};
-	}, [doUpdatePosition]);
+		rafId = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(rafId);
+	}, []);
 	useEffect(() => {
 		if (!isOpen) setHighlightIndex(-1);
 	}, [isOpen]);

package/package.json

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