@basic-ui/core 0.0.47 → 0.0.49

package/src/Menu/MenuList.tsx

@@ -1,5 +1,6 @@
 import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
 import {
+  useCallback,
   forwardRef,
   useEffect,
   useRef,
@@ -27,12 +28,14 @@ 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>>();
 
@@ -95,28 +98,40 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       defaultActiveItemValue,
     ]);
 
-    useOnClickOutside(
-      menuListRef,
-      (e) => {
-        console.log(isContextMenu.current);
-        if (
-          isContextMenu.current ||
-          (e.target instanceof HTMLElement &&
+    const handleClickOutside = useCallback(
+      (e: PointerEvent) => {
+        if (isContextMenu.current) {
+          if (!interactedOutside.current && e.pointerType === 'touch') {
+            // First interaction should be ignored, because
+            // this is what triggered the context menu to open
+            interactedOutside.current = true;
+            return;
+          }
+
+          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 && onChange(e as any, false);
+            !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();
@@ -200,6 +215,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
     }
 
     if (!open) {
+      interactedOutside.current = false;
       return null;
     }
 
@@ -212,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,7 +13,7 @@ export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
   function MenuPopover(props, forwardedRef) {
-    const { as = 'div', ...otherProps } = props;
+    const { as = 'div', innerAs, ...otherProps } = props;
     const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
 
     if (!open) {
@@ -23,6 +23,7 @@ export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
     return (
       <Popper
         as={as}
+        innerAs={innerAs}
         ref={forwardedRef}
         anchorEl={buttonRef}
         offsetFn={offsetFn}

package/src/Menu/context.ts

@@ -1,9 +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';
 
@@ -14,7 +16,7 @@ export interface MenuContextProps {
   buttonRef: MutableRefObject<HTMLElement | null>;
   menuListIdRef: MutableRefObject<undefined | string>;
   openWithArrowKeyRef: MutableRefObject<string | null>;
-  onChange?: (
+  onChange: (
     e:
       | KeyboardEvent<HTMLElement>
       | MouseEvent<HTMLElement>
@@ -22,8 +24,8 @@ export interface MenuContextProps {
     isOpen: boolean
   ) => void;
   open: boolean;
-  offset: MutableRefObject<[number, number]>;
-  offsetFn: OffsetsFunction;
+  offsetFn: OffsetsFunction | undefined;
+  setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
   isContextMenu: MutableRefObject<boolean>;
 }