@basic-ui/core 0.0.46 → 0.0.48

package/src/Menu/MenuButton.tsx

@@ -21,6 +21,7 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
   function MenuButton(props, forwardedRef) {
     const {
       as: Comp = 'button',
+      innerAs,
       id: preferredId,
       onClick,
       onKeyDown,
@@ -48,7 +49,7 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
           // Used to make it open at the end or begining of the list
           openWithArrowKeyRef.current = e.key;
         }
-        onChange && onChange(e, true);
+        onChange(e, true);
         e.preventDefault();
       }
     };
@@ -58,13 +59,13 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
         return;
       }
       buttonRef.current = e.currentTarget;
-
-      onChange && onChange(e, !open);
+      onChange(e, !open);
     };
 
     return (
       <Comp
         ref={forwardedRef}
+        as={innerAs}
         id={buttonId}
         role="button"
         type="button"

package/src/Menu/MenuComplex.story.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from '.';
 import { countryList } from './fixtures/countryList';
@@ -8,7 +8,7 @@ export default {
   title: 'components/Menu/Complex',
 };
 
-const Wrapper = ({ children }) => {
+const Wrapper = ({ children }: { children: ReactNode }) => {
   const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
     console.log('Clicked ' + e.currentTarget.innerText);
     e.preventDefault();

package/src/Menu/MenuItem.tsx

@@ -26,6 +26,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
 ) {
   const {
     as: Comp = 'li',
+    innerAs,
     disabled,
     onSelect,
     onClick,
@@ -42,7 +43,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
   const handleSelect = wrapEvent(
     onSelect,
     (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
-      onChange && onChange(e, false);
+      onChange(e, false);
       buttonRef.current?.focus();
       e.preventDefault();
     }
@@ -69,6 +70,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
   return (
     <Comp
       ref={assignMultipleRefs(ref, forwardedRef)}
+      as={innerAs}
       id={disabled ? undefined : itemId}
       data-menu-item=""
       data-highlighted={isActive ? '' : undefined}

package/src/Menu/MenuList.tsx

@@ -1,5 +1,6 @@
 import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
 import {
+  useCallback,
   forwardRef,
   useEffect,
   useRef,
@@ -27,17 +28,25 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
   function MenuList(props, forwardedRef) {
     const {
       as: Comp = 'ul',
+      innerAs,
       onKeyDown,
       id: preferredId,
       defaultActiveItemValue,
       ...otherProps
     } = props;
 
+    const interactedOutside = useRef(false);
     const itemSearchStr = useRef('');
     const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();
 
-    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
-      useMenuContext();
+    const {
+      menuListIdRef,
+      buttonRef,
+      onChange,
+      openWithArrowKeyRef,
+      open,
+      isContextMenu,
+    } = useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
       HTMLElement | undefined
@@ -89,26 +98,40 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       defaultActiveItemValue,
     ]);
 
-    useOnClickOutside(
-      menuListRef,
-      (e) => {
-        if (
-          e.target instanceof HTMLElement &&
-          e.target !== buttonRef.current &&
-          !buttonRef.current?.contains(e.target)
-        ) {
-          onChange && onChange(e as any, false);
+    const handleClickOutside = useCallback(
+      (e: PointerEvent) => {
+        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 as any, false);
+          }
+        } else {
+          if (
+            e.target instanceof HTMLElement &&
+            e.target !== buttonRef.current &&
+            !buttonRef.current?.contains(e.target)
+          ) {
+            onChange(e as any, false);
+          }
         }
         e.preventDefault();
       },
-      true
+      [buttonRef, isContextMenu, onChange]
     );
 
+    useOnClickOutside(menuListRef, handleClickOutside, open);
+
     function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
       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 = '';
           buttonRef.current?.focus();
@@ -192,6 +215,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
     }
 
     if (!open) {
+      interactedOutside.current = false;
       return null;
     }
 
@@ -204,6 +228,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       >
         <Comp
           ref={assignMultipleRefs(forwardedRef, menuListRef)}
+          as={innerAs}
           id={menuListIdRef.current}
           role="menu"
           aria-labelledby={buttonRef.current?.id}

package/src/Menu/MenuPopover.tsx

@@ -13,15 +13,23 @@ export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
   function MenuPopover(props, forwardedRef) {
-    const { as = 'div', ...otherProps } = props;
-    const { buttonRef, open } = useMenuContext();
+    const { as = 'div', innerAs, ...otherProps } = props;
+    const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
 
     if (!open) {
       return null;
     }
 
     return (
-      <Popper as={as} ref={forwardedRef} anchorEl={buttonRef} {...otherProps} />
+      <Popper
+        as={as}
+        innerAs={innerAs}
+        ref={forwardedRef}
+        anchorEl={buttonRef}
+        offsetFn={offsetFn}
+        placement={isContextMenu.current ? 'bottom-start' : undefined}
+        {...otherProps}
+      />
     );
   }
 );

package/src/Menu/context.ts

@@ -1,8 +1,11 @@
+import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';
 import type {
+  Dispatch,
   KeyboardEvent,
   MouseEvent,
   MutableRefObject,
   PointerEvent,
+  SetStateAction,
 } from 'react';
 import { createContext, useContext } from 'react';
 
@@ -10,10 +13,10 @@ export type ItemObject = { text: string; value: any; id: string | undefined };
 
 // MenuRoot
 export interface MenuContextProps {
-  buttonRef: MutableRefObject<HTMLButtonElement | null>;
+  buttonRef: MutableRefObject<HTMLElement | null>;
   menuListIdRef: MutableRefObject<undefined | string>;
   openWithArrowKeyRef: MutableRefObject<string | null>;
-  onChange?: (
+  onChange: (
     e:
       | KeyboardEvent<HTMLElement>
       | MouseEvent<HTMLElement>
@@ -21,6 +24,9 @@ export interface MenuContextProps {
     isOpen: boolean
   ) => void;
   open: boolean;
+  offsetFn: OffsetsFunction | undefined;
+  setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
+  isContextMenu: MutableRefObject<boolean>;
 }
 
 const menuContext = createContext<MenuContextProps>(null as any);

package/src/Menu/index.ts

@@ -1,5 +1,6 @@
 export * from './Menu';
 export * from './MenuButton';
+export * from './ContextMenuTrigger';
 export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuPopover';