@basic-ui/core 0.0.46 → 0.0.47

package/build/cjs/index.js

@@ -1916,12 +1916,20 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
     setState(isOpen);
   });
   menuListIdRef.current = react.useId();
+  const offset = react.useRef([0, 0]);
+  const offsetFn = react.useCallback(({
+    reference
+  }) => [offset.current[0], offset.current[1] - reference.height], []);
+  const isContextMenu = react.useRef(false);
   const value = {
     menuListIdRef,
     openWithArrowKeyRef,
     open,
     onChange,
-    buttonRef
+    buttonRef,
+    offset,
+    offsetFn,
+    isContextMenu
   };
   return /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
     value: value,
@@ -2000,6 +2008,51 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
   });
 });
 
+const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function MenuButton(props, forwardedRef) {
+  const {
+    as: Comp = 'div',
+    id: preferredId,
+    onContextMenu,
+    disabled,
+    ...otherProps
+  } = props;
+  const {
+    menuListIdRef,
+    open,
+    buttonRef,
+    onChange,
+    offset,
+    isContextMenu
+  } = useMenuContext();
+  const idGenerated = react.useId();
+  const id = preferredId || idGenerated;
+
+  const handleContextMenu = e => {
+    if (disabled) {
+      return;
+    }
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    offset.current = [e.nativeEvent.x - rect.x, e.nativeEvent.y - rect.y];
+    isContextMenu.current = true;
+    buttonRef.current = e.currentTarget;
+    onChange && onChange(e, !open);
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: forwardedRef,
+    id: id,
+    "aria-haspopup": true,
+    "aria-controls": menuListIdRef.current,
+    "aria-expanded": open ? true : undefined,
+    "data-menu-trigger": "",
+    onContextMenu: wrapEvent(onContextMenu, handleContextMenu),
+    disabled: disabled,
+    ...otherProps
+  });
+});
+
 const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwardedRef) {
   const {
     as: Comp = 'li',
@@ -2081,7 +2134,8 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     buttonRef,
     onChange,
     openWithArrowKeyRef,
-    open
+    open,
+    isContextMenu
   } = useMenuContext();
   const [navigationItem, setNavigationItem] = react.useState();
   const [mounted, setMounted] = react.useState(false);
@@ -2117,7 +2171,9 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
   useOnClickOutside(menuListRef, e => {
-    if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
+    console.log(isContextMenu.current);
+
+    if (isContextMenu.current || e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
       onChange && onChange(e, false);
     }
 
@@ -2374,7 +2430,9 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
   } = props;
   const {
     buttonRef,
-    open
+    open,
+    offsetFn,
+    isContextMenu
   } = useMenuContext();
 
   if (!open) {
@@ -2385,6 +2443,8 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
     as: as,
     ref: forwardedRef,
     anchorEl: buttonRef,
+    offsetFn: offsetFn,
+    placement: isContextMenu.current ? 'bottom-start' : undefined,
     ...otherProps
   });
 });
@@ -3977,6 +4037,7 @@ exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxList = ComboboxList;
 exports.ComboboxOption = ComboboxOption;
 exports.ComboboxPopover = ComboboxPopover;
+exports.ContextMenuTrigger = ContextMenuTrigger;
 exports.FocusLock = FocusLock;
 exports.Menu = Menu;
 exports.MenuButton = MenuButton;