Popover

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, useId, useTemplateRef, watch } from "vue";
import Button from "../button/Button.vue";

/**
 * Why the popover closed: people pressed `Escape`, pressed or clicked outside it, pressed
 * its close button or its trigger again, or `closed` for anything else, like another
 * popover opening. It has already closed by the time `close` fires.
 */
export type PopoverCloseReason = "escape" | "outside" | "close-button" | "trigger" | "closed";

export interface PopoverProps {
  /** The popover's ID, which its trigger's `popovertarget` points to, and its title's starts with. */
  id: string;
  /** The text that names the popover, like "Filters", which screen readers read as focus moves in. */
  title: string;
  /** The side of the trigger it opens on. It flips to the other side when there's no room. */
  placement?: "top" | "bottom" | "start" | "end";
  /** Draws an arrow that points at the trigger, on whichever side it opens. */
  arrow?: boolean;
  /** The close button's label, which screen readers read and voice control users say. */
  closeLabel?: string;
}

const {
  id,
  title,
  placement = "bottom",
  arrow = false,
  closeLabel = "Close",
} = defineProps<PopoverProps>();

const emit = defineEmits<{
  /** It closed, and why, whether people closed it or the browser did. Never when you closed it with `open`. */
  close: [reason: PopoverCloseReason];
}>();

/**
 * Whether it's open, which `v-model:open` binds. Without it, the popover keeps its own, which
 * its trigger changes. It follows every open and close, its trigger's and the browser's too.
 */
const open = defineModel<boolean>("open", { default: false });

defineSlots<{
  /** The content, like a short form, a few options or a hint with a link. */
  default?: () => unknown;
}>();

const popover = useTemplateRef<HTMLElement>("popover");
const arrowPart = useTemplateRef<HTMLElement>("arrow-part");
const state = ref<"open" | "closed">("closed");
// The side it opened on, after any flip, which the arrow points from. Only aim() sets it,
// so a popover without an arrow never has one.
const side = ref<"top" | "bottom" | "left" | "right">();
// The anchor's name is set once it mounts, from a generated ID, since an id you pass can
// hold characters a CSS name can't, like "1:2", and the browser would drop the anchor.
const uid = useId();
const anchorName = ref<string>();
onMounted(() => (anchorName.value = `--popover-${uid}`));

// The button that opened it, which it's placed against and gives focus back to, and
// whatever had focus when it opened, for a popover your code opened without one.
let trigger: HTMLElement | null = null;
let opener: HTMLElement | null = null;
let frame: number | undefined;
// Whether it's showing, from `beforetoggle`, which the browser fires as it shows or hides
// it, while `toggle` comes a task later. So your code opening it right after closing it
// isn't mistaken for a popover that's still open.
let showing = false;

// Why it's closing. The popover closes itself on its close button and on Escape, and
// `null` means your code closed it, which fires no `close`. Every other close is the
// browser's, after a press outside it, Escape elsewhere on the page, its trigger or
// another popover, so the listeners below note what people just did, until the next task.
let closing: PopoverCloseReason | null | undefined;
let pending: PopoverCloseReason | undefined;
let reason: PopoverCloseReason | null = null;
let clearing: ReturnType<typeof setTimeout> | undefined;
let pressedOutside = false;
let returnFocus = false;

function note(next: PopoverCloseReason) {
  pending = next;
  clearTimeout(clearing);
  clearing = setTimeout(() => (pending = undefined));
}

const FOCUSABLE =
  'a[href], button:not(:disabled), input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';

// The Dialog's order: the control people marked with `data-autofocus`, or else the first
// one in the body, and only then the close button. Browsers already focus an `autofocus`
// control in a popover as it opens, so it counts as well.
function initialFocus(el: HTMLElement) {
  return (
    el.querySelector<HTMLElement>("[data-autofocus], [autofocus]") ??
    el.querySelector('[data-slot="body"]')?.querySelector<HTMLElement>(FOCUSABLE) ??
    el.querySelector<HTMLElement>('[data-slot="close"]')
  );
}

// The buttons that point at it with `popovertarget`.
const triggers = () => document.querySelectorAll<HTMLElement>(`[popovertarget="${id.replace(/["\\]/g, "\\$&")}"]`);

// The trigger is the button the browser says opened it, where it says so, or else the
// first one that points at it. TypeScript doesn't know `source` yet.
function findTrigger(event: Event) {
  const { source } = event as ToggleEvent & { source?: Element | null };
  return source instanceof HTMLElement ? source : (triggers()[0] ?? null);
}

// The browser gives a `popovertarget` button its expanded state, but only in the
// accessibility tree, so the Popover writes it out as `aria-expanded` too, which the
// Button's Expanded style and agents read.
function expand(el: HTMLElement | null, value: boolean) {
  el?.setAttribute("aria-expanded", String(value));
}

// Only the trigger that opened it carries the anchor's name, since with two buttons named
// the same, the browser would place it beside the last one on the page.
function unanchor() {
  trigger?.style.removeProperty("anchor-name");
}

function onBeforetoggle(event: Event) {
  const el = popover.value!;
  if ((event as ToggleEvent).newState === "open") {
    showing = true;
    unanchor();
    trigger = findTrigger(event);
    opener = document.activeElement as HTMLElement | null;
    if (trigger && anchorName.value) trigger.style.setProperty("anchor-name", anchorName.value);
    return;
  }
  showing = false;
  // Focus goes back to the trigger only when it was inside, like when people pressed
  // Escape or the close button. After a press outside, it stays where people pressed.
  returnFocus = el.contains(document.activeElement);
  reason = closing !== undefined ? closing : (pending ?? "closed");
  closing = undefined;
}

function onToggle(event: Event) {
  const el = popover.value!;
  if ((event as ToggleEvent).newState === "open") {
    state.value = "open";
    open.value = true;
    expand(trigger, true);
    listen(true);
    // Focus moves in, so keyboard and screen reader users start in the popover, unless
    // the browser already focused an `autofocus` control in it.
    if (!el.contains(document.activeElement)) initialFocus(el)?.focus();
    nextTick(update);
    if (arrow) nextTick(follow);
    return;
  }
  state.value = "closed";
  open.value = false;
  expand(trigger, false);
  unanchor();
  listen(false);
  // The browser gives focus back to whatever had it before the popover opened, which in
  // Safari, where a click doesn't focus a button, isn't the trigger. So the trigger gets it,
  // unless focus has already moved somewhere else, like into another popover.
  const active = document.activeElement;
  if (returnFocus && (!active || active === document.body || el.contains(active))) (trigger ?? opener)?.focus();
  returnFocus = false;
  if (reason) emit("close", reason);
}

// Escape closes the popover and goes no further, so a dialog around it stays open, whether
// focus is in the popover or on its trigger. It's handled on the popover itself, rather than
// the document, so a tooltip inside it, which stops Escape on the document, closes first and
// alone. Cancelling it also keeps the browser from closing anything else on it.
function onKeydown(event: KeyboardEvent) {
  if (event.key !== "Escape" || event.defaultPrevented || !showing) return;
  event.preventDefault();
  event.stopPropagation();
  dismiss("escape");
}

// Elsewhere on the page, the browser closes it on Escape. Inside a Dialog, though, the
// Dialog takes Escape first and cancels it, which would close the Dialog around a popover
// that's still open. So in a Dialog, it listens on the Dialog too, in the capture phase,
// before the Dialog's own handler, for an Escape outside the popover and its trigger.
function onHostKeydown(event: KeyboardEvent) {
  const target = event.target as Node;
  if (popover.value?.contains(target) || trigger?.contains(target)) return;
  onKeydown(event);
}

function dismiss(why: PopoverCloseReason | null) {
  closing = why;
  popover.value?.hidePopover?.();
}

// What people do while it's open, which tells the closes the browser makes apart.
function onPointerdown(event: PointerEvent) {
  const target = event.target as Node;
  pressedOutside = !popover.value?.contains(target) && !trigger?.contains(target);
}
function onPointerup(event: PointerEvent) {
  const target = event.target as Node;
  if (pressedOutside && !popover.value?.contains(target) && !trigger?.contains(target)) note("outside");
  pressedOutside = false;
}
function onPageKeydown(event: KeyboardEvent) {
  if (event.key === "Escape" && !event.defaultPrevented) note("escape");
}
function onTriggerClick() {
  note("trigger");
}

function listen(on: boolean) {
  const method = on ? "addEventListener" : "removeEventListener";
  document[method]("pointerdown", onPointerdown as EventListener, true);
  document[method]("pointerup", onPointerup as EventListener, true);
  // On the window, after everything else, so it only hears an Escape nothing else took.
  window[method]("keydown", onPageKeydown as EventListener);
  trigger?.[method]("keydown", onKeydown as EventListener);
  trigger?.[method]("click", onTriggerClick);
  popover.value?.parentElement?.closest("dialog")?.[method]("keydown", onHostKeydown as EventListener, true);
  if (!anchored()) {
    window[method]("scroll", update, { capture: true, passive: true } as AddEventListenerOptions);
    window[method]("resize", update);
  }
  if (!on && frame !== undefined) {
    cancelAnimationFrame(frame);
    frame = undefined;
  }
}

// Your code opening and closing it. Once it's open or closed, the model says so too, which
// changes nothing here.
watch(
  open,
  (value) => {
    const el = popover.value;
    if (!el?.showPopover) return;
    if (value && !showing) el.showPopover();
    else if (!value && showing) dismiss(null);
  },
  { flush: "post" },
);

// CSS anchor positioning places it, where the browser has it. Elsewhere, place() does.
// It checks position-area rather than anchor-name, which Chrome had four versions earlier.
const anchored = () => globalThis.CSS?.supports?.("position-area: top") ?? false;

function update() {
  if (!anchored()) place();
  if (arrow) aim();
}

// The arrow follows it on every frame while it's open, since the browser moves an anchored
// popover after a scroll handler runs, and a flip can move it with no scroll at all.
function follow() {
  if (state.value !== "open") return;
  aim();
  frame = requestAnimationFrame(follow);
}

// Without anchor positioning: the chosen side of the trigger, or the other side when it
// doesn't fit, centred on the trigger and kept inside the viewport.
function place() {
  const el = popover.value;
  if (!el || !trigger) return;
  // Its margin is the gap, which `left` and `top` place it outside of.
  const gap = parseFloat(getComputedStyle(el).marginTop) || 0;
  const a = trigger.getBoundingClientRect();
  // Its exact size, without the scale it grows in from, which getBoundingClientRect() would include.
  const width = parseFloat(getComputedStyle(el).width);
  const height = parseFloat(getComputedStyle(el).height);
  const { clientWidth, clientHeight } = document.documentElement;
  const rtl = getComputedStyle(trigger).direction === "rtl";
  const sides = { top: "top", bottom: "bottom", start: rtl ? "right" : "left", end: rtl ? "left" : "right" } as const;
  const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" } as const;
  const fits = {
    top: a.top - gap - height >= 0,
    bottom: a.bottom + gap + height <= clientHeight,
    left: a.left - gap - width >= 0,
    right: a.right + gap + width <= clientWidth,
  };
  let at: keyof typeof opposite = sides[placement];
  if (!fits[at] && fits[opposite[at]]) at = opposite[at];
  const across = at === "top" || at === "bottom";
  const x = across ? a.left + (a.width - width) / 2 : at === "left" ? a.left - gap - width : a.right + gap;
  const y = across ? (at === "top" ? a.top - gap - height : a.bottom + gap) : a.top + (a.height - height) / 2;
  el.style.left = `${Math.max(0, Math.min(x, clientWidth - width)) - gap}px`;
  el.style.top = `${Math.max(0, Math.min(y, clientHeight - height)) - gap}px`;
}

// With an arrow: the side it opened on, from where its centre is, which its scale doesn't move,
// and the arrow across from the trigger's centre, or as close as the rounded corners allow.
function aim() {
  const el = popover.value;
  const part = arrowPart.value;
  if (!el || !part || !trigger) return;
  const a = trigger.getBoundingClientRect();
  const p = el.getBoundingClientRect();
  const x = p.left + p.width / 2;
  const y = p.top + p.height / 2;
  side.value = y < a.top ? "top" : y > a.bottom ? "bottom" : x < a.left ? "left" : "right";
  const across = side.value === "top" || side.value === "bottom";
  const box = getComputedStyle(el);
  const length = parseFloat(across ? box.width : box.height);
  const centre = across ? a.left + a.width / 2 - (x - length / 2) : a.top + a.height / 2 - (y - length / 2);
  const clear = parseFloat(box.borderTopLeftRadius) + parseFloat(getComputedStyle(part).width) / Math.SQRT2;
  const offset = clear * 2 < length ? Math.max(clear, Math.min(centre, length - clear)) : length / 2;
  part.style.left = across ? `${offset - el.clientLeft}px` : "";
  part.style.top = across ? "" : `${offset - el.clientTop}px`;
}

onMounted(() => {
  for (const el of triggers()) expand(el, false);
  if (open.value) popover.value?.showPopover?.();

  if (import.meta.env.DEV && !title.trim()) {
    console.warn("[Popover] has no title: give it one, since it's what names the popover.", popover.value);
  }
});

onBeforeUnmount(() => {
  if (showing) dismiss(null);
  listen(false);
  unanchor();
  clearTimeout(clearing);
});
</script>

<template>
  <!-- popover="auto" puts it in the top layer and lets the browser close it on Escape and on a
       press outside, and its trigger opens it with popovertarget, before any script loads. -->
  <div
    :id="id"
    ref="popover"
    class="popover"
    role="dialog"
    :aria-labelledby="`${id}-title`"
    popover="auto"
    :data-state="state"
    :data-placement="placement"
    :data-side="side"
    :style="anchorName && { 'position-anchor': anchorName }"
    @beforetoggle="onBeforetoggle"
    @toggle="onToggle"
    @keydown="onKeydown"
  >
    <div data-slot="header">
      <!-- Not a heading, since the popover sits among the page's own content, where an <h2>
           would break the page's outline. It names the popover all the same. -->
      <p :id="`${id}-title`" data-slot="title">{{ title }}</p>
      <Button
        data-slot="close"
        :label="closeLabel"
        variant="ghost"
        size="sm"
        icon-only
        @click="dismiss('close-button')"
      >
        <template #leading>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
            <path d="M18 6 6 18M6 6l12 12" />
          </svg>
        </template>
      </Button>
    </div>
    <div v-if="$slots.default" data-slot="body">
      <slot />
    </div>
    <span v-if="arrow" ref="arrow-part" data-slot="arrow" aria-hidden="true" />
  </div>
</template>

<style scoped>
/* The same layer order as Tailwind CSS. The popover's styles go in `components`,
   so a class of yours that sets its variables wins without any specificity tricks. */
@layer theme, base, components, utilities;

/* The panel looks like the Dialog's, a little smaller, with a shadow, since there's no
   backdrop to set it apart from the page. */
@layer components {
  .popover {
    --popover--max-width: 20rem;
    --popover--padding: 1rem;
    --popover--gap: 0.75rem;
    --popover--radius: 0.5rem;
    /* Decoration, like the Dialog's: its title says what it is, so it doesn't need 3:1. */
    --popover--border-color: color-mix(in srgb, currentColor 20%, transparent);
    /* The page's own background, which follows `color-scheme`, so it covers what's behind it. */
    --popover--background: Canvas;
    --popover--box-shadow: 0 0.25rem 1rem color-mix(in srgb, #000 15%, transparent);
    /* The gap between the trigger and the popover. */
    --popover--offset: 0.5rem;
    /* The arrow's width and height, before it's turned, when it has one. */
    --popover--arrow--size: 0.75rem;

    /* Beside the trigger, centred on it, and on the other side when there's no room. When
       neither side has room, it shrinks on one with at least half the screen, and its body
       scrolls. */
    position: fixed;
    position-area: bottom;
    position-try-fallbacks: flip-block, flip-inline, --popover-fit, flip-block --popover-fit;
    inset: auto;
    margin: var(--popover--offset);
    box-sizing: border-box;
    flex-direction: column;
    gap: var(--popover--gap);
    /* Never wider or taller than the screen, less 16px on each side, so it fits at 320px wide. */
    width: max-content;
    max-width: min(var(--popover--max-width), 100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: var(--popover--padding);
    border: 1px solid var(--popover--border-color);
    border-radius: var(--popover--radius);
    /* The arrow sits half outside it, and the body scrolls instead. */
    overflow: visible;
    background-color: var(--popover--background);
    box-shadow: var(--popover--box-shadow);
    color: var(--color--neutral-text);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .popover:popover-open {
    display: flex;
  }
  .popover[data-placement="top"] {
    position-area: top;
  }
  /* In the popover's own direction, which is its trigger's, rather than the page's. */
  .popover[data-placement="start"] {
    position-area: self-inline-start;
  }
  .popover[data-placement="end"] {
    position-area: self-inline-end;
  }

  /* Parts. The title stays in view, and the body scrolls under it. */
  .popover > [data-slot="header"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
  }
  .popover [data-slot="title"] {
    margin: 0;
    font-weight: 600;
    line-height: 1.375;
  }
  .popover [data-slot="close"] {
    /* Centred on the title's first line, and lined up with the edge of the content. */
    margin-block: calc((1.2rem - 2rem) / 2);
    margin-inline-end: -0.5rem;
  }
  .popover > [data-slot="body"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Room for the focus rings of the controls at its edges, which it would clip. */
    margin: -0.25rem;
    padding: 0.25rem;
  }

  /* The arrow: a square turned 45deg, half of it past the edge that faces the trigger, in the
     popover's background and border, so forced colors mode draws its edge too. The edges inside
     the popover have no border, and it waits for the side it opened on. */
  .popover > [data-slot="arrow"] {
    position: absolute;
    box-sizing: border-box;
    width: var(--popover--arrow--size);
    height: var(--popover--arrow--size);
    border: inherit;
    background: inherit;
    translate: -50% -50%;
    rotate: 45deg;
  }
  .popover:not([data-side]) > [data-slot="arrow"] {
    display: none;
  }
  .popover[data-side="top"] > [data-slot="arrow"] {
    top: 100%;
    border-top-width: 0;
    border-left-width: 0;
  }
  .popover[data-side="bottom"] > [data-slot="arrow"] {
    top: 0;
    border-right-width: 0;
    border-bottom-width: 0;
  }
  .popover[data-side="left"] > [data-slot="arrow"] {
    left: 100%;
    border-bottom-width: 0;
    border-left-width: 0;
  }
  .popover[data-side="right"] > [data-slot="arrow"] {
    left: 0;
    border-top-width: 0;
    border-right-width: 0;
  }

  /* It fades and grows in, unless people have asked for less motion. */
  @media (prefers-reduced-motion: no-preference) {
    .popover:popover-open {
      transition:
        opacity 150ms ease-out,
        scale 150ms ease-out;
    }
    @starting-style {
      .popover:popover-open {
        opacity: 0;
        scale: 0.96;
      }
    }
  }

  /* With more contrast, the border is drawn in the text colour at full strength. */
  @media (prefers-contrast: more) {
    .popover {
      --popover--border-color: currentColor;
    }
  }

  /* Forced colors mode drops the shadow, so the border, in the system's text colour, marks its edge. */
  @media (forced-colors: active) {
    .popover {
      border-color: CanvasText;
    }
  }
}
/* Its last resort, as tall as the side it opens on allows, less the gap on each side. The
   minimum turns down a side with less than about half the screen, so it shrinks on the
   bigger side. It only comes to this when it fits neither side, so it's taller than that
   anyway. Outside the layer, since it's a rule of its own, rather than a style. */
@position-try --popover-fit {
  max-height: calc(100% - 2 * var(--popover--offset));
  min-height: calc(50dvh - 3rem);
}
</style>

import { render, screen } from "@testing-library/vue";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
import { h, nextTick, ref, type VNodeChild } from "vue";
import Dialog from "../dialog/Dialog.vue";
import Tooltip from "../tooltip/Tooltip.vue";
import Popover, { type PopoverProps } from "./Popover.vue";

// jsdom has no Popover API, so these stand in for the parts the Popover relies on: showing
// and hiding with `beforetoggle` and `toggle`, giving focus back to whatever had it before,
// a `popovertarget` button toggling its popover, and the closes the browser makes itself,
// after the event that caused them, for an Escape nobody cancelled and for a press that
// starts and ends outside. They can't put it in the top layer or place it, which the
// checklist checks in a browser instead.
const shown = new Set<HTMLElement>();
const previous = new Map<HTMLElement, Element | null>();
// Chrome fires `toggle` a task after it shows or hides a popover, and folds two in a row
// into one. Most tests fire it at once, which is easier to follow.
let deferToggle = false;
const pendingToggle = new Map<HTMLElement, { oldState: string; timer: ReturnType<typeof setTimeout> }>();

function toggle(el: HTMLElement, newState: "open" | "closed", source: Element | null = null, { focusPrevious = true } = {}) {
  const oldState = newState === "open" ? "closed" : "open";
  el.dispatchEvent(Object.assign(new Event("beforetoggle"), { newState, oldState, source }));
  if (newState === "open") {
    shown.add(el);
    previous.set(el, document.activeElement);
  } else {
    shown.delete(el);
    // Hiding it gives focus back to whatever had it before it opened, when focus is inside,
    // except after a press outside. That's the <body> when nothing had it, like in Safari,
    // where a click doesn't focus the button.
    const before = previous.get(el);
    if (focusPrevious && el.contains(document.activeElement)) {
      if (before instanceof HTMLElement && before !== document.body) before.focus();
      else (document.activeElement as HTMLElement).blur();
    }
  }
  // jsdom hides every popover, as browsers hide a closed one, but can't match :popover-open,
  // which shows an open one, so this stands in for it.
  el.style.display = newState === "open" ? "flex" : "";
  const fire = (old: string) => el.dispatchEvent(Object.assign(new Event("toggle"), { newState, oldState: old, source }));
  if (!deferToggle) return fire(oldState);
  const pending = pendingToggle.get(el);
  clearTimeout(pending?.timer);
  const old = pending?.oldState ?? oldState;
  pendingToggle.set(el, {
    oldState: old,
    timer: setTimeout(() => {
      pendingToggle.delete(el);
      fire(old);
    }),
  });
}

beforeAll(() => {
  HTMLElement.prototype.showPopover = function (this: HTMLElement) {
    if (!shown.has(this)) toggle(this, "open");
  };
  HTMLElement.prototype.hidePopover = function (this: HTMLElement) {
    if (shown.has(this)) toggle(this, "closed");
  };
  HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
    this.open = true;
  };
  HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
    this.open = false;
  };

  document.addEventListener("click", (event) => {
    const invoker = (event.target as Element).closest<HTMLElement>("[popovertarget]");
    const target = invoker && document.getElementById(invoker.getAttribute("popovertarget")!);
    if (!target) return;
    queueMicrotask(() => (shown.has(target) ? toggle(target, "closed", invoker) : toggle(target, "open", invoker)));
  });
  window.addEventListener("keydown", (event) => {
    if (event.key !== "Escape" || event.defaultPrevented) return;
    queueMicrotask(() => [...shown].at(-1)?.hidePopover());
  });
  let down: EventTarget | null = null;
  document.addEventListener("pointerdown", (event) => (down = event.target), true);
  document.addEventListener("pointerup", (event) => {
    const outside = (target: EventTarget | null) =>
      [...shown].filter((el) => !el.contains(target as Node) && !(target as Element).closest(`[popovertarget="${el.id}"]`));
    const pressed = outside(down);
    queueMicrotask(() =>
      outside(event.target)
        .filter((el) => pressed.includes(el))
        .forEach((el) => toggle(el, "closed", null, { focusPrevious: false })),
    );
  });
});

afterEach(() => shown.clear());

const field = (id: string, text: string) => [h("label", { for: id }, text), h("input", { id })];
const button = (text: string, attrs = {}) => h("button", { type: "button", ...attrs }, text);

// A page with a Filters button that opens the popover with popovertarget, and a link
// after them, the way you'd use it.
function page(props: Partial<PopoverProps> & Record<string, unknown> = {}, content: () => VNodeChild = () => field("open-only", "Open issues only")) {
  const onClose = vi.fn();
  const result = render({
    render: () => [
      button("Filters", { popovertarget: "filters", "aria-haspopup": "dialog" }),
      h(Popover, { id: "filters", title: "Filters", onClose, ...props }, { default: content }),
      h("a", { href: "#issues" }, "Issues"),
    ],
  });
  return { ...result, onClose };
}

const popover = () => document.querySelector<HTMLElement>(".popover")!;

async function openFrom(user: ReturnType<typeof userEvent.setup>, name = "Filters") {
  await user.click(screen.getByRole("button", { name }));
}

describe("Popover", () => {
  it("is a dialog with popover auto, named by its title, which a popovertarget button opens", async () => {
    const user = userEvent.setup();
    page();
    expect(popover()).toHaveAttribute("popover", "auto");
    expect(popover()).toHaveAttribute("data-state", "closed");

    await openFrom(user);
    const dialog = screen.getByRole("dialog", { name: "Filters" });
    expect(dialog).toBe(popover());
    expect(dialog).toHaveAttribute("data-state", "open");
    expect(dialog).toHaveAttribute("aria-labelledby", "filters-title");
    expect(screen.getByText("Filters", { selector: "p" })).toHaveAttribute("id", "filters-title");
  });

  it("isn't found while it's closed", () => {
    page();

    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
  });

  it("isn't modal, so nothing around it changes while it's open", async () => {
    const user = userEvent.setup();
    page();

    await openFrom(user);
    expect(popover()).not.toHaveAttribute("aria-modal");
    expect(screen.getByRole("link", { name: "Issues" }).closest("[inert]")).toBeNull();
  });

  it("closes when its trigger is pressed again, with the reason trigger", async () => {
    const user = userEvent.setup();
    const { onClose } = page();

    await openFrom(user);
    await openFrom(user);
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["trigger"]]);
  });

  it("moves focus to the control marked with data-autofocus, or else the first in its body", async () => {
    const user = userEvent.setup();
    const { unmount } = page({}, () => [...field("open-only", "Open issues only"), ...field("mine", "Mine only")]);
    await openFrom(user);
    expect(screen.getByRole("textbox", { name: "Open issues only" })).toHaveFocus();
    unmount();

    page({}, () => [...field("open-only", "Open issues only"), h("label", { for: "mine" }, "Mine only"), h("input", { id: "mine", "data-autofocus": "" })]);
    await openFrom(user);
    expect(screen.getByRole("textbox", { name: "Mine only" })).toHaveFocus();
  });

  it("counts a control marked with autofocus too, and starts on its close button with nothing to focus in its body", async () => {
    const user = userEvent.setup();
    const { unmount } = page({}, () => [...field("open-only", "Open issues only"), h("label", { for: "mine" }, "Mine only"), h("input", { id: "mine", autofocus: true })]);
    await openFrom(user);
    expect(screen.getByRole("textbox", { name: "Mine only" })).toHaveFocus();
    unmount();

    page({ id: "billing", title: "About billing" }, () => h("p", "You're billed on the first of each month."));
    render(() => button("About billing", { popovertarget: "billing" }));
    await openFrom(user, "About billing");
    expect(screen.getByRole("button", { name: "Close" })).toHaveFocus();
  });

  it("gives focus back to its trigger when it closes with Escape or its close button", async () => {
    const user = userEvent.setup();
    const { onClose } = page();
    const trigger = screen.getByRole("button", { name: "Filters" });

    await openFrom(user);
    // Safari doesn't focus a button on a click, so the trigger can't count on having focus.
    trigger.blur();
    screen.getByRole("textbox").focus();
    await user.keyboard("{Escape}");
    expect(trigger).toHaveFocus();

    await openFrom(user);
    await user.click(screen.getByRole("button", { name: "Close" }));
    expect(trigger).toHaveFocus();
    expect(onClose.mock.calls).toEqual([["escape"], ["close-button"]]);
  });

  it("gives focus back to its trigger even when the trigger never had it, as after a click in Safari", async () => {
    page();
    const trigger = screen.getByRole("button", { name: "Filters" });

    // A click that doesn't focus the button, so the browser has nothing to give focus back to.
    trigger.click();
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-state", "open"));
    expect(screen.getByRole("textbox")).toHaveFocus();
    await userEvent.keyboard("{Escape}");
    expect(trigger).toHaveFocus();
  });

  it("leaves focus off its trigger after a press outside on something that can't take focus", async () => {
    const user = userEvent.setup();
    const { onClose } = page({}, () => field("open-only", "Open issues only"));
    render(() => h("p", "Showing 12 issues"));

    await openFrom(user);
    expect(screen.getByRole("textbox")).toHaveFocus();
    await user.click(screen.getByText("Showing 12 issues"));
    expect(onClose.mock.calls).toEqual([["outside"]]);
    expect(screen.getByRole("button", { name: "Filters" })).not.toHaveFocus();
  });

  it("closes on a press outside, with the reason outside, and leaves focus where people pressed", async () => {
    const user = userEvent.setup();
    const { onClose } = page();

    await openFrom(user);
    await user.click(screen.getByRole("link", { name: "Issues" }));
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["outside"]]);
    expect(screen.getByRole("link", { name: "Issues" })).toHaveFocus();
  });

  it("stays open on a press inside it", async () => {
    const user = userEvent.setup();
    const { onClose } = page();

    await openFrom(user);
    await user.click(screen.getByRole("textbox"));
    expect(popover()).toHaveAttribute("data-state", "open");
    expect(onClose).not.toHaveBeenCalled();
  });

  it("closes with Escape on its trigger too, and stops the key there", async () => {
    const user = userEvent.setup();
    const { onClose } = page();
    const trigger = screen.getByRole("button", { name: "Filters" });
    await openFrom(user);

    trigger.focus();
    const keydown = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
    trigger.dispatchEvent(keydown);
    await nextTick();
    expect(keydown.defaultPrevented).toBe(true);
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
    expect(trigger).toHaveFocus();
  });

  it("says it closed with Escape when the browser closes it for an Escape elsewhere on the page", async () => {
    const user = userEvent.setup();
    const { onClose } = page();
    await openFrom(user);

    screen.getByRole("link", { name: "Issues" }).focus();
    await user.keyboard("{Escape}");
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
    // Focus wasn't in it, so it stays where it was.
    expect(screen.getByRole("link", { name: "Issues" })).toHaveFocus();
  });

  it("says closed for a close it can't tell apart, like another popover opening", async () => {
    const user = userEvent.setup();
    const { onClose } = page();
    await openFrom(user);

    popover().hidePopover();
    expect(onClose.mock.calls).toEqual([["closed"]]);
  });

  it("closes only a Tooltip open inside it on the first Escape, and itself on the second", async () => {
    const user = userEvent.setup();
    const { onClose } = page({}, () =>
      h(Tooltip, { label: "Hides closed issues" }, { default: ({ trigger }: { trigger: Record<string, unknown> }) => h("button", trigger, "Open only") }),
    );
    await openFrom(user);
    const tooltip = screen.getByRole("tooltip", { hidden: true });
    expect(screen.getByRole("button", { name: "Open only" })).toHaveFocus();
    expect(tooltip).toHaveAttribute("data-state", "open");

    await user.keyboard("{Escape}");
    expect(tooltip).toHaveAttribute("data-state", "closed");
    expect(popover()).toHaveAttribute("data-state", "open");
    expect(onClose).not.toHaveBeenCalled();

    await user.keyboard("{Escape}");
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
  });

  // A Dialog with a Filters button inside it, which opens the popover, as on a settings form.
  function inDialog() {
    const onDialogClose = vi.fn();
    const onClose = vi.fn();
    render({
      render: () =>
        h(Dialog, { id: "settings", title: "Settings", open: true, onClose: onDialogClose }, () => [
          button("Filters", { popovertarget: "filters", "aria-haspopup": "dialog" }),
          h(Popover, { id: "filters", title: "Filters", onClose }, () => field("open-only", "Open issues only")),
          button("Done"),
        ]),
    });
    return { onDialogClose, onClose };
  }

  it("closes alone on Escape inside a Dialog, which fires no close, with focus in it", async () => {
    const user = userEvent.setup();
    const { onDialogClose, onClose } = inDialog();
    await openFrom(user);
    expect(screen.getByRole("textbox", { name: "Open issues only" })).toHaveFocus();

    await user.keyboard("{Escape}");
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
    expect(onDialogClose).not.toHaveBeenCalled();
    expect(screen.getByRole("dialog", { name: "Settings" })).toHaveAttribute("open");
    expect(screen.getByRole("button", { name: "Filters" })).toHaveFocus();

    // With the popover closed, Escape is the Dialog's again.
    await user.keyboard("{Escape}");
    expect(onDialogClose).toHaveBeenCalledWith("escape", "");
  });

  it("closes alone on Escape inside a Dialog with focus on its trigger, too", async () => {
    const user = userEvent.setup();
    const { onDialogClose, onClose } = inDialog();
    await openFrom(user);

    screen.getByRole("button", { name: "Filters" }).focus();
    await user.keyboard("{Escape}");
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
    expect(onDialogClose).not.toHaveBeenCalled();
  });

  it("closes alone on Escape inside a Dialog with focus on another control in the Dialog", async () => {
    const user = userEvent.setup();
    const { onDialogClose, onClose } = inDialog();
    await openFrom(user);

    // Tab moves on out of it, and leaves it open.
    screen.getByRole("button", { name: "Done" }).focus();
    await user.keyboard("{Escape}");
    expect(popover()).toHaveAttribute("data-state", "closed");
    expect(onClose.mock.calls).toEqual([["escape"]]);
    expect(onDialogClose).not.toHaveBeenCalled();
    expect(screen.getByRole("button", { name: "Done" })).toHaveFocus();

    await user.keyboard("{Escape}");
    expect(onDialogClose).toHaveBeenCalledWith("escape", "");
  });

  // Two buttons that open the same popover, like a toolbar's and a menu's.
  function twoTriggers() {
    render({
      render: () => [
        button("Filters", { popovertarget: "filters", "aria-haspopup": "dialog" }),
        button("More filters", { popovertarget: "filters", "aria-haspopup": "dialog" }),
        h(Popover, { id: "filters", title: "Filters" }, () => field("open-only", "Open issues only")),
      ],
    });
    return [screen.getByRole("button", { name: "Filters" }), screen.getByRole("button", { name: "More filters" })] as const;
  }

  it("marks the trigger that opened it as expanded, and every trigger as collapsed while it's closed", async () => {
    const user = userEvent.setup();
    const [first, second] = twoTriggers();
    await nextTick();
    expect(first).toHaveAttribute("aria-expanded", "false");
    expect(second).toHaveAttribute("aria-expanded", "false");

    await user.click(second);
    expect(second).toHaveAttribute("aria-expanded", "true");
    expect(first).toHaveAttribute("aria-expanded", "false");
    await user.keyboard("{Escape}");
    expect(second).toHaveAttribute("aria-expanded", "false");
  });

  it("anchors to the trigger that opened it, and only that one", async () => {
    const user = userEvent.setup();
    const [first, second] = twoTriggers();

    await user.click(first);
    const anchor = first.style.getPropertyValue("anchor-name");
    expect(anchor).toMatch(/^--popover-/);
    await user.keyboard("{Escape}");
    expect(first.style.getPropertyValue("anchor-name")).toBe("");

    await user.click(second);
    expect(second.style.getPropertyValue("anchor-name")).toBe(anchor);
    expect(first.style.getPropertyValue("anchor-name")).toBe("");
  });

  it("opens again when your code closes it and opens it again before the browser says it closed", async () => {
    deferToggle = true;
    const open = ref(false);
    render({
      render: () => [
        button("Filters", { popovertarget: "filters" }),
        h(Popover, { id: "filters", title: "Filters", open: open.value, "onUpdate:open": (value: boolean) => (open.value = value) }, () =>
          field("open-only", "Open issues only"),
        ),
      ],
    });

    open.value = true;
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-state", "open"));
    // Closed, then opened again, before the `toggle` for the close arrives.
    open.value = false;
    await nextTick();
    open.value = true;
    await nextTick();
    await new Promise((resolve) => setTimeout(resolve, 10));
    expect(shown.has(popover())).toBe(true);
    expect(popover()).toHaveAttribute("data-state", "open");
    expect(open.value).toBe(true);
    deferToggle = false;
  });

  it("opens and closes with v-model:open, without firing close, and keeps it in step with its trigger and the browser", async () => {
    const user = userEvent.setup();
    const open = ref(false);
    const onClose = vi.fn();
    render({
      render: () => [
        button("Filters", { popovertarget: "filters" }),
        h(Popover, { id: "filters", title: "Filters", open: open.value, "onUpdate:open": (value: boolean) => (open.value = value), onClose }, () =>
          field("open-only", "Open issues only"),
        ),
        h("a", { href: "#issues" }, "Issues"),
      ],
    });

    open.value = true;
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-state", "open"));
    expect(screen.getByRole("textbox")).toHaveFocus();
    open.value = false;
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-state", "closed"));
    expect(onClose).not.toHaveBeenCalled();
    expect(screen.getByRole("button", { name: "Filters" })).toHaveFocus();

    // Its trigger opens it, and a press outside closes it, and `open` follows both.
    await openFrom(user);
    expect(open.value).toBe(true);
    await user.click(screen.getByRole("link", { name: "Issues" }));
    expect(open.value).toBe(false);
    expect(onClose.mock.calls).toEqual([["outside"]]);
  });

  it("opens on mount when open is true", async () => {
    render(Popover, { props: { id: "filters", title: "Filters", open: true } });
    await nextTick();
    expect(popover()).toHaveAttribute("data-state", "open");
  });

  it("names its close button Close, or its closeLabel", async () => {
    const user = userEvent.setup();
    const { onClose } = page({ closeLabel: "Fermer" });
    await openFrom(user);

    await user.click(screen.getByRole("button", { name: "Fermer" }));
    expect(onClose).toHaveBeenCalledWith("close-button");
  });

  it("puts attributes, classes and listeners on the popover", async () => {
    const user = userEvent.setup();
    const onKeyup = vi.fn();
    page({ class: "wide", "data-testid": "filters", onKeyup });

    await openFrom(user);
    await user.keyboard("a");
    expect(popover()).toHaveClass("popover", "wide");
    expect(popover()).toHaveAttribute("data-testid", "filters");
    expect(onKeyup).toHaveBeenCalled();
  });

  it("mirrors its placement and state as data attributes, and marks its parts", () => {
    const { container } = render(Popover, {
      props: { id: "filters", title: "Filters", placement: "end" },
      slots: { default: () => "Content" },
    });

    const el = container.querySelector(".popover")!;
    expect(el).toHaveAttribute("data-placement", "end");
    expect(el).toHaveAttribute("data-state", "closed");
    expect(el).not.toHaveAttribute("data-side");
    const fallback = render(Popover, { props: { id: "hint", title: "Hint" } });
    expect(fallback.container.querySelector(".popover")).toHaveAttribute("data-placement", "bottom");
    // The close button is a Button, with parts of its own.
    const parts = [...el.querySelectorAll("[data-slot]")]
      .filter((part) => !part.parentElement?.closest('[data-slot="close"]'))
      .map((part) => part.getAttribute("data-slot"));
    expect(parts).toEqual(["header", "title", "close", "body"]);
  });

  it("renders the same markup every time, with IDs from its own, and keeps its elements as it opens", async () => {
    const options = { props: { id: "filters", title: "Filters" }, slots: { default: () => "Content" } };
    const first = render(Popover, options).container.innerHTML;
    const { container, rerender } = render(Popover, options);
    // The anchor's name is generated once it mounts, so it's left out of the comparison.
    const strip = (html: string) => html.replace(/ style="[^"]*"/g, "");
    expect(strip(container.innerHTML)).toBe(strip(first));
    expect(first).not.toMatch(/id="(?!filters)/);

    const el = container.querySelector<HTMLElement>(".popover")!;
    const title = el.querySelector('[data-slot="title"]');
    await rerender({ open: true });
    await nextTick();
    expect(el).toHaveAttribute("data-state", "open");
    expect(container.querySelector(".popover")).toBe(el);
    expect(el.querySelector('[data-slot="title"]')).toBe(title);
  });

  it("draws an arrow when asked, hidden from assistive technologies, and sets data-side once it opens", async () => {
    const user = userEvent.setup();
    page({ arrow: true });
    const arrow = popover().querySelector('[data-slot="arrow"]');
    expect(arrow).toHaveAttribute("aria-hidden", "true");
    expect(arrow).toBeEmptyDOMElement();
    // jsdom has no layout, so the boxes are given: the popover below its trigger.
    screen.getByRole("button", { name: "Filters" }).getBoundingClientRect = () => new DOMRect(0, 100, 100, 30);
    popover().getBoundingClientRect = () => new DOMRect(0, 140, 200, 120);

    // Its size, corners and arrow, which jsdom computes from these.
    popover().style.width = "200px";
    popover().style.height = "120px";
    popover().style.borderTopLeftRadius = "8px";
    (arrow as HTMLElement).style.width = "12px";

    await openFrom(user);
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-side", "bottom"));
    // Across from the trigger's centre, 50px in from the popover's left edge.
    expect((arrow as HTMLElement).style.left).toBe("50px");

    // Flipped above a trigger near the left edge, as close to its centre as the corner allows:
    // the radius and half the arrow's diagonal, 8 + 12 / √2.
    screen.getByRole("button", { name: "Filters" }).getBoundingClientRect = () => new DOMRect(0, 300, 10, 30);
    popover().getBoundingClientRect = () => new DOMRect(0, 170, 200, 120);
    await vi.waitFor(() => expect(popover()).toHaveAttribute("data-side", "top"));
    expect(parseFloat((arrow as HTMLElement).style.left)).toBeCloseTo(8 + 12 / Math.SQRT2);
  });

  it("anchors to its trigger, and places start on the right in right-to-left text without anchor positioning", async () => {
    const user = userEvent.setup();
    // Like a browser without CSS anchor positioning, where the script places it.
    const supports = vi.spyOn(CSS, "supports").mockReturnValue(false);
    page({ placement: "start" });
    const trigger = screen.getByRole("button", { name: "Filters" });
    // A 200 × 100 popover, beside a trigger in the middle of a 1000 × 800 viewport.
    trigger.getBoundingClientRect = () => new DOMRect(400, 300, 100, 30);
    trigger.style.direction = "rtl";
    popover().style.width = "200px";
    popover().style.height = "100px";
    Object.defineProperties(document.documentElement, { clientWidth: { value: 1000, configurable: true }, clientHeight: { value: 800, configurable: true } });

    await openFrom(user);
    await nextTick();
    const anchor = trigger.style.getPropertyValue("anchor-name");
    expect(anchor).toMatch(/^--popover-/);
    expect(popover().style.getPropertyValue("position-anchor")).toBe(anchor);
    // Its start is the trigger's right in right-to-left text: past its right edge, at 500.
    expect(parseFloat(popover().style.left)).toBe(500);
    Reflect.deleteProperty(document.documentElement, "clientWidth");
    Reflect.deleteProperty(document.documentElement, "clientHeight");
    supports.mockRestore();
  });

  it("places end on the left in right-to-left text, and flips bottom above a trigger near the bottom, without anchor positioning", async () => {
    const user = userEvent.setup();
    const supports = vi.spyOn(CSS, "supports").mockReturnValue(false);
    Object.defineProperties(document.documentElement, { clientWidth: { value: 1000, configurable: true }, clientHeight: { value: 800, configurable: true } });
    const { unmount } = page({ placement: "end" });
    const trigger = () => screen.getByRole("button", { name: "Filters" });
    const size = () => {
      popover().style.width = "200px";
      popover().style.height = "100px";
    };
    trigger().getBoundingClientRect = () => new DOMRect(400, 300, 100, 30);
    trigger().style.direction = "rtl";
    size();

    await openFrom(user);
    await nextTick();
    // Its end is the trigger's left: 200px wide, before its left edge at 400.
    expect(parseFloat(popover().style.left)).toBe(200);
    unmount();

    page();
    // 30px from the bottom of an 800px viewport, so 100px doesn't fit below.
    trigger().getBoundingClientRect = () => new DOMRect(400, 740, 100, 30);
    size();
    await openFrom(user);
    await nextTick();
    expect(parseFloat(popover().style.top)).toBe(640);
    Reflect.deleteProperty(document.documentElement, "clientWidth");
    Reflect.deleteProperty(document.documentElement, "clientHeight");
    supports.mockRestore();
  });

  it("warns in development when it has no title", () => {
    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
    render(Popover, { props: { id: "untitled", title: "" } });
    expect(warn).toHaveBeenCalledWith(expect.stringContaining("no title"), expect.anything());

    warn.mockClear();
    render(Popover, { props: { id: "filters", title: "Filters" } });
    expect(warn).not.toHaveBeenCalled();
    warn.mockRestore();
  });
});