@passui/react 0.1.45 → 0.1.46

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

@@ -1,76 +1,78 @@
-import type { ReactNode } from "react"
-import type { MenuRect } from "./menu-reveal"
+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"
+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"
+	| {
+			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
+	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
+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>()
+let last: OpenMenu | null = null;
+let nextId = 1;
+const listeners = new Set<() => void>();
 const emit = () => {
-    for (const listener of listeners) listener()
-}
+	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"
+	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()
+	menu = {
+		id: nextId++,
+		anchor,
+		x,
+		y,
+		items,
+		touch,
+		size,
+		alignX: "start",
+		alignY: "top",
+	};
+	last = menu;
+	emit();
 }
 
 /**
@@ -79,10 +81,10 @@ export function openContextMenu(
  * 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()
+	if (!last) return;
+	menu = { ...last, id: nextId++, items, source: undefined };
+	last = menu;
+	emit();
 }
 
 /**
@@ -92,74 +94,74 @@ export function openFollowUpMenu(items: ContextMenuItem[]) {
  * 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
-    } = {}
+	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()
+	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()
+	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)
-    }
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
 }
 
 export function getContextMenu(): OpenMenu | null {
-    return menu
+	return menu;
 }

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

@@ -1,29 +1,36 @@
-export type MenuNavigationKey = "ArrowDown" | "ArrowUp" | "Home" | "End"
+export type MenuNavigationKey = "ArrowDown" | "ArrowUp" | "Home" | "End";
 
 export function isMenuNavigationKey(key: string): key is MenuNavigationKey {
-    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End"
+	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
+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
+	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
+	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,34 +1,38 @@
-import type { OpenMenu } from "./context-menu-store"
-import type { MenuRect } from "./menu-reveal"
+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 MenuAnchor = Pick<OpenMenu, "x" | "y" | "alignX" | "alignY">;
+type MenuSize = Pick<MenuRect, "width" | "height">;
 type MenuBounds = {
-    left: number
-    top: number
-    right: number
-    bottom: number
-}
+	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)),
-    }
+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)),
+	};
 }

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

@@ -1,42 +1,42 @@
 export type MenuRect = {
-    left: number
-    top: number
-    width: number
-    height: number
-}
+	left: number;
+	top: number;
+	width: number;
+	height: number;
+};
 
 /** Return toward the source while handing its material back to the real trigger. */
 export function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>) {
-    return { ...source, opacity: 0 }
+	return { ...source, opacity: 0 };
 }
 
 /** Animate the material's bounds independently so menu text never stretches. */
 export function menuSurfaceReveal(
-    source: MenuRect | undefined,
-    target: MenuRect & { radius?: number }
+	source: MenuRect | undefined,
+	target: MenuRect & { radius?: number },
 ) {
-    if (
-        !source ||
-        source.width <= 0 ||
-        source.height <= 0 ||
-        target.width <= 0 ||
-        target.height <= 0
-    ) {
-        return {
-            x: 0,
-            y: -4,
-            width: target.width,
-            height: target.height,
-            opacity: 0,
-            borderRadius: target.radius ?? 0,
-        }
-    }
-    return {
-        x: source.left - target.left,
-        y: source.top - target.top,
-        width: source.width,
-        height: source.height,
-        opacity: 1,
-        borderRadius: Math.min(source.width, source.height) / 2,
-    }
+	if (
+		!source ||
+		source.width <= 0 ||
+		source.height <= 0 ||
+		target.width <= 0 ||
+		target.height <= 0
+	) {
+		return {
+			x: 0,
+			y: -4,
+			width: target.width,
+			height: target.height,
+			opacity: 0,
+			borderRadius: target.radius ?? 0,
+		};
+	}
+	return {
+		x: source.left - target.left,
+		y: source.top - target.top,
+		width: source.width,
+		height: source.height,
+		opacity: 1,
+		borderRadius: Math.min(source.width, source.height) / 2,
+	};
 }

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

@@ -1,66 +1,73 @@
-import { type MouseEvent, type PointerEvent, useRef } from "react"
-import { haptic } from "../../lib/haptics"
-import { type ContextMenuItem, openContextMenu } from "./context-menu-store"
+import { type MouseEvent, type PointerEvent, useRef } from "react";
+import { haptic } from "../../lib/haptics";
+import { type ContextMenuItem, openContextMenu } from "./context-menu-store";
 
-const LONG_PRESS_MS = 480
-const MOVE_TOLERANCE = 10
+const LONG_PRESS_MS = 480;
+const MOVE_TOLERANCE = 10;
 
 /**
  * Right-click on desktop, long-press on touch screens: both open the same
  * menu of actions. Spread the returned handlers onto the element.
  */
 export function useContextMenu(items: () => ContextMenuItem[]) {
-    const press = useRef<{
-        x: number
-        y: number
-        timer: ReturnType<typeof setTimeout>
-    } | null>(null)
-    const suppressClick = useRef(false)
+	const press = useRef<{
+		x: number;
+		y: number;
+		timer: ReturnType<typeof setTimeout>;
+	} | null>(null);
+	const suppressClick = useRef(false);
 
-    const cancel = () => {
-        if (press.current) clearTimeout(press.current.timer)
-        press.current = null
-    }
+	const cancel = () => {
+		if (press.current) clearTimeout(press.current.timer);
+		press.current = null;
+	};
 
-    return {
-        onContextMenu(event: MouseEvent) {
-            event.preventDefault()
-            cancel()
-            openContextMenu(event.clientX, event.clientY, items(), false, event.currentTarget)
-        },
-        onPointerDown(event: PointerEvent) {
-            if (event.pointerType !== "touch") return
-            const { clientX: x, clientY: y } = event
-            const anchor = event.currentTarget
-            cancel()
-            press.current = {
-                x,
-                y,
-                timer: setTimeout(() => {
-                    press.current = null
-                    suppressClick.current = true
-                    haptic("medium")
-                    openContextMenu(x, y, items(), true, anchor)
-                }, LONG_PRESS_MS),
-            }
-        },
-        onPointerMove(event: PointerEvent) {
-            const start = press.current
-            if (
-                start &&
-                Math.hypot(event.clientX - start.x, event.clientY - start.y) > MOVE_TOLERANCE
-            ) {
-                cancel()
-            }
-        },
-        onPointerUp: cancel,
-        onPointerCancel: cancel,
-        // The tap that ends a long-press shouldn't also open the row.
-        onClickCapture(event: MouseEvent) {
-            if (!suppressClick.current) return
-            suppressClick.current = false
-            event.preventDefault()
-            event.stopPropagation()
-        },
-    }
+	return {
+		onContextMenu(event: MouseEvent) {
+			event.preventDefault();
+			cancel();
+			openContextMenu(
+				event.clientX,
+				event.clientY,
+				items(),
+				false,
+				event.currentTarget,
+			);
+		},
+		onPointerDown(event: PointerEvent) {
+			if (event.pointerType !== "touch") return;
+			const { clientX: x, clientY: y } = event;
+			const anchor = event.currentTarget;
+			cancel();
+			press.current = {
+				x,
+				y,
+				timer: setTimeout(() => {
+					press.current = null;
+					suppressClick.current = true;
+					haptic("medium");
+					openContextMenu(x, y, items(), true, anchor);
+				}, LONG_PRESS_MS),
+			};
+		},
+		onPointerMove(event: PointerEvent) {
+			const start = press.current;
+			if (
+				start &&
+				Math.hypot(event.clientX - start.x, event.clientY - start.y) >
+					MOVE_TOLERANCE
+			) {
+				cancel();
+			}
+		},
+		onPointerUp: cancel,
+		onPointerCancel: cancel,
+		// The tap that ends a long-press shouldn't also open the row.
+		onClickCapture(event: MouseEvent) {
+			if (!suppressClick.current) return;
+			suppressClick.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+		},
+	};
 }