@passui/react 0.1.17 → 0.1.19

package/src/components/view-controller/view-controller.tsx

@@ -19,11 +19,7 @@ const titleSizes = {
     compact: "text-[1.75rem] font-semibold tracking-tight",
 } as const
 
-export function ViewController({
-    heading,
-    className,
-    children,
-}: ViewControllerProps) {
+export function ViewController({ heading, className, children }: ViewControllerProps) {
     return (
         <article
             className={cn(
@@ -38,12 +34,7 @@ export function ViewController({
     )
 }
 
-function Heading({
-    title,
-    description,
-    action,
-    size = "default",
-}: HeadingProps) {
+function Heading({ title, description, action, size = "default" }: HeadingProps) {
     const centered = size === "compact"
     return (
         <>
@@ -53,22 +44,14 @@ function Heading({
                     centered && "justify-center text-center"
                 )}
             >
-                <h1
-                    className={cn(
-                        "min-w-0 wrap-anywhere",
-                        titleSizes[size]
-                    )}
-                >
-                    {title}
-                </h1>
+                <h1 className={cn("min-w-0 wrap-anywhere", titleSizes[size])}>{title}</h1>
                 {action}
             </div>
             {description && (
                 <p
                     className={cn(
                         "mt-2 max-w-prose text-subheadline leading-relaxed text-label-secondary",
-                        centered &&
-                            "mt-1 text-center text-[15px]"
+                        centered && "mt-1 text-center text-[15px]"
                     )}
                 >
                     {description}

package/src/hooks/scroll/minimize-decision.ts

@@ -1,9 +1,5 @@
 /** Programmatic restoration does not collapse chrome; reaching the top always restores it. */
-export function minimizeDecision(
-    top: number,
-    anchor: number,
-    userDriven: boolean
-): boolean | null {
+export function minimizeDecision(top: number, anchor: number, userDriven: boolean): boolean | null {
     if (top < 24) return false
     if (!userDriven) return null
     const delta = top - anchor

package/src/hooks/use-anchored-placement.ts

@@ -1,8 +1,5 @@
 import { useLayoutEffect, useState } from "react"
-import {
-    type AnchoredPlacement,
-    placeAnchored,
-} from "../lib/anchored-placement"
+import { type AnchoredPlacement, placeAnchored } from "../lib/anchored-placement"
 
 /**
  * Places a panel of `width` and `needed` height under its anchor and
@@ -14,13 +11,10 @@ export function useAnchoredPlacement(
     width: number,
     needed: number
 ): AnchoredPlacement {
-    const [placement, setPlacement] = useState(() =>
-        placeAnchored(anchor, width, needed)
-    )
+    const [placement, setPlacement] = useState(() => placeAnchored(anchor, width, needed))
 
     useLayoutEffect(() => {
-        const replace = () =>
-            setPlacement(placeAnchored(anchor, width, needed))
+        const replace = () => setPlacement(placeAnchored(anchor, width, needed))
         replace()
         const viewport = window.visualViewport
         viewport?.addEventListener("resize", replace)
@@ -31,11 +25,7 @@ export function useAnchoredPlacement(
             viewport?.removeEventListener("resize", replace)
             viewport?.removeEventListener("scroll", replace)
             window.removeEventListener("resize", replace)
-            window.removeEventListener(
-                "scroll",
-                replace,
-                true
-            )
+            window.removeEventListener("scroll", replace, true)
         }
     }, [anchor, width, needed])
 

package/src/hooks/use-dismiss.ts

@@ -1,5 +1,5 @@
 import { type RefObject, useEffect } from "react"
-import { ownsFloatingLayer } from "../lib/floating-layers"
+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"
@@ -19,39 +19,21 @@ export function useDismiss(
         const onPointerDown = (event: PointerEvent) => {
             const target = event.target as Element
             const surface = ref.current
-            if (
-                surface &&
-                (surface.contains(target) ||
-                    ownsFloatingLayer(surface, target))
-            )
-                return
+            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 (ref.current && ownsFloatingLayer(ref.current, document.activeElement)) return
             if (event.key === "Escape") {
                 event.preventDefault()
                 onDismiss()
             }
         }
-        document.addEventListener(
-            "pointerdown",
-            onPointerDown
-        )
+        document.addEventListener("pointerdown", onPointerDown)
         window.addEventListener("keydown", onKeyDown)
         return () => {
-            document.removeEventListener(
-                "pointerdown",
-                onPointerDown
-            )
+            document.removeEventListener("pointerdown", onPointerDown)
             window.removeEventListener("keydown", onKeyDown)
         }
     }, [ref, active, onDismiss])

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

@@ -0,0 +1,28 @@
+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
+) {
+    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])
+}

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

@@ -11,35 +11,24 @@ const BREAKPOINTS = {
 } as const
 
 export type Breakpoint = keyof typeof BREAKPOINTS
-export type BreakpointQuery =
-    | Breakpoint
-    | `max-${Breakpoint}`
-    | `${Breakpoint}:max-${Breakpoint}`
+export type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`
 function resolveMin(value: Breakpoint | number): string {
-    const px =
-        typeof value === "number" ? value : BREAKPOINTS[value]
+    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]
+    const px = typeof value === "number" ? value : BREAKPOINTS[value]
     return `(max-width: ${px - 1}px)`
 }
 
-function parseQuery(
-    query: BreakpointQuery | MediaQueryInput | (string & {})
-): string {
+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 (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 ")
     }
@@ -50,8 +39,7 @@ function parseQuery(
     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))
+            if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint))
         } else if (segment in BREAKPOINTS) {
             parts.push(resolveMin(segment as Breakpoint))
         }
@@ -73,9 +61,7 @@ export type MediaQueryInput = {
 
 export type PointerPrecision = "coarse" | "fine"
 
-export function useMediaQuery(
-    query: BreakpointQuery | MediaQueryInput | (string & {})
-): boolean {
+export function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): boolean {
     const mediaQuery = parseQuery(query)
 
     const subscribe = useCallback(
@@ -83,8 +69,7 @@ export function useMediaQuery(
             if (typeof window === "undefined") return () => {}
             const mql = window.matchMedia(mediaQuery)
             mql.addEventListener("change", callback)
-            return () =>
-                mql.removeEventListener("change", callback)
+            return () => mql.removeEventListener("change", callback)
         },
         [mediaQuery]
     )
@@ -94,11 +79,7 @@ export function useMediaQuery(
         return window.matchMedia(mediaQuery).matches
     }, [mediaQuery])
 
-    return useSyncExternalStore(
-        subscribe,
-        getSnapshot,
-        getServerSnapshot
-    )
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
 
 export function useIsMobile(): boolean {

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

@@ -16,15 +16,9 @@ export function useMinimizeOnScroll() {
         }
         const onKey = (event: KeyboardEvent) => {
             if (
-                [
-                    "ArrowDown",
-                    "ArrowUp",
-                    "PageDown",
-                    "PageUp",
-                    "Home",
-                    "End",
-                    " ",
-                ].includes(event.key)
+                ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(
+                    event.key
+                )
             )
                 onIntent()
         }
@@ -32,31 +26,19 @@ export function useMinimizeOnScroll() {
             if (event.buttons === 1) onIntent()
         }
         const onScroll = (event: Event) => {
-            const pane =
-                event.target instanceof Element
-                    ? event.target
-                    : document.scrollingElement
+            const pane = event.target instanceof Element ? event.target : document.scrollingElement
             if (
                 !pane ||
-                pane.closest(
-                    "[role=dialog], [data-floating-layer]"
-                ) ||
+                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 userDriven = intent !== null && performance.now() - intent < 2000
             const anchor = anchors.get(pane) ?? 0
-            const next = minimizeDecision(
-                top,
-                anchor,
-                userDriven
-            )
+            const next = minimizeDecision(top, anchor, userDriven)
             if (next !== null) setMinimized(next)
-            if (next !== null || !userDriven)
-                anchors.set(pane, top)
+            if (next !== null || !userDriven) anchors.set(pane, top)
         }
         document.addEventListener("touchmove", onIntent, {
             passive: true,
@@ -76,15 +58,9 @@ export function useMinimizeOnScroll() {
             document.removeEventListener("scroll", onScroll, {
                 capture: true,
             })
-            document.removeEventListener(
-                "touchmove",
-                onIntent
-            )
+            document.removeEventListener("touchmove", onIntent)
             document.removeEventListener("wheel", onIntent)
-            document.removeEventListener(
-                "pointermove",
-                onPointer
-            )
+            document.removeEventListener("pointermove", onPointer)
             document.removeEventListener("keydown", onKey)
         }
     }, [])

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

@@ -5,8 +5,7 @@ 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)
+    const [metrics, setMetrics] = useState<ViewportMetrics | null>(null)
     useLayoutEffect(() => {
         const viewport = window.visualViewport
         let baseline = {
@@ -21,14 +20,9 @@ export function useVisualViewport(): ViewportMetrics | null {
                 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
-                )
+                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,
@@ -47,10 +41,7 @@ export function useVisualViewport(): ViewportMetrics | null {
                 setMetrics((previous) =>
                     previous &&
                     Object.entries(next).every(
-                        ([key, value]) =>
-                            previous[
-                                key as keyof ViewportMetrics
-                            ] === value
+                        ([key, value]) => previous[key as keyof ViewportMetrics] === value
                     )
                         ? previous
                         : next

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

@@ -1,25 +1,13 @@
-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)
-    )
+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,
+        keyboardOpen: input.editing && baseline.height - visibleHeight > 120,
     }
 }