@xsolla/xui-context-menu 0.185.0 → 0.185.2

package/web/index.mjs

@@ -426,6 +426,7 @@ var OptionCell = ({
   const closeTimerRef = React3.useRef(
     null
   );
+  const ownsSubmenu = Boolean(hasSubmenu && submenu != null);
   const cancelClose = () => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
@@ -434,9 +435,22 @@ var OptionCell = ({
   };
   const scheduleClose = () => {
     cancelClose();
-    closeTimerRef.current = setTimeout(() => setSubmenuOpen(false), 120);
+    closeTimerRef.current = setTimeout(() => {
+      setSubmenuOpen(false);
+      if (ownsSubmenu && ctx?.activeSubmenuId === id) {
+        ctx.setActiveSubmenuId?.(null);
+      }
+    }, 120);
   };
   useEffect(() => () => cancelClose(), []);
+  useEffect(() => {
+    if (!ownsSubmenu || !submenuOpen) return;
+    const activeId = ctx?.activeSubmenuId;
+    if (activeId != null && activeId !== id) {
+      cancelClose();
+      setSubmenuOpen(false);
+    }
+  }, [ctx?.activeSubmenuId, ownsSubmenu, submenuOpen, id]);
   useEffect(() => {
     if (!hasSubmenu || !submenuOpen) return;
     const onMouseDown = (e) => {
@@ -445,13 +459,16 @@ var OptionCell = ({
       const inOption = optionRef.current?.contains(target);
       const inSubmenu = submenuWrapperRef.current?.contains(target);
       if (!inOption && !inSubmenu) {
+        if (target.closest("[data-xui-context-menu-portal]")) return;
         setSubmenuOpen(false);
         return;
       }
-      if (inSubmenu && target.closest(
-        '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
-      )) {
-        setSubmenuOpen(false);
+      if (inSubmenu) {
+        const activated = target.closest(
+          '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+        );
+        const isLeafAction = activated?.getAttribute("role") === "menuitem" && activated.getAttribute("aria-haspopup") !== "menu";
+        if (isLeafAction) setSubmenuOpen(false);
       }
     };
     document.addEventListener("mousedown", onMouseDown);
@@ -527,6 +544,7 @@ var OptionCell = ({
     if (ctx && index2 >= 0) ctx.setActiveIndex(index2);
     if (!ctx) setIsHovered(true);
     if (hasSubmenu) setSubmenuOpen(true);
+    if (ownsSubmenu) ctx?.setActiveSubmenuId?.(id);
   };
   const handleLeave = () => {
     if (!ctx) setIsHovered(false);
@@ -1344,6 +1362,7 @@ var ARROW_HALF = ARROW_SIZE / 2;
 var ARROW_EDGE_OFFSET = 12;
 var ARROW_TIP_PROTRUSION = ARROW_HALF * Math.SQRT2;
 var PANEL_SHADOW = "0 4px 12px rgba(0,0,0,0.15)";
+var PORTALED_LAYER_SELECTOR = '[data-modal-id],[role="listbox"],[data-xui-context-menu-portal]';
 var textFromNode = (node) => {
   if (node === null || node === void 0 || typeof node === "boolean")
     return "";
@@ -1530,7 +1549,13 @@ var ContextMenuRoot = forwardRef(
       if (!isOpen || !trigger) return;
       const onMouseDown = (event) => {
         const target = event.target;
-        if (!target || containerRef.current?.contains(target)) return;
+        if (!target) return;
+        if (containerRef.current?.contains(target)) return;
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        const isInsidePortaledLayer = path.length ? path.some(
+          (node) => node instanceof Element && node.matches(PORTALED_LAYER_SELECTOR)
+        ) : target instanceof Element && !!target.closest(PORTALED_LAYER_SELECTOR);
+        if (isInsidePortaledLayer) return;
         closeMenu();
       };
       const onScroll = () => closeMenu();