@xsolla/xui-context-menu 0.181.0 → 0.182.0

package/native/index.d.mts

@@ -25,7 +25,7 @@ declare const useKeyboardNavigation: ({ isOpen, cells, activeIndex, setActiveInd
 };
 
 type ContextMenuSize = "sm" | "md" | "lg" | "xl";
-type ContextMenuPlacement = "bottom-start" | "top-start" | "bottom-end" | "top-end";
+type ContextMenuPlacement = "bottom-start" | "top-start" | "bottom-end" | "top-end" | "bottom-center" | "top-center";
 type ContextMenuPresetType = "list" | "loading" | "phone" | "checkbox" | "status" | "brandLogo" | "radio" | "avatar";
 interface ContextMenuPosition {
     x: number;
@@ -87,6 +87,13 @@ interface ContextMenuProps extends ThemeOverrideProps {
     emptyMessage?: string;
     empty?: ReactNode;
     trigger?: ReactNode;
+    /**
+     * Menu placement relative to the trigger element. The `*-center` variants
+     * horizontally center the panel on the trigger; every variant auto-flips on
+     * the vertical axis (and `start`/`end` flip horizontally) when the menu
+     * would clip the viewport. Only applies to trigger-anchored menus (ignored
+     * when `position` is set). Defaults to `"bottom-start"`.
+     */
     placement?: ContextMenuPlacement;
     position?: ContextMenuPosition;
     isOpen?: boolean;
@@ -94,6 +101,12 @@ interface ContextMenuProps extends ThemeOverrideProps {
     closeOnSelect?: boolean;
     width?: number | string;
     maxHeight?: number;
+    /**
+     * Render a directional arrow on the panel edge pointing toward the trigger,
+     * mirroring the Tooltip arrow. Only applies to trigger-anchored menus.
+     * Defaults to `false`.
+     */
+    withArrow?: boolean;
     onSelect?: (item: ContextMenuOptionItemProps) => void;
     "aria-label"?: string;
     testID?: string;

package/native/index.d.ts

@@ -25,7 +25,7 @@ declare const useKeyboardNavigation: ({ isOpen, cells, activeIndex, setActiveInd
 };
 
 type ContextMenuSize = "sm" | "md" | "lg" | "xl";
-type ContextMenuPlacement = "bottom-start" | "top-start" | "bottom-end" | "top-end";
+type ContextMenuPlacement = "bottom-start" | "top-start" | "bottom-end" | "top-end" | "bottom-center" | "top-center";
 type ContextMenuPresetType = "list" | "loading" | "phone" | "checkbox" | "status" | "brandLogo" | "radio" | "avatar";
 interface ContextMenuPosition {
     x: number;
@@ -87,6 +87,13 @@ interface ContextMenuProps extends ThemeOverrideProps {
     emptyMessage?: string;
     empty?: ReactNode;
     trigger?: ReactNode;
+    /**
+     * Menu placement relative to the trigger element. The `*-center` variants
+     * horizontally center the panel on the trigger; every variant auto-flips on
+     * the vertical axis (and `start`/`end` flip horizontally) when the menu
+     * would clip the viewport. Only applies to trigger-anchored menus (ignored
+     * when `position` is set). Defaults to `"bottom-start"`.
+     */
     placement?: ContextMenuPlacement;
     position?: ContextMenuPosition;
     isOpen?: boolean;
@@ -94,6 +101,12 @@ interface ContextMenuProps extends ThemeOverrideProps {
     closeOnSelect?: boolean;
     width?: number | string;
     maxHeight?: number;
+    /**
+     * Render a directional arrow on the panel edge pointing toward the trigger,
+     * mirroring the Tooltip arrow. Only applies to trigger-anchored menus.
+     * Defaults to `false`.
+     */
+    withArrow?: boolean;
     onSelect?: (item: ContextMenuOptionItemProps) => void;
     "aria-label"?: string;
     testID?: string;

package/native/index.js

@@ -1099,7 +1099,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) {
@@ -1112,14 +1116,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 = {
@@ -1267,6 +1276,10 @@ var useKeyboardNavigation = ({
 var import_jsx_runtime4 = require("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 "";
@@ -1319,6 +1332,7 @@ var ContextMenuRoot = (0, import_react6.forwardRef)(
     position,
     width,
     maxHeight = 300,
+    withArrow = false,
     onSelect,
     closeOnSelect,
     "aria-label": ariaLabel,
@@ -1354,6 +1368,33 @@ var ContextMenuRoot = (0, import_react6.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 = (0, import_react6.useCallback)(
       (nextOpen) => {
         if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
@@ -1564,15 +1605,30 @@ var ContextMenuRoot = (0, import_react6.forwardRef)(
     const assignTriggerRef = (node) => {
       triggerRef.current = node;
     };
-    const triggerNode = trigger && (0, import_react6.isValidElement)(trigger) ? (0, import_react6.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__ */ (0, import_jsx_runtime4.jsx)(
+      const firstChild = node.firstElementChild;
+      assignTriggerRef(
+        firstChild instanceof HTMLElement ? firstChild : node
+      );
+    };
+    const triggerNode = trigger && (0, import_react6.isValidElement)(trigger) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        ref: assignTriggerWrapperRef,
+        onClick: (event) => {
+          if (!event.defaultPrevented) toggleMenu();
+        },
+        style: { display: "inline-flex" },
+        children: (0, import_react6.cloneElement)(trigger, {
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? "true" : "false"
+        })
+      }
+    ) : trigger ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "span",
       {
         ref: assignTriggerRef,
@@ -1610,7 +1666,7 @@ var ContextMenuRoot = (0, import_react6.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,
@@ -1625,12 +1681,26 @@ var ContextMenuRoot = (0, import_react6.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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-testid": "context-menu-arrow",
+                    style: getArrowStyle(resolvedPlacement)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { maxHeight, overflowY: "auto", borderRadius }, children: renderContent() })
+              ] }) : renderContent()
             }
           )
         ]