// The menus that open, each a `<details class="popover">`, close as menus
// do: a click anywhere outside one closes it, so opening one closes any
// other; Escape closes the open ones, handing focus back to the summary
// it was in; and a page drawn anew closes them all. One marked
// `data-held`, busy with what was asked in it, stays open.

/** Closes every open menu that does not hold `inside`. */
export function closeMenus(inside?: Node | null): void {
	for (const menu of document.querySelectorAll<HTMLDetailsElement>(
		'details.popover[open]:not([data-held])'
	)) {
		if (!inside || !menu.contains(inside)) menu.open = false;
	}
}

export function clicked(e: MouseEvent): void {
	closeMenus(e.target as Node | null);
}

export function pressed(e: KeyboardEvent): void {
	if (e.key !== 'Escape') return;
	const menu = (e.target as Element | null)?.closest?.<HTMLDetailsElement>(
		'details.popover[open]:not([data-held])'
	);
	closeMenus();
	menu?.querySelector('summary')?.focus();
}