@xsolla/xui-multi-select 0.185.3 → 0.185.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.185.3",
+  "version": "0.185.5",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.185.3",
-    "@xsolla/xui-core": "0.185.3",
-    "@xsolla/xui-dropdown": "0.185.3",
-    "@xsolla/xui-primitives-core": "0.185.3"
+    "@xsolla/xui-checkbox": "0.185.5",
+    "@xsolla/xui-core": "0.185.5",
+    "@xsolla/xui-dropdown": "0.185.5",
+    "@xsolla/xui-primitives-core": "0.185.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -1765,13 +1765,23 @@ var useMultiSelectControl = ({
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
   (0, import_react8.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 = (0, import_react8.useMemo)(
     () => ({
@@ -2334,25 +2344,32 @@ var MultiSelect = (0, import_react12.forwardRef)(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
-    const updateMenuPosition = (0, import_react12.useCallback)(() => {
-      if (!isWeb || !controlRef.current) return;
-      const rect = controlRef.current.getBoundingClientRect();
-      setMenuPosition({
-        left: rect.left,
-        top: rect.bottom + 4,
-        width: rect.width
-      });
-    }, []);
     (0, import_react12.useEffect)(() => {
       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]);
     (0, import_react12.useEffect)(() => {
       if (!isWeb || !dropdownMenu || !isOpen || isDisable) return;
       const handleOutsideMouseDown = (event) => {