@xsolla/xui-context-menu 0.183.0 → 0.185.0

package/native/index.d.mts

@@ -87,6 +87,11 @@ interface ContextMenuProps extends ThemeOverrideProps {
     emptyMessage?: string;
     empty?: ReactNode;
     trigger?: ReactNode;
+    /**
+     * When `true`, the trigger fills the full width of its parent instead of
+     * shrinking to its content width. Defaults to `false`.
+     */
+    triggerFullWidth?: boolean;
     /**
      * Menu placement relative to the trigger element. The `*-center` variants
      * horizontally center the panel on the trigger; every variant auto-flips on
@@ -95,6 +100,13 @@ interface ContextMenuProps extends ThemeOverrideProps {
      * when `position` is set). Defaults to `"bottom-start"`.
      */
     placement?: ContextMenuPlacement;
+    /**
+     * Gap in pixels between the trigger and the menu. When `withArrow` is set
+     * this is measured to the arrow's tip; otherwise to the panel edge. Only
+     * applies to trigger-anchored menus (ignored when `position` is set).
+     * Defaults to `4`.
+     */
+    offset?: number;
     position?: ContextMenuPosition;
     isOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -174,6 +186,7 @@ declare const useContextMenuRequired: () => ContextMenuContextValue;
 interface UseContextMenuPositionOptions {
     triggerRef: RefObject<HTMLElement | null>;
     panelRef: RefObject<HTMLElement | null>;
+    containerRef: RefObject<HTMLElement | null>;
     isOpen: boolean;
     placement?: ContextMenuPlacement;
     offset?: number;
@@ -183,6 +196,6 @@ interface ResolvedPosition {
     left: number;
     placement: ContextMenuPlacement;
 }
-declare const useContextMenuPosition: ({ triggerRef, panelRef, isOpen, placement, offset, }: UseContextMenuPositionOptions) => ResolvedPosition | undefined;
+declare const useContextMenuPosition: ({ triggerRef, panelRef, containerRef, isOpen, placement, offset, }: UseContextMenuPositionOptions) => ResolvedPosition | undefined;
 
 export { ContextMenu, ContextMenuContext, type ContextMenuContextValue, type ContextMenuDividerItemProps, type ContextMenuHeadingItemProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuOptionItemProps, type ContextMenuPlacement, type ContextMenuPosition, type ContextMenuPresetType, type ContextMenuProps, type ContextMenuSearchItemProps, type ContextMenuSize, type ContextMenuSizing, ContextMenuSubmenu, type ContextMenuSubmenuProps, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation };

package/native/index.d.ts

@@ -87,6 +87,11 @@ interface ContextMenuProps extends ThemeOverrideProps {
     emptyMessage?: string;
     empty?: ReactNode;
     trigger?: ReactNode;
+    /**
+     * When `true`, the trigger fills the full width of its parent instead of
+     * shrinking to its content width. Defaults to `false`.
+     */
+    triggerFullWidth?: boolean;
     /**
      * Menu placement relative to the trigger element. The `*-center` variants
      * horizontally center the panel on the trigger; every variant auto-flips on
@@ -95,6 +100,13 @@ interface ContextMenuProps extends ThemeOverrideProps {
      * when `position` is set). Defaults to `"bottom-start"`.
      */
     placement?: ContextMenuPlacement;
+    /**
+     * Gap in pixels between the trigger and the menu. When `withArrow` is set
+     * this is measured to the arrow's tip; otherwise to the panel edge. Only
+     * applies to trigger-anchored menus (ignored when `position` is set).
+     * Defaults to `4`.
+     */
+    offset?: number;
     position?: ContextMenuPosition;
     isOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -174,6 +186,7 @@ declare const useContextMenuRequired: () => ContextMenuContextValue;
 interface UseContextMenuPositionOptions {
     triggerRef: RefObject<HTMLElement | null>;
     panelRef: RefObject<HTMLElement | null>;
+    containerRef: RefObject<HTMLElement | null>;
     isOpen: boolean;
     placement?: ContextMenuPlacement;
     offset?: number;
@@ -183,6 +196,6 @@ interface ResolvedPosition {
     left: number;
     placement: ContextMenuPlacement;
 }
-declare const useContextMenuPosition: ({ triggerRef, panelRef, isOpen, placement, offset, }: UseContextMenuPositionOptions) => ResolvedPosition | undefined;
+declare const useContextMenuPosition: ({ triggerRef, panelRef, containerRef, isOpen, placement, offset, }: UseContextMenuPositionOptions) => ResolvedPosition | undefined;
 
 export { ContextMenu, ContextMenuContext, type ContextMenuContextValue, type ContextMenuDividerItemProps, type ContextMenuHeadingItemProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuOptionItemProps, type ContextMenuPlacement, type ContextMenuPosition, type ContextMenuPresetType, type ContextMenuProps, type ContextMenuSearchItemProps, type ContextMenuSize, type ContextMenuSizing, ContextMenuSubmenu, type ContextMenuSubmenuProps, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation };

package/native/index.js

@@ -1079,12 +1079,13 @@ var joinPlacement = (vertical, horizontal) => `${vertical}-${horizontal}`;
 var useContextMenuPosition = ({
   triggerRef,
   panelRef,
+  containerRef,
   isOpen,
   placement = "bottom-start",
   offset = 4
 }) => {
   const [resolved, setResolved] = (0, import_react4.useState)();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react4.useLayoutEffect)(() => {
     if (!isOpen) {
       setResolved(void 0);
       return;
@@ -1092,6 +1093,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();
@@ -1131,6 +1133,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,
@@ -1140,14 +1151,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;
 };
 
@@ -1279,6 +1289,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")
@@ -1328,7 +1339,9 @@ var ContextMenuRoot = (0, import_react6.forwardRef)(
     isOpen: propIsOpen,
     onOpenChange,
     trigger,
+    triggerFullWidth = false,
     placement = "bottom-start",
+    offset = 4,
     position,
     width,
     maxHeight = 300,
@@ -1362,11 +1375,14 @@ var ContextMenuRoot = (0, import_react6.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) => {
@@ -1622,7 +1638,10 @@ var ContextMenuRoot = (0, import_react6.forwardRef)(
         onClick: (event) => {
           if (!event.defaultPrevented) toggleMenu();
         },
-        style: { display: "inline-flex" },
+        style: {
+          display: "inline-flex",
+          width: triggerFullWidth ? "100%" : "auto"
+        },
         children: (0, import_react6.cloneElement)(trigger, {
           "aria-haspopup": "menu",
           "aria-expanded": isOpen ? "true" : "false"
@@ -1644,10 +1663,13 @@ var ContextMenuRoot = (0, import_react6.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",