Menu

"use client";

import {
  createContext,
  use,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  useSyncExternalStore,
} from "react";
import type {
  ComponentProps,
  KeyboardEvent,
  MouseEvent,
  PointerEvent,
  ReactElement,
  ReactNode,
  Ref,
  RefObject,
} from "react";
import { pointInPolygon } from "../../algorithms/geometry.ts";
import type { Point } from "../../algorithms/geometry.ts";
import { composeEventHandlers } from "../../lib/compose-event-handlers.ts";
import { buttonClassName } from "../../lib/button-class.ts";
import { mergeProps } from "../../lib/merge-props.ts";
import { mergeRefs } from "../../lib/merge-refs.ts";
import { overlaySurfaceClassName } from "../../lib/overlay-class.ts";
import { isApplePlatform } from "../../lib/platform.ts";
import { pointerMoved, watchPointer } from "../../lib/pointer.ts";
import { cn } from "../../lib/utils.ts";
import { collectionItemProps, focusItem, getCollection } from "../../primitives/collection.ts";
import { moveForKey, step } from "../../primitives/navigation.ts";
import { useOverlay, useSheet } from "../../primitives/overlay.ts";
import type { InitialFocus, Overlay } from "../../primitives/overlay.ts";
import { matchTypeahead, useTypeahead } from "../../primitives/typeahead.ts";
import { useControllableState } from "../../primitives/use-controllable-state.ts";

/** Long enough that passing over an item on the way elsewhere does not open its submenu. */
const SUBMENU_DELAY = 120;
/** How long a pointer heading for a submenu may dwell on the items between before they take over. */
const AIM_GRACE = 300;
/** How long a finger rests before it is asking for a context menu, where the browser does not say. */
const LONG_PRESS = 500;
/** How far a resting finger may wander and still be resting. */
const LONG_PRESS_TOLERANCE = 10;

/** The ground a pointer may cross on its way from a submenu's item to the submenu. */
interface Aim {
  readonly area: readonly Point[];
  /** The side of the item the submenu is on, as the pointer must be moving. */
  readonly toward: 1 | -1;
}

interface Count {
  readonly subscribe: (onChange: () => void) => () => void;
  readonly any: () => boolean;
  /** Count one more, until what is returned is called. */
  readonly add: () => () => void;
}

function createCount(): Count {
  let count = 0;
  const listeners = new Set<() => void>();
  const change = (by: number) => {
    const before = count > 0;
    count += by;
    if (count > 0 !== before) for (const listener of listeners) listener();
  };
  return {
    subscribe(onChange) {
      listeners.add(onChange);
      return () => listeners.delete(onChange);
    },
    any: () => count > 0,
    add() {
      change(1);
      return () => change(-1);
    },
  };
}

interface MenuLevel {
  /** The collection scope of this level's items. */
  readonly scope: string;
  readonly contentRef: RefObject<HTMLElement | null>;
  /** Close the whole menu: a choice was made. */
  readonly closeAll: () => void;
  /** Close this level's open submenus, except the one whose trigger is `except`. */
  readonly closeSubmenus: (except?: string) => void;
  readonly registerSubmenu: (key: string, close: () => void) => () => void;
  /** Set as the pointer leaves the item of an open submenu; cleared after a moment. */
  readonly aim: RefObject<Aim | null>;
  /** Which way the pointer last moved across this level: 1 rightward, -1 leftward. */
  readonly heading: RefObject<1 | -1>;
  /** Where the pointer last was over this level. */
  readonly position: RefObject<Point | null>;
  /** How many of this level's items can be checked: with any, every label makes room for the mark. */
  readonly checkable: Count;
}

/** What a menu says in words; pass `messages` to say it in another language. */
export interface MenuMessages {
  /** The way back from a submenu, where a submenu takes the place of its menu: on a phone. */
  readonly back: string;
  /** The name of a context menu that is given none of its own. */
  readonly contextMenu: string;
}

const MESSAGES: MenuMessages = { back: "Back", contextMenu: "Context menu" };

interface MenuRoot {
  readonly overlay: Overlay;
  readonly level: MenuLevel;
  /** The id of the control that names the menu. */
  readonly triggerId: string;
  /** Told of an id the control was given, so that the menu is still named by it. */
  readonly setTriggerId: (id: string | undefined) => void;
  /** Whether it opens at a point, with no control of its own. */
  readonly context: boolean;
  readonly messages: MenuMessages;
}

interface MenuSubRoot {
  readonly overlay: Overlay;
  readonly level: MenuLevel;
  readonly triggerKey: string;
  /** What its item says: its heading, where it takes its menu's place. */
  readonly title: string;
}

const RootContext = createContext<MenuRoot | null>(null);
const LevelContext = createContext<MenuLevel | null>(null);
const SubContext = createContext<MenuSubRoot | null>(null);

function required<T>(value: T | null, name: string): T {
  if (value === null) throw new Error(`${name} must be rendered inside a Menu.`);
  return value;
}

/**
 * The enabled items of one menu, not of the submenus inside it: where focus may
 * land as it opens. Not the way back, which is passed on the way in.
 */
function menuItems(content: HTMLElement): HTMLElement[] {
  return Array.from(
    content.querySelectorAll<HTMLElement>("[data-collection]:not([data-disabled], [data-back])"),
  ).filter((item) => item.closest('[role="menu"]') === content);
}

function levelCollection(level: MenuLevel) {
  return getCollection(level.contentRef.current, level.scope);
}

function enabledItems(level: MenuLevel): HTMLElement[] {
  return getCollection(level.contentRef.current, level.scope)
    .filter((item) => !item.disabled)
    .map((item) => item.element);
}

function useLevel(closeAll: () => void): MenuLevel {
  const scope = useId();
  const contentRef = useRef<HTMLElement>(null);
  const submenus = useRef(new Map<string, () => void>());
  const aim = useRef<Aim | null>(null);
  const heading = useRef<1 | -1>(1);
  const position = useRef<Point | null>(null);
  // Watched from before the menu opens, so that the first move over it can be judged.
  useEffect(watchPointer, []);
  const [checkable] = useState(createCount);
  return useMemo(
    () => ({
      scope,
      contentRef,
      aim,
      heading,
      position,
      checkable,
      closeAll,
      closeSubmenus(except) {
        for (const [key, close] of submenus.current) if (key !== except) close();
      },
      registerSubmenu(key, close) {
        submenus.current.set(key, close);
        return () => submenus.current.delete(key);
      },
    }),
    [scope, checkable, closeAll],
  );
}

/** What a menu opened from a control and one opened at a point share. */
function useMenuRoot(overlay: Overlay, context: boolean, messages?: Partial<MenuMessages>): MenuRoot {
  const ownId = useId();
  const [givenId, setTriggerId] = useState<string>();
  const { open, setOpen } = overlay;
  const closeAll = useCallback(() => setOpen(false), [setOpen]);
  const level = useLevel(closeAll);

  // A menu does not outlive its window's attention, or its window's shape: a platform's own closes too.
  useEffect(() => {
    if (!open) return undefined;
    const view = level.contentRef.current?.ownerDocument.defaultView ?? window;
    const close = () => setOpen(false);
    view.addEventListener("blur", close);
    view.addEventListener("resize", close);
    return () => {
      view.removeEventListener("blur", close);
      view.removeEventListener("resize", close);
    };
  }, [open, setOpen, level]);

  return useMemo(
    () => ({
      overlay,
      level,
      triggerId: givenId ?? ownId,
      setTriggerId,
      context,
      messages: { ...MESSAGES, ...messages },
    }),
    [overlay, level, givenId, ownId, context, messages],
  );
}

export type MenuProps = {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  messages?: Partial<MenuMessages>;
  children?: ReactNode;
};

export function Menu({ open, defaultOpen, onOpenChange, messages, children }: MenuProps): ReactElement {
  const overlay = useOverlay({
    open,
    defaultOpen,
    onOpenChange,
    placement: "block-end",
    focusable: menuItems,
    // A press outside a menu dismisses it and does nothing more.
    modal: true,
  });
  const root = useMenuRoot(overlay, false, messages);
  return <RootContext value={root}>{children}</RootContext>;
}

export function MenuTrigger({
  id,
  className,
  ref,
  style,
  onPointerDown,
  onClick,
  onKeyDown,
  ...props
}: ComponentProps<"button">): ReactElement {
  const { overlay, level, triggerId, setTriggerId } = required(use(RootContext), "MenuTrigger");
  const pointerType = useRef("");
  useLayoutEffect(() => {
    setTriggerId(id);
    return () => setTriggerId(undefined);
  }, [id, setTriggerId]);

  function toggle(focus: InitialFocus): void {
    overlay.setOpen(!overlay.open, focus);
  }

  // The latest way to close, for a release heard long after the press that began it.
  const setOpen = useRef(overlay.setOpen);
  useEffect(() => {
    setOpen.current = overlay.setOpen;
  });
  const release = useRef<AbortController>(undefined);
  useEffect(() => () => release.current?.abort(), []);

  /** A press that opened the menu and is let go away from it closes it again: a drag that chose nothing. */
  function closeOnReleaseElsewhere(trigger: HTMLElement): void {
    release.current?.abort();
    const controller = new AbortController();
    release.current = controller;
    const options = { capture: true, signal: controller.signal };
    trigger.ownerDocument.addEventListener(
      "pointerup",
      (event) => {
        controller.abort();
        // By where it was let go rather than on what: behind a sheet the control is inert, and is not what is hit.
        const box = trigger.getBoundingClientRect();
        const onTrigger =
          event.clientX >= box.left &&
          event.clientX <= box.right &&
          event.clientY >= box.top &&
          event.clientY <= box.bottom;
        const content = level.contentRef.current;
        if (onTrigger || (content !== null && event.composedPath().includes(content))) return;
        setOpen.current(false);
      },
      options,
    );
    trigger.ownerDocument.addEventListener("pointercancel", () => controller.abort(), options);
  }

  return (
    <button
      type="button"
      id={id ?? triggerId}
      aria-haspopup="menu"
      {...overlay.triggerProps}
      ref={mergeRefs(overlay.triggerProps.ref, ref)}
      style={{ ...overlay.triggerProps.style, ...style }}
      // A mouse opens on press, so the pointer can be dragged to an item and released.
      onPointerDown={(event) => {
        onPointerDown?.(event);
        if (event.defaultPrevented) return;
        pointerType.current = event.pointerType;
        if (event.pointerType !== "mouse" || event.button !== 0) return;
        if (!overlay.open) closeOnReleaseElsewhere(event.currentTarget);
        toggle("content");
      }}
      onClick={(event) => {
        onClick?.(event);
        if (event.defaultPrevented) return;
        const pressed = pointerType.current === "mouse" && event.detail !== 0;
        pointerType.current = "";
        if (!pressed) toggle(event.detail === 0 ? "first" : "content");
      }}
      // Keep the press from moving focus back to the trigger after the menu took it.
      onMouseDown={(event) => {
        if (event.button === 0) event.preventDefault();
      }}
      onKeyDown={(event) => {
        onKeyDown?.(event);
        if (event.defaultPrevented) return;
        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
          event.preventDefault();
          overlay.setOpen(true, event.key === "ArrowDown" ? "first" : "last");
        } else if (event.repeat && (event.key === "Enter" || event.key === " ")) {
          // A key held down opens the menu once; it does not go on to choose from it.
          event.preventDefault();
        }
      }}
      className={cn(buttonClassName, className)}
      {...props}
    />
  );
}

/**
 * The menu surface. On a phone it becomes a sheet along the bottom edge. Every
 * label of a level starts at the same edge: further in, once any item of the
 * level can be checked, to leave room for the mark.
 */
const SURFACE = cn(
  overlaySurfaceClassName,
  // Clear of the edge of the view when held against it, which leaves room for a
  // submenu raised or lowered to bring its first item level with its own.
  "mt-1 mb-2 min-w-52 flex-col p-1 open:flex pointer-coarse:max-sm:mb-0",
  "[--menu-inset:--spacing(2)] data-inset:[--menu-inset:--spacing(7)]",
  "pointer-coarse:max-sm:pb-[max(0.25rem,env(safe-area-inset-bottom))]",
);

function trackHeading(level: MenuLevel, event: PointerEvent<HTMLElement>): void {
  const before = level.position.current;
  if (before !== null && event.clientX !== before.x)
    level.heading.current = event.clientX > before.x ? 1 : -1;
  level.position.current = { x: event.clientX, y: event.clientY };
}

/** Whether the pointer is on its way to an open submenu, across the items between. */
function isAiming(level: MenuLevel, event: PointerEvent<HTMLElement>): boolean {
  const aim = level.aim.current;
  return (
    aim !== null &&
    level.heading.current === aim.toward &&
    pointInPolygon({ x: event.clientX, y: event.clientY }, aim.area)
  );
}

function useLevelKeyDown(level: MenuLevel, onCloseKey?: () => void) {
  const typeahead = useTypeahead(
    useCallback(
      (query: string) => {
        const items = levelCollection(level).filter((item) => !item.disabled);
        const current = items.find((item) => item.element === document.activeElement)?.key ?? null;
        const match = matchTypeahead(
          items.map((item) => ({ key: item.key, text: item.textValue })),
          query,
          current,
        );
        const element = items.find((item) => item.key === match)?.element;
        if (element !== undefined) focusItem(element);
      },
      [level],
    ),
  );

  return (event: KeyboardEvent<HTMLElement>) => {
    // A submenu sits inside its parent; each level answers only its own keys.
    if ((event.target as Element).closest('[role="menu"]') !== event.currentTarget) return;
    if (typeahead(event)) {
      event.preventDefault();
      return;
    }
    // Space chooses only when it is not part of a word being typed.
    if (event.key === " ") {
      event.preventDefault();
      const item = event.currentTarget.ownerDocument.activeElement as HTMLElement | null;
      if (!event.repeat && item?.dataset.collection === level.scope) item.click();
      return;
    }
    const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
    if (event.key === (direction === "rtl" ? "ArrowRight" : "ArrowLeft") && onCloseKey) {
      event.preventDefault();
      onCloseKey();
      return;
    }
    if (event.key === "Tab") {
      // Let Tab move on from where the menu was, then close.
      level.closeAll();
      return;
    }
    const move = moveForKey(event.key, "vertical", direction);
    if (move === null) return;
    event.preventDefault();
    const items = enabledItems(level);
    const current = items.find((item) => item === document.activeElement) ?? null;
    // A key held down runs to the end and stops there: only a fresh press comes round.
    const target = step(items, current, move, { loop: !event.repeat });
    if (target !== null) focusItem(target);
  };
}

/** What the surface of a level has, whichever menu it is a level of. */
function useLevelSurface(level: MenuLevel) {
  const inset = useSyncExternalStore(level.checkable.subscribe, level.checkable.any, () => false);
  return {
    "data-inset": inset ? "" : undefined,
    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => trackHeading(level, event),
    // A menu has no context menu of its own — but a link in one keeps the browser's, which opens it elsewhere.
    onContextMenu(event: MouseEvent<HTMLElement>) {
      if ((event.target as Element).closest("a[href]") === null) event.preventDefault();
    },
  } as const;
}

export type MenuContentProps = ComponentProps<"div">;

export function MenuContent({
  className,
  ref,
  style,
  onKeyDown,
  children,
  ...props
}: MenuContentProps): ReactElement {
  const { overlay, level, triggerId, context, messages } = required(use(RootContext), "MenuContent");
  const handleKeyDown = useLevelKeyDown(level);
  const surface = useLevelSurface(level);
  const named = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
  return (
    <LevelContext value={level}>
      {context && <span {...overlay.anchorProps} />}
      <div
        // Named by its control; with none, as a context menu has none, in words.
        aria-labelledby={named || context ? undefined : triggerId}
        aria-label={named || !context ? undefined : messages.contextMenu}
        {...overlay.contentProps}
        role="menu"
        tabIndex={-1}
        {...mergeProps(surface, props)}
        ref={mergeRefs(overlay.contentProps.ref, level.contentRef as RefObject<HTMLDivElement | null>, ref)}
        style={{ ...overlay.contentProps.style, ...style }}
        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
        className={cn(SURFACE, className)}
      >
        {children}
      </div>
    </LevelContext>
  );
}

export type ContextMenuProps = {
  onOpenChange?: ((open: boolean) => void) | undefined;
  messages?: Partial<MenuMessages> | undefined;
  children?: ReactNode;
};

/**
 * A menu for what is under the pointer: the same menu, opened at a point rather
 * than from a control. `ContextMenuTrigger` is the region it serves, and
 * `MenuContent`, with the same items as any menu, is the menu.
 */
export function ContextMenu({ onOpenChange, messages, children }: ContextMenuProps): ReactElement {
  const overlay = useOverlay({ onOpenChange, placement: "block-end", focusable: menuItems, modal: true });
  const root = useMenuRoot(overlay, true, messages);
  return <RootContext value={root}>{children}</RootContext>;
}

export type ContextMenuTriggerProps = ComponentProps<"div"> & {
  /** Leave the browser's own context menu in place. */
  disabled?: boolean | undefined;
};

/**
 * Whether a press began on something that is held in order to be dragged — a
 * handle, a grip: marked `data-drag-handle`. A finger resting there has not
 * asked for a menu; it has not moved yet.
 */
function heldToDrag(target: EventTarget): boolean {
  return target instanceof Element && target.closest("[data-drag-handle]") !== null;
}

interface Rest {
  readonly pointerId: number;
  readonly x: number;
  readonly y: number;
  readonly timer: ReturnType<typeof setTimeout>;
}

export function ContextMenuTrigger({
  disabled = false,
  className,
  onContextMenu,
  onTouchEnd,
  ...props
}: ContextMenuTriggerProps): ReactElement {
  const { overlay } = required(use(RootContext), "ContextMenuTrigger");
  // Whether the last thing done here was done with a pointer: a context menu
  // asked for after a key was asked for by the keyboard.
  const byPointer = useRef(false);
  const rest = useRef<Rest>(undefined);
  /** Whether this touch has already opened the menu by resting. */
  const rested = useRef(false);

  const openAt = useRef(overlay.openAt);
  useEffect(() => {
    openAt.current = overlay.openAt;
  });

  function forget(): void {
    clearTimeout(rest.current?.timer);
    rest.current = undefined;
  }
  useEffect(() => () => clearTimeout(rest.current?.timer), []);

  return (
    <div
      data-open={overlay.open ? "" : undefined}
      {...props}
      onPointerDownCapture={(event) => {
        props.onPointerDownCapture?.(event);
        byPointer.current = true;
        rested.current = false;
        forget();
        // A finger or a pen: a mouse has a button for this.
        if (disabled || event.pointerType === "mouse" || !event.isPrimary || heldToDrag(event.target)) return;
        // Where a long press brings no `contextmenu` event — iOS — the rest is timed here.
        const { clientX: x, clientY: y, pointerId } = event;
        const timer = setTimeout(() => {
          rest.current = undefined;
          rested.current = true;
          openAt.current({ x, y }, "content");
        }, LONG_PRESS);
        rest.current = { pointerId, x, y, timer };
      }}
      onPointerMoveCapture={(event) => {
        props.onPointerMoveCapture?.(event);
        const resting = rest.current;
        if (resting === undefined || resting.pointerId !== event.pointerId) return;
        if (Math.hypot(event.clientX - resting.x, event.clientY - resting.y) > LONG_PRESS_TOLERANCE) forget();
      }}
      onPointerUpCapture={(event) => {
        props.onPointerUpCapture?.(event);
        forget();
      }}
      onPointerCancelCapture={(event) => {
        props.onPointerCancelCapture?.(event);
        forget();
      }}
      onKeyDownCapture={(event) => {
        props.onKeyDownCapture?.(event);
        byPointer.current = false;
      }}
      // The finger that rested until the menu opened does not also tap what it rested on.
      onTouchEnd={(event) => {
        onTouchEnd?.(event);
        if (rested.current && event.cancelable) event.preventDefault();
      }}
      // A secondary click, Control-click on a Mac, the Menu key or Shift+F10, a
      // long press on Android: each arrives as this one event.
      onContextMenu={(event) => {
        onContextMenu?.(event);
        if (event.defaultPrevented || disabled) return;
        // The browser's own menu gives way only when this one opens.
        event.preventDefault();
        forget();
        if (rested.current || (byPointer.current && heldToDrag(event.target))) return;
        if (byPointer.current) {
          overlay.openAt({ x: event.clientX, y: event.clientY }, "content");
          return;
        }
        // Asked for by the keyboard, it belongs to what has focus, and opens against it.
        const focused = event.currentTarget.ownerDocument.activeElement;
        if (focused !== null && focused !== event.currentTarget && event.currentTarget.contains(focused)) {
          const box = focused.getBoundingClientRect();
          overlay.openAt({ x: box.left, y: box.top, width: box.width, height: box.height }, "first");
        } else {
          overlay.openAt({ x: event.clientX, y: event.clientY }, "first");
        }
      }}
      // The callout iOS shows for a long press would cover the menu.
      className={cn("[-webkit-touch-callout:none]", className)}
    />
  );
}

interface ItemOptions {
  readonly disabled: boolean;
  readonly textValue: string | undefined;
  /** What the item does when chosen, and whether a finger chose it. Returns whether the menu should close. */
  readonly onActivate: (touch: boolean) => boolean;
  /** Whether it is a link, which is followed by the click it is given and by nothing else. */
  readonly link?: boolean;
  /** Whether it can be checked, and so has a mark before its label. */
  readonly checkable?: boolean;
  /** Keys this item answers besides Enter and Space. */
  readonly onKeyDown?: ((event: KeyboardEvent<HTMLElement>) => boolean) | undefined;
  readonly onPointerEnter?: (() => void) | undefined;
  readonly onPointerLeave?: ((event: PointerEvent<HTMLElement>) => void) | undefined;
}

/** What every kind of item shares: membership of its level, focus following the pointer, activation. */
function useItem(
  key: string,
  {
    disabled,
    textValue,
    onActivate,
    link = false,
    checkable = false,
    onKeyDown,
    onPointerEnter,
    onPointerLeave,
  }: ItemOptions,
) {
  const level = required(use(LevelContext), "A menu item");
  const pointerType = useRef("");
  useLayoutEffect(() => (checkable ? level.checkable.add() : undefined), [checkable, level]);

  function activate(touch = false): void {
    if (disabled) return;
    if (onActivate(touch)) level.closeAll();
  }

  return {
    ...collectionItemProps(level.scope, key, { disabled, textValue }),
    tabIndex: -1,
    "aria-disabled": disabled || undefined,
    onPointerMove(event: PointerEvent<HTMLElement>) {
      // A finger has no hover: only a pointer that can rest over an item moves the highlight.
      // Nor does a menu that scrolls under a resting pointer: that move is not the pointer's.
      if (event.pointerType === "touch" || !pointerMoved() || isAiming(level, event)) return;
      level.closeSubmenus(key);
      onPointerEnter?.();
      if (!disabled && document.activeElement !== event.currentTarget) {
        event.currentTarget.focus({ preventScroll: true });
      }
    },
    onPointerLeave(event: PointerEvent<HTMLElement>) {
      onPointerLeave?.(event);
      // A press that left came to nothing here. A finger leaves as it lifts, before its click.
      if (event.pointerType === "mouse") pointerType.current = "";
      // The highlight follows the pointer, and leaves with it.
      if (event.pointerType !== "touch" && document.activeElement === event.currentTarget) {
        level.contentRef.current?.focus({ preventScroll: true });
      }
    },
    onPointerDown(event: PointerEvent<HTMLElement>) {
      pointerType.current = event.pointerType;
    },
    // A mouse chooses on release — including a release at the end of a drag that
    // began on the trigger. Touch chooses on click, so a scroll does not choose.
    onPointerUp(event: PointerEvent<HTMLElement>) {
      if (event.pointerType !== "mouse" || event.button !== 0) return;
      if (!link) activate();
      // A press that began elsewhere brings a link no click of its own.
      else if (pointerType.current !== "mouse" && !disabled) event.currentTarget.click();
    },
    onClick(event: MouseEvent<HTMLElement>) {
      const pressed = pointerType.current;
      pointerType.current = "";
      if (link) {
        // The click is what follows the link, so it is also what chooses it.
        if (disabled) event.preventDefault();
        else activate(pressed === "touch");
        return;
      }
      // A click that no press came before is a key's, or assistive technology's.
      if (event.detail === 0 || (pressed !== "mouse" && pressed !== "")) activate(pressed === "touch");
    },
    onKeyDown(event: KeyboardEvent<HTMLElement>) {
      if (onKeyDown?.(event)) {
        event.preventDefault();
        return;
      }
      // Space is the level's to judge: it may be part of a word being typed.
      if (event.key === "Enter") {
        event.preventDefault();
        if (event.repeat) return;
        if (link) event.currentTarget.click();
        else activate();
      }
    },
  };
}

const ITEM = cn(
  "group/item relative flex min-h-8 cursor-default items-center gap-2 rounded-md py-1 ps-(--menu-inset) pe-2 outline-none select-none",
  "[-webkit-tap-highlight-color:transparent]",
  "focus:bg-selected focus:text-on-selected",
  // Where a system forces its own colours, the highlight is the system's.
  "forced-colors:forced-color-adjust-none forced-colors:focus:bg-[Highlight] forced-colors:focus:text-[HighlightText]",
  "data-disabled:text-fg-disabled forced-colors:data-disabled:text-[GrayText]",
  "pointer-coarse:min-h-11 pointer-coarse:text-base",
);

const MODIFIERS = ["Ctrl", "Alt", "Shift", "Mod"] as const;
type Modifier = (typeof MODIFIERS)[number];
const SPELLED: readonly Modifier[] = ["Mod", "Ctrl", "Alt", "Shift"];

const ALIASES: Readonly<Record<string, Modifier>> = {
  ctrl: "Ctrl",
  control: "Ctrl",
  alt: "Alt",
  option: "Alt",
  shift: "Shift",
  mod: "Mod",
};

const APPLE_MODIFIERS: Readonly<Record<Modifier, string>> = { Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Mod: "⌘" };

const KEY_GLYPHS: Readonly<Record<string, string>> = {
  ArrowUp: "↑",
  ArrowDown: "↓",
  ArrowLeft: "←",
  ArrowRight: "→",
};

const APPLE_KEYS: Readonly<Record<string, string>> = {
  ...KEY_GLYPHS,
  // U+FE0E asks for the text form: alone, the arrow is drawn as a coloured emoji.
  Enter: "↩\uFE0E",
  Backspace: "⌫",
  Delete: "⌦",
  Escape: "⎋",
  Tab: "⇥",
};

const OTHER_KEYS: Readonly<Record<string, string>> = { ...KEY_GLYPHS, Escape: "Esc", Delete: "Del" };

/**
 * One notation for a shortcut — `Mod+Shift+N`, where `Mod` is the platform's
 * command key — read into what each platform shows and what is told to
 * assistive technology.
 */
function readShortcut(keys: string, apple: boolean): { shown: string; spoken: string } {
  const parts = keys.split("+");
  // A shortcut on the plus key ends in two.
  const key = parts.pop() || "+";
  const held = new Set(parts.map((part) => ALIASES[part.trim().toLowerCase()]));
  const name = key.length === 1 ? key.toUpperCase() : key;
  // The command key leads where it is spelled out; Apple writes it last, against the key.
  const spelled = [
    ...new Set(
      SPELLED.filter((modifier) => held.has(modifier)).map((modifier) =>
        modifier === "Mod" && !apple ? "Ctrl" : modifier,
      ),
    ),
  ];
  const spoken = [
    ...spelled.map((modifier) => (modifier === "Mod" ? "Meta" : modifier === "Ctrl" ? "Control" : modifier)),
    name === " " ? "Space" : name,
  ].join("+");
  const shown = apple
    ? MODIFIERS.filter((modifier) => held.has(modifier))
        .map((modifier) => APPLE_MODIFIERS[modifier])
        .join("") + (APPLE_KEYS[name] ?? name)
    : [...spelled, OTHER_KEYS[name] ?? name].join("+");
  return { shown, spoken };
}

function subscribeToNothing(): () => void {
  return () => {};
}

/** A server cannot know the platform, so it writes the other's, and the reader's own takes over. */
function useApplePlatform(): boolean {
  return useSyncExternalStore(subscribeToNothing, isApplePlatform, () => false);
}

function useShortcut(keys: string | undefined) {
  const apple = useApplePlatform();
  return keys === undefined ? undefined : readShortcut(keys, apple);
}

export type MenuShortcutProps = Omit<ComponentProps<"span">, "children"> & {
  /** The shortcut in one notation for every platform: `Mod+Shift+N`. */
  keys: string;
};

/**
 * A shortcut as its platform writes it — ⇧⌘N, Ctrl+Shift+N — after an item's
 * label. Seen and not spoken: the item tells assistive technology its shortcut
 * itself. An item given `shortcut` shows one.
 */
export function MenuShortcut({ keys, className, ...props }: MenuShortcutProps): ReactElement {
  const shortcut = useShortcut(keys);
  return (
    <span
      aria-hidden
      className={cn(
        "ms-auto ps-6 text-xs tracking-wide text-fg-muted group-focus/item:text-current group-data-disabled/item:text-current",
        // A keyboard shortcut means nothing to a finger.
        "pointer-coarse:hidden",
        className,
      )}
      {...props}
    >
      {shortcut?.shown}
    </span>
  );
}

/** A choice: an event whose default is to close the menu. */
export type MenuSelectEvent = Event;

export type MenuItemProps = Omit<ComponentProps<"div">, "onSelect"> & {
  disabled?: boolean;
  textValue?: string;
  /** Called when the item is chosen; `preventDefault()` keeps the menu open. */
  onSelect?: (event: MenuSelectEvent) => void;
  /** The key that does the same from anywhere, as `Mod+Shift+N`: shown after the label and told to assistive technology. */
  shortcut?: string;
  /** Where the item leads: with one it is a link, which the browser can also open elsewhere. */
  href?: string;
  target?: string;
  rel?: string;
};

function select(onSelect: ((event: MenuSelectEvent) => void) | undefined): boolean {
  const event = new Event("menuselect", { cancelable: true });
  onSelect?.(event);
  return !event.defaultPrevented;
}

export function MenuItem({
  disabled = false,
  textValue,
  onSelect,
  shortcut,
  href,
  target,
  rel,
  className,
  children,
  ...props
}: MenuItemProps): ReactElement {
  const key = useId();
  const link = href !== undefined;
  const item = useItem(key, { disabled, textValue, link, onActivate: () => select(onSelect) });
  const keys = useShortcut(shortcut);
  const content = (
    <>
      {children}
      {shortcut !== undefined && <MenuShortcut keys={shortcut} />}
    </>
  );
  const merged = {
    ...mergeProps(item, props),
    "aria-keyshortcuts": keys?.spoken,
    className: cn(ITEM, className),
  };
  if (!link) {
    return (
      <div role="menuitem" {...merged}>
        {content}
      </div>
    );
  }
  // An anchor, so that it is the browser's own link: opened in a new tab, copied, dragged.
  const { ref, ...anchor } = merged as typeof merged & { ref?: Ref<HTMLElement> };
  return (
    <a
      role="menuitem"
      // A link that cannot be used leads nowhere.
      href={disabled ? undefined : href}
      target={target}
      rel={rel}
      ref={ref as Ref<HTMLAnchorElement>}
      {...(anchor as ComponentProps<"a">)}
    >
      {content}
    </a>
  );
}

function Indicator({ type, checked }: { type: "checkbox" | "radio"; checked: boolean }) {
  return (
    <span aria-hidden className="absolute start-2 flex size-4 items-center justify-center">
      {checked &&
        (type === "checkbox" ? (
          <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M3.5 8.5 6.5 11.5 12.5 4.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        ) : (
          <span className="size-1.5 rounded-full bg-current" />
        ))}
    </span>
  );
}

type CheckableItemProps = Omit<MenuItemProps, "children" | "href" | "target" | "rel">;

export type MenuCheckboxItemProps = CheckableItemProps & {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  children?: ReactNode;
};

export function MenuCheckboxItem({
  checked: checkedProp,
  defaultChecked = false,
  onCheckedChange,
  disabled = false,
  textValue,
  onSelect,
  shortcut,
  className,
  children,
  ...props
}: MenuCheckboxItemProps): ReactElement {
  const key = useId();
  const [checked, setChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
  const item = useItem(key, {
    disabled,
    textValue,
    checkable: true,
    onActivate() {
      setChecked(!checked);
      return select(onSelect);
    },
  });
  const keys = useShortcut(shortcut);
  return (
    <div
      role="menuitemcheckbox"
      aria-checked={checked}
      aria-keyshortcuts={keys?.spoken}
      {...mergeProps(item, props)}
      className={cn(ITEM, className)}
    >
      <Indicator type="checkbox" checked={checked} />
      {children}
      {shortcut !== undefined && <MenuShortcut keys={shortcut} />}
    </div>
  );
}

const RadioContext = createContext<{ value: string | null; setValue: (value: string) => void } | null>(null);

export type MenuRadioGroupProps = Omit<ComponentProps<"div">, "defaultValue"> & {
  value?: string | null;
  defaultValue?: string | null;
  onValueChange?: (value: string) => void;
  /** A heading for the group, which also names it. */
  label?: ReactNode;
};

export function MenuRadioGroup({
  value,
  defaultValue = null,
  onValueChange,
  label,
  children,
  ...props
}: MenuRadioGroupProps): ReactElement {
  const [current, setCurrent] = useControllableState<string | null>(
    value,
    defaultValue,
    onValueChange as ((value: string | null) => void) | undefined,
  );
  const radio = useMemo(() => ({ value: current, setValue: setCurrent }), [current, setCurrent]);
  return (
    <RadioContext value={radio}>
      <MenuGroup label={label} {...props}>
        {children}
      </MenuGroup>
    </RadioContext>
  );
}

export type MenuRadioItemProps = CheckableItemProps & { value: string; children?: ReactNode };

export function MenuRadioItem({
  value,
  disabled = false,
  textValue,
  onSelect,
  shortcut,
  className,
  children,
  ...props
}: MenuRadioItemProps): ReactElement {
  const key = useId();
  const radio = required(use(RadioContext), "MenuRadioItem");
  const checked = radio.value === value;
  const item = useItem(key, {
    disabled,
    textValue,
    checkable: true,
    onActivate() {
      radio.setValue(value);
      return select(onSelect);
    },
  });
  const keys = useShortcut(shortcut);
  return (
    <div
      role="menuitemradio"
      aria-checked={checked}
      aria-keyshortcuts={keys?.spoken}
      {...mergeProps(item, props)}
      className={cn(ITEM, className)}
    >
      <Indicator type="radio" checked={checked} />
      {children}
      {shortcut !== undefined && <MenuShortcut keys={shortcut} />}
    </div>
  );
}

export type MenuGroupProps = Omit<ComponentProps<"div">, "children"> & {
  label?: ReactNode;
  children?: ReactNode;
};

export function MenuGroup({ label, className, children, ...props }: MenuGroupProps): ReactElement {
  const labelId = useId();
  return (
    <div
      role="group"
      aria-labelledby={label === undefined ? undefined : labelId}
      className={cn("flex flex-col", className)}
      {...props}
    >
      {label !== undefined && (
        <div id={labelId} role="presentation" className="px-2 pt-2 pb-1 text-xs font-medium text-fg-muted">
          {label}
        </div>
      )}
      {children}
    </div>
  );
}

export function MenuSeparator({ className, ...props }: ComponentProps<"div">): ReactElement {
  return (
    <div
      role="separator"
      className={cn("mx-2 my-1 h-px bg-border-muted forced-colors:bg-[GrayText]", className)}
      {...props}
    />
  );
}

export type MenuSubProps = {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  children?: ReactNode;
};

export function MenuSub({ open, defaultOpen, onOpenChange, children }: MenuSubProps): ReactElement {
  const parent = required(use(LevelContext), "MenuSub");
  const triggerKey = useId();
  const overlay = useOverlay({
    open,
    defaultOpen,
    onOpenChange,
    placement: "inline-end",
    focusable: menuItems,
    // On a phone a submenu is the same sheet turned to another level, not a second sheet.
    replaces: true,
  });
  const level = useLevel(parent.closeAll);
  const { setOpen } = overlay;
  useEffect(
    () => parent.registerSubmenu(triggerKey, () => setOpen(false, "none")),
    [parent, triggerKey, setOpen],
  );
  const [title, setTitle] = useState("");
  useLayoutEffect(() => {
    if (!overlay.open) return;
    const item = document.getElementById(triggerKey);
    // oxlint-disable-next-line react/set-state-in-effect -- read from the item once the submenu is to be shown
    setTitle(item?.dataset.textValue ?? item?.textContent ?? "");
  }, [overlay.open, triggerKey]);
  const sub = useMemo(() => ({ overlay, level, triggerKey, title }), [overlay, level, triggerKey, title]);
  return <SubContext value={sub}>{children}</SubContext>;
}

export type MenuSubTriggerProps = Omit<ComponentProps<"div">, "onSelect"> & {
  disabled?: boolean;
  textValue?: string;
};

export function MenuSubTrigger({
  disabled = false,
  textValue,
  className,
  ref,
  style,
  children,
  ...props
}: MenuSubTriggerProps): ReactElement {
  const { overlay, triggerKey } = required(use(SubContext), "MenuSubTrigger");
  const parent = required(use(LevelContext), "MenuSubTrigger");
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
  const grace = useRef<ReturnType<typeof setTimeout>>(undefined);
  useEffect(
    () => () => {
      clearTimeout(timer.current);
      clearTimeout(grace.current);
    },
    [],
  );

  const item = useItem(triggerKey, {
    disabled,
    textValue,
    onActivate(touch) {
      // A finger highlights nothing: the level it opened has no item it is on.
      overlay.setOpen(true, touch ? "content" : "first");
      return false;
    },
    onKeyDown(event) {
      const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
      if (event.key !== (direction === "rtl" ? "ArrowLeft" : "ArrowRight") || disabled) return false;
      overlay.setOpen(true, "first");
      return true;
    },
    onPointerEnter() {
      if (disabled || overlay.open || timer.current !== undefined) return;
      timer.current = setTimeout(() => {
        timer.current = undefined;
        // Not into a menu that has closed in the meantime.
        if (parent.contentRef.current?.matches(":popover-open")) overlay.setOpen(true, "none");
      }, SUBMENU_DELAY);
    },
    onPointerLeave(event) {
      clearTimeout(timer.current);
      timer.current = undefined;
      const content = document.getElementById(overlay.contentId);
      if (!overlay.open || content === null || event.pointerType === "touch") return;
      // From where the pointer was on this item — leaving is heard before the
      // move that left — fanning out to the near edge of the submenu: across
      // this, a pointer heading that way is on its way in.
      const from = parent.position.current ?? { x: event.clientX, y: event.clientY };
      const box = content.getBoundingClientRect();
      const toward = box.left + box.width / 2 > from.x ? 1 : -1;
      const near = toward === 1 ? box.left : box.right;
      parent.aim.current = {
        toward,
        area: [
          { x: from.x - toward * 4, y: from.y },
          { x: near, y: box.top - 8 },
          { x: near, y: box.bottom + 8 },
        ],
      };
      clearTimeout(grace.current);
      grace.current = setTimeout(() => {
        parent.aim.current = null;
      }, AIM_GRACE);
    },
  });

  return (
    <div
      role="menuitem"
      id={triggerKey}
      aria-haspopup="menu"
      {...mergeProps(item, props)}
      {...overlay.triggerProps}
      ref={mergeRefs(overlay.triggerProps.ref, ref)}
      style={{ ...overlay.triggerProps.style, ...style }}
      className={cn(ITEM, "aria-expanded:not-focus:bg-surface-strong", className)}
    >
      {children}
      <Chevron className="ms-auto" />
    </div>
  );
}

function Chevron({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 16 16"
      className={cn("size-3.5 shrink-0 rtl:-scale-x-100", className)}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.75"
    >
      <path d="m6 3.5 4.5 4.5L6 12.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/** The way back to the menu a submenu has taken the place of: an item, so every way of choosing one works on it. */
function MenuBack({ onBack, children }: { onBack: () => void; children: ReactNode }) {
  const key = useId();
  const item = useItem(key, {
    disabled: false,
    textValue: undefined,
    onActivate() {
      onBack();
      return false;
    },
  });
  return (
    <div role="menuitem" data-back="" {...item} className={cn(ITEM, "justify-self-start gap-1 ps-1 pe-3")}>
      <Chevron className="-scale-x-100 rtl:scale-x-100" />
      {children}
    </div>
  );
}

export function MenuSubContent({
  className,
  ref,
  style,
  onKeyDown,
  children,
  ...props
}: MenuContentProps): ReactElement {
  const { overlay, level, triggerKey, title } = required(use(SubContext), "MenuSubContent");
  const { messages } = required(use(RootContext), "MenuSubContent");
  const handleKeyDown = useLevelKeyDown(level, () => overlay.setOpen(false));
  const surface = useLevelSurface(level);
  // Where a submenu takes its menu's place there is no menu beside it to go back to by pointing.
  const sheet = useSheet();
  return (
    <LevelContext value={level}>
      <div
        aria-labelledby={triggerKey}
        {...overlay.contentProps}
        role="menu"
        tabIndex={-1}
        {...mergeProps(surface, props)}
        ref={mergeRefs(overlay.contentProps.ref, level.contentRef as RefObject<HTMLDivElement | null>, ref)}
        style={{ ...overlay.contentProps.style, ...style }}
        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
        className={cn(SURFACE, "-mt-1 ms-0.5 pointer-coarse:max-sm:ms-0", className)}
      >
        {sheet && (
          <div className="mb-1 grid grid-cols-[1fr_auto_1fr] items-center border-b border-border-muted pb-1">
            <MenuBack onBack={() => overlay.setOpen(false)}>{messages.back}</MenuBack>
            {/* Seen only: the submenu is already named by its item. */}
            <span aria-hidden className="truncate px-2 text-base font-medium text-fg-strong">
              {title}
            </span>
          </div>
        )}
        {children}
      </div>
    </LevelContext>
  );
}