@basic-ui/core 0.0.47 → 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,25 +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 offset = react.useRef([0, 0]);
-  const offsetFn = react.useCallback(({
-    reference
-  }) => [offset.current[0], offset.current[1] - reference.height], []);
   const isContextMenu = react.useRef(false);
+
+  if (!open && offsetFn) {
+    setOffsetFn(undefined);
+  }
+
   const value = {
     menuListIdRef,
     openWithArrowKeyRef,
     open,
     onChange,
     buttonRef,
-    offset,
     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
     })
@@ -1943,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,
@@ -1978,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();
     }
   };
@@ -1989,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",
@@ -2008,9 +2015,10 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
   });
 });
 
-const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function MenuButton(props, forwardedRef) {
+const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function ContextMenuTrigger(props, forwardedRef) {
   const {
     as: Comp = 'div',
+    innerAs,
     id: preferredId,
     onContextMenu,
     disabled,
@@ -2021,7 +2029,7 @@ const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function MenuButton(pro
     open,
     buttonRef,
     onChange,
-    offset,
+    setOffsetFn,
     isContextMenu
   } = useMenuContext();
   const idGenerated = react.useId();
@@ -2033,15 +2041,20 @@ const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function MenuButton(pro
     }
 
     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);
+    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,
@@ -2056,6 +2069,7 @@ const ContextMenuTrigger = /*#__PURE__*/react.forwardRef(function MenuButton(pro
 const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwardedRef) {
   const {
     as: Comp = 'li',
+    innerAs,
     disabled,
     onSelect,
     onClick,
@@ -2074,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();
   });
@@ -2100,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,
@@ -2122,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 {
@@ -2170,22 +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 => {
-    console.log(isContextMenu.current);
+  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 || e.target instanceof HTMLElement && e.target !== buttonRef.current && !buttonRef.current?.contains(e.target)) {
-      onChange && onChange(e, false);
+    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 = '';
@@ -2272,6 +2301,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
   }
 
   if (!open) {
+    interactedOutside.current = false;
     return null;
   }
 
@@ -2282,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,
@@ -2426,6 +2457,7 @@ const PopperArrow = /*#__PURE__*/react.forwardRef(function PopperArrow({
 const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, forwardedRef) {
   const {
     as = 'div',
+    innerAs,
     ...otherProps
   } = props;
   const {
@@ -2441,6 +2473,7 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
 
   return /*#__PURE__*/jsxRuntime.jsx(Popper, {
     as: as,
+    innerAs: innerAs,
     ref: forwardedRef,
     anchorEl: buttonRef,
     offsetFn: offsetFn,