Menubar

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useId,
  useLayoutEffect,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type PointerEvent,
  type ReactNode,
} from "react";
import "./menubar.css";

type Focus = "first" | "last" | "none";

type MenubarContext = {
  open: string | null;
  tabStop: string | null;
  openMenu: (id: string, focus: Focus) => void;
  close: (returnFocus: boolean) => void;
  step: (id: string, delta: number) => void;
};

const Context = createContext<MenubarContext>({
  open: null,
  tabStop: null,
  openMenu: () => {},
  close: () => {},
  step: () => {},
});

const CloseMenu = createContext<() => void>(() => {});

/* Must match the @supports condition in menubar.css exactly. */
const ANCHOR_SUPPORT =
  "(anchor-name: --a) and (position-area: block-end) and (position-try-fallbacks: flip-block)";

function itemsIn(list: Element | null | undefined) {
  return Array.from(list?.querySelectorAll<HTMLElement>('[role="menuitem"], [role="menuitemcheckbox"]') ?? []);
}

function startsWith(node: Element, selector: string, letter: string) {
  return (node.querySelector(selector)?.textContent ?? node.textContent ?? "").trim().toLowerCase().startsWith(letter);
}

export type MenubarProps = ComponentProps<"div">;

export function Menubar({ className, children, onKeyDown, onBlur, ...rest }: MenubarProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState<string | null>(null);
  const [tabStop, setTabStop] = useState<string | null>(null);
  const focusOnOpen = useRef<Focus>("first");

  function triggers() {
    return Array.from(ref.current?.querySelectorAll<HTMLButtonElement>(".eq-menubar-trigger") ?? []);
  }

  function trigger(id: string) {
    return triggers().find((node) => node.dataset.menu === id);
  }

  function focusItem(id: string, which: Focus) {
    if (which === "none") return;
    const list = ref.current?.querySelector(`.eq-menubar-list[data-menu="${CSS.escape(id)}"]`);
    const items = itemsIn(list);
    items[which === "last" ? items.length - 1 : 0]?.focus();
  }

  function openMenu(id: string, focus: Focus) {
    setTabStop(id);
    if (open === id) {
      focusItem(id, focus);
      return;
    }
    focusOnOpen.current = focus;
    setOpen(id);
  }

  function close(returnFocus: boolean) {
    const id = open;
    setOpen(null);
    if (returnFocus && id) trigger(id)?.focus();
  }

  function step(id: string, delta: number) {
    const all = triggers();
    const index = all.findIndex((node) => node.dataset.menu === id);
    const next = all[(index + delta + all.length) % all.length];
    const nextId = next?.dataset.menu;
    if (!next || !nextId) return;
    setTabStop(nextId);
    if (open !== null) {
      // Focus the trigger first so focus never drops to the page while the menus swap.
      next.focus();
      focusOnOpen.current = "first";
      setOpen(nextId);
    } else {
      next.focus();
    }
  }

  // Child menus show their popover in a layout effect, which runs before this one.
  useEffect(() => {
    if (open) focusItem(open, focusOnOpen.current);
  }, [open]);

  useEffect(() => {
    if (tabStop === null) setTabStop(triggers()[0]?.dataset.menu ?? null);
  }, [tabStop]);

  useEffect(() => {
    if (open === null) return;
    function onPointerDown(event: globalThis.PointerEvent) {
      if (event.target instanceof Node && ref.current?.contains(event.target)) return;
      setOpen(null);
    }
    document.addEventListener("pointerdown", onPointerDown, true);
    return () => document.removeEventListener("pointerdown", onPointerDown, true);
  }, [open]);

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const target = event.target;
    if (!(target instanceof HTMLElement) || !target.classList.contains("eq-menubar-trigger")) return;
    const id = target.dataset.menu;
    if (!id) return;
    const all = triggers();

    switch (event.key) {
      case "ArrowRight":
        step(id, 1);
        break;
      case "ArrowLeft":
        step(id, -1);
        break;
      case "ArrowDown":
        openMenu(id, "first");
        break;
      case "ArrowUp":
        openMenu(id, "last");
        break;
      case "Home":
        step(all[0]?.dataset.menu ?? id, 0);
        break;
      case "End":
        step(all[all.length - 1]?.dataset.menu ?? id, 0);
        break;
      case "Escape":
        if (open === null) return;
        close(true);
        break;
      default: {
        if (event.key.length !== 1 || event.key === " ") return;
        if (event.ctrlKey || event.metaKey || event.altKey) return;
        const letter = event.key.toLowerCase();
        const index = all.indexOf(target as HTMLButtonElement);
        for (let n = 1; n <= all.length; n++) {
          const candidate = all[(index + n) % all.length];
          if (startsWith(candidate, ".eq-menubar-trigger-label", letter)) {
            step(candidate.dataset.menu ?? id, 0);
            break;
          }
        }
      }
    }
    event.preventDefault();
  }

  return (
    <div
      {...rest}
      ref={ref}
      role="menubar"
      className={["eq-menubar", className].filter(Boolean).join(" ")}
      onKeyDown={handleKeyDown}
      onBlur={(event) => {
        onBlur?.(event);
        const next = event.relatedTarget;
        if (open !== null && next instanceof Node && !ref.current?.contains(next)) setOpen(null);
      }}
    >
      <Context.Provider value={{ open, tabStop, openMenu, close, step }}>{children}</Context.Provider>
    </div>
  );
}

export type MenubarMenuProps = Omit<ComponentProps<"button">, "children"> & {
  /** Text of the top-level item, e.g. "File". */
  label: ReactNode;
  /** MenubarItem, MenubarCheckboxItem and MenubarSeparator elements. */
  children: ReactNode;
};

/** Fallback for engines without anchor positioning: fixed coordinates from the trigger's box. */
function place(trigger: Element, surface: HTMLElement) {
  const box = trigger.getBoundingClientRect();
  const viewWidth = document.documentElement.clientWidth;
  const viewHeight = document.documentElement.clientHeight;
  const gap = parseFloat(getComputedStyle(surface).marginTop) || 0;
  const above = box.bottom + surface.offsetHeight + gap > viewHeight && box.top - surface.offsetHeight - gap >= 0;
  const end = box.left + surface.offsetWidth > viewWidth && box.right - surface.offsetWidth >= 0;
  const style = surface.style;
  style.top = above ? "auto" : `${box.bottom}px`;
  style.bottom = above ? `${viewHeight - box.top}px` : "auto";
  style.left = end ? "auto" : `${box.left}px`;
  style.right = end ? `${viewWidth - box.right}px` : "auto";
}

export function MenubarMenu({
  label,
  id,
  className,
  style,
  children,
  onClick,
  onPointerEnter,
  ...rest
}: MenubarMenuProps) {
  const { open, tabStop, openMenu, close, step } = useContext(Context);
  const auto = useId();
  const menu = `m${auto.replace(/[^\w-]/g, "")}`;
  const triggerId = id ?? `${auto}trigger`;
  const listId = `${auto}menu`;
  const anchorName = `--eq-menubar-${menu}`;
  const triggerRef = useRef<HTMLButtonElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const isOpen = open === menu;

  useLayoutEffect(() => {
    const list = listRef.current;
    const button = triggerRef.current;
    if (!list || !button) return;
    const showing = list.matches(":popover-open");
    if (isOpen && !showing) {
      list.showPopover();
      if (!CSS.supports(ANCHOR_SUPPORT)) place(button, list);
    } else if (!isOpen && showing) {
      list.hidePopover();
    }
  }, [isOpen]);

  function handleListKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const all = itemsIn(listRef.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 "ArrowRight":
      case "ArrowLeft":
        event.preventDefault();
        step(menu, event.key === "ArrowRight" ? 1 : -1);
        return;
      case "Escape":
        event.preventDefault();
        close(true);
        return;
      case "Tab":
        // Back to the trigger first, so the browser's Tab moves on out of the menubar.
        close(true);
        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 n = 1; n <= all.length; n++) {
          const index = (current + n + all.length) % all.length;
          if (startsWith(all[index], ".eq-menubar-item-label", letter)) {
            next = index;
            break;
          }
        }
      }
    }

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

  return (
    <div role="none" className="eq-menubar-menu">
      <button
        type="button"
        {...rest}
        ref={triggerRef}
        id={triggerId}
        role="menuitem"
        className={["eq-menubar-trigger", className].filter(Boolean).join(" ")}
        style={{ anchorName, ...style }}
        data-menu={menu}
        tabIndex={tabStop === menu || tabStop === null ? 0 : -1}
        aria-haspopup="menu"
        aria-expanded={isOpen}
        aria-controls={listId}
        onClick={(event) => {
          onClick?.(event);
          if (event.defaultPrevented) return;
          if (isOpen) close(false);
          else openMenu(menu, "first");
        }}
        onPointerEnter={(event: PointerEvent<HTMLButtonElement>) => {
          onPointerEnter?.(event);
          // Moving across the bar switches menus, but only once one is open, and only for a mouse.
          if (event.pointerType !== "mouse" || open === null || isOpen) return;
          event.currentTarget.focus({ preventScroll: true });
          openMenu(menu, "none");
        }}
      >
        <span className="eq-menubar-trigger-label">{label}</span>
      </button>
      <div
        ref={listRef}
        id={listId}
        popover="manual"
        role="menu"
        aria-labelledby={triggerId}
        className="eq-menubar-list"
        data-menu={menu}
        style={{ positionAnchor: anchorName }}
        onKeyDown={handleListKeyDown}
      >
        <CloseMenu.Provider value={() => close(true)}>{children}</CloseMenu.Provider>
      </div>
    </div>
  );
}

export type MenubarItemProps = 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. "⌘S". Display only. */
  shortcut?: string;
};

function focusOnPointer(event: PointerEvent<HTMLButtonElement>) {
  if (document.activeElement !== event.currentTarget) event.currentTarget.focus({ preventScroll: true });
}

export function MenubarItem({
  onSelect,
  shortcut,
  disabled,
  className,
  children,
  onClick,
  onPointerMove,
  ...rest
}: MenubarItemProps) {
  const close = useContext(CloseMenu);
  return (
    <button
      type="button"
      {...rest}
      role="menuitem"
      tabIndex={-1}
      aria-disabled={disabled || undefined}
      className={["eq-menubar-item", className].filter(Boolean).join(" ")}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        focusOnPointer(event);
      }}
      onClick={(event) => {
        if (disabled) return;
        onClick?.(event);
        if (event.defaultPrevented) return;
        onSelect?.();
        close();
      }}
    >
      <span className="eq-menubar-check" aria-hidden="true" />
      <span className="eq-menubar-item-label">{children}</span>
      {shortcut && <kbd className="eq-menubar-shortcut">{shortcut}</kbd>}
    </button>
  );
}

export type MenubarCheckboxItemProps = Omit<ComponentProps<"button">, "onSelect"> & {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  shortcut?: string;
};

export function MenubarCheckboxItem({
  checked,
  onCheckedChange,
  shortcut,
  disabled,
  className,
  children,
  onClick,
  onPointerMove,
  ...rest
}: MenubarCheckboxItemProps) {
  return (
    <button
      type="button"
      {...rest}
      role="menuitemcheckbox"
      tabIndex={-1}
      aria-checked={checked}
      aria-disabled={disabled || undefined}
      className={["eq-menubar-item", className].filter(Boolean).join(" ")}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        focusOnPointer(event);
      }}
      onClick={(event) => {
        if (disabled) return;
        onClick?.(event);
        if (!event.defaultPrevented) onCheckedChange(!checked);
      }}
    >
      <span className="eq-menubar-check" aria-hidden="true">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3.5 8.5l3 3 6-7" pathLength={1} />
        </svg>
      </span>
      <span className="eq-menubar-item-label">{children}</span>
      {shortcut && <kbd className="eq-menubar-shortcut">{shortcut}</kbd>}
    </button>
  );
}

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