"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface CommandDialogItem {
  id: string;
  label: string;
  description?: string;
  shortcut?: string;
  onSelect?: () => void;
}

export interface CommandDialogSection {
  id: string;
  title: string;
  items: CommandDialogItem[];
}

export interface CommandDialogProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  description?: string;
  placeholder?: string;
  sections?: CommandDialogSection[];
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  triggerLabel?: string;
  trigger?: React.ReactNode;
}

const defaultSections: CommandDialogSection[] = [
  {
    id: "workspace",
    title: "Workspace",
    items: [
      { id: "overview", label: "Open overview", description: "View workspace activity" },
      { id: "reports", label: "Run reports", description: "Generate weekly insights" },
      { id: "people", label: "Invite teammates", description: "Share access" },
    ],
  },
  {
    id: "actions",
    title: "Quick actions",
    items: [
      { id: "note", label: "Create a note", description: "Capture a new idea", shortcut: "N" },
      { id: "task", label: "Add a task", description: "Plan the next step", shortcut: "T" },
      { id: "search", label: "Search files", description: "Find anything", shortcut: "S" },
    ],
  },
];

export function CommandDialog({
  title = "Command palette",
  description = "Search or jump to a workspace action",
  placeholder = "Search commands",
  sections = defaultSections,
  open,
  defaultOpen = false,
  onOpenChange,
  triggerLabel = "Open command dialog",
  trigger,
  className,
  children,
  ...props
}: CommandDialogProps) {
  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
  const [query, setQuery] = React.useState("");
  const [activeId, setActiveId] = React.useState<string | null>(null);
  const isControlled = open !== undefined;
  const isOpen = isControlled ? open : internalOpen;

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

  React.useEffect(() => {
    if (!isOpen) {
      return;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, setOpen]);

  React.useEffect(() => {
    if (!isOpen) {
      return;
    }

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [isOpen]);

  React.useEffect(() => {
    if (isOpen) {
      setQuery("");
    }
  }, [isOpen]);

  const filteredSections = React.useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) {
      return sections;
    }

    return sections
      .map((section) => ({
        ...section,
        items: section.items.filter((item) => {
          const label = item.label.toLowerCase();
          const description = item.description?.toLowerCase() ?? "";
          return label.includes(normalized) || description.includes(normalized);
        }),
      }))
      .filter((section) => section.items.length > 0);
  }, [query, sections]);

  const flatItems = React.useMemo(() => {
    return filteredSections.flatMap((section) => section.items);
  }, [filteredSections]);

  React.useEffect(() => {
    if (flatItems.length === 0) {
      setActiveId(null);
      return;
    }

    setActiveId(flatItems[0]?.id ?? null);
  }, [flatItems]);

  const handleSelect = (item: CommandDialogItem) => {
    item.onSelect?.();
    setOpen(false);
  };

  const handleKeyNavigation = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (flatItems.length === 0) {
      return;
    }

    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      event.preventDefault();
      const currentIndex = flatItems.findIndex((item) => item.id === activeId);
      const delta = event.key === "ArrowDown" ? 1 : -1;
      const nextIndex = (currentIndex + delta + flatItems.length) % flatItems.length;
      setActiveId(flatItems[nextIndex]?.id ?? null);
    }

    if (event.key === "Enter") {
      const activeItem = flatItems.find((item) => item.id === activeId);
      if (activeItem) {
        event.preventDefault();
        handleSelect(activeItem);
      }
    }
  };

  const triggerElement = React.useMemo(() => {
    if (trigger) {
      if (React.isValidElement(trigger)) {
        const triggerElement = trigger as React.ReactElement<{
          onClick?: React.MouseEventHandler;
        }>;
        const existingOnClick = triggerElement.props.onClick;

        return React.cloneElement(triggerElement, {
          onClick: (event: React.MouseEvent) => {
            existingOnClick?.(event);
            setOpen(true);
          },
        });
      }

      return (
        <button
          type="button"
          onClick={() => setOpen(true)}
          className={cn(
            "inline-flex items-center gap-2 rounded-md border border-border",
            "bg-background px-4 py-2 text-sm font-medium text-foreground",
            "transition-colors hover:bg-muted",
            "focus-visible:ring-2 focus-visible:ring-ring"
          )}
        >
          {trigger}
        </button>
      );
    }

    if (!triggerLabel) {
      return null;
    }

    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border",
          "bg-background px-4 py-2 text-sm font-medium text-foreground",
          "transition-colors hover:bg-muted",
          "focus-visible:ring-2 focus-visible:ring-ring"
        )}
      >
        {triggerLabel}
      </button>
    );
  }, [trigger, triggerLabel, setOpen]);

  return (
    <div className={cn("inline-flex", className)} {...props}>
      {triggerElement}

      <div
        className={cn(
          "fixed inset-0 z-50 transition",
          isOpen ? "pointer-events-auto" : "pointer-events-none"
        )}
        aria-hidden={!isOpen}
      >
        <div
          className={cn(
            "absolute inset-0 bg-background opacity-80 backdrop-blur-sm transition-opacity",
            isOpen ? "opacity-100" : "opacity-0"
          )}
          onClick={() => setOpen(false)}
        />

        <div className="absolute inset-0 flex items-start justify-center px-4 py-12">
          <div
            role="dialog"
            aria-modal="true"
            className={cn(
              "w-full max-w-2xl overflow-hidden rounded-2xl border border-border bg-card shadow-lg",
              "transition-transform duration-200"
            )}
          >
            <div className="flex items-start justify-between border-b border-border px-6 py-4">
              <div className="space-y-1">
                <h2 className="text-base font-semibold text-foreground">{title}</h2>
                {description ? (
                  <p className="text-sm text-muted-foreground">{description}</p>
                ) : null}
              </div>
              <button
                type="button"
                onClick={() => setOpen(false)}
                className={cn(
                  "inline-flex h-8 w-8 items-center justify-center rounded-full border border-border",
                  "bg-background text-muted-foreground transition-colors",
                  "hover:bg-muted hover:text-foreground",
                  "focus-visible:ring-2 focus-visible:ring-ring"
                )}
              >
                <CloseIcon className="h-4 w-4" />
              </button>
            </div>

            <div className="border-b border-border px-6 py-4">
              <div
                className={cn(
                  "flex items-center gap-3 rounded-md border border-border",
                  "bg-background px-3 py-2"
                )}
              >
                <SearchIcon className="h-4 w-4 text-muted-foreground" />
                <input
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  onKeyDown={handleKeyNavigation}
                  placeholder={placeholder}
                  className={cn(
                    "w-full bg-transparent text-sm text-foreground outline-none",
                    "placeholder:text-muted-foreground"
                  )}
                  autoFocus
                />
              </div>
            </div>

            <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
              {filteredSections.length === 0 ? (
                <div className="py-6 text-center text-sm text-muted-foreground">
                  No results found.
                </div>
              ) : (
                <div className="space-y-6">
                  {filteredSections.map((section) => (
                    <div key={section.id} className="space-y-2">
                      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                        {section.title}
                      </p>
                      <div className="space-y-2">
                        {section.items.map((item) => (
                          <button
                            key={item.id}
                            type="button"
                            onClick={() => handleSelect(item)}
                            className={cn(
                              "flex w-full items-center justify-between gap-4 rounded-md border border-border px-3 py-2 text-left",
                              "transition-colors hover:bg-muted",
                              activeId === item.id ? "bg-muted" : "bg-background",
                              "focus-visible:ring-2 focus-visible:ring-ring"
                            )}
                          >
                            <div>
                              <p className="text-sm font-medium text-foreground">{item.label}</p>
                              {item.description ? (
                                <p className="text-xs text-muted-foreground">{item.description}</p>
                              ) : null}
                            </div>
                            {item.shortcut ? (
                              <span className="rounded-md border border-border bg-background px-2 py-1 text-xs text-muted-foreground">
                                {item.shortcut}
                              </span>
                            ) : null}
                          </button>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {children ? <div className="border-t border-border px-6 py-4">{children}</div> : null}
          </div>
        </div>
      </div>
    </div>
  );
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="m21 21-4.35-4.35" />
    </svg>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  );
}
Command Dialog

Dependencies

Files

Installation
