@ryvora/react-menu

Menu 🍽️

Welcome, Menu Architect! 🏗️

The menu module is a foundational building block for creating interactive menus, like those found in DropdownMenu, ContextMenu, or Select components. It handles the core logic for item selection, keyboard navigation, and managing the open state.

Think of it as the engine ⚙️ that powers various menu-like components, providing the smarts behind the scenes!

Core Responsibilities

• Managing a collection of menu items.
• Handling keyboard navigation (arrow keys, Home, End, type-ahead).
• Managing item selection and activation.
• Controlling the open/closed state of the menu content.
• Integrating with @ryvora/react-popper for positioning.
• Often used with @ryvora/react-dismissable-layer for closing behavior.

Conceptual Structure (How it's typically used by other components)

// This is a simplified view, often abstracted by DropdownMenu, Select, etc.
import * as MenuPrimitive from '@ryvora/react-menu';
import * as PopperPrimitive from '@ryvora/react-popper';

function MyCustomMenu() {
  // ... state for open, onOpenChange ...
  return (
    <PopperPrimitive.Root>
      <MenuPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
        <PopperPrimitive.Anchor asChild>
          <MenuPrimitive.Anchor asChild> {/* Or directly use PopperPrimitive.Anchor */}
            <button>Trigger</button>
          </MenuPrimitive.Anchor>
        </PopperPrimitive.Anchor>

        <MenuPrimitive.Portal>
          <PopperPrimitive.Content>
            <MenuPrimitive.Content>
              <MenuPrimitive.Item onSelect={...}>Item 1</MenuPrimitive.Item>
              <MenuPrimitive.Item onSelect={...}>Item 2</MenuPrimitive.Item>
            </MenuPrimitive.Content>
          </PopperPrimitive.Content>
        </MenuPrimitive.Portal>
      </MenuPrimitive.Root>
    </PopperPrimitive.Root>
  );
}

This module is the chef's secret ingredient for delicious interactive menus! 👨‍🍳