@xsolla/xui-context-menu 0.185.5 → 0.186.0

package/web/index.js

@@ -440,6 +440,7 @@ var OptionCell = ({
     themeProductContext
   });
   const theme = rawTheme;
+  const overlayLayer = (0, import_xui_core.useOverlayLayer)();
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -802,7 +803,9 @@ var OptionCell = ({
                 position: "fixed",
                 top: submenuPos.top,
                 left: submenuPos.left,
-                zIndex: 2e3
+                // Same band as the parent menu; the submenu portal mounts later in
+                // the DOM so it paints above it (holds for arbitrary nesting depth).
+                zIndex: overlayLayer + import_xui_core.LAYER_OFFSET.menu
               },
               children: submenu
             }
@@ -1457,6 +1460,9 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
     });
     const xuiTheme = rawTheme;
     const menuId = (0, import_xui_core3.useId)();
+    const overlayLayer = (0, import_xui_core3.useOverlayLayer)();
+    const modalStackDepth = (0, import_xui_core3.useModalStackDepth)();
+    const openModalDepthRef = (0, import_react8.useRef)(null);
     const [internalIsOpen, setInternalIsOpen] = (0, import_react8.useState)(false);
     const [activeIndex, setActiveIndex] = (0, import_react8.useState)(-1);
     const [cellsVersion, setCellsVersion] = (0, import_react8.useState)(0);
@@ -1562,6 +1568,19 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
         setActiveSubmenuId(null);
       }
     }, [isOpen]);
+    (0, import_react8.useEffect)(() => {
+      if (!isOpen) {
+        openModalDepthRef.current = null;
+        return;
+      }
+      if (openModalDepthRef.current === null) {
+        openModalDepthRef.current = modalStackDepth;
+        return;
+      }
+      if (modalStackDepth > openModalDepthRef.current) {
+        closeMenu();
+      }
+    }, [isOpen, modalStackDepth, closeMenu]);
     (0, import_react8.useEffect)(() => {
       const timer = setTimeout(
         () => setDebouncedQuery(query),
@@ -1804,7 +1823,7 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
               style: {
                 ...positionStyle,
                 ...style,
-                zIndex: 1e3,
+                zIndex: overlayLayer + import_xui_core3.LAYER_OFFSET.menu,
                 boxShadow: PANEL_SHADOW,
                 ...withArrow ? {
                   overflow: "visible"