Context menu

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type RefObject,
} from "react";
import "./context-menu.css";

type Point = { x: number; y: number };

type ContextMenuContext = {
  point: Point | null;
  label: string;
  menuRef: RefObject<HTMLDivElement | null>;
  close: (returnFocus: boolean) => void;
};

const Context = createContext<ContextMenuContext>({
  point: null,
  label: "",
  menuRef: { current: null },
  close: () => {},
});

const LONG_PRESS = 500;
const SLOP = 10;
const EDGE = 8;

export type ContextMenuProps = ComponentProps<"div"> & {
  /** Names the menu for assistive tech, e.g. "File actions". */
  label: string;
};

export function ContextMenu({
  label,
  className,
  children,
  onContextMenu,
  onPointerDown,
  onPointerMove,
  onPointerUp,
  onPointerCancel,
  onClickCapture,
  onKeyDown,
  ...rest
}: ContextMenuProps) {
  const menuRef = useRef<HTMLDivElement>(null);
  const [point, setPoint] = useState<Point | null>(null);
  const returnTo = useRef<HTMLElement | null>(null);
  const press = useRef<{ timer: number; x: number; y: number } | null>(null);
  // After a long press or a key opens the menu, the browser may send its own contextmenu
  // event (Android, Shift+F10) and a click; both are swallowed until this time.
  const quietUntil = useRef(0);
  const swallowClick = useRef(false);

  function inMenu(target: EventTarget | null) {
    return target instanceof Node && !!menuRef.current?.contains(target);
  }

  function open(at: Point) {
    const active = document.activeElement;
    if (active instanceof HTMLElement && active !== document.body && !inMenu(active)) returnTo.current = active;
    else if (!inMenu(active)) returnTo.current = null;
    setPoint(at);
  }

  function close(returnFocus: boolean) {
    setPoint(null);
    swallowClick.current = false;
    const target = returnTo.current;
    if (returnFocus && target?.isConnected) target.focus({ preventScroll: true });
  }

  function cancelPress() {
    if (press.current) window.clearTimeout(press.current.timer);
    press.current = null;
  }

  useEffect(() => cancelPress, []);

  useEffect(() => {
    if (!point) return;
    function onOutside(event: globalThis.PointerEvent) {
      if (!inMenu(event.target)) close(false);
    }
    function onScroll(event: Event) {
      if (!inMenu(event.target)) close(false);
    }
    function onDismiss() {
      close(false);
    }
    document.addEventListener("pointerdown", onOutside, true);
    window.addEventListener("scroll", onScroll, true);
    window.addEventListener("resize", onDismiss);
    window.addEventListener("blur", onDismiss);
    return () => {
      document.removeEventListener("pointerdown", onOutside, true);
      window.removeEventListener("scroll", onScroll, true);
      window.removeEventListener("resize", onDismiss);
      window.removeEventListener("blur", onDismiss);
    };
  }, [point]);

  function handleContextMenu(event: MouseEvent<HTMLDivElement>) {
    onContextMenu?.(event);
    if (event.defaultPrevented && !inMenu(event.target)) return;
    event.preventDefault();
    if (inMenu(event.target) || event.timeStamp < quietUntil.current) return;
    cancelPress();
    open({ x: event.clientX, y: event.clientY });
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    onPointerDown?.(event);
    swallowClick.current = false;
    if (event.pointerType === "mouse" || inMenu(event.target) || !event.isPrimary) return;
    cancelPress();
    const x = event.clientX;
    const y = event.clientY;
    const timer = window.setTimeout(() => {
      press.current = null;
      quietUntil.current = performance.now() + 800;
      swallowClick.current = true;
      open({ x, y });
    }, LONG_PRESS);
    press.current = { timer, x, y };
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    onPointerMove?.(event);
    const start = press.current;
    if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) cancelPress();
  }

  function handleClickCapture(event: MouseEvent<HTMLDivElement>) {
    onClickCapture?.(event);
    if (!swallowClick.current || inMenu(event.target)) return;
    swallowClick.current = false;
    event.preventDefault();
    event.stopPropagation();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || inMenu(event.target)) return;
    if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
    event.preventDefault();
    const target = event.target instanceof Element ? event.target : event.currentTarget;
    const box = target.getBoundingClientRect();
    quietUntil.current = event.timeStamp + 800;
    open({ x: box.left + Math.min(box.width / 2, 24), y: box.bottom });
  }

  return (
    <div
      {...rest}
      className={["eq-context-menu", className].filter(Boolean).join(" ")}
      onContextMenu={handleContextMenu}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={(event) => {
        onPointerUp?.(event);
        cancelPress();
      }}
      onPointerCancel={(event) => {
        onPointerCancel?.(event);
        cancelPress();
      }}
      onClickCapture={handleClickCapture}
      onKeyDown={handleKeyDown}
    >
      <Context.Provider value={{ point, label, menuRef, close }}>{children}</Context.Provider>
    </div>
  );
}

function items(menu: HTMLElement | null) {
  return Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []);
}

export function ContextMenuContent({
  className,
  children,
  onKeyDown,
  onClick,
  onPointerDown,
  onContextMenu,
  ...rest
}: ComponentProps<"div">) {
  const { point, label, menuRef, close } = useContext(Context);

  useLayoutEffect(() => {
    const menu = menuRef.current;
    if (!menu) return;
    const showing = menu.matches(":popover-open");
    if (!point) {
      if (showing) menu.hidePopover();
      return;
    }
    if (!showing) menu.showPopover();
    // Opens down and right of the pointer, and flips to the other side of it near an edge.
    const width = menu.offsetWidth;
    const height = menu.offsetHeight;
    const viewWidth = document.documentElement.clientWidth;
    const viewHeight = document.documentElement.clientHeight;
    const flipX = point.x + width > viewWidth - EDGE;
    const flipY = point.y + height > viewHeight - EDGE;
    const left = flipX ? point.x - width : point.x;
    const top = flipY ? point.y - height : point.y;
    menu.style.left = `${Math.max(EDGE, Math.min(left, viewWidth - width - EDGE))}px`;
    menu.style.top = `${Math.max(EDGE, Math.min(top, viewHeight - height - EDGE))}px`;
    menu.dataset.side = flipY ? "top" : "bottom";
    menu.style.transformOrigin = `${flipX ? "right" : "left"} ${flipY ? "bottom" : "top"}`;
    items(menu)[0]?.focus({ preventScroll: true });
  }, [point, menuRef]);

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const all = items(menuRef.current);
    const current = all.findIndex((item) => item === document.activeElement);
    let next: number | undefined;

    switch (event.key) {
      case "ArrowDown":
        next = current < 0 ? 0 : (current + 1) % all.length;
        break;
      case "ArrowUp":
        next = current < 0 ? all.length - 1 : (current - 1 + all.length) % all.length;
        break;
      case "Home":
        next = 0;
        break;
      case "End":
        next = all.length - 1;
        break;
      case "Escape":
        event.preventDefault();
        close(true);
        return;
      case "Tab":
        event.preventDefault();
        close(true);
        return;
      case "ContextMenu":
      case "F10":
        event.preventDefault();
        return;
      default: {
        if (event.key.length !== 1 || event.key === " ") return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const letter = event.key.toLowerCase();
        for (let step = 1; step <= all.length; step++) {
          const index = (current + step + all.length) % all.length;
          const text = all[index].querySelector(".eq-context-menu-item-label")?.textContent ?? "";
          if (text.trim().toLowerCase().startsWith(letter)) {
            next = index;
            break;
          }
        }
      }
    }

    if (next === undefined || all.length === 0) return;
    event.preventDefault();
    all[next]?.focus();
  }

  // The menu is a React child of the region, so its events would reach the region's handlers.
  return (
    <div
      {...rest}
      ref={menuRef}
      popover="manual"
      role="menu"
      aria-label={label}
      className={["eq-context-menu-content", className].filter(Boolean).join(" ")}
      onKeyDown={(event) => {
        handleKeyDown(event);
        event.stopPropagation();
      }}
      onClick={(event) => {
        onClick?.(event);
        event.stopPropagation();
      }}
      onPointerDown={(event) => {
        onPointerDown?.(event);
        event.stopPropagation();
      }}
      onContextMenu={(event) => {
        onContextMenu?.(event);
        event.preventDefault();
        event.stopPropagation();
      }}
    >
      {children}
    </div>
  );
}

export type ContextMenuItemProps = Omit<ComponentProps<"button">, "onSelect"> & {
  /** Runs when the item is chosen by click, Enter or Space. The menu then closes. */
  onSelect?: () => void;
  /** A shortcut hint shown at the end of the row, e.g. "⌘⌫". Display only. */
  shortcut?: string;
  /** danger colours the row for a destructive action. */
  tone?: "danger";
};

export function ContextMenuItem({
  onSelect,
  shortcut,
  tone,
  disabled,
  className,
  children,
  onClick,
  onPointerMove,
  ...rest
}: ContextMenuItemProps) {
  const { close } = useContext(Context);
  return (
    <button
      type="button"
      {...rest}
      role="menuitem"
      tabIndex={-1}
      aria-disabled={disabled || undefined}
      className={["eq-context-menu-item", className].filter(Boolean).join(" ")}
      data-tone={tone}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (document.activeElement !== event.currentTarget) event.currentTarget.focus({ preventScroll: true });
      }}
      onClick={(event) => {
        if (disabled) return;
        onClick?.(event);
        if (event.defaultPrevented) return;
        onSelect?.();
        close(true);
      }}
    >
      <span className="eq-context-menu-item-label">{children}</span>
      {shortcut && <kbd className="eq-context-menu-shortcut">{shortcut}</kbd>}
    </button>
  );
}

export function ContextMenuSeparator({ className, ...rest }: ComponentProps<"div">) {
  return (
    <div
      role="separator"
      {...rest}
      className={["eq-context-menu-separator", className].filter(Boolean).join(" ")}
    />
  );
}