@xsolla/xui-context-menu 0.173.2 → 0.174.0

package/web/index.js

@@ -986,6 +986,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var SUBMENU_GAP2 = 4;
 var OPEN_DELAY_MS = 200;
 var CLOSE_GRACE_MS = 100;
+var _submenuIdCounter = 0;
 var ContextMenuSubmenu = ({
   label,
   icon,
@@ -1000,6 +1001,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 = (0, import_react5.useRef)(null);
+  if (submenuIdRef.current === null) {
+    submenuIdRef.current = `xui-cm-submenu-${_submenuIdCounter += 1}`;
+  }
+  const submenuId = submenuIdRef.current;
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const [visible, setVisible] = (0, import_react5.useState)(false);
   const [openLeft, setOpenLeft] = (0, import_react5.useState)(false);
@@ -1012,12 +1018,19 @@ var ContextMenuSubmenu = ({
     if (openTimerRef.current) clearTimeout(openTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
   }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!context?.activeSubmenuId) return;
+    if (context.activeSubmenuId !== submenuId) {
+      setIsOpen(false);
+    }
+  }, [context?.activeSubmenuId, submenuId]);
   const calculatePlacement = (0, import_react5.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]);
   (0, import_react5.useLayoutEffect)(() => {
@@ -1025,7 +1038,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));
@@ -1048,16 +1062,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__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1388,6 +1413,7 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
     const [cellsVersion, setCellsVersion] = (0, import_react8.useState)(0);
     const [query, setQuery] = (0, import_react8.useState)("");
     const [debouncedQuery, setDebouncedQuery] = (0, import_react8.useState)("");
+    const [activeSubmenuId, setActiveSubmenuId] = (0, import_react8.useState)(null);
     const containerRef = (0, import_react8.useRef)(null);
     const triggerRef = (0, import_react8.useRef)(null);
     const panelRef = (0, import_react8.useRef)(null);
@@ -1454,6 +1480,7 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
         setCellsVersion((version) => version + 1);
         setQuery("");
         setDebouncedQuery("");
+        setActiveSubmenuId(null);
       }
     }, [isOpen]);
     (0, import_react8.useEffect)(() => {
@@ -1508,7 +1535,9 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
         getCellIndex,
         cellsVersion,
         query,
-        setQuery
+        setQuery,
+        activeSubmenuId,
+        setActiveSubmenuId
       }),
       [
         size,
@@ -1519,7 +1548,8 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
         unregisterCell,
         getCellIndex,
         cellsVersion,
-        query
+        query,
+        activeSubmenuId
       ]
     );
     const renderPresetItem = (item, index2) => {