@passui/react 0.1.17 → 0.1.20

package/src/components/popover/anchored-surface.tsx

@@ -0,0 +1,223 @@
+import { springs } from "@passui/tokens/motion"
+import { useMediaQuery } from "../../hooks/use-media-query"
+import { forwardRef, type HTMLAttributes, useLayoutEffect, useRef, useState } from "react"
+import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
+import { FLOATING_LAYER } from "../../hooks/use-dismiss"
+import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
+import { cn } from "../../lib/class-names"
+import { registerFloatingLayer } from "../../lib/floating-layers"
+import { concealMenuSource } from "../context-menu/conceal-menu-source"
+import { menuSurfaceReveal } from "../context-menu/menu-reveal"
+
+interface AnchoredSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    open: boolean
+    onExited: () => void
+    anchor: HTMLElement
+    width: number
+    needed: number
+    onClose: (restoreFocus: boolean) => void
+    contentClassName?: string
+}
+
+/** Shared material and lifetime for portaled pickers; their content owns selection. */
+export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
+    function AnchoredSurface(
+        {
+            open: present,
+            onExited: remove,
+            anchor,
+            width,
+            needed,
+            onClose,
+            children,
+            className,
+            contentClassName,
+            ...props
+        },
+        forwardedRef
+    ) {
+        const root = useRef<HTMLDivElement>(null)
+        const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
+        const material = useRef<HTMLDivElement>(null)
+        const content = useRef<HTMLDivElement>(null)
+        const animated = useRef<{ values: number[]; velocities: number[]; opacity: number } | null>(
+            null
+        )
+        const placement = useAnchoredPlacement(anchor, width, needed, true)
+        const [geometry, setGeometry] = useState<{
+            source: ReturnType<typeof menuSurfaceReveal>
+            width: number
+            height: number
+            radius: number
+        } | null>(null)
+
+        // biome-ignore lint/correctness/useExhaustiveDependencies: Placement can move without resizing; remeasure the source-relative reveal.
+        useLayoutEffect(() => {
+            const panel = root.current
+            if (!panel || !present) return
+            const measure = () => {
+                const target = panel.getBoundingClientRect()
+                const source = anchor.getBoundingClientRect()
+                const radius = Number.parseFloat(getComputedStyle(panel).borderTopLeftRadius) || 0
+                const reveal = menuSurfaceReveal(source, target)
+                setGeometry((current) =>
+                    current &&
+                    current.width === target.width &&
+                    current.height === target.height &&
+                    current.radius === radius &&
+                    current.source.x === reveal.x &&
+                    current.source.y === reveal.y &&
+                    current.source.width === reveal.width &&
+                    current.source.height === reveal.height
+                        ? current
+                        : { source: reveal, width: target.width, height: target.height, radius }
+                )
+            }
+            measure()
+            const observer = new ResizeObserver(measure)
+            observer.observe(panel)
+            return () => observer.disconnect()
+        }, [anchor, present, placement.left, placement.top, placement.bottom, placement.width])
+
+        useLayoutEffect(() => {
+            if (!root.current) return
+            const unregister = registerFloatingLayer(root.current, anchor)
+            const restore = concealMenuSource(anchor, false)
+            return () => {
+                unregister()
+                restore()
+            }
+        }, [anchor])
+
+        useLayoutEffect(() => {
+            if (!geometry || !material.current || !content.current) {
+                if (!present) remove?.()
+                return
+            }
+            const pane = material.current,
+                body = content.current
+            const source = [
+                geometry.source.x,
+                geometry.source.y,
+                geometry.source.width,
+                geometry.source.height,
+                geometry.source.borderRadius,
+            ]
+            const target = present
+                ? [0, 0, geometry.width, geometry.height, geometry.radius]
+                : source
+            const state = animated.current ?? {
+                values: [...source],
+                velocities: source.map(() => 0),
+                opacity: 0,
+            }
+            animated.current = state
+            let frame = 0,
+                previous = 0
+            const paint = () => {
+                const [x, y, width, height, radius] = state.values
+                pane.style.transform = `translate(${x}px, ${y}px)`
+                pane.style.width = `${Math.max(0, width)}px`
+                pane.style.height = `${Math.max(0, height)}px`
+                pane.style.borderRadius = `${Math.max(0, radius)}px`
+                body.style.opacity = String(state.opacity)
+            }
+            const tick = (now: number) => {
+                const dt = previous ? Math.min(0.032, (now - previous) / 1000) : 1 / 60
+                previous = now
+                const { stiffness, damping, mass } = springs.smooth
+                let resting = true
+                for (let index = 0; index < target.length; index++) {
+                    state.velocities[index] +=
+                        (((target[index] - state.values[index]) * stiffness -
+                            state.velocities[index] * damping) /
+                            mass) *
+                        dt
+                    state.values[index] += state.velocities[index] * dt
+                    if (
+                        Math.abs(target[index] - state.values[index]) > 0.05 ||
+                        Math.abs(state.velocities[index]) > 0.05
+                    )
+                        resting = false
+                }
+                const progress = Math.max(
+                    0,
+                    Math.min(
+                        1,
+                        1 -
+                            Math.abs(geometry.height - state.values[3]) /
+                                Math.max(1, Math.abs(geometry.height - source[3]))
+                    )
+                )
+                const opacity = present ? Math.max(0, (progress - 0.25) / 0.75) : 0
+                state.opacity += (opacity - state.opacity) * (1 - Math.exp(-dt / 0.04))
+                paint()
+                if (resting && Math.abs(opacity - state.opacity) < 0.01) {
+                    state.values = [...target]
+                    state.velocities.fill(0)
+                    state.opacity = present ? 1 : 0
+                    paint()
+                    if (!present) remove?.()
+                    return
+                }
+                frame = requestAnimationFrame(tick)
+            }
+            if (reducedMotion) {
+                state.values = [...target]
+                state.velocities.fill(0)
+                state.opacity = present ? 1 : 0
+                paint()
+                if (!present) remove?.()
+            } else {
+                paint()
+                frame = requestAnimationFrame(tick)
+            }
+            return () => cancelAnimationFrame(frame)
+        }, [geometry, present, remove, reducedMotion])
+
+        useFloatingDismiss(root, anchor, (restore) => {
+            if (present) onClose(restore)
+        })
+
+        return (
+            <div
+                {...props}
+                ref={(node) => {
+                    root.current = node
+                    if (typeof forwardedRef === "function") forwardedRef(node)
+                    else if (forwardedRef) forwardedRef.current = node
+                }}
+                {...{ [FLOATING_LAYER]: "" }}
+                inert={!present}
+                className={cn(
+                    "fixed z-[80] isolate flex min-w-0 flex-col rounded-3xl outline-none",
+                    !present && "pointer-events-none",
+                    className
+                )}
+                style={{
+                    left: placement.left,
+                    top: placement.top,
+                    bottom: placement.bottom,
+                    width: placement.width,
+                    maxHeight: placement.maxHeight ?? 420,
+                }}
+            >
+                <div
+                    ref={material}
+                    aria-hidden="true"
+                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10"
+                />
+                <div
+                    ref={content}
+                    style={{ opacity: 0 }}
+                    className={cn(
+                        "flex min-h-0 flex-col overflow-y-auto overscroll-contain",
+                        contentClassName
+                    )}
+                >
+                    {children}
+                </div>
+            </div>
+        )
+    }
+)

package/src/components/popover/popover-fit.ts

@@ -0,0 +1,69 @@
+import { type PlacementFrame, placeInViewport } from "../../lib/anchored-placement"
+
+interface PanelRect {
+    left: number
+    top: number
+    width: number
+    height: number
+}
+
+interface AnchorRect {
+    top: number
+    bottom: number
+}
+
+export interface PopoverFit {
+    shiftX: number
+    shiftY: number
+    maxWidth: number
+    maxHeight?: number
+    above: boolean
+}
+
+/** Keep an absolutely positioned popover visible without scaling its contents. */
+export function fitPopover(
+    panel: PanelRect,
+    anchor: AnchorRect | undefined,
+    frame: Pick<PlacementFrame, "viewport" | "edges">,
+    gap = 6,
+    origin: "top-left" | "top-right" = "top-left"
+): PopoverFit {
+    const { viewport, edges } = frame
+    const topEdge = edges.top
+    const bottomEdge = viewport.height - edges.bottom
+    const availableHeight = Math.max(0, bottomEdge - topEdge)
+    const placement = placeInViewport(
+        {
+            ...frame,
+            anchor: {
+                left: panel.left,
+                top: anchor?.top ?? panel.top,
+                bottom: anchor?.bottom ?? panel.top,
+            },
+        },
+        panel.width,
+        panel.height,
+        gap
+    )
+
+    const above = Boolean(anchor && panel.top + panel.height > bottomEdge && placement.above)
+    const aboveHeight = anchor ? Math.max(0, anchor.top - topEdge - gap) : 0
+    const visibleHeight = above
+        ? Math.min(panel.height, aboveHeight)
+        : Math.min(panel.height, availableHeight)
+    const desiredTop = above
+        ? (anchor?.top ?? panel.top) - gap - visibleHeight
+        : Math.max(topEdge, Math.min(panel.top, bottomEdge - visibleHeight))
+    const heightRoom = above ? aboveHeight : Math.max(0, bottomEdge - desiredTop)
+
+    return {
+        shiftX:
+            placement.left -
+            panel.left -
+            (origin === "top-right" ? panel.width - placement.width : 0),
+        shiftY: desiredTop - panel.top,
+        maxWidth: Math.max(0, viewport.width - edges.left - edges.right),
+        maxHeight: panel.height > heightRoom ? heightRoom : undefined,
+        above,
+    }
+}

package/src/components/popover/popover.tsx

@@ -2,43 +2,41 @@ import {
     AnimatePresence,
     type HTMLMotionProps,
     motion,
+    useIsPresent,
     useReducedMotion,
 } from "motion/react"
-import { useLayoutEffect, useRef, useState } from "react"
+import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from "react"
+import { concealMenuSource } from "../context-menu/conceal-menu-source"
+import { menuSurfaceReveal } from "../context-menu/menu-reveal"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
-import { popoverMotion } from "../../motion/transitions"
+import { floatingPanelMotion, spring } from "../../motion/transitions"
+import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
 
-export interface PopoverProps extends HTMLMotionProps<"div"> {
+export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean
+    children?: ReactNode
     /** Which corner the popover grows from. */
     origin?: PopoverOrigin
-}
-
-interface PopoverFit {
-    shift: number
-    maxWidth?: number
-    maxHeight?: number
+    /** Trigger whose shape the popover uses during its opening and closing motion. */
+    anchorRef?: RefObject<HTMLElement | null>
 }
 
 /**
  * A glass surface that springs open from its anchor. Position it with
  * `className` (it is absolutely positioned within a relative parent); it
- * moves itself back inside the screen if that would cross an edge, and
- * keeps checking while the viewport resizes or anything scrolls.
+ * flips above its relative parent when the bottom edge is short, and
+ * stays inside the visible viewport as it resizes or scrolls.
  */
 export function Popover({ open, ...props }: PopoverProps) {
-    return (
-        <AnimatePresence>
-            {open && <OpenPopover {...props} />}
-        </AnimatePresence>
-    )
+    return <AnimatePresence>{open && <OpenPopover {...props} />}</AnimatePresence>
 }
 
 function OpenPopover({
     origin = "top-left",
+    anchorRef,
     className,
     style,
     children,
@@ -46,92 +44,240 @@ function OpenPopover({
 }: Omit<PopoverProps, "open">) {
     const ref = useRef<HTMLDivElement>(null)
     const reducedMotion = useReducedMotion()
-    const [fit, setFit] = useState<PopoverFit>({ shift: 0 })
+    const present = useIsPresent()
+    const [settled, setSettled] = useState(false)
+    const [material, setMaterial] = useState({ width: 0, height: 0, radius: 0 })
+    const [fit, setFit] = useState<PopoverFit>({
+        shiftX: 0,
+        shiftY: 0,
+        maxWidth: 0,
+        above: false,
+    })
+    const [reveal, setReveal] = useState<ReturnType<typeof menuSurfaceReveal> | null>(null)
+    const popoverMotion = floatingPanelMotion(fit.above ? "above" : "below")
 
     useLayoutEffect(() => {
         const refit = () => {
             const element = ref.current
             if (!element) return
-            // Where it sits once open: measured without the opening scale, before paint.
+            // Measure the authored position without the opening animation or
+            // our viewport correction. This prevents cumulative drift.
             const transform = element.style.transform
+            const translate = element.style.translate
+            const maxHeight = element.style.maxHeight
+            const maxWidth = element.style.maxWidth
             element.style.transform = "none"
+            element.style.translate = "none"
+            element.style.maxHeight = "none"
+            element.style.maxWidth = "none"
             const rect = element.getBoundingClientRect()
+            const neededHeight = Math.max(rect.height, element.scrollHeight)
+            const radius = Number.parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0
+            setMaterial((current) =>
+                current.width === rect.width &&
+                current.height === neededHeight &&
+                current.radius === radius
+                    ? current
+                    : { width: rect.width, height: neededHeight, radius }
+            )
             element.style.transform = transform
+            element.style.translate = translate
+            element.style.maxHeight = maxHeight
+            element.style.maxWidth = maxWidth
+
+            const visualViewport = window.visualViewport
+            const offsetLeft = visualViewport?.offsetLeft ?? 0
+            const offsetTop = visualViewport?.offsetTop ?? 0
             const edges = screenEdges()
-            const right = window.innerWidth - edges.right
-            let shift = 0
-            if (rect.right > right) shift = right - rect.right
-            if (rect.left + shift < edges.left)
-                shift = edges.left - rect.left
-            const room =
-                window.innerHeight - edges.bottom - rect.top
-            setFit({
-                shift,
-                maxWidth:
-                    window.innerWidth -
-                    edges.left -
-                    edges.right,
-                maxHeight:
-                    rect.height > room
-                        ? Math.max(room, 0)
-                        : undefined,
+            const offsetParent = element.offsetParent
+            const anchor =
+                offsetParent instanceof HTMLElement && offsetParent !== document.body
+                    ? offsetParent.getBoundingClientRect()
+                    : undefined
+            const trigger = anchorRef?.current?.getBoundingClientRect()
+            const target = {
+                left: trigger
+                    ? origin === "top-right"
+                        ? trigger.right - rect.width
+                        : trigger.left
+                    : rect.left,
+                top: trigger?.top ?? rect.top,
+                width: rect.width,
+                height: neededHeight,
+            }
+            const next = fitPopover(
+                target,
+                trigger ?? anchor,
+                {
+                    viewport: {
+                        width: offsetLeft + (visualViewport?.width ?? window.innerWidth),
+                        height: offsetTop + (visualViewport?.height ?? window.innerHeight),
+                    },
+                    edges: {
+                        ...edges,
+                        left: offsetLeft + edges.left,
+                        top: offsetTop + edges.top,
+                    },
+                },
+                trigger ? -trigger.height : 6,
+                origin
+            )
+            next.shiftX += target.left - rect.left
+            next.shiftY += target.top - rect.top
+            setFit((current) => {
+                if (
+                    current.shiftX === next.shiftX &&
+                    current.shiftY === next.shiftY &&
+                    current.maxWidth === next.maxWidth &&
+                    current.maxHeight === next.maxHeight &&
+                    current.above === next.above
+                )
+                    return current
+                return next
             })
         }
         refit()
+        let frame = 0
+        const scheduleRefit = () => {
+            cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(refit)
+        }
+        const observer = new ResizeObserver(scheduleRefit)
+        if (ref.current) observer.observe(ref.current)
         const viewport = window.visualViewport
-        viewport?.addEventListener("resize", refit)
-        viewport?.addEventListener("scroll", refit)
-        window.addEventListener("resize", refit)
-        window.addEventListener("scroll", refit, true)
+        viewport?.addEventListener("resize", scheduleRefit)
+        viewport?.addEventListener("scroll", scheduleRefit)
+        window.addEventListener("resize", scheduleRefit)
+        window.addEventListener("scroll", scheduleRefit, true)
         return () => {
-            viewport?.removeEventListener("resize", refit)
-            viewport?.removeEventListener("scroll", refit)
-            window.removeEventListener("resize", refit)
-            window.removeEventListener("scroll", refit, true)
+            observer.disconnect()
+            cancelAnimationFrame(frame)
+            viewport?.removeEventListener("resize", scheduleRefit)
+            viewport?.removeEventListener("scroll", scheduleRefit)
+            window.removeEventListener("resize", scheduleRefit)
+            window.removeEventListener("scroll", scheduleRefit, true)
         }
-    }, [])
+    }, [origin, anchorRef])
+
+    useLayoutEffect(() => {
+        const source = anchorRef?.current
+        const panel = ref.current
+        if (!source || !panel) return
+        const sourceRect = source.getBoundingClientRect()
+        const panelRect = panel.getBoundingClientRect()
+        setReveal(
+            menuSurfaceReveal(
+                {
+                    left: sourceRect.left,
+                    top: sourceRect.top,
+                    width: sourceRect.width,
+                    height: sourceRect.height,
+                },
+                {
+                    left: panelRect.left,
+                    top: panelRect.top,
+                    width: fit.maxWidth || panelRect.width,
+                    height: fit.maxHeight
+                        ? Math.min(fit.maxHeight, panelRect.height)
+                        : panelRect.height,
+                }
+            )
+        )
+        const restoreSource = concealMenuSource(source, false)
+        return () => {
+            restoreSource()
+        }
+    }, [anchorRef, fit])
 
     return (
         <motion.div
             ref={ref}
-            {...popoverMotion}
+            {...(!anchorRef && popoverMotion)}
             initial={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : popoverMotion.initial
+                anchorRef
+                    ? { "--popover-content-opacity": reducedMotion ? 1 : 0 }
+                    : reducedMotion
+                      ? { opacity: 0 }
+                      : popoverMotion.initial
             }
             animate={
-                reducedMotion
-                    ? { opacity: 1 }
-                    : popoverMotion.animate
+                anchorRef
+                    ? { "--popover-content-opacity": 1 }
+                    : reducedMotion
+                      ? { opacity: 1 }
+                      : popoverMotion.animate
             }
             exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : popoverMotion.exit
+                anchorRef
+                    ? {
+                          "--popover-content-opacity": 0,
+                          transition: { duration: reducedMotion ? 0 : 0.06 },
+                      }
+                    : reducedMotion
+                      ? { opacity: 0 }
+                      : popoverMotion.exit
             }
             transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : popoverMotion.transition
+                anchorRef
+                    ? reducedMotion
+                        ? { duration: 0 }
+                        : { duration: 0.16, delay: 0.06 }
+                    : reducedMotion
+                      ? { duration: 0 }
+                      : popoverMotion.transition
             }
             style={{
                 transformOrigin:
                     origin === "top-left"
-                        ? "0% 0%"
-                        : "100% 0%",
-                x: fit.shift,
-                maxWidth: fit.maxWidth,
+                        ? `0% ${fit.above ? "100%" : "0%"}`
+                        : `100% ${fit.above ? "100%" : "0%"}`,
+                translate: `${fit.shiftX}px ${fit.shiftY}px`,
+                maxWidth: fit.maxWidth || undefined,
                 maxHeight: fit.maxHeight,
-                overflowY: fit.maxHeight ? "auto" : undefined,
+                overflowY:
+                    fit.maxHeight !== undefined && (!anchorRef || (present && settled))
+                        ? "auto"
+                        : undefined,
                 ...style,
             }}
             className={cn(
-                "glass-menu absolute z-40 rounded-5xl",
+                anchorRef
+                    ? "isolate [&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]"
+                    : "glass-menu",
+                "absolute z-40 rounded-5xl outline-none",
                 className
             )}
             {...props}
         >
+            {anchorRef && (
+                <motion.div
+                    key={reveal ? "surface" : "measure"}
+                    aria-hidden="true"
+                    data-popover-surface=""
+                    onAnimationComplete={() => {
+                        if (reveal) setSettled(true)
+                    }}
+                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-5xl"
+                    style={{ width: "100%", height: "100%" }}
+                    initial={reducedMotion || !reveal ? false : reveal}
+                    animate={
+                        reveal
+                            ? {
+                                  x: 0,
+                                  y: 0,
+                                  width: material.width,
+                                  height: fit.maxHeight
+                                      ? Math.min(material.height, fit.maxHeight)
+                                      : material.height,
+                                  opacity: 1,
+                                  borderRadius: material.radius,
+                              }
+                            : undefined
+                    }
+                    exit={reducedMotion ? { opacity: 0 } : (reveal ?? { opacity: 0 })}
+                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                />
+            )}
             {children}
         </motion.div>
     )