Nav menu

"use client";

import {
  createContext,
  useContext,
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type FocusEvent,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactElement,
  type ReactNode,
  type ToggleEvent,
} from "react";
import { Icon, type IconName } from "./icon";
import { Popover } from "./popover";
import "./nav-menu.css";

type Timing = { openDelay: number; closeDelay: number };

const NavMenuContext = createContext<Timing>({ openDelay: 120, closeDelay: 280 });

const ITEM = ":scope > li > :is(.eq-nav-menu-trigger, .eq-nav-menu-link)";

export type NavMenuProps = ComponentProps<"nav"> & {
  /** Milliseconds the pointer rests on a trigger before its panel opens. */
  openDelay?: number;
  /** Milliseconds after the pointer leaves before the panel closes, so a diagonal move does not lose it. */
  closeDelay?: number;
  /**
   * horizontal is a bar of items; vertical stacks them as full-width rows, for a folded menu
   * panel or a drawer. auto is horizontal until its nearest size container, such as a TopBar,
   * is under 640px wide, then vertical.
   */
  orientation?: "horizontal" | "vertical" | "auto";
  /** The widest a panel grows, as a CSS length or pixels. Never wider than the viewport. */
  panelWidth?: string | number;
};

export function NavMenu({
  openDelay = 120,
  closeDelay = 280,
  orientation = "horizontal",
  panelWidth,
  className,
  style,
  children,
  "aria-label": label = "Main",
  ...rest
}: NavMenuProps) {
  // Left, Right, Home and End move between the top-level items, as the APG allows for disclosure navigation.
  function handleKeyDown(event: KeyboardEvent<HTMLUListElement>) {
    if (event.altKey || event.ctrlKey || event.metaKey) return;
    const list = event.currentTarget;
    const items = Array.from(list.querySelectorAll<HTMLElement>(ITEM));
    const index = items.indexOf(event.target as HTMLElement);
    if (index === -1) return;
    const forward = getComputedStyle(list).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
    const back = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
    let next: number;
    if (event.key === forward) next = Math.min(index + 1, items.length - 1);
    else if (event.key === back) next = Math.max(index - 1, 0);
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = items.length - 1;
    else return;
    event.preventDefault();
    items[next].focus();
  }

  return (
    <NavMenuContext.Provider value={{ openDelay, closeDelay }}>
      <nav
        {...rest}
        aria-label={label}
        className={["eq-nav-menu", className].filter(Boolean).join(" ")}
        data-orientation={orientation}
        style={
          panelWidth === undefined
            ? style
            : ({
                "--eq-nav-menu-panel-width": typeof panelWidth === "number" ? `${panelWidth}px` : panelWidth,
                ...style,
              } as CSSProperties)
        }
      >
        <ul className="eq-nav-menu-list" onKeyDown={handleKeyDown}>
          {children}
        </ul>
      </nav>
    </NavMenuContext.Provider>
  );
}

export type NavMenuItemProps = Omit<ComponentProps<"li">, "children"> & {
  /** The visible text of the trigger or link. */
  label: ReactNode;
  /** Makes the item a plain link. Leave it out and give children to make it open a panel. */
  href?: string;
  /** Marks a link item, or the trigger whose panel holds the current page. */
  current?: boolean;
  /** The panel: NavMenuSection columns, or anything else. */
  children?: ReactNode;
};

export function NavMenuItem({
  label,
  href,
  current = false,
  className,
  children,
  onPointerEnter,
  onPointerLeave,
  onBlur,
  onKeyDown,
  ...rest
}: NavMenuItemProps) {
  const { openDelay, closeDelay } = useContext(NavMenuContext);
  const panelId = useId();
  const triggerRef = useRef<HTMLButtonElement>(null);
  const timer = useRef<number | undefined>(undefined);
  const byHover = useRef(false);
  const [open, setOpen] = useState(false);

  useEffect(() => () => window.clearTimeout(timer.current), []);

  const itemClass = ["eq-nav-menu-item", className].filter(Boolean).join(" ");

  if (children == null) {
    return (
      <li {...rest} className={itemClass}>
        <a className="eq-nav-menu-link" href={href} aria-current={current ? "page" : undefined}>
          {label}
        </a>
      </li>
    );
  }

  const panel = () => document.getElementById(panelId);
  const isOpen = () => panel()?.matches(":popover-open") ?? false;

  function show() {
    window.clearTimeout(timer.current);
    if (!isOpen()) panel()?.showPopover();
  }

  function hide() {
    window.clearTimeout(timer.current);
    if (isOpen()) panel()?.hidePopover();
  }

  function handlePointerEnter(event: PointerEvent<HTMLLIElement>) {
    onPointerEnter?.(event);
    if (event.pointerType !== "mouse") return;
    window.clearTimeout(timer.current);
    if (isOpen()) return;
    timer.current = window.setTimeout(() => {
      byHover.current = true;
      show();
    }, openDelay);
  }

  function handlePointerLeave(event: PointerEvent<HTMLLIElement>) {
    onPointerLeave?.(event);
    if (event.pointerType !== "mouse") return;
    window.clearTimeout(timer.current);
    if (byHover.current) timer.current = window.setTimeout(hide, closeDelay);
  }

  function handleClick(event: MouseEvent<HTMLButtonElement>) {
    window.clearTimeout(timer.current);
    // A click on a panel that hover just opened keeps it open rather than toggling it shut.
    if (isOpen() && byHover.current) event.preventDefault();
    byHover.current = false;
  }

  function handleBlur(event: FocusEvent<HTMLLIElement>) {
    onBlur?.(event);
    // Focus leaving the item and its panel closes the panel, as in the APG disclosure navigation.
    const next = event.relatedTarget;
    if (next instanceof Node && event.currentTarget.contains(next)) return;
    if (next !== null) hide();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLLIElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const surface = panel();
    if (event.key === "Escape" && isOpen()) {
      // Handled here so focus always lands back on the trigger, wherever it was before.
      event.preventDefault();
      hide();
      triggerRef.current?.focus();
      return;
    }
    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
    if (!surface) return;
    const links = Array.from(surface.querySelectorAll<HTMLElement>("a[href], button:not(:disabled)"));
    if (links.length === 0) return;
    if (event.target === triggerRef.current) {
      if (event.key !== "ArrowDown") return;
      event.preventDefault();
      byHover.current = false;
      show();
      links[0].focus();
      return;
    }
    const index = links.indexOf(event.target as HTMLElement);
    if (index === -1) return;
    event.preventDefault();
    if (event.key === "ArrowDown") links[Math.min(index + 1, links.length - 1)].focus();
    else if (index === 0) triggerRef.current?.focus();
    else links[index - 1].focus();
  }

  return (
    <li
      {...rest}
      className={itemClass}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
    >
      <button
        ref={triggerRef}
        type="button"
        className="eq-nav-menu-trigger"
        popoverTarget={panelId}
        aria-expanded={open}
        aria-controls={panelId}
        data-current={current || undefined}
        onClick={handleClick}
      >
        {label}
        <svg
          className="eq-nav-menu-chevron"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M4 6l4 4 4-4" />
        </svg>
      </button>
      <Popover
        id={panelId}
        placement="bottom-start"
        className="eq-nav-menu-panel"
        onToggle={(event: ToggleEvent<HTMLDivElement>) => {
          const opened = event.newState === "open";
          setOpen(opened);
          if (!opened) byHover.current = false;
        }}
      >
        <div className="eq-nav-menu-columns">{children}</div>
      </Popover>
    </li>
  );
}

export type NavMenuSectionProps = Omit<ComponentProps<"div">, "title"> & {
  /** A short heading over the column, also the list's name. */
  title?: ReactNode;
};

export function NavMenuSection({ title, className, children, ...rest }: NavMenuSectionProps) {
  const headingId = useId();
  return (
    <div {...rest} className={["eq-nav-menu-section", className].filter(Boolean).join(" ")}>
      {title != null && (
        <p id={headingId} className="eq-nav-menu-heading">
          {title}
        </p>
      )}
      <ul className="eq-nav-menu-section-list" aria-labelledby={title != null ? headingId : undefined}>
        {children}
      </ul>
    </div>
  );
}

export type NavMenuLinkProps = Omit<ComponentProps<"a">, "title"> & {
  href: string;
  title: ReactNode;
  /** One line under the title. */
  description?: ReactNode;
  /** An Icon name, or your own element. */
  icon?: IconName | ReactElement;
  /** Marks the page the person is on with aria-current="page". */
  current?: boolean;
};

export function NavMenuLink({ href, title, description, icon, current = false, className, ...rest }: NavMenuLinkProps) {
  return (
    <li className="eq-nav-menu-entry">
      <a
        {...rest}
        href={href}
        className={["eq-nav-menu-card", className].filter(Boolean).join(" ")}
        aria-current={current ? "page" : undefined}
      >
        {icon != null && (
          <span className="eq-nav-menu-card-icon" aria-hidden="true">
            {typeof icon === "string" ? <Icon name={icon} size="m" /> : icon}
          </span>
        )}
        <span className="eq-nav-menu-card-text">
          <span className="eq-nav-menu-card-title">{title}</span>
          {description != null && <span className="eq-nav-menu-card-description">{description}</span>}
        </span>
      </a>
    </li>
  );
}