tessl/npm-rc-menu

React menu UI component library providing comprehensive menu components for interactive navigation systems

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Menu Container

Name: tessl/npm-rc-menu
Author: tessl

The Menu component serves as the main container for all menu functionality, providing comprehensive configuration for layout modes, selection behavior, keyboard navigation, animations, and event handling.

Capabilities

Menu Component

Main menu container component with extensive customization options.

/**
 * Main menu container component
 * @param props - Menu configuration props
 * @returns React component
 */
declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;

interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
  // Basic Configuration
  prefixCls?: string;
  rootClassName?: string;
  items?: any[]; // Array of item objects with key, label, children properties
  children?: React.ReactNode;
  disabled?: boolean;
  direction?: 'ltr' | 'rtl';
  
  // Layout Mode
  mode?: 'horizontal' | 'vertical' | 'inline';
  inlineCollapsed?: boolean;
  disabledOverflow?: boolean;
  
  // Selection Control
  selectable?: boolean;
  multiple?: boolean;
  defaultSelectedKeys?: string[];
  selectedKeys?: string[];
  
  // Active State Control
  activeKey?: string;
  defaultActiveFirst?: boolean;
  
  // Open/Close Control
  defaultOpenKeys?: string[];
  openKeys?: string[];
  
  // Event Handlers
  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onDeselect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onClick?: (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
  onOpenChange?: (openKeys: string[]) => void;
  
  // Styling & Animation
  inlineIndent?: number;
  motion?: any; // Animation configuration object
  defaultMotions?: any; // Default animation configurations for different modes
  
  // SubMenu Configuration
  subMenuOpenDelay?: number;
  subMenuCloseDelay?: number;
  forceSubMenuRender?: boolean;
  triggerSubMenuAction?: 'click' | 'hover';
  builtinPlacements?: Record<string, any>;
  
  // Icons
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
  overflowedIndicator?: React.ReactNode;
  overflowedIndicatorPopupClassName?: string;
  
  // Container Function
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
}

Usage Examples:

import Menu, { MenuItem, SubMenu } from "rc-menu";

// Basic vertical menu
<Menu mode="vertical" defaultSelectedKeys={['1']}>
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
</Menu>

// Horizontal menu with selection
<Menu 
  mode="horizontal" 
  selectable={true}
  multiple={true}
  onSelect={(info) => console.log('Selected:', info.selectedKeys)}
>
  <MenuItem key="1">Home</MenuItem>
  <MenuItem key="2">About</MenuItem>
  <MenuItem key="3">Contact</MenuItem>
</Menu>

// Inline menu with controlled state
const [selectedKeys, setSelectedKeys] = useState(['1']);
const [openKeys, setOpenKeys] = useState(['sub1']);

<Menu
  mode="inline"
  selectedKeys={selectedKeys}
  openKeys={openKeys}
  onSelect={(info) => setSelectedKeys(info.selectedKeys)}
  onOpenChange={setOpenKeys}
>
  <MenuItem key="1">Navigation One</MenuItem>
  <SubMenu key="sub1" title="Sub Menu">
    <MenuItem key="2">Option 1</MenuItem>
    <MenuItem key="3">Option 2</MenuItem>
  </SubMenu>
</Menu>

Menu Ref Interface

Reference interface for Menu component providing programmatic control.

/**
 * Reference interface for Menu component
 */
interface MenuRef {
  /**
   * Focus active child if any, or the first child which is not disabled
   * @param options - Focus options
   */
  focus: (options?: FocusOptions) => void;
  /** Direct access to the underlying list element */
  list: HTMLUListElement;
}

Usage Example:

import { useRef } from 'react';
import Menu, { MenuItem } from 'rc-menu';

const menuRef = useRef<MenuRef>(null);

const focusMenu = () => {
  menuRef.current?.focus();
};

<Menu ref={menuRef}>
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
</Menu>

Selection Modes

Different selection behaviors and configurations.

Single Selection (Default):

<Menu selectable={true} defaultSelectedKeys={['1']}>
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
</Menu>

Multiple Selection:

<Menu 
  selectable={true} 
  multiple={true} 
  defaultSelectedKeys={['1', '3']}
  onSelect={(info) => console.log('Selected:', info.selectedKeys)}
  onDeselect={(info) => console.log('Deselected:', info.selectedKeys)}
>
  <MenuItem key="1">Option 1</MenuItem>
  <MenuItem key="2">Option 2</MenuItem>
  <MenuItem key="3">Option 3</MenuItem>
</Menu>

Non-selectable Menu:

<Menu selectable={false} onClick={(info) => console.log('Clicked:', info.key)}>
  <MenuItem key="1">Action 1</MenuItem>
  <MenuItem key="2">Action 2</MenuItem>
</Menu>

Animation Configuration

Configure animations for different menu modes and transitions.

const customMotions = {
  inline: {
    motionName: 'rc-menu-collapse',
    onAppearStart: () => ({ height: 0 }),
    onAppearActive: () => ({ height: 'auto' }),
    onLeaveStart: () => ({ height: 'auto' }),
    onLeaveActive: () => ({ height: 0 }),
  },
  vertical: {
    motionName: 'slide-up',
  },
  horizontal: {
    motionName: 'zoom-big',
  },
};

<Menu mode="inline" defaultMotions={customMotions}>
  <SubMenu key="sub1" title="Animated SubMenu">
    <MenuItem key="1">Option 1</MenuItem>
    <MenuItem key="2">Option 2</MenuItem>
  </SubMenu>
</Menu>

Event Handling

Comprehensive event handling for different interaction patterns.

const handleClick = (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
  console.log('Clicked item:', info.key);
  console.log('Key path:', info.keyPath);
  console.log('DOM event:', info.domEvent);
};

const handleSelect = (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
  console.log('Selected item:', info.key);
  console.log('All selected keys:', info.selectedKeys);
};

const handleOpenChange = (openKeys: string[]) => {
  console.log('Open submenus:', openKeys);
};

<Menu
  onClick={handleClick}
  onSelect={handleSelect}
  onOpenChange={handleOpenChange}
>
  {/* Menu items */}
</Menu>

Install with Tessl CLI