@basic-ui/core 0.0.45 → 0.0.47

package/build/cjs/index.js

@@ -216,11 +216,13 @@ function wrapEvent(theirHandler, ourHandler) {
 function useControlledState(valueProp, onChangeProp, defaultValue, defaultOnChange) {
   const isControlled = valueProp !== undefined;
   const wasControlled = react.useRef(isControlled);
+  const hasWarned = react.useRef(false);
   const [valueState, setValueState] = react.useState(defaultValue);
 
   if (isControlled) {
-    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
+    if (wasControlled.current && process.env.NODE_ENV !== 'production' && !hasWarned.current) {
       console.warn('Trying to change from controlled to uncontrolled.');
+      hasWarned.current = true;
     }
 
     return [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1914,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,
@@ -1998,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',
@@ -2035,7 +2090,6 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
   const handleKeyDown = e => {
     switch (e.key) {
       case 'Enter':
-      case ' ':
         if (!disabled) {
           handleSelect(e);
         }
@@ -2073,12 +2127,15 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     defaultActiveItemValue,
     ...otherProps
   } = props;
+  const itemSearchStr = react.useRef('');
+  const itemSearchClearTimeout = react.useRef();
   const {
     menuListIdRef,
     buttonRef,
     onChange,
     openWithArrowKeyRef,
-    open
+    open,
+    isContextMenu
   } = useMenuContext();
   const [navigationItem, setNavigationItem] = react.useState();
   const [mounted, setMounted] = react.useState(false);
@@ -2114,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);
     }
 
@@ -2129,6 +2188,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
+          itemSearchStr.current = '';
           buttonRef.current?.focus();
           break;
         }
@@ -2138,6 +2198,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       case 'ArrowDown':
       case 'ArrowUp':
         e.preventDefault();
+        itemSearchStr.current = '';
         const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
         const currentIndex = allItems.findIndex(e => e === navigationItem);
 
@@ -2173,21 +2234,30 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
 
       default:
         {
-          if (e.key.length === 1) {
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
             // A-Z
             e.preventDefault();
+
+            if (itemSearchStr.current.length === 0 || itemSearchStr.current.slice(-1) !== e.key) {
+              itemSearchStr.current = itemSearchStr.current + e.key;
+            }
+
+            clearTimeout(itemSearchClearTimeout.current);
+            itemSearchClearTimeout.current = setTimeout(() => {
+              itemSearchStr.current = '';
+            }, 500);
             const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
             const currentIndex = allItems.findIndex(e => e === navigationItem);
-            const firstLetter = e.key.toLowerCase();
+            const searchStr = itemSearchStr.current;
             let nextIndex = -1;
 
-            for (let i = 1; i < allItems.length; i++) {
+            for (let i = searchStr.length === 1 ? 1 : 0; i < allItems.length; i++) {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               const idx = getCircularIndex(currentIndex + i, allItems.length);
               const dom = allItems[idx];
               const domText = dom.innerText.toLowerCase();
 
-              if (domText.length > 0 && domText.charAt(0) === firstLetter) {
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
                 nextIndex = idx;
                 break;
               }
@@ -2360,7 +2430,9 @@ const MenuPopover = /*#__PURE__*/react.forwardRef(function MenuPopover(props, fo
   } = props;
   const {
     buttonRef,
-    open
+    open,
+    offsetFn,
+    isContextMenu
   } = useMenuContext();
 
   if (!open) {
@@ -2371,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
   });
 });
@@ -3963,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;