@xsolla/xui-context-menu 0.173.2 → 0.174.0

package/web/index.mjs

@@ -962,6 +962,7 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var SUBMENU_GAP2 = 4;
 var OPEN_DELAY_MS = 200;
 var CLOSE_GRACE_MS = 100;
+var _submenuIdCounter = 0;
 var ContextMenuSubmenu = ({
   label,
   icon,
@@ -976,6 +977,11 @@ var ContextMenuSubmenu = ({
   const size = propSize || context?.size || "md";
   const sizeStyles = xuiTheme.sizing.contextMenu(size);
   const borderRadius = xuiTheme.shape?.contextMenu?.[size]?.borderRadius ?? xuiTheme.radius?.button ?? 8;
+  const submenuIdRef = useRef(null);
+  if (submenuIdRef.current === null) {
+    submenuIdRef.current = `xui-cm-submenu-${_submenuIdCounter += 1}`;
+  }
+  const submenuId = submenuIdRef.current;
   const [isOpen, setIsOpen] = useState2(false);
   const [visible, setVisible] = useState2(false);
   const [openLeft, setOpenLeft] = useState2(false);
@@ -988,12 +994,19 @@ var ContextMenuSubmenu = ({
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
   }, []);
+  useEffect2(() => {
+    if (!context?.activeSubmenuId) return;
+    if (context.activeSubmenuId !== submenuId) {
+      setIsOpen(false);
+    }
+  }, [context?.activeSubmenuId, submenuId]);
   const calculatePlacement = useCallback(() => {
     if (!triggerRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const estimatedWidth = sizeStyles.minWidth + 32;
     const wouldOverflowRight = triggerRect.right + estimatedWidth + SUBMENU_GAP2 > window.innerWidth - 8;
-    setOpenLeft(wouldOverflowRight);
+    const hasSpaceOnLeft = triggerRect.left - SUBMENU_GAP2 - estimatedWidth >= 8;
+    setOpenLeft(wouldOverflowRight && hasSpaceOnLeft);
     setTopOffset(0);
   }, [sizeStyles.minWidth]);
   useLayoutEffect2(() => {
@@ -1001,7 +1014,8 @@ var ContextMenuSubmenu = ({
     const submenuRect = submenuRef.current.getBoundingClientRect();
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const wouldOverflowRight = triggerRect.right + submenuRect.width + SUBMENU_GAP2 > window.innerWidth - 8;
-    setOpenLeft(wouldOverflowRight);
+    const hasSpaceOnLeft = triggerRect.left - SUBMENU_GAP2 - submenuRect.width >= 8;
+    setOpenLeft(wouldOverflowRight && hasSpaceOnLeft);
     const overflowBottom = triggerRect.top + submenuRect.height - (window.innerHeight - 8);
     if (overflowBottom > 0) {
       setTopOffset(-Math.min(overflowBottom, triggerRect.top - 8));
@@ -1024,16 +1038,27 @@ var ContextMenuSubmenu = ({
     openTimerRef.current = setTimeout(() => {
       calculatePlacement();
       setIsOpen(true);
+      context?.setActiveSubmenuId(submenuId);
     }, OPEN_DELAY_MS);
   };
   const handleTriggerLeave = () => {
     clearTimers();
-    closeTimerRef.current = setTimeout(() => setIsOpen(false), CLOSE_GRACE_MS);
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false);
+      if (context?.activeSubmenuId === submenuId) {
+        context.setActiveSubmenuId(null);
+      }
+    }, CLOSE_GRACE_MS);
   };
   const handleSubmenuEnter = () => clearTimers();
   const handleSubmenuLeave = () => {
     clearTimers();
-    closeTimerRef.current = setTimeout(() => setIsOpen(false), CLOSE_GRACE_MS);
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false);
+      if (context?.activeSubmenuId === submenuId) {
+        context.setActiveSubmenuId(null);
+      }
+    }, CLOSE_GRACE_MS);
   };
   const submenuPositionStyle = openLeft ? { right: `calc(100% + ${SUBMENU_GAP2}px)` } : { left: `calc(100% + ${SUBMENU_GAP2}px)` };
   return /* @__PURE__ */ jsxs2(
@@ -1364,6 +1389,7 @@ var ContextMenuRoot = forwardRef(
     const [cellsVersion, setCellsVersion] = useState4(0);
     const [query, setQuery] = useState4("");
     const [debouncedQuery, setDebouncedQuery] = useState4("");
+    const [activeSubmenuId, setActiveSubmenuId] = useState4(null);
     const containerRef = useRef2(null);
     const triggerRef = useRef2(null);
     const panelRef = useRef2(null);
@@ -1430,6 +1456,7 @@ var ContextMenuRoot = forwardRef(
         setCellsVersion((version) => version + 1);
         setQuery("");
         setDebouncedQuery("");
+        setActiveSubmenuId(null);
       }
     }, [isOpen]);
     useEffect4(() => {
@@ -1484,7 +1511,9 @@ var ContextMenuRoot = forwardRef(
         getCellIndex,
         cellsVersion,
         query,
-        setQuery
+        setQuery,
+        activeSubmenuId,
+        setActiveSubmenuId
       }),
       [
         size,
@@ -1495,7 +1524,8 @@ var ContextMenuRoot = forwardRef(
         unregisterCell,
         getCellIndex,
         cellsVersion,
-        query
+        query,
+        activeSubmenuId
       ]
     );
     const renderPresetItem = (item, index2) => {