@xsolla/xui-context-menu 0.184.0 → 0.185.1

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) => {
@@ -557,6 +571,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);
@@ -1156,12 +1171,13 @@ var joinPlacement = (vertical, horizontal) => `${vertical}-${horizontal}`;
 var useContextMenuPosition = ({
   triggerRef,
   panelRef,
+  containerRef,
   isOpen,
   placement = "bottom-start",
   offset = 4
 }) => {
   const [resolved, setResolved] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     if (!isOpen) {
       setResolved(void 0);
       return;
@@ -1169,6 +1185,7 @@ var useContextMenuPosition = ({
     const compute = () => {
       const trigger = triggerRef.current;
       const panel = panelRef.current;
+      const container = containerRef.current;
       if (!trigger || !panel) return;
       const triggerRect = trigger.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
@@ -1208,6 +1225,15 @@ var useContextMenuPosition = ({
           }
         }
       }
+      if (container) {
+        const containerRect = container.getBoundingClientRect();
+        const cOffsetW = container.offsetWidth;
+        const cOffsetH = container.offsetHeight;
+        const scaleX = cOffsetW > 0 ? containerRect.width / cOffsetW : 1;
+        const scaleY = cOffsetH > 0 ? containerRect.height / cOffsetH : 1;
+        left = (left - containerRect.left) / (scaleX || 1);
+        top = (top - containerRect.top) / (scaleY || 1);
+      }
       const next = {
         top,
         left,
@@ -1217,14 +1243,13 @@ var useContextMenuPosition = ({
         (prev) => prev && prev.top === next.top && prev.left === next.left && prev.placement === next.placement ? prev : next
       );
     };
-    const rafId = window.requestAnimationFrame(compute);
+    compute();
     const onResize = () => compute();
     window.addEventListener("resize", onResize);
     return () => {
-      window.cancelAnimationFrame(rafId);
       window.removeEventListener("resize", onResize);
     };
-  }, [isOpen, placement, offset, triggerRef, panelRef]);
+  }, [isOpen, placement, offset, triggerRef, panelRef, containerRef]);
   return resolved;
 };
 
@@ -1356,6 +1381,7 @@ var SEARCH_DEBOUNCE_MS = 200;
 var ARROW_SIZE = 10;
 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 textFromNode = (node) => {
   if (node === null || node === void 0 || typeof node === "boolean")
@@ -1405,7 +1431,9 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
     isOpen: propIsOpen,
     onOpenChange,
     trigger,
+    triggerFullWidth = false,
     placement = "bottom-start",
+    offset = 4,
     position,
     width,
     maxHeight = 300,
@@ -1439,11 +1467,14 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
     const sizeStyles = xuiTheme.sizing.contextMenu(size);
     const borderRadius = xuiTheme.shape?.contextMenu?.[size]?.borderRadius ?? 8;
     const shouldCloseOnSelect = closeOnSelect ?? (type === "checkbox" ? false : true);
+    const positionOffset = withArrow ? offset + ARROW_TIP_PROTRUSION : offset;
     const positioned = useContextMenuPosition({
       triggerRef,
       panelRef,
+      containerRef,
       isOpen: isOpen && !!trigger && !position,
-      placement
+      placement,
+      offset: positionOffset
     });
     const resolvedPlacement = positioned?.placement ?? placement;
     const getArrowStyle = (arrowPlacement) => {
@@ -1699,7 +1730,10 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
         onClick: (event) => {
           if (!event.defaultPrevented) toggleMenu();
         },
-        style: { display: "inline-flex" },
+        style: {
+          display: "inline-flex",
+          width: triggerFullWidth ? "100%" : "auto"
+        },
         children: (0, import_react8.cloneElement)(trigger, {
           "aria-haspopup": "menu",
           "aria-expanded": isOpen ? "true" : "false"
@@ -1721,10 +1755,13 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
       position: "fixed",
       left: position.x,
       top: position.y
-    } : trigger ? {
-      position: "fixed",
-      left: positioned?.left ?? 0,
-      top: positioned?.top ?? 0
+    } : trigger ? positioned ? {
+      position: "absolute",
+      left: positioned.left,
+      top: positioned.top
+    } : {
+      position: "absolute",
+      visibility: "hidden"
     } : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",