'use client'; import { AnimatePresence, motion } from 'framer-motion'; import { useEffect, useState, useRef, useMemo } from 'react'; import { createPortal } from 'react-dom'; import { cn } from '@/lib/utils'; // Icon components const SearchIcon = () => ( ); const ChevronRightIcon = () => ( ); const KeyIcon = ({ children }: { children: string }) => ( {children} ); // Example icons for demo const FileIcon = () => ( ); const SettingsIcon = () => ( ); const UserIcon = () => ( ); const ThemeIcon = () => ( ); // Types export interface CommandAction { id: string; label: string; description?: string; icon?: React.ReactNode; keywords?: string[]; shortcut?: string[]; category?: string; onSelect: () => void; } export interface CommandCategory { id: string; label: string; priority?: number; } interface CommandMenu01Props { actions?: CommandAction[]; categories?: CommandCategory[]; placeholder?: string; emptyMessage?: string; className?: string; open?: boolean; onOpenChange?: (open: boolean) => void; } // Fuzzy search algorithm function fuzzyMatch(text: string, search: string): { matches: boolean; score: number } { const searchLower = search.toLowerCase(); const textLower = text.toLowerCase(); if (textLower.includes(searchLower)) { return { matches: true, score: 100 }; } let searchIndex = 0; let score = 0; let consecutiveMatches = 0; for (let i = 0; i < textLower.length && searchIndex < searchLower.length; i++) { if (textLower[i] === searchLower[searchIndex]) { score += 1 + consecutiveMatches * 5; consecutiveMatches++; searchIndex++; } else { consecutiveMatches = 0; } } const matches = searchIndex === searchLower.length; return { matches, score }; } export function CommandMenu01({ actions = [], categories = [], placeholder = 'Type a command or search...', emptyMessage = 'No results found.', className, open: controlledOpen, onOpenChange, }: CommandMenu01Props) { const [internalOpen, setInternalOpen] = useState(false); const [search, setSearch] = useState(''); const [selectedIndex, setSelectedIndex] = useState(0); const [mounted, setMounted] = useState(false); const inputRef = useRef(null); const listRef = useRef(null); // Controlled vs uncontrolled state const isControlled = controlledOpen !== undefined; const isOpen = isControlled ? controlledOpen : internalOpen; const setIsOpen = (open: boolean) => { if (isControlled) { onOpenChange?.(open); } else { setInternalOpen(open); } }; // Filter and sort actions based on search const filteredActions = useMemo(() => { if (!search.trim()) { return actions; } const searchTerm = search.trim(); const scored = actions .map((action) => { const labelMatch = fuzzyMatch(action.label, searchTerm); const descMatch = action.description ? fuzzyMatch(action.description, searchTerm) : { matches: false, score: 0 }; const keywordMatch = action.keywords?.some((kw) => fuzzyMatch(kw, searchTerm).matches) ? { matches: true, score: 50 } : { matches: false, score: 0 }; const matches = labelMatch.matches || descMatch.matches || keywordMatch.matches; const score = Math.max(labelMatch.score, descMatch.score, keywordMatch.score); return { action, matches, score }; }) .filter((item) => item.matches) .sort((a, b) => b.score - a.score); return scored.map((item) => item.action); }, [actions, search]); // Group actions by category const groupedActions = useMemo(() => { const groups = new Map(); filteredActions.forEach((action) => { const category = action.category || 'Other'; if (!groups.has(category)) { groups.set(category, []); } groups.get(category)!.push(action); }); // Sort categories by priority const sortedCategories = Array.from(groups.keys()).sort((a, b) => { const catA = categories.find((c) => c.id === a); const catB = categories.find((c) => c.id === b); const priorityA = catA?.priority ?? 999; const priorityB = catB?.priority ?? 999; return priorityA - priorityB; }); return sortedCategories.map((categoryId) => ({ categoryId, categoryLabel: categories.find((c) => c.id === categoryId)?.label || categoryId, actions: groups.get(categoryId)!, })); }, [filteredActions, categories]); // Get flat list of filtered actions for keyboard navigation const flatActions = useMemo(() => filteredActions, [filteredActions]); // Reset selected index when filtered actions change useEffect(() => { setSelectedIndex(0); }, [filteredActions]); // Keyboard navigation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (!isOpen) { // Global shortcut to open ⌘K / Ctrl+K if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setIsOpen(true); } return; } switch (e.key) { case 'Escape': e.preventDefault(); setIsOpen(false); setSearch(''); break; case 'ArrowDown': e.preventDefault(); setSelectedIndex((prev) => prev < flatActions.length - 1 ? prev + 1 : prev ); break; case 'ArrowUp': e.preventDefault(); setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev)); break; case 'Enter': e.preventDefault(); if (flatActions[selectedIndex]) { flatActions[selectedIndex].onSelect(); setIsOpen(false); setSearch(''); } break; case 'Tab': e.preventDefault(); break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [isOpen, flatActions, selectedIndex, setIsOpen]); // Focus management useEffect(() => { if (isOpen && inputRef.current) { // Small delay to ensure portal is mounted requestAnimationFrame(() => { inputRef.current?.focus(); }); } }, [isOpen]); // Scroll selected item into view useEffect(() => { if (!listRef.current) return; const selectedElement = listRef.current.querySelector( `[data-index="${selectedIndex}"]` ); if (selectedElement) { selectedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth', }); } }, [selectedIndex]); // Mount check for portal useEffect(() => { setMounted(true); }, []); if (!mounted) return null; const commandMenu = ( {isOpen && ( <> {/* Backdrop */} { setIsOpen(false); setSearch(''); }} /> {/* Command Menu */}

e.stopPropagation()} > {/* Search Input */}

setSearch(e.target.value)} placeholder={placeholder} className="flex-1 bg-transparent text-[14px] text-black placeholder:text-gray-500 outline-none" spellCheck={false} autoComplete="off" aria-label="Search commands" /> esc

{/* Results */} {/* Footer */}

↑ ↓ Navigate

↵ Select

⌘K to open

)} ); return createPortal(commandMenu, document.body); } // Demo wrapper component with example actions (default export for the component library) function CommandMenuDemo() { const [isOpen, setIsOpen] = useState(false); const [notifications, setNotifications] = useState([]); const addNotification = (message: string) => { setNotifications((prev) => [...prev, message]); setTimeout(() => { setNotifications((prev) => prev.slice(1)); }, 3000); }; const exampleCategories: CommandCategory[] = [ { id: 'file', label: 'File', priority: 1 }, { id: 'edit', label: 'Edit', priority: 2 }, { id: 'view', label: 'View', priority: 3 }, { id: 'settings', label: 'Settings', priority: 4 }, ]; const exampleActions: CommandAction[] = [ { id: 'new-file', label: 'New File', description: 'Create a new file', icon: , keywords: ['create', 'add', 'file'], shortcut: ['⌘', 'N'], category: 'file', onSelect: () => addNotification('Created new file'), }, { id: 'open-file', label: 'Open File', description: 'Open an existing file', icon: , keywords: ['open', 'load'], shortcut: ['⌘', 'O'], category: 'file', onSelect: () => addNotification('Opening file picker'), }, { id: 'save', label: 'Save', description: 'Save current file', icon: , keywords: ['save', 'write'], shortcut: ['⌘', 'S'], category: 'file', onSelect: () => addNotification('File saved'), }, { id: 'find', label: 'Find in File', description: 'Search within the current file', icon: , keywords: ['search', 'find'], shortcut: ['⌘', 'F'], category: 'edit', onSelect: () => addNotification('Opening search'), }, { id: 'replace', label: 'Find and Replace', description: 'Search and replace text', icon: , keywords: ['replace', 'substitute'], shortcut: ['⌘', 'H'], category: 'edit', onSelect: () => addNotification('Opening find and replace'), }, { id: 'toggle-sidebar', label: 'Toggle Sidebar', description: 'Show or hide the sidebar', icon: , keywords: ['sidebar', 'panel'], shortcut: ['⌘', 'B'], category: 'view', onSelect: () => addNotification('Toggled sidebar'), }, { id: 'toggle-theme', label: 'Toggle Theme', description: 'Switch between light and dark mode', icon: , keywords: ['theme', 'dark', 'light', 'mode'], category: 'view', onSelect: () => addNotification('Theme changed'), }, { id: 'preferences', label: 'Preferences', description: 'Open settings', icon: , keywords: ['settings', 'config', 'options'], shortcut: ['⌘', ','], category: 'settings', onSelect: () => addNotification('Opening preferences'), }, { id: 'profile', label: 'Edit Profile', description: 'Update your profile information', icon: , keywords: ['user', 'account', 'profile'], category: 'settings', onSelect: () => addNotification('Opening profile settings'), }, ]; return (

{/* Clickable cmnd K */} setIsOpen(true)} whileTap={{ scale: 0.96 }} className="flex items-center gap-2 cursor-pointer group" > cmnd K {/* Notifications */}

{notifications.map((notification, index) => (

{notification}

))}

); } // Export the demo as default for the component library showcase export default CommandMenuDemo;

Command Menu

Tech

Category