@xsolla/xui-context-menu 0.185.0 → 0.185.2

package/web/index.js

@@ -456,6 +456,7 @@ var OptionCell = ({
   const closeTimerRef = import_react4.default.useRef(
     null
   );
+  const ownsSubmenu = Boolean(hasSubmenu && submenu != null);
   const cancelClose = () => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
@@ -464,9 +465,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);
   };
   (0, import_react4.useEffect)(() => () => cancelClose(), []);
+  (0, import_react4.useEffect)(() => {
+    if (!ownsSubmenu || !submenuOpen) return;
+    const activeId = ctx?.activeSubmenuId;
+    if (activeId != null && activeId !== id) {
+      cancelClose();
+      setSubmenuOpen(false);
+    }
+  }, [ctx?.activeSubmenuId, ownsSubmenu, submenuOpen, id]);
   (0, import_react4.useEffect)(() => {
     if (!hasSubmenu || !submenuOpen) return;
     const onMouseDown = (e) => {
@@ -475,13 +489,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);
@@ -557,6 +574,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);
@@ -1368,6 +1386,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 "";
@@ -1554,7 +1573,13 @@ var ContextMenuRoot = (0, import_react8.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();