@passui/react 0.1.17 → 0.1.20

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,
     }
 }