@passui/react 0.1.46 → 0.2.0

package/src/components/context-menu/context-menu-host.tsx

@@ -1,459 +0,0 @@
-import {
-	AnimatePresence,
-	motion,
-	useIsPresent,
-	useReducedMotion,
-} from "motion/react";
-import {
-	useEffect,
-	useLayoutEffect,
-	useRef,
-	useState,
-	useSyncExternalStore,
-} from "react";
-import { FLOATING_LAYER } from "../../hooks/use-dismiss";
-import { CheckIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import {
-	belongsToFloatingSurface,
-	registerFloatingLayer,
-} from "../../lib/floating-layers";
-import { screenEdges } from "../../lib/screen-edges";
-import { fluidOvershoot } from "../../motion/transitions";
-import { concealMenuSource } from "./conceal-menu-source";
-import {
-	findMenuTypeaheadIndex,
-	isMenuNavigationKey,
-	nextMenuIndex,
-} from "./menu-navigation";
-import { menuPosition } from "./menu-position";
-import { menuSurfaceExit, menuSurfaceReveal } from "./menu-reveal";
-import {
-	closeContextMenu,
-	getContextMenu,
-	type ContextMenuSize,
-	subscribeContextMenu,
-} from "./context-menu-store";
-import type { OpenMenu } from "./context-menu-store";
-
-const surfaceSizes: Record<ContextMenuSize, string> = {
-	sm: "min-w-44 max-w-[min(240px,calc(100vw-24px))] rounded-2xl p-1",
-	md: "min-w-50 max-w-[min(280px,calc(100vw-24px))] rounded-3xl p-1.5",
-	lg: "min-w-56 max-w-[min(320px,calc(100vw-24px))] rounded-3xl p-2",
-};
-const itemSizes: Record<ContextMenuSize, string> = {
-	sm: "flex items-center gap-2 rounded-md px-2 py-1 text-start text-caption transition-colors disabled:opacity-40",
-	md: "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
-	lg: "flex items-center gap-3 rounded-lg px-3 py-2 text-start text-body transition-colors disabled:opacity-40",
-};
-const headingSizes: Record<ContextMenuSize, string> = {
-	sm: "px-2 pt-1 pb-0.5 text-caption2 font-semibold text-label-tertiary",
-	md: "px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary",
-	lg: "px-3 pt-2 pb-1 text-caption font-semibold text-label-tertiary",
-};
-const dividerSizes: Record<ContextMenuSize, string> = {
-	sm: "mx-1.5 my-0.5 h-px bg-separator/80",
-	md: "mx-2 my-1 h-px bg-separator/80",
-	lg: "mx-2.5 my-1.5 h-px bg-separator/80",
-};
-const iconSlotSizes: Record<ContextMenuSize, string> = {
-	sm: "flex w-3.5 shrink-0 justify-center text-label-secondary",
-	md: "flex w-4 shrink-0 justify-center text-label-secondary",
-	lg: "flex w-5 shrink-0 justify-center text-label-secondary",
-};
-const checkIconSizes: Record<ContextMenuSize, number> = {
-	sm: 13,
-	md: 15,
-	lg: 17,
-};
-
-/** Renders the open context menu. Mount once, near the app root. */
-export function ContextMenuHost() {
-	const menu = useSyncExternalStore(
-		subscribeContextMenu,
-		getContextMenu,
-		() => null,
-	);
-	return (
-		<AnimatePresence>
-			{menu && <Menu key={menu.id} menu={menu} />}
-		</AnimatePresence>
-	);
-}
-
-function Menu({ menu }: { menu: OpenMenu }) {
-	const present = useIsPresent();
-	const reducedMotion = useReducedMotion();
-	const ref = useRef<HTMLDivElement>(null);
-	const content = useRef<HTMLDivElement>(null);
-	const [position, setPosition] = useState({
-		left: menu.x,
-		top: menu.y,
-		originX: 0,
-		originY: 0,
-		maxHeight: undefined as number | undefined,
-		width: 0,
-		height: 0,
-		radius: 0,
-		ready: false,
-	});
-	const [focused, setFocused] = useState(-1);
-	const typeahead = useRef({ query: "", at: 0 });
-
-	useLayoutEffect(() => {
-		if (
-			!present ||
-			(!menu.source && !menu.toolbar) ||
-			!position.ready ||
-			!(menu.anchor instanceof HTMLElement)
-		)
-			return;
-		const anchor = menu.toolbar ?? menu.anchor;
-		const surface = ref.current;
-		const restore = concealMenuSource(anchor, Boolean(menu.toolbar));
-		return () => {
-			const restored = restore();
-			if (
-				restored &&
-				menu.toolbar &&
-				menu.restoreFocus &&
-				menu.anchor instanceof HTMLElement &&
-				(document.activeElement === document.body ||
-					surface?.contains(document.activeElement))
-			)
-				menu.anchor.focus({ preventScroll: true });
-		};
-	}, [menu, position.ready, present]);
-
-	useLayoutEffect(() => {
-		const surface = ref.current;
-		if (!surface || !present || !position.ready) return;
-		const unregister = menu.anchor
-			? registerFloatingLayer(surface, menu.anchor)
-			: undefined;
-		surface.focus();
-		return unregister;
-	}, [menu.anchor, present, position.ready]);
-
-	// Keep the whole menu on screen, opening up or left when near an edge. The
-	// layout size, not the on-screen one: the menu is still mid-scale here.
-	useLayoutEffect(() => {
-		if (!ref.current || !present) return;
-		const viewport = window.visualViewport;
-		let frame = 0;
-		const refit = () => {
-			const element = ref.current;
-			if (!element) return;
-			const edges = screenEdges();
-			const left = viewport?.offsetLeft ?? 0;
-			const top = viewport?.offsetTop ?? 0;
-			const next = {
-				...menuPosition(
-					menu,
-					{
-						width: element.offsetWidth,
-						height: Math.max(
-							element.offsetHeight,
-							(content.current?.scrollHeight ?? 0) + 12,
-						),
-					},
-					{
-						left: left + edges.left,
-						top: top + edges.top,
-						right: left + (viewport?.width ?? window.innerWidth) - edges.right,
-						bottom:
-							top + (viewport?.height ?? window.innerHeight) - edges.bottom,
-					},
-				),
-				radius:
-					Number.parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0,
-				ready: true,
-			};
-			setPosition((current) =>
-				current.left === next.left &&
-				current.top === next.top &&
-				current.originX === next.originX &&
-				current.originY === next.originY &&
-				current.maxHeight === next.maxHeight &&
-				current.width === next.width &&
-				current.height === next.height &&
-				current.radius === next.radius &&
-				current.ready === next.ready
-					? current
-					: next,
-			);
-		};
-		const schedule = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(refit);
-		};
-		refit();
-		viewport?.addEventListener("resize", schedule);
-		viewport?.addEventListener("scroll", schedule);
-		window.addEventListener("resize", schedule);
-		return () => {
-			cancelAnimationFrame(frame);
-			viewport?.removeEventListener("resize", schedule);
-			viewport?.removeEventListener("scroll", schedule);
-			window.removeEventListener("resize", schedule);
-		};
-	}, [menu, present]);
-
-	useEffect(() => {
-		if (!present) return;
-		const onPointer = (event: PointerEvent) => {
-			if (
-				!ref.current ||
-				!belongsToFloatingSurface(ref.current, event.target as Element)
-			)
-				closeContextMenu(false);
-		};
-		const close = () => closeContextMenu(false);
-		let scrollIntentUntil = 0;
-		const markScroll = () => {
-			scrollIntentUntil = performance.now() + 2000;
-		};
-		const onScrollKey = (event: KeyboardEvent) => {
-			if (
-				!ref.current?.contains(event.target as Node) &&
-				["PageDown", "PageUp", "Home", "End", " "].includes(event.key)
-			)
-				markScroll();
-		};
-		const onScroll = (event: Event) => {
-			if (
-				performance.now() < scrollIntentUntil &&
-				!ref.current?.contains(event.target as Node)
-			)
-				close();
-		};
-		// Opened by a long-press: ignore the finger lifting off.
-		const timer = setTimeout(() => {
-			window.addEventListener("pointerdown", onPointer, true);
-		}, 0);
-		window.addEventListener("blur", close);
-		window.addEventListener("wheel", markScroll, {
-			capture: true,
-			passive: true,
-		});
-		window.addEventListener("touchmove", markScroll, {
-			capture: true,
-			passive: true,
-		});
-		window.addEventListener("keydown", onScrollKey, true);
-		window.addEventListener("scroll", onScroll, true);
-		return () => {
-			clearTimeout(timer);
-			window.removeEventListener("pointerdown", onPointer, true);
-			window.removeEventListener("blur", close);
-			window.removeEventListener("wheel", markScroll, true);
-			window.removeEventListener("touchmove", markScroll, true);
-			window.removeEventListener("keydown", onScrollKey, true);
-			window.removeEventListener("scroll", onScroll, true);
-		};
-	}, [present]);
-
-	const source = menuSurfaceReveal(
-		position.ready ? (menu.toolbarRect ?? menu.source) : undefined,
-		position,
-	);
-	let actionIndex = -1;
-	let dividerIndex = 0;
-	let headingIndex = 0;
-	return (
-		<div
-			ref={ref}
-			role="menu"
-			tabIndex={-1}
-			onKeyDown={(event) => {
-				if (!present) return;
-				if (event.key === "Escape") {
-					event.preventDefault();
-					event.stopPropagation();
-					closeContextMenu();
-					return;
-				}
-				if (event.key === "Tab") {
-					closeContextMenu();
-					return;
-				}
-				const controls = Array.from(
-					ref.current?.querySelectorAll<HTMLButtonElement>(
-						"[role=menuitem]:not(:disabled)",
-					) ?? [],
-				);
-				if (!isMenuNavigationKey(event.key)) {
-					if (
-						event.key.length !== 1 ||
-						!event.key.trim() ||
-						event.altKey ||
-						event.ctrlKey ||
-						event.metaKey ||
-						event.nativeEvent.isComposing
-					)
-						return;
-					const now = performance.now();
-					const query =
-						(now - typeahead.current.at < 700 ? typeahead.current.query : "") +
-						event.key;
-					typeahead.current = { query, at: now };
-					const labels = controls.map((control) => control.textContent ?? "");
-					const current = controls.indexOf(
-						document.activeElement as HTMLButtonElement,
-					);
-					let next = findMenuTypeaheadIndex(labels, query, current);
-					if (next < 0) {
-						typeahead.current.query = event.key;
-						next = findMenuTypeaheadIndex(labels, event.key, current);
-					}
-					if (next >= 0) {
-						event.preventDefault();
-						controls[next]?.focus();
-					}
-					return;
-				}
-				event.preventDefault();
-				if (!controls.length) return;
-				const current = controls.indexOf(
-					document.activeElement as HTMLButtonElement,
-				);
-				const next = nextMenuIndex(event.key, current, controls.length);
-				controls[next]?.focus();
-			}}
-			{...{ [FLOATING_LAYER]: "" }}
-			className={cn(
-				"fixed isolate z-75 flex flex-col outline-none",
-				surfaceSizes[menu.size],
-				menu.touch && "min-w-60",
-				!present && "pointer-events-none",
-			)}
-			style={{
-				left: position.left,
-				top: position.top,
-				maxHeight: position.maxHeight,
-				minWidth: menu.toolbarRect
-					? Math.min(
-							Math.max(200, menu.toolbarRect.width),
-							window.innerWidth - 24,
-						)
-					: undefined,
-				visibility: position.ready ? undefined : "hidden",
-			}}
-			onContextMenu={(event) => event.preventDefault()}
-		>
-			{position.ready && (
-				<motion.div
-					aria-hidden="true"
-					className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-3xl"
-					style={{ width: "100%", height: "100%" }}
-					initial={reducedMotion || !position.ready ? false : source}
-					animate={
-						position.ready
-							? {
-									x: 0,
-									y: 0,
-									width: position.width,
-									height: position.height,
-									opacity: 1,
-									borderRadius: position.radius,
-								}
-							: undefined
-					}
-					exit={reducedMotion ? { opacity: 0 } : menuSurfaceExit(source)}
-					transition={
-						reducedMotion
-							? { duration: 0 }
-							: { ...fluidOvershoot, opacity: { duration: 0.16 } }
-					}
-				/>
-			)}
-			<motion.div
-				ref={content}
-				className="flex flex-col overflow-y-auto overscroll-contain"
-				style={{
-					maxHeight: position.maxHeight
-						? Math.max(0, position.maxHeight - 12)
-						: undefined,
-				}}
-				initial={
-					reducedMotion
-						? false
-						: {
-								opacity: 0,
-								scale: 0.96,
-								y: menu.source && menu.source.top > position.top ? 4 : -4,
-							}
-				}
-				animate={{ opacity: 1, scale: 1, y: 0 }}
-				exit={{
-					opacity: 0,
-					scale: 0.98,
-					transition: {
-						duration: reducedMotion ? 0 : 0.06,
-					},
-				}}
-				transition={{
-					duration: reducedMotion ? 0 : 0.2,
-					ease: reducedMotion
-						? undefined
-						: ([0.4, 0, 0.2, 1] as [number, number, number, number]),
-					delay: reducedMotion || !menu.source ? 0 : 0.06,
-				}}
-			>
-				{menu.items.map((item) => {
-					if (item === "divider") {
-						const key = `divider-${dividerIndex++}`;
-						return <div key={key} className={dividerSizes[menu.size]} />;
-					}
-					if ("heading" in item) {
-						const key = `heading-${headingIndex++}`;
-						return (
-							<span key={key} className={headingSizes[menu.size]}>
-								{item.heading}
-							</span>
-						);
-					}
-					if (!item.disabled) actionIndex += 1;
-					const current = actionIndex;
-					const key = `item-${current}`;
-					return (
-						<button
-							key={key}
-							type="button"
-							role="menuitem"
-							tabIndex={-1}
-							disabled={item.disabled}
-							onFocus={() => setFocused(current)}
-							onPointerEnter={() => !item.disabled && setFocused(current)}
-							onClick={() => {
-								closeContextMenu();
-								item.onSelect();
-							}}
-							className={cn(
-								itemSizes[menu.size],
-								menu.touch ? "py-2.5" : "py-1.5",
-								item.destructive ? "text-danger" : "text-label",
-								focused === current &&
-									!item.disabled &&
-									(item.destructive ? "bg-danger/10" : "bg-fill"),
-							)}
-						>
-							<span className={iconSlotSizes[menu.size]}>
-								{item.checked ? (
-									<CheckIcon
-										size={checkIconSizes[menu.size]}
-										strokeWidth={2.4}
-										className="text-accent-text"
-									/>
-								) : (
-									item.icon
-								)}
-							</span>
-							<span className="grow truncate">{item.label}</span>
-						</button>
-					);
-				})}
-			</motion.div>
-		</div>
-	);
-}

package/src/components/context-menu/context-menu-store.ts

@@ -1,167 +0,0 @@
-import type { ReactNode } from "react";
-import type { MenuRect } from "./menu-reveal";
-
-export type ContextMenuAlignX = "start" | "end";
-export type ContextMenuAlignY = "top" | "bottom";
-export type ContextMenuEdge = "leading" | "trailing";
-export type ContextMenuSize = "sm" | "md" | "lg";
-
-/** One row of a context menu, or a divider between groups of rows. */
-export type ContextMenuItem =
-	| {
-			label: string;
-			icon?: ReactNode;
-			onSelect: () => void;
-			destructive?: boolean;
-			disabled?: boolean;
-			/** Marks the current choice, e.g. a note's kind. */
-			checked?: boolean;
-	  }
-	| { heading: string }
-	| "divider";
-
-export interface OpenMenu {
-	id: number;
-	anchor: Element | null;
-	x: number;
-	y: number;
-	items: ContextMenuItem[];
-	/** Opened by long-press: bigger rows for fingers. */
-	touch: boolean;
-	/** Surface, item and heading density. @default "md" */
-	size: ContextMenuSize;
-	/** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
-	alignX: ContextMenuAlignX;
-	/** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
-	alignY: ContextMenuAlignY;
-	source?: MenuRect;
-	toolbar?: HTMLElement;
-	toolbarRect?: MenuRect;
-	restoreFocus?: boolean;
-}
-
-let menu: OpenMenu | null = null;
-/** The menu shown most recently, kept after it closes so a follow-up can stand in its place. */
-let last: OpenMenu | null = null;
-let nextId = 1;
-const listeners = new Set<() => void>();
-const emit = () => {
-	for (const listener of listeners) listener();
-};
-
-/** Opens a menu at a point, such as where a pointer was pressed. */
-export function openContextMenu(
-	x: number,
-	y: number,
-	items: ContextMenuItem[],
-	touch = false,
-	anchor: Element | null = typeof document === "undefined"
-		? null
-		: document.activeElement,
-	size: ContextMenuSize = "md",
-) {
-	menu = {
-		id: nextId++,
-		anchor,
-		x,
-		y,
-		items,
-		touch,
-		size,
-		alignX: "start",
-		alignY: "top",
-	};
-	last = menu;
-	emit();
-}
-
-/**
- * Opens a second menu where the last one stood, the way an iOS menu swaps
- * in a submenu: a long list (a note's fonts, its kinds) stays one row in the
- * first menu instead of making it tall.
- */
-export function openFollowUpMenu(items: ContextMenuItem[]) {
-	if (!last) return;
-	menu = { ...last, id: nextId++, items, source: undefined };
-	last = menu;
-	emit();
-}
-
-/**
- * Expands a control into a menu, lined up with its leading or trailing
- * edge and growing down (or up) from the control's bounds. Leading and
- * trailing follow the text direction, so right-to-left languages mirror.
- * The menu's real size decides where it goes; nothing is guessed.
- */
-export function openMenu(
-	anchor: Element,
-	items: ContextMenuItem[],
-	{
-		edge = "leading",
-		above = false,
-		toolbar,
-		size = "md",
-	}: {
-		edge?: ContextMenuEdge;
-		above?: boolean;
-		/** Replace this action group with a horizontally expanding menu surface. */
-		toolbar?: HTMLElement;
-		/** Surface, item and heading density. @default "md" */
-		size?: ContextMenuSize;
-	} = {},
-) {
-	const rect = anchor.getBoundingClientRect();
-	const toolbarRect = toolbar?.getBoundingClientRect();
-	const rtl = getComputedStyle(anchor).direction === "rtl";
-	// Trailing is the right edge in left-to-right text, the left edge in right-to-left.
-	const right = (edge === "trailing") !== rtl;
-	menu = {
-		id: nextId++,
-		anchor,
-		x: right ? (toolbarRect ?? rect).right : (toolbarRect ?? rect).left,
-		y: toolbar ? rect.top : above ? rect.bottom : rect.top,
-		items,
-		touch: false,
-		size,
-		alignX: right ? "end" : "start",
-		alignY: above ? "bottom" : "top",
-		toolbar,
-		toolbarRect,
-		source: {
-			left: rect.left,
-			top: rect.top,
-			width: rect.width,
-			height: rect.height,
-		},
-	};
-	last = menu;
-	emit();
-}
-
-export function closeContextMenu(restoreFocus = true) {
-	if (!menu) return;
-	const anchor = menu.anchor;
-	const toolbar = menu.toolbar;
-	menu.restoreFocus = restoreFocus;
-	menu = null;
-	if (
-		restoreFocus &&
-		!toolbar &&
-		typeof HTMLElement !== "undefined" &&
-		anchor instanceof HTMLElement &&
-		anchor.isConnected
-	)
-		anchor.focus();
-	emit();
-}
-
-export function subscribeContextMenu(listener: () => void) {
-	listeners.add(listener);
-	return () => {
-		listeners.delete(listener);
-	};
-}
-
-export function getContextMenu(): OpenMenu | null {
-	return menu;
-}

package/src/components/context-menu/menu-navigation.ts

@@ -1,36 +0,0 @@
-export type MenuNavigationKey = "ArrowDown" | "ArrowUp" | "Home" | "End";
-
-export function isMenuNavigationKey(key: string): key is MenuNavigationKey {
-	return (
-		key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End"
-	);
-}
-
-/** Index of the next enabled action in a menu, with wrapping arrow navigation. */
-export function nextMenuIndex(
-	key: MenuNavigationKey,
-	current: number,
-	count: number,
-): number {
-	if (count <= 0) return -1;
-	if (key === "Home") return 0;
-	if (key === "End") return count - 1;
-	if (key === "ArrowDown") return (current + 1) % count;
-	return current < 0 ? count - 1 : (current - 1 + count) % count;
-}
-
-/** Finds a matching label after the current action, wrapping at the end. */
-export function findMenuTypeaheadIndex(
-	labels: ReadonlyArray<string>,
-	query: string,
-	current: number,
-): number {
-	if (!labels.length || !query.trim()) return -1;
-	const needle = query.toLocaleLowerCase();
-	for (let offset = 1; offset <= labels.length; offset++) {
-		const index = (current + offset + labels.length) % labels.length;
-		if (labels[index]?.trim().toLocaleLowerCase().startsWith(needle))
-			return index;
-	}
-	return -1;
-}

package/src/components/context-menu/menu-position.ts

@@ -1,38 +0,0 @@
-import type { OpenMenu } from "./context-menu-store";
-import type { MenuRect } from "./menu-reveal";
-
-type MenuAnchor = Pick<OpenMenu, "x" | "y" | "alignX" | "alignY">;
-type MenuSize = Pick<MenuRect, "width" | "height">;
-type MenuBounds = {
-	left: number;
-	top: number;
-	right: number;
-	bottom: number;
-};
-
-/** Fit within the current visible viewport, including a keyboard or Safari pan. */
-export function menuPosition(
-	menu: MenuAnchor,
-	size: MenuSize,
-	bounds: MenuBounds,
-) {
-	const { width, height } = size;
-	const { left, top, right, bottom } = bounds;
-	const fitsAfterX = menu.x + width <= right;
-	const fitsBeforeX = menu.x - width >= left;
-	const endX = menu.alignX === "end" ? fitsBeforeX || !fitsAfterX : !fitsAfterX;
-	const fitsBelow = menu.y + height <= bottom;
-	const fitsAbove = menu.y - height >= top;
-	const endY = menu.alignY === "bottom" ? fitsAbove || !fitsBelow : !fitsBelow;
-	const clamp = (value: number, min: number, max: number) =>
-		Math.min(Math.max(value, min), Math.max(min, max));
-	return {
-		left: clamp(endX ? menu.x - width : menu.x, left, right - width),
-		top: clamp(endY ? menu.y - height : menu.y, top, bottom - height),
-		originX: endX ? 1 : 0,
-		originY: endY ? 1 : 0,
-		maxHeight: Math.max(0, bottom - top),
-		width,
-		height: Math.min(height, Math.max(0, bottom - top)),
-	};
-}