@basic-ui/core 0.0.59 → 0.0.61

package/src/Menu/MenuList.tsx

@@ -12,7 +12,7 @@ import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assign-ref';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 import { useScope } from '../hooks';
-import { queryScope } from './scope';
+import { MENU_SUBMENU_TRIGGER_ATTR, queryScope } from './scope';
 import { getCircularIndex, wrapEvent } from '../utils';
 
 const useEnhancedEffect =
@@ -44,10 +44,12 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
     const {
       menuListIdRef,
       buttonRef,
-      onChange,
+      closeMenu,
       openWithArrowKeyRef,
       open,
       isContextMenu,
+      menuBar,
+      menuBarMenuId,
     } = useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
@@ -59,6 +61,15 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
     const menuListRef = useRef<HTMLUListElement | null>(null);
 
     const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);
+    const getAllItems = useCallback(
+      () =>
+        scope.current.queryAllNodes(
+          (type, props, instance) =>
+            queryScope(type, props) &&
+            instance.closest('[data-menu-list]') === menuListRef.current
+        ),
+      [scope]
+    );
 
     const onNavigate = (el: HTMLElement) => {
       el.focus({ preventScroll: true });
@@ -69,7 +80,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
 
     useEnhancedEffect(() => {
       if (!mounted) {
-        const allItems = scope.current.queryAllNodes(queryScope);
+        const allItems = getAllItems();
         let index = getCircularIndex(
           openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,
           allItems.length
@@ -107,7 +118,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       navigationItem,
       onNavigate,
       openWithArrowKeyRef,
-      scope,
+      getAllItems,
       defaultActiveItemValue,
     ]);
 
@@ -122,7 +133,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
           }
 
           if (e.button === 0) {
-            onChange(e as any, false);
+            closeMenu(e);
           }
         } else {
           if (
@@ -130,24 +141,52 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
             e.target !== buttonRef.current &&
             !buttonRef.current?.contains(e.target)
           ) {
-            onChange(e as any, false);
+            closeMenu(e);
           }
         }
         e.preventDefault();
       },
-      [buttonRef, isContextMenu, onChange]
+      [buttonRef, isContextMenu, closeMenu]
     );
 
     useOnClickOutside(menuListRef, handleClickOutside, open);
 
     function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
+      const isHorizontalMenuBarMenu =
+        menuBar && menuBarMenuId && menuBar.orientation === 'horizontal';
+
       switch (e.key) {
         case 'Escape':
         case 'Tab': {
-          onChange(e, false);
+          closeMenu(e, { focusTrigger: true });
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
           itemSearchStr.current = '';
-          buttonRef.current?.focus();
+          break;
+        }
+        case 'ArrowRight': {
+          if (isHorizontalMenuBarMenu) {
+            menuBar!.moveFocus(menuBarMenuId!, 1, e, {
+              open: true,
+              focusKey: 'ArrowDown',
+            });
+            e.preventDefault();
+            itemSearchStr.current = '';
+          }
+          break;
+        }
+        case 'ArrowLeft': {
+          if (buttonRef.current?.hasAttribute(MENU_SUBMENU_TRIGGER_ATTR)) {
+            closeMenu(e, { focusTrigger: true });
+            e.preventDefault();
+            itemSearchStr.current = '';
+          } else if (isHorizontalMenuBarMenu) {
+            menuBar!.moveFocus(menuBarMenuId!, -1, e, {
+              open: true,
+              focusKey: 'ArrowDown',
+            });
+            e.preventDefault();
+            itemSearchStr.current = '';
+          }
           break;
         }
         case 'Home':
@@ -156,7 +195,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
         case 'ArrowUp':
           e.preventDefault();
           itemSearchStr.current = '';
-          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
+          const allItems = getAllItems();
           const currentIndex = allItems.findIndex((e) => e === navigationItem);
           if (allItems.length === 0) {
             return;
@@ -196,9 +235,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
               itemSearchStr.current = '';
             }, 500);
 
-            const allItems = scope
-              ? scope.current.queryAllNodes(queryScope)
-              : [];
+            const allItems = getAllItems();
             const currentIndex = allItems.findIndex(
               (e) => e === navigationItem
             );

package/src/Menu/MenuPopover.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import type { PopperProps } from '../Popper';
 import { Popper } from '../Popper';
 import { useMenuContext } from './context';
+import { MENU_SUBMENU_TRIGGER_ATTR } from './scope';
 
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
   as?: ElementType<any>;
@@ -13,8 +14,17 @@ export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
   function MenuPopover(props, forwardedRef) {
-    const { as = 'div', innerAs, ...otherProps } = props;
+    const { as = 'div', innerAs, placement, ...otherProps } = props;
     const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();
+    const getDefaultPlacement = () => {
+      if (buttonRef.current?.hasAttribute(MENU_SUBMENU_TRIGGER_ATTR)) {
+        return 'right-start';
+      }
+      if (isContextMenu.current) {
+        return 'bottom-start';
+      }
+      return undefined;
+    };
 
     if (!open) {
       return null;
@@ -27,7 +37,7 @@ export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
         ref={forwardedRef}
         anchorEl={buttonRef}
         offsetFn={offsetFn}
-        placement={isContextMenu.current ? 'bottom-start' : undefined}
+        placement={placement ?? getDefaultPlacement()}
         {...otherProps}
       />
     );

package/src/Menu/MenuSubmenuTrigger.tsx

@@ -0,0 +1,167 @@
+import type {
+  FocusEventHandler,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  LiHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  MouseEventHandler,
+  PointerEvent,
+  PointerEventHandler,
+} from 'react';
+import { forwardRef, useEffect, useId, useRef } from 'react';
+
+import { useMenuContext, useMenuListContext } from './context';
+import { MENU_SUBMENU_TRIGGER_ATTR } from './scope';
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils';
+
+export interface MenuSubmenuTriggerProps
+  extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  disabled?: boolean;
+}
+
+export const MenuSubmenuTrigger = forwardRef<any, MenuSubmenuTriggerProps>(
+  function MenuSubmenuTrigger(props, forwardedRef) {
+    const {
+      as: Comp = 'li',
+      innerAs,
+      disabled,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseMove,
+      onPointerUp,
+      ...otherProps
+    } = props;
+    const {
+      buttonRef,
+      menuListIdRef,
+      open,
+      onChange,
+      openWithArrowKeyRef,
+    } = useMenuContext();
+    const { navigationItem, onNavigate } = useMenuListContext();
+    const ref = useRef<HTMLLIElement | null>(null);
+    const itemId = useId();
+
+    const isActive = ref.current && ref.current === navigationItem;
+
+    const setTrigger = () => {
+      if (ref.current) {
+        buttonRef.current = ref.current;
+      }
+    };
+
+    const createMenuTriggerEvent = () =>
+      ({
+        // This close path is only used when roving focus leaves the trigger.
+        // Internal state transitions only need currentTarget/target plus
+        // preventDefault/defaultPrevented for wrapEvent compatibility.
+        currentTarget: ref.current,
+        target: ref.current,
+        preventDefault() {},
+        defaultPrevented: false,
+      }) as unknown as Parameters<typeof onChange>[0];
+
+    const openSubmenu = (
+      e:
+        | MouseEvent<HTMLLIElement>
+        | KeyboardEvent<HTMLLIElement>
+        | PointerEvent<HTMLLIElement>,
+      focusFirstItem = false
+    ) => {
+      if (disabled || !ref.current) {
+        return;
+      }
+      setTrigger();
+      onNavigate && onNavigate(ref.current);
+      if (focusFirstItem) {
+        openWithArrowKeyRef.current = 'ArrowDown';
+      }
+      onChange(e, true);
+    };
+
+    useEffect(() => {
+      if (!open || !ref.current) {
+        return;
+      }
+      if (navigationItem && navigationItem !== ref.current) {
+        onChange(createMenuTriggerEvent(), false);
+      }
+    }, [navigationItem, onChange, open]);
+
+    const handleClick = (e: MouseEvent<HTMLLIElement>) => {
+      openSubmenu(e);
+      e.preventDefault();
+    };
+
+    const handleFocus: FocusEventHandler<HTMLLIElement> = () => {
+      if (!disabled && ref.current && ref.current !== navigationItem) {
+        onNavigate && onNavigate(ref.current);
+      }
+      setTrigger();
+    };
+
+    const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
+      switch (e.key) {
+        case ' ':
+        case 'Enter':
+          openSubmenu(e, true);
+          e.preventDefault();
+          break;
+        case 'ArrowRight':
+          if (!open) {
+            openSubmenu(e, true);
+            e.preventDefault();
+          }
+          break;
+      }
+    };
+
+    const handleMouseMove: MouseEventHandler<HTMLLIElement> = (e) => {
+      if (!disabled && ref.current && ref.current !== navigationItem) {
+        onNavigate && onNavigate(ref.current);
+      }
+      if (!disabled && !open) {
+        openSubmenu(e);
+      } else {
+        setTrigger();
+      }
+    };
+
+    const handlePointerUp: PointerEventHandler<HTMLLIElement> = (e) => {
+      if (e.pointerType === 'touch') {
+        openSubmenu(e);
+        e.preventDefault();
+      }
+    };
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        as={innerAs}
+        id={disabled ? undefined : itemId}
+        {...{ [MENU_SUBMENU_TRIGGER_ATTR]: '' }}
+        data-menu-submenu-trigger=""
+        data-highlighted={isActive ? '' : undefined}
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-controls={menuListIdRef.current}
+        aria-expanded={open ? true : undefined}
+        onClick={wrapEvent(onClick, handleClick)}
+        tabIndex={disabled ? -1 : 0}
+        onFocus={wrapEvent(onFocus, handleFocus)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        onMouseMove={wrapEvent(onMouseMove, handleMouseMove)}
+        onPointerUp={wrapEvent(onPointerUp, handlePointerUp)}
+        data-disabled={disabled ? '' : undefined}
+        aria-disabled={disabled ? '' : undefined}
+        disabled={disabled}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Menu/context.ts

@@ -4,34 +4,44 @@ import type {
   KeyboardEvent,
   MouseEvent,
   MutableRefObject,
-  PointerEvent,
+  PointerEvent as ReactPointerEvent,
   SetStateAction,
 } from 'react';
 import { createContext, useContext } from 'react';
 
+import type { MenuBarContextProps } from '../MenuBar/context';
+
 export type ItemObject = { text: string; value: any; id: string | undefined };
+export type MenuTriggerEvent =
+  | KeyboardEvent<any>
+  | MouseEvent<any>
+  | ReactPointerEvent<any>
+  | PointerEvent;
 
 // MenuRoot
 export interface MenuContextProps {
   buttonRef: MutableRefObject<HTMLElement | null>;
   menuListIdRef: MutableRefObject<undefined | string>;
   openWithArrowKeyRef: MutableRefObject<string | null>;
-  onChange: (
-    e:
-      | KeyboardEvent<HTMLElement>
-      | MouseEvent<HTMLElement>
-      | PointerEvent<HTMLElement>,
-    isOpen: boolean
-  ) => void;
+  onChange: (e: MenuTriggerEvent, isOpen: boolean) => void;
   open: boolean;
   offsetFn: OffsetsFunction | undefined;
   setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
   isContextMenu: MutableRefObject<boolean>;
+  parentMenu: MenuContextProps | null;
+  menuBar: MenuBarContextProps | null;
+  menuBarMenuId: string | null;
+  closeMenu: (
+    e: MenuTriggerEvent,
+    options?: { focusTrigger?: boolean }
+  ) => void;
+  closeAllMenus: (e: MenuTriggerEvent) => void;
 }
 
-const menuContext = createContext<MenuContextProps>(null as any);
+const menuContext = createContext<MenuContextProps | null>(null);
 export const { Provider: MenuProvider } = menuContext;
-export const useMenuContext = () => useContext(menuContext);
+export const useMenuContext = () => useContext(menuContext) as MenuContextProps;
+export const useOptionalMenuContext = () => useContext(menuContext);
 
 // MenuList
 export interface MenuListContextProps {

package/src/Menu/index.ts

@@ -4,3 +4,6 @@ export * from './ContextMenuTrigger';
 export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuPopover';
+export { Menu as MenuSubmenu } from './Menu';
+export type { MenuProps as MenuSubmenuProps } from './Menu';
+export * from './MenuSubmenuTrigger';

package/src/Menu/scope.ts

@@ -1,6 +1,9 @@
+export const MENU_SUBMENU_TRIGGER_ATTR = 'data-menu-submenu-trigger';
+
 export function queryScope(type: string, props: Record<string, unknown>) {
   return (
-    props['data-menu-item'] === '' &&
+    (props['data-menu-item'] === '' ||
+      props[MENU_SUBMENU_TRIGGER_ATTR] === '') &&
     props['data-disabled'] !== '' &&
     props['data-disabled'] !== true
   );

package/src/Menu/styles.css

@@ -1,32 +1,71 @@
-[data-menu-item] {
-  padding: 8px;
+[data-menu-button] {
+  box-sizing: border-box;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.75rem;
+  border: 0;
+  background: transparent;
+  color: #1f1f1f;
+  font: sans-serif;
+  cursor: default;
+  user-select: none;
+}
+
+[data-menu-button]:hover:not([disabled]),
+[data-menu-button]:focus-visible,
+[data-menu-button][aria-expanded='true'] {
+  background: #f0f0f0;
+}
+
+[data-menu-list] {
+  font-family: sans-serif;
+  min-width: 180px;
+  margin: 0;
+  padding: 4px 0;
+  border: 1px solid #d8d8d8;
+  background: white;
+  color: #1f1f1f;
+  box-shadow: 4px 4px 0 rgb(0 0 0 / 10%);
   list-style: none;
-  cursor: pointer;
 }
 
-[data-menu-item][data-highlighted] {
-  background-color: #e7e7e7;
+[data-menu-list]:focus {
+  outline: 0;
 }
 
-[data-menu-item][data-highlighted]:hover {
-  background-color: #d7d7d7;
+[data-menu-list] > hr {
+  height: 1px;
+  margin: 4px;
+  border: 0;
+  background: #d8d8d8;
 }
 
-[data-menu-item]:hover {
-  background-color: #f3f3f3;
+[data-menu-item],
+[data-menu-submenu-trigger] {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  outline: 0;
+  list-style: none;
+  cursor: default;
+  user-select: none;
 }
 
-[data-menu-item][data-disabled] {
-  background-color: #ffffff;
-  color: #777;
-  cursor: not-allowed;
+[data-menu-submenu-trigger] {
+  padding-right: 0.5rem;
 }
 
-[data-menu-list] {
-  margin: 0;
-  padding: 0;
-  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
-  border-radius: 3px;
+[data-menu-item][data-highlighted],
+[data-menu-submenu-trigger][data-highlighted] {
+  background: #1f1f1f;
+  color: white;
+}
+
+[data-menu-item][data-disabled],
+[data-menu-submenu-trigger][data-disabled] {
+  color: #777;
+  cursor: not-allowed;
 }
 
 [data-popper-placement='top'] [data-menu-list] {
@@ -36,7 +75,3 @@
 [data-popper-placement='bottom'] [data-menu-list] {
   transform-origin: top center;
 }
-
-[data-menu-list]:focus {
-  outline: none;
-}

package/src/MenuBar/MenuBar.story.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+} from '../Menu';
+import { MenuBar } from './MenuBar';
+import './styles.css';
+
+export default {
+  title: 'components/MenuBar',
+};
+
+const Divider = () => <li role="separator" />;
+
+const MenuEntry = ({ children }: { children: ReactNode }) => (
+  <MenuItem>{children}</MenuItem>
+);
+
+export const Basic = () => (
+  <div className="MenuBarStory-frame">
+    <MenuBar>
+      <Menu>
+        <MenuButton>File</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuEntry>New</MenuEntry>
+            <MenuEntry>Open</MenuEntry>
+            <MenuEntry>Save</MenuEntry>
+            <MenuSubmenu>
+              <MenuSubmenuTrigger>
+                <span>Export</span>
+                <span aria-hidden="true">&rsaquo;</span>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuEntry>Email</MenuEntry>
+                    <MenuEntry>Copy link</MenuEntry>
+                    <MenuEntry>Duplicate</MenuEntry>
+                  </MenuList>
+                </MenuPopover>
+              </MenuSubmenuTrigger>
+            </MenuSubmenu>
+            <Divider />
+            <MenuEntry>Archive</MenuEntry>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+
+      <Menu>
+        <MenuButton>Edit</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuEntry>Undo</MenuEntry>
+            <MenuEntry>Redo</MenuEntry>
+            <MenuEntry>Cut</MenuEntry>
+            <MenuEntry>Copy</MenuEntry>
+            <MenuEntry>Paste</MenuEntry>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+
+      <Menu>
+        <MenuButton>View</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuEntry>Zoom In</MenuEntry>
+            <MenuEntry>Zoom Out</MenuEntry>
+            <MenuEntry>Reset Zoom</MenuEntry>
+            <MenuEntry>Full Screen</MenuEntry>
+            <MenuSubmenu>
+              <MenuSubmenuTrigger>
+                <span>Layout</span>
+                <span aria-hidden="true">&rsaquo;</span>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuEntry>Single page</MenuEntry>
+                    <MenuEntry>Two pages</MenuEntry>
+                  </MenuList>
+                </MenuPopover>
+              </MenuSubmenuTrigger>
+            </MenuSubmenu>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </MenuBar>
+  </div>
+);