Command Palette

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import * as React from "react";
5import { createPortal } from "react-dom";
6 
7export type CommandItem = {
8  /** Stable id. */
9  id: string;
10  /** Visible label. */
11  label: string;
12  /** Optional leading icon. */
13  icon?: React.ReactNode;
14  /** Optional shortcut hint rendered on the right (e.g. "⌘P"). */
15  shortcut?: string;
16  /** Extra terms to match against when filtering. */
17  keywords?: string[];
18  /** Invoked when the item is chosen. */
19  onSelect?: () => void;
20};
21 
22export type CommandGroup = {
23  /** Optional group heading. */
24  heading?: string;
25  items: CommandItem[];
26};
27 
28export type CommandPaletteProps = {
29  /** Controlled open state. */
30  open: boolean;
31  /** Called when the palette opens or closes. */
32  onOpenChange: (open: boolean) => void;
33  /** Grouped commands to show. */
34  groups: CommandGroup[];
35  /** Input placeholder. */
36  placeholder?: string;
37  /** Toggle the palette with ⌘K / Ctrl+K. */
38  enableShortcut?: boolean;
39};
40 
41function matches(item: CommandItem, query: string) {
42  if (!query) return true;
43  const q = query.toLowerCase();
44  return (
45    item.label.toLowerCase().includes(q) ||
46    item.keywords?.some((k) => k.toLowerCase().includes(q)) === true
47  );
48}
49 
50function useMounted() {
51  const [mounted, setMounted] = React.useState(false);
52  React.useEffect(() => setMounted(true), []);
53  return mounted;
54}
55 
56const CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(
57  (
58    {
59      open,
60      onOpenChange,
61      groups,
62      placeholder = "Type a command or search…",
63      enableShortcut = true,
64    },
65    ref,
66  ) => {
67    const mounted = useMounted();
68    const inputRef = React.useRef<HTMLInputElement>(null);
69    const [query, setQuery] = React.useState("");
70    const [activeIndex, setActiveIndex] = React.useState(0);
71 
72    const filteredGroups = React.useMemo(
73      () =>
74        groups
75          .map((g) => ({
76            ...g,
77            items: g.items.filter((i) => matches(i, query)),
78          }))
79          .filter((g) => g.items.length > 0),
80      [groups, query],
81    );
82    const flat = React.useMemo(
83      () => filteredGroups.flatMap((g) => g.items),
84      [filteredGroups],
85    );
86 
87    React.useEffect(() => {
88      if (open) {
89        setQuery("");
90        setActiveIndex(0);
91        const id = requestAnimationFrame(() => inputRef.current?.focus());
92        const prevOverflow = document.body.style.overflow;
93// … truncated