"use client";

import * as React from "react";
import { AnimatePresence, motion, type Variants } from "framer-motion";
import { cn } from "@/lib/utils";

export interface CommandMenuItem {
  id: string;
  label: string;
  value?: string;
  shortcut?: string[];
  group?: string;
  description?: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

export interface CommandMenuProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
  items: CommandMenuItem[];
  placeholder?: string;
  emptyText?: string;
  triggerLabel?: string;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  onSelect?: (item: CommandMenuItem) => void;
}

const dialogEase: [number, number, number, number] = [0.4, 0, 0.2, 1];

const dialogVariants: Variants = {
  hidden: { opacity: 0, scale: 0.96, y: 12 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: { duration: 0.2, ease: dialogEase },
  },
  exit: {
    opacity: 0,
    scale: 0.98,
    y: 10,
    transition: { duration: 0.15, ease: dialogEase },
  },
};

function CommandMenu({
  items,
  placeholder = "Search commands...",
  emptyText = "No results found",
  triggerLabel = "Command Menu",
  open,
  onOpenChange,
  onSelect,
  className,
  ...props
}: CommandMenuProps) {

  const [internalOpen, setInternalOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [activeIndex, setActiveIndex] = React.useState(0);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const isOpen = open ?? internalOpen;

  const setOpen = React.useCallback(
    (value: boolean) => {
      if (open === undefined) {
        setInternalOpen(value);
      }
      onOpenChange?.(value);
    },
    [open, onOpenChange]
  );

  React.useEffect(() => {
    if (!isOpen) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        setOpen(false);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, setOpen]);

  React.useEffect(() => {
    const handleShortcut = (event: KeyboardEvent) => {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setOpen(!isOpen);
      }
    };
    document.addEventListener("keydown", handleShortcut);
    return () => document.removeEventListener("keydown", handleShortcut);
  }, [isOpen, setOpen]);

  React.useEffect(() => {
    if (isOpen) {
      setQuery("");
      setActiveIndex(0);
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [isOpen]);

  const filteredItems = React.useMemo(() => {
    const search = query.trim().toLowerCase();
    if (!search) return items;
    return items.filter((item) => {
      const target = `${item.label} ${item.value ?? ""} ${item.description ?? ""}`
        .toLowerCase()
        .trim();
      return target.includes(search);
    });
  }, [items, query]);

  const groupedItems = React.useMemo(() => {
    return filteredItems.reduce<Record<string, CommandMenuItem[]>>(
      (acc, item) => {
        const group = item.group ?? "Commands";
        if (!acc[group]) acc[group] = [];
        acc[group].push(item);
        return acc;
      },
      {}
    );
  }, [filteredItems]);

  const flatItems = React.useMemo(() => {
    return Object.values(groupedItems).flat();
  }, [groupedItems]);

  React.useEffect(() => {
    if (activeIndex >= flatItems.length) {
      setActiveIndex(0);
    }
  }, [activeIndex, flatItems.length]);

  const handleSelect = (item: CommandMenuItem) => {
    if (item.disabled) return;
    onSelect?.(item);
    setOpen(false);
  };

  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (!flatItems.length) return;
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActiveIndex((prev) => (prev + 1) % flatItems.length);
    }
    if (event.key === "ArrowUp") {
      event.preventDefault();
      setActiveIndex((prev) => (prev - 1 + flatItems.length) % flatItems.length);
    }
    if (event.key === "Enter") {
      event.preventDefault();
      const selected = flatItems[activeIndex];
      if (selected) handleSelect(selected);
    }
  };

  let renderIndex = -1;

  return (
    <div className={cn("inline-flex", className)} {...props}>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm transition hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
      >
        {triggerLabel}
        <span className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
          ⌘K
        </span>
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div
              role="dialog"
              aria-modal="true"
              className="w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-card shadow-lg"
              variants={dialogVariants}
              initial="hidden"
              animate="visible"
              exit="exit"
            >
              <div className="border-b border-border px-4 py-3">
                <input
                  ref={inputRef}
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  onKeyDown={handleInputKeyDown}
                  placeholder={placeholder}
                  className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
                />
              </div>
              <div className="max-h-80 overflow-y-auto p-2">
                {flatItems.length === 0 ? (
                  <div className="px-3 py-6 text-center text-sm text-muted-foreground">
                    {emptyText}
                  </div>
                ) : (
                  Object.entries(groupedItems).map(([group, groupItems]) => (
                    <div key={group} className="mb-3 last:mb-0">
                      <div className="px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                        {group}
                      </div>
                      <div className="space-y-1">
                        {groupItems.map((item) => {
                          renderIndex += 1;
                          const isActive = renderIndex === activeIndex;
                          return (
                            <button
                              key={item.id}
                              type="button"
                              disabled={item.disabled}
                              onMouseEnter={() => setActiveIndex(renderIndex)}
                              onClick={() => handleSelect(item)}
                              className={cn(
                                "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                                isActive
                                  ? "bg-accent/20 text-foreground"
                                  : "text-foreground hover:bg-accent/10",
                                item.disabled &&
                                  "cursor-not-allowed opacity-50 hover:bg-transparent"
                              )}
                            >
                              {item.icon && (
                                <span className="flex h-8 w-8 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
                                  {item.icon}
                                </span>
                              )}
                              <span className="flex flex-1 flex-col">
                                <span className="font-medium">{item.label}</span>
                                {item.description && (
                                  <span className="text-xs text-muted-foreground">
                                    {item.description}
                                  </span>
                                )}
                              </span>
                              {item.shortcut && item.shortcut.length > 0 && (
                                <span className="flex gap-1">
                                  {item.shortcut.map((key, idx) => (
                                    <kbd key={idx} className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
                                      {key}
                                    </kbd>
                                  ))}
                                </span>
                              )}
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export { CommandMenu };
Command Menu

Dependencies

Files

Installation
