@xsolla/xui-multi-select 0.185.4 → 0.185.5

package/web/index.mjs

@@ -3,8 +3,7 @@ import {
   forwardRef as forwardRef4,
   useRef as useRef4,
   useEffect as useEffect4,
-  useState as useState4,
-  useCallback as useCallback2
+  useState as useState4
 } from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
@@ -1740,13 +1739,23 @@ var useMultiSelectControl = ({
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
   useEffect(() => {
     if (!containerRef.current) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setItemsWidth(entry.contentRect.width);
-      }
-    });
+    let rafId = null;
+    const syncItemsWidth = () => {
+      rafId = null;
+      if (!containerRef.current) return;
+      const width = containerRef.current.getBoundingClientRect().width;
+      setItemsWidth((prev) => prev === width ? prev : width);
+    };
+    const scheduleWidthSync = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(syncItemsWidth);
+    };
+    const resizeObserver = new ResizeObserver(scheduleWidthSync);
     resizeObserver.observe(containerRef.current);
-    return () => resizeObserver.disconnect();
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
   }, [containerRef]);
   const widthsDependencies = useMemo(
     () => ({
@@ -2309,25 +2318,32 @@ var MultiSelect = forwardRef4(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
-    const updateMenuPosition = useCallback2(() => {
-      if (!isWeb || !controlRef.current) return;
-      const rect = controlRef.current.getBoundingClientRect();
-      setMenuPosition({
-        left: rect.left,
-        top: rect.bottom + 4,
-        width: rect.width
-      });
-    }, []);
     useEffect4(() => {
       if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
-      updateMenuPosition();
-      window.addEventListener("resize", updateMenuPosition);
-      window.addEventListener("scroll", updateMenuPosition, true);
+      let rafId = null;
+      const repositionMenu = () => {
+        rafId = null;
+        if (!controlRef.current) return;
+        const rect = controlRef.current.getBoundingClientRect();
+        setMenuPosition({
+          left: rect.left,
+          top: rect.bottom + 4,
+          width: rect.width
+        });
+      };
+      const scheduleUpdate = () => {
+        if (rafId != null) return;
+        rafId = requestAnimationFrame(repositionMenu);
+      };
+      scheduleUpdate();
+      window.addEventListener("resize", scheduleUpdate);
+      window.addEventListener("scroll", scheduleUpdate, true);
       return () => {
-        window.removeEventListener("resize", updateMenuPosition);
-        window.removeEventListener("scroll", updateMenuPosition, true);
+        if (rafId != null) cancelAnimationFrame(rafId);
+        window.removeEventListener("resize", scheduleUpdate);
+        window.removeEventListener("scroll", scheduleUpdate, true);
       };
-    }, [controlMenuOpen, dropdownMenu, isDisable, updateMenuPosition]);
+    }, [controlMenuOpen, dropdownMenu, isDisable]);
     useEffect4(() => {
       if (!isWeb || !dropdownMenu || !isOpen || isDisable) return;
       const handleOutsideMouseDown = (event) => {