@xsolla/xui-context-menu 0.185.5 → 0.186.0

package/web/index.mjs

@@ -263,7 +263,13 @@ var Box = React2.forwardRef(
 Box.displayName = "Box";
 
 // src/ContextMenu.tsx
-import { useResolvedTheme as useResolvedTheme2, useId as useId2 } from "@xsolla/xui-core";
+import {
+  useResolvedTheme as useResolvedTheme2,
+  useId as useId2,
+  useOverlayLayer as useOverlayLayer2,
+  LAYER_OFFSET as LAYER_OFFSET2,
+  useModalStackDepth
+} from "@xsolla/xui-core";
 import { Spinner } from "@xsolla/xui-spinner";
 
 // src/ContextMenuContext.tsx
@@ -288,7 +294,9 @@ import React3, { useEffect, useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   useResolvedTheme,
-  useId
+  useId,
+  useOverlayLayer,
+  LAYER_OFFSET
 } from "@xsolla/xui-core";
 import { Typography } from "@xsolla/xui-typography";
 import { Checkbox } from "@xsolla/xui-checkbox";
@@ -410,6 +418,7 @@ var OptionCell = ({
     themeProductContext
   });
   const theme = rawTheme;
+  const overlayLayer = useOverlayLayer();
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -772,7 +781,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 + LAYER_OFFSET.menu
               },
               children: submenu
             }
@@ -1433,6 +1444,9 @@ var ContextMenuRoot = forwardRef(
     });
     const xuiTheme = rawTheme;
     const menuId = useId2();
+    const overlayLayer = useOverlayLayer2();
+    const modalStackDepth = useModalStackDepth();
+    const openModalDepthRef = useRef2(null);
     const [internalIsOpen, setInternalIsOpen] = useState4(false);
     const [activeIndex, setActiveIndex] = useState4(-1);
     const [cellsVersion, setCellsVersion] = useState4(0);
@@ -1538,6 +1552,19 @@ var ContextMenuRoot = forwardRef(
         setActiveSubmenuId(null);
       }
     }, [isOpen]);
+    useEffect3(() => {
+      if (!isOpen) {
+        openModalDepthRef.current = null;
+        return;
+      }
+      if (openModalDepthRef.current === null) {
+        openModalDepthRef.current = modalStackDepth;
+        return;
+      }
+      if (modalStackDepth > openModalDepthRef.current) {
+        closeMenu();
+      }
+    }, [isOpen, modalStackDepth, closeMenu]);
     useEffect3(() => {
       const timer = setTimeout(
         () => setDebouncedQuery(query),
@@ -1780,7 +1807,7 @@ var ContextMenuRoot = forwardRef(
               style: {
                 ...positionStyle,
                 ...style,
-                zIndex: 1e3,
+                zIndex: overlayLayer + LAYER_OFFSET2.menu,
                 boxShadow: PANEL_SHADOW,
                 ...withArrow ? {
                   overflow: "visible"