@xsolla/xui-context-menu 0.181.0 → 0.182.0

package/web/index.mjs

@@ -1152,7 +1152,11 @@ var useContextMenuPosition = ({
       const viewportHeight = window.innerHeight;
       let { vertical, horizontal } = splitPlacement(placement);
       const computeTop = (v) => v === "bottom" ? triggerRect.bottom + offset : triggerRect.top - panelRect.height - offset;
-      const computeLeft = (h) => h === "start" ? triggerRect.left : triggerRect.right - panelRect.width;
+      const computeLeft = (h) => {
+        if (h === "center")
+          return triggerRect.left + triggerRect.width / 2 - panelRect.width / 2;
+        return h === "start" ? triggerRect.left : triggerRect.right - panelRect.width;
+      };
       let top = computeTop(vertical);
       const wantedBottom = top + panelRect.height;
       if (top < 0 || wantedBottom > viewportHeight) {
@@ -1165,14 +1169,19 @@ var useContextMenuPosition = ({
         }
       }
       let left = computeLeft(horizontal);
-      const wantedRight = left + panelRect.width;
-      if (left < 0 || wantedRight > viewportWidth) {
-        const flipped = horizontal === "start" ? "end" : "start";
-        const flippedLeft = computeLeft(flipped);
-        const flippedRight = flippedLeft + panelRect.width;
-        if (flippedLeft >= 0 && flippedRight <= viewportWidth) {
-          horizontal = flipped;
-          left = flippedLeft;
+      if (horizontal === "center") {
+        const maxLeft = viewportWidth - panelRect.width;
+        left = maxLeft >= 0 ? Math.min(Math.max(left, 0), maxLeft) : 0;
+      } else {
+        const wantedRight = left + panelRect.width;
+        if (left < 0 || wantedRight > viewportWidth) {
+          const flipped = horizontal === "start" ? "end" : "start";
+          const flippedLeft = computeLeft(flipped);
+          const flippedRight = flippedLeft + panelRect.width;
+          if (flippedLeft >= 0 && flippedRight <= viewportWidth) {
+            horizontal = flipped;
+            left = flippedLeft;
+          }
         }
       }
       const next = {
@@ -1317,9 +1326,13 @@ var useKeyboardNavigation = ({
 };
 
 // src/ContextMenu.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_EMPTY_MESSAGE = "No results";
 var SEARCH_DEBOUNCE_MS = 200;
+var ARROW_SIZE = 10;
+var ARROW_HALF = ARROW_SIZE / 2;
+var ARROW_EDGE_OFFSET = 12;
+var PANEL_SHADOW = "0 4px 12px rgba(0,0,0,0.15)";
 var textFromNode = (node) => {
   if (node === null || node === void 0 || typeof node === "boolean")
     return "";
@@ -1372,6 +1385,7 @@ var ContextMenuRoot = forwardRef(
     position,
     width,
     maxHeight = 300,
+    withArrow = false,
     onSelect,
     closeOnSelect,
     "aria-label": ariaLabel,
@@ -1407,6 +1421,33 @@ var ContextMenuRoot = forwardRef(
       isOpen: isOpen && !!trigger && !position,
       placement
     });
+    const resolvedPlacement = positioned?.placement ?? placement;
+    const getArrowStyle = (arrowPlacement) => {
+      const isTop = arrowPlacement.startsWith("top");
+      const arrowStyle = {
+        position: "absolute",
+        width: ARROW_SIZE,
+        height: ARROW_SIZE,
+        backgroundColor: xuiTheme.colors.background.secondary,
+        borderStyle: "solid",
+        borderColor: xuiTheme.colors.border.secondary,
+        // 1px outline only on the two outward-facing edges of the rotated square
+        borderWidth: isTop ? "0 1px 1px 0" : "1px 0 0 1px",
+        transform: "rotate(45deg)",
+        pointerEvents: "none"
+      };
+      if (isTop) arrowStyle.bottom = -ARROW_HALF;
+      else arrowStyle.top = -ARROW_HALF;
+      if (arrowPlacement.endsWith("center")) {
+        arrowStyle.left = "50%";
+        arrowStyle.marginLeft = -ARROW_HALF;
+      } else if (arrowPlacement.endsWith("end")) {
+        arrowStyle.right = ARROW_EDGE_OFFSET;
+      } else {
+        arrowStyle.left = ARROW_EDGE_OFFSET;
+      }
+      return arrowStyle;
+    };
     const setOpen = useCallback3(
       (nextOpen) => {
         if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
@@ -1617,15 +1658,30 @@ var ContextMenuRoot = forwardRef(
     const assignTriggerRef = (node) => {
       triggerRef.current = node;
     };
-    const triggerNode = trigger && isValidElement(trigger) ? cloneElement(trigger, {
-      ref: assignTriggerRef,
-      "aria-haspopup": "menu",
-      "aria-expanded": isOpen ? "true" : "false",
-      onClick: (event) => {
-        trigger.props.onClick?.(event);
-        if (!event.defaultPrevented) toggleMenu();
+    const assignTriggerWrapperRef = (node) => {
+      if (!node) {
+        assignTriggerRef(null);
+        return;
       }
-    }) : trigger ? /* @__PURE__ */ jsx4(
+      const firstChild = node.firstElementChild;
+      assignTriggerRef(
+        firstChild instanceof HTMLElement ? firstChild : node
+      );
+    };
+    const triggerNode = trigger && isValidElement(trigger) ? /* @__PURE__ */ jsx4(
+      "span",
+      {
+        ref: assignTriggerWrapperRef,
+        onClick: (event) => {
+          if (!event.defaultPrevented) toggleMenu();
+        },
+        style: { display: "inline-flex" },
+        children: cloneElement(trigger, {
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? "true" : "false"
+        })
+      }
+    ) : trigger ? /* @__PURE__ */ jsx4(
       "span",
       {
         ref: assignTriggerRef,
@@ -1663,7 +1719,7 @@ var ContextMenuRoot = forwardRef(
               role: "menu",
               "aria-label": ariaLabel,
               "data-testid": dataTestId ?? testID ?? "context-menu",
-              "data-placement": positioned?.placement ?? placement,
+              "data-placement": resolvedPlacement,
               backgroundColor: xuiTheme.colors.background.secondary,
               borderColor: xuiTheme.colors.border.secondary,
               borderWidth: 1,
@@ -1678,12 +1734,26 @@ var ContextMenuRoot = forwardRef(
                 ...positionStyle,
                 ...style,
                 zIndex: 1e3,
-                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-                maxHeight,
-                overflowY: "auto",
+                boxShadow: PANEL_SHADOW,
+                ...withArrow ? {
+                  overflow: "visible"
+                } : {
+                  maxHeight,
+                  overflowY: "auto"
+                },
                 outline: "none"
               },
-              children: renderContent()
+              children: withArrow ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-testid": "context-menu-arrow",
+                    style: getArrowStyle(resolvedPlacement)
+                  }
+                ),
+                /* @__PURE__ */ jsx4("div", { style: { maxHeight, overflowY: "auto", borderRadius }, children: renderContent() })
+              ] }) : renderContent()
             }
           )
         ]