@diwauhris/ui 1.7.35 → 1.7.37

package/lib/assets/ui.css

@@ -4290,6 +4290,10 @@
   background-size: 20px 20px;
 }
 
+.\[overflow\:clip\] {
+  overflow: clip;
+}
+
 /* ── Scrollbar utility ───────────────────────────────────────────────────── */
 .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
 .hide-scrollbar::-webkit-scrollbar { display: none; }

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]);
@@ -4418,7 +4418,7 @@ function AccordionContent({ children, className = "" }) {
 		"aria-labelledby": triggerId,
 		"aria-hidden": !isOpen || void 0,
 		"data-state": isOpen ? "open" : "closed",
-		className: cn("grid overflow-hidden transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+		className: cn("grid [overflow:clip] transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "min-h-0",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

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]);
@@ -4394,7 +4394,7 @@ function AccordionContent({ children, className = "" }) {
 		"aria-labelledby": triggerId,
 		"aria-hidden": !isOpen || void 0,
 		"data-state": isOpen ? "open" : "closed",
-		className: cn("grid overflow-hidden transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+		className: cn("grid [overflow:clip] transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "min-h-0",
 			children: /* @__PURE__ */ jsx("div", {

package/package.json

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