@passui/react 0.1.45 → 0.1.47

package/src/hooks/use-dismiss.ts

@@ -1,8 +1,11 @@
-import { type RefObject, useEffect } from "react"
-import { belongsToFloatingSurface, ownsFloatingLayer } from "../lib/floating-layers"
+import { type RefObject, useEffect } from "react";
+import {
+	belongsToFloatingSurface,
+	ownsFloatingLayer,
+} from "../lib/floating-layers";
 
 /** Marks a floating layer (a pop-up list, a menu) whose clicks belong to what opened it. */
-export { FLOATING_LAYER } from "../lib/floating-layers"
+export { FLOATING_LAYER } from "../lib/floating-layers";
 
 /**
  * Calls `onDismiss` when the user presses Escape or clicks outside `ref`
@@ -10,31 +13,32 @@ export { FLOATING_LAYER } from "../lib/floating-layers"
  * layer opened from inside, such as a pop-up button's list, don't count.
  */
 export function useDismiss(
-    ref: RefObject<HTMLElement | null>,
-    active: boolean,
-    onDismiss: () => void
+	ref: RefObject<HTMLElement | null>,
+	active: boolean,
+	onDismiss: () => void,
 ): void {
-    useEffect(() => {
-        if (!active) return
-        const onPointerDown = (event: PointerEvent) => {
-            const target = event.target as Element
-            const surface = ref.current
-            if (surface && belongsToFloatingSurface(surface, target)) return
-            onDismiss()
-        }
-        const onKeyDown = (event: KeyboardEvent) => {
-            if (event.defaultPrevented) return
-            if (ref.current && ownsFloatingLayer(ref.current, document.activeElement)) return
-            if (event.key === "Escape") {
-                event.preventDefault()
-                onDismiss()
-            }
-        }
-        document.addEventListener("pointerdown", onPointerDown)
-        window.addEventListener("keydown", onKeyDown)
-        return () => {
-            document.removeEventListener("pointerdown", onPointerDown)
-            window.removeEventListener("keydown", onKeyDown)
-        }
-    }, [ref, active, onDismiss])
+	useEffect(() => {
+		if (!active) return;
+		const onPointerDown = (event: PointerEvent) => {
+			const target = event.target as Element;
+			const surface = ref.current;
+			if (surface && belongsToFloatingSurface(surface, target)) return;
+			onDismiss();
+		};
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.defaultPrevented) return;
+			if (ref.current && ownsFloatingLayer(ref.current, document.activeElement))
+				return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onDismiss();
+			}
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown);
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [ref, active, onDismiss]);
 }

package/src/hooks/use-floating-dismiss.ts

@@ -1,28 +1,30 @@
-import { type RefObject, useEffect } from "react"
-import { isOutsideFloatingSurface } from "../lib/floating-layers"
+import { type RefObject, useEffect } from "react";
+import { isOutsideFloatingSurface } from "../lib/floating-layers";
 
 /** Dismiss an anchored portal without stealing focus from outside pointer interactions. */
 export function useFloatingDismiss(
-    surface: RefObject<HTMLElement | null>,
-    anchor: HTMLElement,
-    onDismiss: (restoreFocus: boolean) => void
+	surface: RefObject<HTMLElement | null>,
+	anchor: HTMLElement,
+	onDismiss: (restoreFocus: boolean) => void,
 ) {
-    useEffect(() => {
-        const onPointer = (event: PointerEvent) => {
-            if (isOutsideFloatingSurface(surface.current, anchor, event.target)) onDismiss(false)
-        }
-        const onFocus = (event: FocusEvent) => {
-            if (isOutsideFloatingSurface(surface.current, anchor, event.target)) onDismiss(false)
-        }
-        const onBlur = () => onDismiss(false)
+	useEffect(() => {
+		const onPointer = (event: PointerEvent) => {
+			if (isOutsideFloatingSurface(surface.current, anchor, event.target))
+				onDismiss(false);
+		};
+		const onFocus = (event: FocusEvent) => {
+			if (isOutsideFloatingSurface(surface.current, anchor, event.target))
+				onDismiss(false);
+		};
+		const onBlur = () => onDismiss(false);
 
-        document.addEventListener("pointerdown", onPointer, true)
-        document.addEventListener("focusin", onFocus, true)
-        window.addEventListener("blur", onBlur)
-        return () => {
-            document.removeEventListener("pointerdown", onPointer, true)
-            document.removeEventListener("focusin", onFocus, true)
-            window.removeEventListener("blur", onBlur)
-        }
-    }, [surface, anchor, onDismiss])
+		document.addEventListener("pointerdown", onPointer, true);
+		document.addEventListener("focusin", onFocus, true);
+		window.addEventListener("blur", onBlur);
+		return () => {
+			document.removeEventListener("pointerdown", onPointer, true);
+			document.removeEventListener("focusin", onFocus, true);
+			window.removeEventListener("blur", onBlur);
+		};
+	}, [surface, anchor, onDismiss]);
 }

package/src/hooks/use-media-query.ts

@@ -1,87 +1,94 @@
-import { useCallback, useSyncExternalStore } from "react"
+import { useCallback, useSyncExternalStore } from "react";
 
 const BREAKPOINTS = {
-    "2xl": 1536,
-    "3xl": 1600,
-    "4xl": 2000,
-    lg: 1024,
-    md: 800,
-    sm: 640,
-    xl: 1280,
-} as const
+	"2xl": 1536,
+	"3xl": 1600,
+	"4xl": 2000,
+	lg: 1024,
+	md: 800,
+	sm: 640,
+	xl: 1280,
+} as const;
 
-export type Breakpoint = keyof typeof BREAKPOINTS
-export type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`
+export type Breakpoint = keyof typeof BREAKPOINTS;
+export type BreakpointQuery =
+	| Breakpoint
+	| `max-${Breakpoint}`
+	| `${Breakpoint}:max-${Breakpoint}`;
 function resolveMin(value: Breakpoint | number): string {
-    const px = typeof value === "number" ? value : BREAKPOINTS[value]
-    return `(min-width: ${px}px)`
+	const px = typeof value === "number" ? value : BREAKPOINTS[value];
+	return `(min-width: ${px}px)`;
 }
 
 function resolveMax(value: Breakpoint | number): string {
-    const px = typeof value === "number" ? value : BREAKPOINTS[value]
-    return `(max-width: ${px - 1}px)`
+	const px = typeof value === "number" ? value : BREAKPOINTS[value];
+	return `(max-width: ${px - 1}px)`;
 }
 
-function parseQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): string {
-    if (typeof query !== "string") {
-        const parts: string[] = []
-        if (query.min != null) parts.push(resolveMin(query.min))
-        if (query.max != null) parts.push(resolveMax(query.max))
-        if (query.pointer === "coarse") parts.push("(pointer: coarse)")
-        if (query.pointer === "fine") parts.push("(pointer: fine)")
-        if (parts.length === 0) return "(min-width: 0px)"
-        return parts.join(" and ")
-    }
+function parseQuery(
+	query: BreakpointQuery | MediaQueryInput | (string & {}),
+): string {
+	if (typeof query !== "string") {
+		const parts: string[] = [];
+		if (query.min != null) parts.push(resolveMin(query.min));
+		if (query.max != null) parts.push(resolveMax(query.max));
+		if (query.pointer === "coarse") parts.push("(pointer: coarse)");
+		if (query.pointer === "fine") parts.push("(pointer: fine)");
+		if (parts.length === 0) return "(min-width: 0px)";
+		return parts.join(" and ");
+	}
 
-    if (query.startsWith("(")) return query
+	if (query.startsWith("(")) return query;
 
-    const parts: string[] = []
-    for (const segment of query.split(":")) {
-        if (segment.startsWith("max-")) {
-            const bp = segment.slice(4)
-            if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint))
-        } else if (segment in BREAKPOINTS) {
-            parts.push(resolveMin(segment as Breakpoint))
-        }
-    }
+	const parts: string[] = [];
+	for (const segment of query.split(":")) {
+		if (segment.startsWith("max-")) {
+			const bp = segment.slice(4);
+			if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint));
+		} else if (segment in BREAKPOINTS) {
+			parts.push(resolveMin(segment as Breakpoint));
+		}
+	}
 
-    return parts.length > 0 ? parts.join(" and ") : query
+	return parts.length > 0 ? parts.join(" and ") : query;
 }
 
 function getServerSnapshot(): boolean {
-    return false
+	return false;
 }
 
 export type MediaQueryInput = {
-    min?: Breakpoint | number
-    max?: Breakpoint | number
-    /** Touch-like input (finger). Use "fine" for mouse/trackpad. */
-    pointer?: PointerPrecision
-}
+	min?: Breakpoint | number;
+	max?: Breakpoint | number;
+	/** Touch-like input (finger). Use "fine" for mouse/trackpad. */
+	pointer?: PointerPrecision;
+};
 
-export type PointerPrecision = "coarse" | "fine"
+export type PointerPrecision = "coarse" | "fine";
 
-export function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): boolean {
-    const mediaQuery = parseQuery(query)
+export function useMediaQuery(
+	query: BreakpointQuery | MediaQueryInput | (string & {}),
+): boolean {
+	const mediaQuery = parseQuery(query);
 
-    const subscribe = useCallback(
-        (callback: () => void) => {
-            if (typeof window === "undefined") return () => {}
-            const mql = window.matchMedia(mediaQuery)
-            mql.addEventListener("change", callback)
-            return () => mql.removeEventListener("change", callback)
-        },
-        [mediaQuery]
-    )
+	const subscribe = useCallback(
+		(callback: () => void) => {
+			if (typeof window === "undefined") return () => {};
+			const mql = window.matchMedia(mediaQuery);
+			mql.addEventListener("change", callback);
+			return () => mql.removeEventListener("change", callback);
+		},
+		[mediaQuery],
+	);
 
-    const getSnapshot = useCallback(() => {
-        if (typeof window === "undefined") return false
-        return window.matchMedia(mediaQuery).matches
-    }, [mediaQuery])
+	const getSnapshot = useCallback(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia(mediaQuery).matches;
+	}, [mediaQuery]);
 
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
 export function useIsMobile(): boolean {
-    return useMediaQuery("(max-width: 768px)")
+	return useMediaQuery("(max-width: 768px)");
 }

package/src/hooks/use-minimize-on-scroll.ts

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react"
-import { minimizeDecision } from "./scroll/minimize-decision"
+import { useEffect, useState } from "react";
+import { minimizeDecision } from "./scroll/minimize-decision";
 
 /**
  * Minimized while you scroll down through content, restored when you scroll
@@ -7,62 +7,71 @@ import { minimizeDecision } from "./scroll/minimize-decision"
  * Listens to every scroll container, since each screen scrolls its own pane.
  */
 export function useMinimizeOnScroll() {
-    const [minimized, setMinimized] = useState(false)
-    useEffect(() => {
-        const anchors = new WeakMap<Element, number>()
-        let intent: number | null = null
-        const onIntent = () => {
-            intent = performance.now()
-        }
-        const onKey = (event: KeyboardEvent) => {
-            if (
-                ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(
-                    event.key
-                )
-            )
-                onIntent()
-        }
-        const onPointer = (event: PointerEvent) => {
-            if (event.buttons === 1) onIntent()
-        }
-        const onScroll = (event: Event) => {
-            const pane = event.target instanceof Element ? event.target : document.scrollingElement
-            if (
-                !pane ||
-                pane.closest("[role=dialog], [data-floating-layer]") ||
-                pane.scrollHeight <= pane.clientHeight + 1
-            )
-                return
-            const top = pane.scrollTop
-            const userDriven = intent !== null && performance.now() - intent < 2000
-            const anchor = anchors.get(pane) ?? 0
-            const next = minimizeDecision(top, anchor, userDriven)
-            if (next !== null) setMinimized(next)
-            if (next !== null || !userDriven) anchors.set(pane, top)
-        }
-        document.addEventListener("touchmove", onIntent, {
-            passive: true,
-        })
-        document.addEventListener("wheel", onIntent, {
-            passive: true,
-        })
-        document.addEventListener("pointermove", onPointer, {
-            passive: true,
-        })
-        document.addEventListener("keydown", onKey)
-        document.addEventListener("scroll", onScroll, {
-            capture: true,
-            passive: true,
-        })
-        return () => {
-            document.removeEventListener("scroll", onScroll, {
-                capture: true,
-            })
-            document.removeEventListener("touchmove", onIntent)
-            document.removeEventListener("wheel", onIntent)
-            document.removeEventListener("pointermove", onPointer)
-            document.removeEventListener("keydown", onKey)
-        }
-    }, [])
-    return [minimized, setMinimized] as const
+	const [minimized, setMinimized] = useState(false);
+	useEffect(() => {
+		const anchors = new WeakMap<Element, number>();
+		let intent: number | null = null;
+		const onIntent = () => {
+			intent = performance.now();
+		};
+		const onKey = (event: KeyboardEvent) => {
+			if (
+				[
+					"ArrowDown",
+					"ArrowUp",
+					"PageDown",
+					"PageUp",
+					"Home",
+					"End",
+					" ",
+				].includes(event.key)
+			)
+				onIntent();
+		};
+		const onPointer = (event: PointerEvent) => {
+			if (event.buttons === 1) onIntent();
+		};
+		const onScroll = (event: Event) => {
+			const pane =
+				event.target instanceof Element
+					? event.target
+					: document.scrollingElement;
+			if (
+				!pane ||
+				pane.closest("[role=dialog], [data-floating-layer]") ||
+				pane.scrollHeight <= pane.clientHeight + 1
+			)
+				return;
+			const top = pane.scrollTop;
+			const userDriven = intent !== null && performance.now() - intent < 2000;
+			const anchor = anchors.get(pane) ?? 0;
+			const next = minimizeDecision(top, anchor, userDriven);
+			if (next !== null) setMinimized(next);
+			if (next !== null || !userDriven) anchors.set(pane, top);
+		};
+		document.addEventListener("touchmove", onIntent, {
+			passive: true,
+		});
+		document.addEventListener("wheel", onIntent, {
+			passive: true,
+		});
+		document.addEventListener("pointermove", onPointer, {
+			passive: true,
+		});
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("scroll", onScroll, {
+			capture: true,
+			passive: true,
+		});
+		return () => {
+			document.removeEventListener("scroll", onScroll, {
+				capture: true,
+			});
+			document.removeEventListener("touchmove", onIntent);
+			document.removeEventListener("wheel", onIntent);
+			document.removeEventListener("pointermove", onPointer);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, []);
+	return [minimized, setMinimized] as const;
 }

package/src/hooks/use-visual-viewport.ts

@@ -1,67 +1,67 @@
-import { useLayoutEffect, useState } from "react"
-import { viewportMetrics } from "./viewport/viewport-metrics"
-import type { ViewportMetrics } from "./viewport/types"
-export type { ViewportMetrics } from "./viewport/types"
+import { useLayoutEffect, useState } from "react";
+import { viewportMetrics } from "./viewport/viewport-metrics";
+import type { ViewportMetrics } from "./viewport/types";
+export type { ViewportMetrics } from "./viewport/types";
 
 /** Measures once per frame, including Android resize and Safari viewport panning. */
 export function useVisualViewport(): ViewportMetrics | null {
-    const [metrics, setMetrics] = useState<ViewportMetrics | null>(null)
-    useLayoutEffect(() => {
-        const viewport = window.visualViewport
-        let baseline = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        }
-        let frame = 0
-        const measure = () => {
-            cancelAnimationFrame(frame)
-            frame = requestAnimationFrame(() => {
-                const active = document.activeElement
-                const editing = !!active?.matches(
-                    "input:not([type=button]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]"
-                )
-                const width = viewport?.width ?? window.innerWidth
-                const height = viewport?.height ?? window.innerHeight
-                if (Math.abs(baseline.width - width) > 80 || !editing)
-                    baseline = {
-                        width,
-                        height: window.innerHeight,
-                    }
-                const next = viewportMetrics(
-                    {
-                        width,
-                        height,
-                        layoutHeight: window.innerHeight,
-                        top: viewport?.offsetTop ?? 0,
-                        left: viewport?.offsetLeft ?? 0,
-                        editing,
-                    },
-                    baseline
-                )
-                setMetrics((previous) =>
-                    previous &&
-                    Object.entries(next).every(
-                        ([key, value]) => previous[key as keyof ViewportMetrics] === value
-                    )
-                        ? previous
-                        : next
-                )
-            })
-        }
-        measure()
-        viewport?.addEventListener("resize", measure)
-        viewport?.addEventListener("scroll", measure)
-        window.addEventListener("resize", measure)
-        document.addEventListener("focusin", measure)
-        document.addEventListener("focusout", measure)
-        return () => {
-            cancelAnimationFrame(frame)
-            viewport?.removeEventListener("resize", measure)
-            viewport?.removeEventListener("scroll", measure)
-            window.removeEventListener("resize", measure)
-            document.removeEventListener("focusin", measure)
-            document.removeEventListener("focusout", measure)
-        }
-    }, [])
-    return metrics
+	const [metrics, setMetrics] = useState<ViewportMetrics | null>(null);
+	useLayoutEffect(() => {
+		const viewport = window.visualViewport;
+		let baseline = {
+			width: window.innerWidth,
+			height: window.innerHeight,
+		};
+		let frame = 0;
+		const measure = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const active = document.activeElement;
+				const editing = !!active?.matches(
+					"input:not([type=button]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]",
+				);
+				const width = viewport?.width ?? window.innerWidth;
+				const height = viewport?.height ?? window.innerHeight;
+				if (Math.abs(baseline.width - width) > 80 || !editing)
+					baseline = {
+						width,
+						height: window.innerHeight,
+					};
+				const next = viewportMetrics(
+					{
+						width,
+						height,
+						layoutHeight: window.innerHeight,
+						top: viewport?.offsetTop ?? 0,
+						left: viewport?.offsetLeft ?? 0,
+						editing,
+					},
+					baseline,
+				);
+				setMetrics((previous) =>
+					previous &&
+					Object.entries(next).every(
+						([key, value]) => previous[key as keyof ViewportMetrics] === value,
+					)
+						? previous
+						: next,
+				);
+			});
+		};
+		measure();
+		viewport?.addEventListener("resize", measure);
+		viewport?.addEventListener("scroll", measure);
+		window.addEventListener("resize", measure);
+		document.addEventListener("focusin", measure);
+		document.addEventListener("focusout", measure);
+		return () => {
+			cancelAnimationFrame(frame);
+			viewport?.removeEventListener("resize", measure);
+			viewport?.removeEventListener("scroll", measure);
+			window.removeEventListener("resize", measure);
+			document.removeEventListener("focusin", measure);
+			document.removeEventListener("focusout", measure);
+		};
+	}, []);
+	return metrics;
 }

package/src/hooks/viewport/types.ts

@@ -1,19 +1,19 @@
 export type ViewportInput = {
-    width: number
-    height: number
-    top: number
-    left: number
-    layoutHeight: number
-    editing: boolean
-}
+	width: number;
+	height: number;
+	top: number;
+	left: number;
+	layoutHeight: number;
+	editing: boolean;
+};
 export type ViewportMetrics = {
-    width: number
-    height: number
-    top: number
-    left: number
-    keyboardOpen: boolean
-}
+	width: number;
+	height: number;
+	top: number;
+	left: number;
+	keyboardOpen: boolean;
+};
 export type ViewportBaseline = {
-    width: number
-    height: number
-}
+	width: number;
+	height: number;
+};

package/src/hooks/viewport/viewport-metrics.ts

@@ -1,13 +1,19 @@
-import type { ViewportBaseline, ViewportInput, ViewportMetrics } from "./types"
+import type { ViewportBaseline, ViewportInput, ViewportMetrics } from "./types";
 
 /** A resized WebView and Safari's overlaid keyboard share one visible rectangle. */
-export function viewportMetrics(input: ViewportInput, baseline: ViewportBaseline): ViewportMetrics {
-    const visibleHeight = Math.min(input.height, Math.max(0, input.layoutHeight - input.top))
-    return {
-        width: input.width,
-        height: visibleHeight,
-        top: input.top,
-        left: input.left,
-        keyboardOpen: input.editing && baseline.height - visibleHeight > 120,
-    }
+export function viewportMetrics(
+	input: ViewportInput,
+	baseline: ViewportBaseline,
+): ViewportMetrics {
+	const visibleHeight = Math.min(
+		input.height,
+		Math.max(0, input.layoutHeight - input.top),
+	);
+	return {
+		width: input.width,
+		height: visibleHeight,
+		top: input.top,
+		left: input.left,
+		keyboardOpen: input.editing && baseline.height - visibleHeight > 120,
+	};
 }