@basic-ui/core 0.0.46 → 0.0.48

package/build/cjs/index.js

@@ -1904,6 +1904,7 @@ const useMenuListContext = () => react.useContext(menuListContext);
 const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   const {
     as: Comp = react.Fragment,
+    innerAs,
     open: openProp,
     defaultOpen = false,
     onChange: onChangeProp,
@@ -1915,17 +1916,29 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   const [open, onChange] = useControlledState(openProp, onChangeProp, defaultOpen, setState => (e, isOpen) => {
     setState(isOpen);
   });
+  const [offsetFn, setOffsetFn] = react.useState(undefined);
   menuListIdRef.current = react.useId();
+  const isContextMenu = react.useRef(false);
+
+  if (!open && offsetFn) {
+    setOffsetFn(undefined);
+  }
+
   const value = {
     menuListIdRef,
     openWithArrowKeyRef,
     open,
     onChange,
-    buttonRef
+    buttonRef,
+    offsetFn,
+    setOffsetFn,
+    isContextMenu
   };
   return /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
     value: value,
-    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, { ...(Comp !== react.Fragment ? {
+        as: innerAs
+      } : {}),
       ref: forwardedRef,
       ...otherProps
     })
@@ -1935,6 +1948,7 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
 const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forwardedRef) {
   const {
     as: Comp = 'button',
+    innerAs,
     id: preferredId,
     onClick,
     onKeyDown,
@@ -1970,7 +1984,7 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
         openWithArrowKeyRef.current = e.key;
       }
 
-      onChange && onChange(e, true);
+      onChange(e, true);
       e.preventDefault();
     }
   };
@@ -1981,11 +1995,12 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
     }
 
     buttonRef.current = e.currentTarget;
-    onChange && onChange(e, !open);
+    onChange(e, !open);
   };
 
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: forwardedRef,
+    as: innerAs,
     id: buttonId,
     role: "button",
     type: "button",
@@ -2000,9 +2015,61 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
   });
 });
 
+const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function ContextMenuTrigger(props, forwardedRef) {
+  const {
+    as: Comp = 'div',
+    innerAs,
+    id: preferredId,
+    onContextMenu,
+    disabled,
+    ...otherProps
+  } = props;
+  const {
+    menuListIdRef,
+    open,
+    buttonRef,
+    onChange,
+    setOffsetFn,
+    isContextMenu
+  } = useMenuContext();
+  const idGenerated = react.useId();
+  const id = preferredId || idGenerated;
+
+  const handleContextMenu = e => {
+    if (disabled) {
+      return;
+    }
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    isContextMenu.current = true;
+    buttonRef.current = e.currentTarget;
+    onChange(e, true);
+    const mouseX = e.nativeEvent.x;
+    const mouseY = e.nativeEvent.y;
+    setOffsetFn(() => ({
+      reference
+    }) => [mouseX - rect.x, mouseY - rect.y - reference.height]);
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+    ref: forwardedRef,
+    as: innerAs,
+    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',
+    innerAs,
     disabled,
     onSelect,
     onClick,
@@ -2021,7 +2088,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
   const itemId = react.useId();
   const isActive = ref.current && ref.current === navigationItem;
   const handleSelect = wrapEvent(onSelect, e => {
-    onChange && onChange(e, false);
+    onChange(e, false);
     buttonRef.current?.focus();
     e.preventDefault();
   });
@@ -2047,6 +2114,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
 
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
     ref: assignMultipleRefs(ref, forwardedRef),
+    as: innerAs,
     id: disabled ? undefined : itemId,
     "data-menu-item": "",
     "data-highlighted": isActive ? '' : undefined,
@@ -2069,11 +2137,13 @@ const useEnhancedEffect$1 = typeof window !== 'undefined' ? react.useLayoutEffec
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwardedRef) {
   const {
     as: Comp = 'ul',
+    innerAs,
     onKeyDown,
     id: preferredId,
     defaultActiveItemValue,
     ...otherProps
   } = props;
+  const interactedOutside = react.useRef(false);
   const itemSearchStr = react.useRef('');
   const itemSearchClearTimeout = react.useRef();
   const {
@@ -2081,7 +2151,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);
@@ -2116,20 +2187,34 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     openWithArrowKeyRef.current = null;
     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)) {
-      onChange && onChange(e, false);
+  const handleClickOutside = react.useCallback(e => {
+    if (!interactedOutside.current) {
+      // First interaction should be ignored, because
+      // this is what triggered the context menu to open
+      interactedOutside.current = true;
+      return;
+    }
+
+    if (isContextMenu.current) {
+      if (e.button === 0) {
+        onChange(e, false);
+      }
+    } else {
+      if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
+        onChange(e, false);
+      }
     }
 
     e.preventDefault();
-  }, true);
+  }, [buttonRef, isContextMenu, onChange]);
+  useOnClickOutside(menuListRef, handleClickOutside, open);
 
   function handleKeyDown(e) {
     switch (e.key) {
       case 'Escape':
       case 'Tab':
         {
-          onChange && onChange(e, false);
+          onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
           itemSearchStr.current = '';
@@ -2216,6 +2301,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
   }
 
   if (!open) {
+    interactedOutside.current = false;
     return null;
   }
 
@@ -2226,6 +2312,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
       ref: assignMultipleRefs(forwardedRef, menuListRef),
+      as: innerAs,
       id: menuListIdRef.current,
       role: "menu",
       "aria-labelledby": buttonRef.current?.id,
@@ -2370,11 +2457,14 @@ const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow({
 const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, forwardedRef) {
   const {
     as = 'div',
+    innerAs,
     ...otherProps
   } = props;
   const {
     buttonRef,
-    open
+    open,
+    offsetFn,
+    isContextMenu
   } = useMenuContext();
 
   if (!open) {
@@ -2383,8 +2473,11 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
 
   return /*#__PURE__*/jsxRuntime.jsx(Popper, {
     as: as,
+    innerAs: innerAs,
     ref: forwardedRef,
     anchorEl: buttonRef,
+    offsetFn: offsetFn,
+    placement: isContextMenu.current ? 'bottom-start' : undefined,
     ...otherProps
   });
 });
@@ -3977,6 +4070,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;