@xsolla/xui-context-menu 0.183.0 → 0.185.0

package/web/index.js

@@ -1156,12 +1156,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 +1170,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 +1210,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 +1228,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 +1366,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 +1416,9 @@ var ContextMenuRoot = (0, import_react8.forwardRef)(
     isOpen: propIsOpen,
     onOpenChange,
     trigger,
+    triggerFullWidth = false,
     placement = "bottom-start",
+    offset = 4,
     position,
     width,
     maxHeight = 300,
@@ -1439,11 +1452,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 +1715,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 +1740,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",