@xsolla/xui-context-menu 0.184.0 → 0.185.1

package/web/index.mjs

@@ -4,8 +4,8 @@ import {
   forwardRef,
   isValidElement,
   useCallback as useCallback3,
-  useEffect as useEffect4,
-  useLayoutEffect as useLayoutEffect3,
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo,
   useRef as useRef2,
   useState as useState4
@@ -426,6 +426,7 @@ var OptionCell = ({
   const closeTimerRef = React3.useRef(
     null
   );
+  const ownsSubmenu = Boolean(hasSubmenu && submenu != null);
   const cancelClose = () => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
@@ -434,9 +435,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);
   };
   useEffect(() => () => cancelClose(), []);
+  useEffect(() => {
+    if (!ownsSubmenu || !submenuOpen) return;
+    const activeId = ctx?.activeSubmenuId;
+    if (activeId != null && activeId !== id) {
+      cancelClose();
+      setSubmenuOpen(false);
+    }
+  }, [ctx?.activeSubmenuId, ownsSubmenu, submenuOpen, id]);
   useEffect(() => {
     if (!hasSubmenu || !submenuOpen) return;
     const onMouseDown = (e) => {
@@ -527,6 +541,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);
@@ -1123,7 +1138,7 @@ var ContextMenuSubmenu = ({
 ContextMenuSubmenu.displayName = "ContextMenuSubmenu";
 
 // src/hooks/useContextMenuPosition.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useState as useState3 } from "react";
 var splitPlacement = (placement) => {
   const [vertical, horizontal] = placement.split("-");
   return { vertical, horizontal };
@@ -1132,12 +1147,13 @@ var joinPlacement = (vertical, horizontal) => `${vertical}-${horizontal}`;
 var useContextMenuPosition = ({
   triggerRef,
   panelRef,
+  containerRef,
   isOpen,
   placement = "bottom-start",
   offset = 4
 }) => {
   const [resolved, setResolved] = useState3();
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     if (!isOpen) {
       setResolved(void 0);
       return;
@@ -1145,6 +1161,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();
@@ -1184,6 +1201,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,
@@ -1193,14 +1219,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;
 };
 
@@ -1332,6 +1357,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")
@@ -1381,7 +1407,9 @@ var ContextMenuRoot = forwardRef(
     isOpen: propIsOpen,
     onOpenChange,
     trigger,
+    triggerFullWidth = false,
     placement = "bottom-start",
+    offset = 4,
     position,
     width,
     maxHeight = 300,
@@ -1415,11 +1443,14 @@ var ContextMenuRoot = 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) => {
@@ -1494,7 +1525,7 @@ var ContextMenuRoot = forwardRef(
       onClose: closeMenu,
       triggerRef
     });
-    useEffect4(() => {
+    useEffect3(() => {
       if (!isOpen) {
         cellsRef.current = [];
         setCellsVersion((version) => version + 1);
@@ -1503,14 +1534,14 @@ var ContextMenuRoot = forwardRef(
         setActiveSubmenuId(null);
       }
     }, [isOpen]);
-    useEffect4(() => {
+    useEffect3(() => {
       const timer = setTimeout(
         () => setDebouncedQuery(query),
         SEARCH_DEBOUNCE_MS
       );
       return () => clearTimeout(timer);
     }, [query]);
-    useEffect4(() => {
+    useEffect3(() => {
       if (!isOpen || !trigger) return;
       const onMouseDown = (event) => {
         const target = event.target;
@@ -1525,7 +1556,7 @@ var ContextMenuRoot = forwardRef(
         window.removeEventListener("scroll", onScroll);
       };
     }, [isOpen, trigger, closeMenu]);
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       if (!isOpen || !panelRef.current) return;
       const searchbox = panelRef.current.querySelector('[role="searchbox"]');
       const firstOption = panelRef.current.querySelector(
@@ -1533,13 +1564,13 @@ var ContextMenuRoot = forwardRef(
       );
       (searchbox ?? firstOption)?.focus();
     }, [isOpen]);
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       if (!isOpen || !panelRef.current) return;
       const activeElement = document.activeElement;
       if (activeElement && panelRef.current.contains(activeElement)) return;
       panelRef.current.focus();
     }, [isOpen, cellsVersion]);
-    useEffect4(() => {
+    useEffect3(() => {
       if (isOpen) return;
       triggerRef.current?.focus();
     }, [isOpen]);
@@ -1675,7 +1706,10 @@ var ContextMenuRoot = forwardRef(
         onClick: (event) => {
           if (!event.defaultPrevented) toggleMenu();
         },
-        style: { display: "inline-flex" },
+        style: {
+          display: "inline-flex",
+          width: triggerFullWidth ? "100%" : "auto"
+        },
         children: cloneElement(trigger, {
           "aria-haspopup": "menu",
           "aria-expanded": isOpen ? "true" : "false"
@@ -1697,10 +1731,13 @@ var ContextMenuRoot = 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__ */ jsx4(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
       "div",