Command menu

"use client";

import {
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type ReactNode,
  type SyntheticEvent,
} from "react";
import "./command-menu.css";

// React 19 does not type invoker commands yet. This lets any button take them.
declare module "react" {
  interface ButtonHTMLAttributes<T> {
    command?: string;
    commandfor?: string;
  }
}

type MenuContext = {
  terms: string[];
  activeId: string | null;
  setActiveId: (id: string) => void;
  close: () => void;
};

const Menu = createContext<MenuContext | null>(null);

function textOf(node: ReactNode): string {
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(textOf).join(" ");
  if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children);
  return "";
}

export type CommandMenuProps = ComponentProps<"dialog"> & {
  /** Required. Triggers point at it with commandfor. */
  id: string;
  /** Accessible name of the dialog, the search field and the list. */
  label: string;
  placeholder?: string;
  /** Shown when no command matches the query. */
  emptyText?: string;
  /** A letter that opens and closes this menu with Cmd or Ctrl, e.g. "k". */
  hotkey?: string;
};

export function CommandMenu({
  id,
  label,
  placeholder = "Search commands",
  emptyText = "No matching commands",
  hotkey,
  className,
  children,
  onClose,
  ...rest
}: CommandMenuProps) {
  const listId = useId();
  const input = useRef<HTMLInputElement>(null);
  const list = useRef<HTMLDivElement>(null);
  const [query, setQuery] = useState("");
  const [activeId, setActiveId] = useState<string | null>(null);
  const [empty, setEmpty] = useState(false);
  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);

  const dialog = () => input.current?.closest("dialog") ?? null;

  function options() {
    return Array.from(
      list.current?.querySelectorAll<HTMLElement>('[role="option"]:not([hidden]):not([aria-disabled="true"])') ?? [],
    );
  }

  // After every filter pass: highlight the first match and note whether anything is left.
  useEffect(() => {
    const visible = list.current?.querySelectorAll('[role="option"]:not([hidden])').length ?? 0;
    setEmpty(visible === 0);
    setActiveId(options()[0]?.id ?? null);
  }, [query]);

  useEffect(() => {
    if (activeId) document.getElementById(activeId)?.scrollIntoView({ block: "nearest" });
  }, [activeId]);

  // Invoker commands fallback for engines without them.
  useEffect(() => {
    if ("command" in HTMLButtonElement.prototype) return;
    function invoke(event: MouseEvent) {
      if (!(event.target instanceof Element)) return;
      const invoker = event.target.closest("button[commandfor]");
      if (!invoker || invoker.getAttribute("commandfor") !== id) return;
      const target = dialog();
      const command = invoker.getAttribute("command");
      if (command === "show-modal" && target && !target.open) target.showModal();
      if ((command === "close" || command === "request-close") && target?.open) target.close();
    }
    document.addEventListener("click", invoke);
    return () => document.removeEventListener("click", invoke);
  }, [id]);

  useEffect(() => {
    if (!hotkey) return;
    const key = hotkey.toLowerCase();
    function toggle(event: globalThis.KeyboardEvent) {
      if (event.defaultPrevented || event.altKey || event.shiftKey) return;
      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== key) return;
      const target = dialog();
      if (!target) return;
      event.preventDefault();
      if (target.open) target.close();
      else {
        target.showModal();
        input.current?.focus();
      }
    }
    window.addEventListener("keydown", toggle);
    return () => window.removeEventListener("keydown", toggle);
  }, [hotkey]);

  function close() {
    dialog()?.close();
  }

  function handleClose(event: SyntheticEvent<HTMLDialogElement>) {
    setQuery("");
    setActiveId(options()[0]?.id ?? null);
    onClose?.(event);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.nativeEvent.isComposing) return;
    const all = options();
    const index = all.findIndex((option) => option.id === activeId);
    let next: HTMLElement | undefined;
    switch (event.key) {
      case "ArrowDown":
        next = all[index + 1] ?? all[0];
        break;
      case "ArrowUp":
        next = all[index - 1] ?? all[all.length - 1];
        break;
      case "Home":
        next = all[0];
        break;
      case "End":
        next = all[all.length - 1];
        break;
      case "Enter":
        event.preventDefault();
        event.stopPropagation();
        if (activeId) document.getElementById(activeId)?.click();
        return;
      default:
        return;
    }
    event.preventDefault();
    event.stopPropagation();
    if (next) setActiveId(next.id);
  }

  return (
    <dialog
      closedby="any"
      aria-label={label}
      {...rest}
      id={id}
      className={["eq-command-menu", className].filter(Boolean).join(" ")}
      onClose={handleClose}
      onClick={(event) => {
        rest.onClick?.(event);
        if (event.defaultPrevented || event.target !== event.currentTarget) return;
        if ("closedBy" in HTMLDialogElement.prototype) return;
        const box = event.currentTarget.getBoundingClientRect();
        const inside =
          event.clientX >= box.left &&
          event.clientX <= box.right &&
          event.clientY >= box.top &&
          event.clientY <= box.bottom;
        if (!inside) event.currentTarget.close();
      }}
    >
      <div className="eq-command-menu-search">
        <svg
          className="eq-command-menu-icon"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden="true"
        >
          <circle cx="7" cy="7" r="4.5" />
          <path d="m10.5 10.5 3 3" />
        </svg>
        <input
          ref={input}
          className="eq-command-menu-input"
          type="text"
          role="combobox"
          aria-label={label}
          aria-expanded="true"
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={activeId ?? undefined}
          autoComplete="off"
          spellCheck={false}
          placeholder={placeholder}
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          onKeyDown={handleKeyDown}
        />
      </div>
      <Menu.Provider value={{ terms, activeId, setActiveId, close }}>
        <div
          ref={list}
          id={listId}
          role="listbox"
          aria-label={label}
          className="eq-command-menu-list"
          onMouseDown={(event) => event.preventDefault()}
        >
          {children}
        </div>
      </Menu.Provider>
      <p className="eq-command-menu-empty" role="status">
        {empty ? emptyText : ""}
      </p>
    </dialog>
  );
}

export type CommandGroupProps = ComponentProps<"div"> & {
  /** Visible group name. The group is labelled by it. */
  heading: string;
};

/** Hides itself, through CSS, when none of its items match. */
export function CommandGroup({ heading, className, children, ...rest }: CommandGroupProps) {
  const headingId = useId();
  return (
    <div
      role="group"
      aria-labelledby={headingId}
      {...rest}
      className={["eq-command-menu-group", className].filter(Boolean).join(" ")}
    >
      <div id={headingId} className="eq-command-menu-heading">
        {heading}
      </div>
      {children}
    </div>
  );
}

export type CommandItemProps = Omit<ComponentProps<"div">, "onSelect"> & {
  /** Runs after the menu closes, on click or Enter. */
  onSelect: () => void;
  /** Extra words that match this item, separated by spaces. */
  keywords?: string;
  /** Displayed only. Bind the shortcut yourself. */
  shortcut?: string;
  disabled?: boolean;
};

export function CommandItem({
  onSelect,
  keywords,
  shortcut,
  disabled = false,
  className,
  children,
  ...rest
}: CommandItemProps) {
  const id = useId();
  const menu = useContext(Menu);
  const haystack = `${textOf(children)} ${keywords ?? ""}`.toLowerCase();
  const match = menu ? menu.terms.every((term) => haystack.includes(term)) : true;
  const active = menu?.activeId === id;

  return (
    <div
      role="option"
      {...rest}
      id={id}
      aria-selected={active}
      aria-disabled={disabled || undefined}
      hidden={!match}
      className={["eq-command-menu-item", className].filter(Boolean).join(" ")}
      onPointerMove={() => {
        if (!disabled && !active) menu?.setActiveId(id);
      }}
      onClick={() => {
        if (disabled) return;
        menu?.close();
        onSelect();
      }}
    >
      <span className="eq-command-menu-label">{children}</span>
      {shortcut && <kbd className="eq-command-menu-shortcut">{shortcut}</kbd>}
    </div>
  );
}