@basic-ui/core 0.0.60 → 0.0.62

package/src/Collapsible/CollapsibleTrigger.tsx

@@ -0,0 +1,60 @@
+import type { ElementType, ReactNode, MouseEvent, KeyboardEvent, HTMLAttributes } from 'react';
+import { forwardRef, Fragment } from 'react';
+import { useCollapsibleContext } from './context';
+import { wrapEvent } from '../utils';
+
+export interface CollapsibleTriggerProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  onClick?: (e: MouseEvent<any>) => void;
+  onKeyDown?: (e: KeyboardEvent<any>) => void;
+  disabled?: boolean;
+}
+
+export const CollapsibleTrigger = forwardRef<HTMLElement, CollapsibleTriggerProps>(
+  function CollapsibleTrigger(props, forwardedRef) {
+    const {
+      as: Comp = 'button',
+      innerAs,
+      onClick,
+      onKeyDown,
+      disabled,
+      ...otherProps
+    } = props;
+
+    const { open, panelId, disabled: contextDisabled, onChange } = useCollapsibleContext();
+    const isDisabled = disabled ?? contextDisabled;
+
+    const handleClick = (e: MouseEvent<any>) => {
+      if (isDisabled) {
+        e.preventDefault();
+        return;
+      }
+      onChange(e, !open);
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<any>) => {
+      if (Comp !== 'button' && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        handleClick(e as unknown as MouseEvent<any>);
+      }
+    };
+
+    return (
+      <Comp
+        {...(Comp !== Fragment ? { as: innerAs, ref: forwardedRef } : {})}
+        type={Comp === 'button' ? 'button' : undefined}
+        aria-controls={open ? panelId : undefined}
+        aria-expanded={open}
+        disabled={isDisabled}
+        data-open={open ? '' : undefined}
+        data-disabled={isDisabled ? '' : undefined}
+        data-state={open ? 'open' : 'closed'}
+        onClick={wrapEvent(onClick, handleClick)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Collapsible/context.ts

@@ -0,0 +1,28 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext, useContext } from 'react';
+import type { CollapsibleTriggerEvent } from './Collapsible';
+
+import type { TransitionStatus } from '../hooks';
+
+export interface CollapsibleContextProps {
+  open: boolean;
+  mounted: boolean;
+  transitionStatus: TransitionStatus;
+  setMounted: Dispatch<SetStateAction<boolean>>;
+  panelId: string | undefined;
+  disabled: boolean;
+  onChange: (e: CollapsibleTriggerEvent, isOpen: boolean) => void;
+  setPanelId: Dispatch<SetStateAction<string | undefined>>;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextProps | null>(null);
+
+export const CollapsibleProvider = CollapsibleContext.Provider;
+
+export const useCollapsibleContext = () => {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error('Collapsible components must be used within a <Collapsible>');
+  }
+  return context;
+};

package/src/Collapsible/index.ts

@@ -0,0 +1,3 @@
+export * from './Collapsible';
+export * from './CollapsibleTrigger';
+export * from './CollapsiblePanel';

package/src/Menu/Menu.story.tsx

@@ -2,7 +2,15 @@ import type { MouseEvent, ReactNode } from 'react';
 import { useState } from 'react';
 import { animated, useSpring } from 'react-spring';
 
-import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+} from './';
 import './styles.css';
 
 export default {
@@ -141,6 +149,61 @@ const MenuWithMultipleButtons = () => {
   );
 };
 
+const MenuWithSubmenu = () => {
+  return (
+    <Menu>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>New file</MenuItem>
+          <MenuSubmenu>
+            <MenuSubmenuTrigger
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 12,
+              }}
+            >
+              <span>Share</span>
+              <span aria-hidden="true">›</span>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>Email</MenuItem>
+                  <MenuItem>Copy link</MenuItem>
+                  <MenuItem>Duplicate</MenuItem>
+                  <MenuSubmenu>
+                    <MenuSubmenuTrigger
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 12,
+                      }}
+                    >
+                      <span>More options</span>
+                      <span aria-hidden="true">›</span>
+                      <MenuPopover>
+                        <MenuList>
+                          <MenuItem>Airdrop</MenuItem>
+                          <MenuItem>Telegram</MenuItem>
+                          <MenuItem>Signal</MenuItem>
+                          <MenuItem>Discord</MenuItem>
+                        </MenuList>
+                      </MenuPopover>
+                    </MenuSubmenuTrigger>
+                  </MenuSubmenu>
+                </MenuList>
+              </MenuPopover>
+            </MenuSubmenuTrigger>
+          </MenuSubmenu>
+          <MenuItem>Delete</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
 export const Controlled = () => (
   <Wrapper>
     <MenuControlled />
@@ -158,3 +221,9 @@ export const WithMultipleButtons = () => (
     <MenuWithMultipleButtons />
   </Wrapper>
 );
+
+export const WithSubmenu = () => (
+  <Wrapper>
+    <MenuWithSubmenu />
+  </Wrapper>
+);

package/src/Menu/Menu.tsx

@@ -1,82 +1,158 @@
-import type {
-  KeyboardEvent,
-  MouseEvent,
-  PointerEvent,
-  ReactNode,
-  ElementType,
+import type { ReactNode, ElementType } from 'react';
+import {
+  useState,
+  forwardRef,
+  useRef,
+  Fragment,
+  useId,
+  useCallback,
+  useEffect,
 } from 'react';
-import { useState, forwardRef, useRef, Fragment, useId } from 'react';
 
-import type { MenuContextProps } from './context';
-import { MenuProvider } from './context';
+import type { MenuContextProps, MenuTriggerEvent } from './context';
+import { MenuProvider, useOptionalMenuContext } from './context';
 import { useControlledState } from '../hooks';
 import type { OffsetsFunction } from '../Popper';
+import { useOptionalMenuBarContext } from '../MenuBar/context';
 
 export interface MenuProps {
   as?: ElementType<any>;
   innerAs?: ElementType<any>;
   children?: ReactNode;
-  onChange?: (
-    e:
-      | KeyboardEvent<HTMLElement>
-      | MouseEvent<HTMLElement>
-      | PointerEvent<HTMLElement>,
-    isOpen: boolean
-  ) => void;
+  onChange?: (e: MenuTriggerEvent, isOpen: boolean) => void;
   open?: boolean;
   defaultOpen?: boolean;
 }
 
-export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
-  props,
-  forwardedRef
-) {
-  const {
-    as: Comp = Fragment,
-    innerAs,
-    open: openProp,
-    defaultOpen = false,
-    onChange: onChangeProp,
-    ...otherProps
-  } = props;
-  const menuListIdRef = useRef<string | undefined>(undefined);
-  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [open, onChange] = useControlledState(
-    openProp,
-    onChangeProp,
-    defaultOpen,
-    (setState) => (e, isOpen) => {
-      setState(isOpen);
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  function Menu(props, forwardedRef) {
+    const {
+      as: Comp = Fragment,
+      innerAs,
+      open: openProp,
+      defaultOpen = false,
+      onChange: onChangeProp,
+      ...otherProps
+    } = props;
+    const menuListIdRef = useRef<string | undefined>(undefined);
+    const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);
+    const buttonRef = useRef<HTMLElement>(null);
+    const didNotifyDefaultOpenRef = useRef(false);
+    const menuBar = useOptionalMenuBarContext();
+    const menuBarMenuId = useId();
+    const parentMenu = useOptionalMenuContext();
+    const isMenuBarRootMenu = Boolean(menuBar && !parentMenu);
+    const menuBarOpenMenuId = menuBar?.openMenuId;
+    const notifyMenuBarOpenChange = menuBar?.notifyMenuOpenChange;
+    const registerMenuBarMenu = menuBar?.registerMenu;
+    const [openState, setOpenState] = useControlledState(
+      openProp,
+      onChangeProp,
+      defaultOpen,
+      (setState) => (e, isOpen) => {
+        setState(isOpen);
+      }
+    );
+    const [offsetFn, setOffsetFn] = useState<OffsetsFunction | undefined>(
+      undefined
+    );
+    menuListIdRef.current = useId();
+    const isContextMenu = useRef(false);
+    const open =
+      isMenuBarRootMenu && openProp === undefined
+        ? menuBarOpenMenuId === menuBarMenuId
+        : openState;
+
+    const onChange = useCallback(
+      (e: MenuTriggerEvent, isOpen: boolean) => {
+        setOpenState(e, isOpen);
+        if (isMenuBarRootMenu && notifyMenuBarOpenChange) {
+          notifyMenuBarOpenChange(menuBarMenuId, isOpen);
+        }
+      },
+      [isMenuBarRootMenu, menuBarMenuId, notifyMenuBarOpenChange, setOpenState]
+    );
+
+    useEffect(() => {
+      if (!isMenuBarRootMenu || !registerMenuBarMenu) {
+        return;
+      }
+
+      return registerMenuBarMenu({
+        id: menuBarMenuId,
+        openWithArrowKeyRef,
+        onOpenChange: onChange,
+      });
+    }, [isMenuBarRootMenu, menuBarMenuId, onChange, registerMenuBarMenu]);
+
+    useEffect(() => {
+      if (!isMenuBarRootMenu || !notifyMenuBarOpenChange) {
+        return;
+      }
+
+      if (openProp !== undefined) {
+        notifyMenuBarOpenChange(menuBarMenuId, open);
+        return;
+      }
+
+      if (defaultOpen && !didNotifyDefaultOpenRef.current) {
+        didNotifyDefaultOpenRef.current = true;
+        notifyMenuBarOpenChange(menuBarMenuId, true);
+      }
+    }, [
+      defaultOpen,
+      isMenuBarRootMenu,
+      menuBarMenuId,
+      notifyMenuBarOpenChange,
+      open,
+      openProp,
+    ]);
+
+    if (!open && offsetFn) {
+      setOffsetFn(undefined);
     }
-  );
-  const [offsetFn, setOffsetFn] = useState<OffsetsFunction | undefined>(
-    undefined
-  );
-  menuListIdRef.current = useId();
-  const isContextMenu = useRef(false);
 
-  if (!open && offsetFn) {
-    setOffsetFn(undefined);
-  }
+    const closeMenu: MenuContextProps['closeMenu'] = (e, options) => {
+      onChange(e, false);
+      if (options?.focusTrigger && !isContextMenu.current) {
+        buttonRef.current?.focus();
+      }
+    };
 
-  const value: MenuContextProps = {
-    menuListIdRef,
-    openWithArrowKeyRef,
-    open,
-    onChange,
-    buttonRef,
-    offsetFn,
-    setOffsetFn,
-    isContextMenu,
-  };
+    const closeAllMenus: MenuContextProps['closeAllMenus'] = (e) => {
+      onChange(e, false);
+      if (parentMenu) {
+        parentMenu.closeAllMenus(e);
+        return;
+      }
+      if (!isContextMenu.current) {
+        buttonRef.current?.focus();
+      }
+    };
 
-  return (
-    <MenuProvider value={value}>
-      <Comp
-        {...(Comp !== Fragment ? { as: innerAs, ref: forwardedRef } : {})}
-        {...otherProps}
-      />
-    </MenuProvider>
-  );
-});
+    const value: MenuContextProps = {
+      menuListIdRef,
+      openWithArrowKeyRef,
+      open,
+      onChange,
+      buttonRef,
+      offsetFn,
+      setOffsetFn,
+      isContextMenu,
+      parentMenu,
+      menuBar: isMenuBarRootMenu ? menuBar! : null,
+      menuBarMenuId: isMenuBarRootMenu ? menuBarMenuId : null,
+      closeMenu,
+      closeAllMenus,
+    };
+
+    return (
+      <MenuProvider value={value}>
+        <Comp
+          {...(Comp !== Fragment ? { as: innerAs, ref: forwardedRef } : {})}
+          {...otherProps}
+        />
+      </MenuProvider>
+    );
+  }
+);

package/src/Menu/MenuButton.tsx

@@ -2,12 +2,14 @@ import type {
   ButtonHTMLAttributes,
   ElementType,
   KeyboardEvent,
+  FocusEvent,
   MouseEvent,
 } from 'react';
-import { forwardRef, useId } from 'react';
+import { forwardRef, useCallback, useId } from 'react';
 
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrap-event';
+import { assignRef } from '../utils/assign-ref';
 
 export type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   as?: ElementType<any>;
@@ -24,22 +26,89 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       innerAs,
       id: preferredId,
       onClick,
+      onFocus,
       onKeyDown,
+      onMouseMove,
       disabled,
       ...otherProps
     } = props;
-    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =
-      useMenuContext();
+    const {
+      menuListIdRef,
+      openWithArrowKeyRef,
+      open,
+      buttonRef,
+      onChange,
+      menuBar,
+      menuBarMenuId,
+    } = useMenuContext();
 
     const buttonIdGenerated = useId();
     const buttonId = preferredId || buttonIdGenerated;
+    const isMenuBarButton = Boolean(menuBar && menuBarMenuId);
+    const isDisabled = Boolean(disabled || menuBar?.disabled);
+    const registerButton = menuBar?.registerButton;
+
+    const setButtonRef = useCallback(
+      (node: HTMLButtonElement | null) => {
+        assignRef(forwardedRef, node);
+        assignRef(buttonRef, node);
+
+        if (isMenuBarButton && registerButton) {
+          registerButton(menuBarMenuId!, node, isDisabled);
+        }
+      },
+      [
+        buttonRef,
+        forwardedRef,
+        isDisabled,
+        isMenuBarButton,
+        menuBarMenuId,
+        registerButton,
+      ]
+    );
 
     const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (disabled) {
+      if (isDisabled) {
         return;
       }
       buttonRef.current = e.currentTarget;
 
+      if (isMenuBarButton) {
+        const isHorizontal = menuBar!.orientation === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const previousKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const firstMenuKey = 'Home';
+        const lastMenuKey = 'End';
+        const openFirstItemKey = isHorizontal ? 'ArrowDown' : 'ArrowRight';
+        const openLastItemKey = isHorizontal ? 'ArrowUp' : undefined;
+
+        switch (e.key) {
+          case nextKey:
+          case previousKey:
+            menuBar!.moveFocus(menuBarMenuId!, e.key === nextKey ? 1 : -1, e, {
+              open: menuBar!.openMenuId !== null,
+              focusKey: 'ArrowDown',
+            });
+            e.preventDefault();
+            return;
+          case firstMenuKey:
+            menuBar!.focusFirstMenu();
+            e.preventDefault();
+            return;
+          case lastMenuKey:
+            menuBar!.focusLastMenu();
+            e.preventDefault();
+            return;
+          case openFirstItemKey:
+          case openLastItemKey:
+            const focusKey = e.key === 'ArrowUp' ? 'ArrowUp' : 'ArrowDown';
+            openWithArrowKeyRef.current = focusKey;
+            menuBar!.openMenu(menuBarMenuId!, e, focusKey);
+            e.preventDefault();
+            return;
+        }
+      }
+
       const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
       const isEnterKey = () => [' ', 'Enter'].includes(e.key);
 
@@ -55,27 +124,64 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
     };
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-      if (disabled) {
+      if (isDisabled) {
         return;
       }
       buttonRef.current = e.currentTarget;
+      if (isMenuBarButton) {
+        menuBar!.setActiveMenuId(menuBarMenuId!);
+        if (open) {
+          menuBar!.closeMenu(menuBarMenuId!, e);
+        } else {
+          menuBar!.openMenu(menuBarMenuId!, e);
+        }
+        return;
+      }
       onChange(e, !open);
     };
 
+    const handleFocus = (e: FocusEvent<HTMLButtonElement>) => {
+      if (!isDisabled && isMenuBarButton) {
+        menuBar!.setActiveMenuId(menuBarMenuId!);
+        buttonRef.current = e.currentTarget;
+      }
+    };
+
+    const handleMouseMove = (e: MouseEvent<HTMLButtonElement>) => {
+      if (!isDisabled && isMenuBarButton) {
+        menuBar!.setActiveMenuId(menuBarMenuId!);
+        buttonRef.current = e.currentTarget;
+
+        if (menuBar!.openMenuId && menuBar!.openMenuId !== menuBarMenuId) {
+          menuBar!.openMenu(menuBarMenuId!, e);
+        }
+      }
+    };
+
     return (
       <Comp
-        ref={forwardedRef}
+        ref={setButtonRef}
         as={innerAs}
         id={buttonId}
-        role="button"
+        role={isMenuBarButton ? 'menuitem' : 'button'}
         type="button"
-        aria-haspopup={true}
+        aria-haspopup={isMenuBarButton ? 'menu' : true}
         aria-controls={menuListIdRef.current}
         aria-expanded={open ? true : undefined}
         data-menu-button=""
+        data-menubar-menu-button={isMenuBarButton ? '' : undefined}
+        tabIndex={
+          isMenuBarButton
+            ? menuBar!.activeMenuId === menuBarMenuId
+              ? 0
+              : -1
+            : undefined
+        }
         onClick={wrapEvent(onClick, handleClick)}
+        onFocus={wrapEvent(onFocus, handleFocus)}
         onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
-        disabled={disabled}
+        onMouseMove={wrapEvent(onMouseMove, handleMouseMove)}
+        disabled={isDisabled}
         {...otherProps}
       />
     );

package/src/Menu/MenuItem.tsx

@@ -1,9 +1,11 @@
 import type {
+  FocusEventHandler,
   LiHTMLAttributes,
   ElementType,
   MouseEvent,
   KeyboardEvent,
   KeyboardEventHandler,
+  MouseEventHandler,
 } from 'react';
 import { forwardRef, useRef, useId } from 'react';
 
@@ -31,9 +33,11 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
     onSelect,
     onClick,
     onKeyDown,
+    onFocus,
+    onMouseMove,
     ...otherProps
   } = props;
-  const { onChange, buttonRef } = useMenuContext();
+  const { closeAllMenus } = useMenuContext();
   const { navigationItem, onNavigate } = useMenuListContext();
   const ref = useRef<HTMLLIElement | null>(null);
   const itemId = useId();
@@ -43,8 +47,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
   const handleSelect = wrapEvent(
     onSelect,
     (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
-      onChange(e, false);
-      buttonRef.current?.focus();
+      closeAllMenus(e);
       e.preventDefault();
     }
   );
@@ -67,6 +70,18 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
     }
   };
 
+  const handleFocus: FocusEventHandler<HTMLLIElement> = () => {
+    if (!disabled && ref.current && ref.current !== navigationItem) {
+      onNavigate && onNavigate(ref.current);
+    }
+  };
+
+  const handleMouseMove: MouseEventHandler<HTMLLIElement> = () => {
+    if (!disabled && ref.current && ref.current !== navigationItem) {
+      onNavigate && onNavigate(ref.current);
+    }
+  };
+
   return (
     <Comp
       ref={assignMultipleRefs(ref, forwardedRef)}
@@ -78,6 +93,8 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
       onClick={wrapEvent(onClick, handleClick)}
       tabIndex={disabled ? -1 : 0}
       onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+      onFocus={wrapEvent(onFocus, handleFocus)}
+      onMouseMove={wrapEvent(onMouseMove, handleMouseMove)}
       data-disabled={disabled ? '' : undefined}
       aria-disabled={disabled ? '' : undefined}
       disabled={disabled}