@passui/react 0.1.17 → 0.1.19

package/src/components/popover/popover.tsx

@@ -1,13 +1,9 @@
-import {
-    AnimatePresence,
-    type HTMLMotionProps,
-    motion,
-    useReducedMotion,
-} from "motion/react"
+import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion } from "motion/react"
 import { useLayoutEffect, useRef, useState } from "react"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
-import { popoverMotion } from "../../motion/transitions"
+import { floatingPanelMotion } from "../../motion/transitions"
+import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
 
@@ -17,24 +13,14 @@ export interface PopoverProps extends HTMLMotionProps<"div"> {
     origin?: PopoverOrigin
 }
 
-interface PopoverFit {
-    shift: number
-    maxWidth?: number
-    maxHeight?: number
-}
-
 /**
  * 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({
@@ -46,90 +32,121 @@ function OpenPopover({
 }: Omit<PopoverProps, "open">) {
     const ref = useRef<HTMLDivElement>(null)
     const reducedMotion = useReducedMotion()
-    const [fit, setFit] = useState<PopoverFit>({ shift: 0 })
+    const [fit, setFit] = useState<PopoverFit>({
+        shiftX: 0,
+        shiftY: 0,
+        maxWidth: 0,
+        above: false,
+    })
+    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)
             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 next = fitPopover(
+                {
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: neededHeight,
+                },
+                anchor,
+                {
+                    viewport: {
+                        width: offsetLeft + (visualViewport?.width ?? window.innerWidth),
+                        height: offsetTop + (visualViewport?.height ?? window.innerHeight),
+                    },
+                    edges: {
+                        ...edges,
+                        left: offsetLeft + edges.left,
+                        top: offsetTop + edges.top,
+                    },
+                },
+                6,
+                origin
+            )
+            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])
 
     return (
         <motion.div
             ref={ref}
             {...popoverMotion}
-            initial={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : popoverMotion.initial
-            }
-            animate={
-                reducedMotion
-                    ? { opacity: 1 }
-                    : popoverMotion.animate
-            }
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : popoverMotion.exit
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : popoverMotion.transition
-            }
+            initial={reducedMotion ? { opacity: 0 } : popoverMotion.initial}
+            animate={reducedMotion ? { opacity: 1 } : popoverMotion.animate}
+            exit={reducedMotion ? { opacity: 0 } : popoverMotion.exit}
+            transition={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 ? "auto" : undefined,
                 ...style,
             }}
-            className={cn(
-                "glass-menu absolute z-40 rounded-5xl",
-                className
-            )}
+            className={cn("glass-menu absolute z-40 rounded-5xl", className)}
             {...props}
         >
             {children}

package/src/components/profile-image/profile-image.tsx

@@ -1,20 +1,11 @@
-import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type ComponentProps,
-} from "react"
+import { createContext, useContext, useEffect, useState, type ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
 const ImageContext = createContext<{
     loaded: boolean
     setLoaded: (loaded: boolean) => void
 }>({ loaded: false, setLoaded: () => {} })
-export function ProfileImage({
-    className,
-    ...props
-}: ComponentProps<"span">) {
+export function ProfileImage({ className, ...props }: ComponentProps<"span">) {
     const [loaded, setLoaded] = useState(false)
     return (
         <ImageContext value={{ loaded, setLoaded }}>
@@ -46,10 +37,7 @@ export function ProfileImageContent({
             alt=""
             {...props}
             src={src}
-            className={cn(
-                "absolute inset-0 size-full object-cover",
-                className
-            )}
+            className={cn("absolute inset-0 size-full object-cover", className)}
             onLoad={(event) => {
                 setLoaded(true)
                 onLoad?.(event)
@@ -57,24 +45,14 @@ export function ProfileImageContent({
             onError={(event) => {
                 setLoaded(false)
                 onError?.(event)
-                event.currentTarget.style.visibility =
-                    "hidden"
+                event.currentTarget.style.visibility = "hidden"
             }}
         />
     )
 }
-export function ProfileImageFallback({
-    className,
-    ...props
-}: ComponentProps<"span">) {
+export function ProfileImageFallback({ className, ...props }: ComponentProps<"span">) {
     const { loaded } = useContext(ImageContext)
     return loaded ? null : (
-        <span
-            {...props}
-            className={cn(
-                "text-footnote font-medium",
-                className
-            )}
-        />
+        <span {...props} className={cn("text-footnote font-medium", className)} />
     )
 }

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

@@ -0,0 +1,65 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "../../lib/class-names"
+import { clampRange } from "../../lib/range-value"
+
+export type ProgressViewSize = "sm" | "md" | "lg"
+
+export interface ProgressViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label: string
+    /** Omit for an indeterminate operation. */
+    value?: number
+    max?: number
+    size?: ProgressViewSize
+    /** Secondary text, such as bytes uploaded. */
+    detail?: string
+}
+
+const trackHeight: Record<ProgressViewSize, string> = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3",
+}
+
+/** A determinate or indeterminate progress track respecting reduced motion. */
+export function ProgressView({
+    label,
+    value,
+    max = 100,
+    size = "md",
+    detail,
+    className,
+    ...props
+}: ProgressViewProps) {
+    const limit = Number.isFinite(max) && max > 0 ? max : 100
+    const current = value === undefined ? undefined : clampRange(value, 0, limit)
+    const progress = current === undefined ? undefined : (current / limit) * 100
+
+    return (
+        <div {...props} className={cn("flex min-w-0 flex-col gap-2", className)}>
+            <div className="flex items-center justify-between gap-3 text-footnote">
+                <span className="font-semibold text-label">{label}</span>
+                {detail && <span className="text-label-secondary">{detail}</span>}
+            </div>
+            <div
+                role="progressbar"
+                aria-label={label}
+                aria-valuemin={current === undefined ? undefined : 0}
+                aria-valuemax={current === undefined ? undefined : limit}
+                aria-valuenow={current}
+                className={cn(
+                    "relative w-full overflow-hidden rounded-full bg-separator/70",
+                    trackHeight[size]
+                )}
+            >
+                <div
+                    aria-hidden="true"
+                    className={cn(
+                        "h-full rounded-full bg-accent",
+                        current === undefined && "w-1/3 animate-pulse motion-reduce:animate-none"
+                    )}
+                    style={progress === undefined ? undefined : { width: `${progress}%` }}
+                />
+            </div>
+        </div>
+    )
+}

package/src/components/search-field/search-field.tsx

@@ -2,28 +2,30 @@ import { forwardRef, type InputHTMLAttributes } from "react"
 import { SearchIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 
-export const SearchField = forwardRef<
-    HTMLInputElement,
-    InputHTMLAttributes<HTMLInputElement>
->(function SearchField(
-    { className, placeholder = "Search", ...props },
-    ref
-) {
-    return (
-        <label
-            className={cn(
-                "control-field flex items-center gap-2 rounded-lg px-2.5 py-2 text-subheadline text-label-tertiary",
-                className
-            )}
-        >
-            <SearchIcon size={15} strokeWidth={2} />
-            <input
-                ref={ref}
-                type="search"
-                placeholder={placeholder}
-                className="min-w-0 grow bg-transparent text-label outline-none placeholder:text-label-tertiary"
-                {...props}
-            />
-        </label>
-    )
-})
+export const SearchField = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+    function SearchField({ className, placeholder = "Search", ...props }, ref) {
+        const accessibleName = props["aria-labelledby"]
+            ? undefined
+            : (props["aria-label"] ?? placeholder)
+        return (
+            <label
+                className={cn(
+                    "control-field flex items-center gap-2 rounded-lg px-2.5 py-2 text-subheadline text-label-tertiary",
+                    className
+                )}
+            >
+                <span aria-hidden="true" className="shrink-0">
+                    <SearchIcon size={15} strokeWidth={2} />
+                </span>
+                <input
+                    ref={ref}
+                    type="search"
+                    placeholder={placeholder}
+                    aria-label={accessibleName}
+                    className="min-w-0 grow bg-transparent text-label outline-none placeholder:text-label-tertiary"
+                    {...props}
+                />
+            </label>
+        )
+    }
+)

package/src/components/search-list/search-list.tsx

@@ -22,15 +22,12 @@ type SearchState = {
 const SearchContext = createContext<SearchState | null>(null)
 function useSearch() {
     const search = useContext(SearchContext)
-    if (!search)
-        throw new Error(
-            "Search list controls need a SearchList parent"
-        )
+    if (!search) throw new Error("Search list controls need a SearchList parent")
     return search
 }
 
 export function SearchList({
-    loop: _loop,
+    loop = true,
     open = true,
     onKeyDown,
     className,
@@ -41,9 +38,7 @@ export function SearchList({
 }) {
     const [query, setQuery] = useState("")
     const [active, setActive] = useState("")
-    const [results, setResults] = useState<
-        Record<string, boolean>
-    >({})
+    const [results, setResults] = useState<Record<string, boolean>>({})
     const listId = useId()
     const ref = useRef<HTMLDivElement>(null)
     const register = useCallback(
@@ -70,9 +65,7 @@ export function SearchList({
                 active,
                 listId,
                 open,
-                visible:
-                    Object.values(results).filter(Boolean)
-                        .length,
+                visible: Object.values(results).filter(Boolean).length,
                 register,
             }}
         >
@@ -82,39 +75,35 @@ export function SearchList({
                 className={cn("relative", className)}
                 onKeyDown={(event) => {
                     onKeyDown?.(event)
-                    if (event.defaultPrevented || !open)
-                        return
+                    if (event.defaultPrevented || !open) return
                     const items = Array.from(
                         ref.current?.querySelectorAll<HTMLButtonElement>(
                             "[data-search-result]:not([hidden]):not(:disabled)"
                         ) ?? []
                     )
-                    if (!items.length) return
-                    const index = items.findIndex(
-                        (item) => item.id === active
-                    )
+                    if (!items.length || event.altKey || event.ctrlKey || event.metaKey) return
+                    const index = items.findIndex((item) => item.id === active)
                     if (event.key === "Enter") {
+                        if (
+                            event.target instanceof HTMLElement &&
+                            event.target.closest("button, a")
+                        )
+                            return
                         event.preventDefault()
                         ;(items[index] ?? items[0])?.click()
                         return
                     }
-                    if (
-                        event.key !== "ArrowDown" &&
-                        event.key !== "ArrowUp"
-                    )
-                        return
+                    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
                     event.preventDefault()
+                    const delta = event.key === "ArrowDown" ? 1 : -1
                     const next =
                         index < 0
-                            ? event.key === "ArrowDown"
+                            ? delta === 1
                                 ? 0
                                 : items.length - 1
-                            : (index +
-                                  (event.key === "ArrowDown"
-                                      ? 1
-                                      : -1) +
-                                  items.length) %
-                              items.length
+                            : loop
+                              ? (index + delta + items.length) % items.length
+                              : Math.max(0, Math.min(items.length - 1, index + delta))
                     const item = items[next]
                     if (!item) return
                     setActive(item.id)
@@ -143,14 +132,8 @@ export function SearchListField({
             aria-autocomplete="list"
             aria-expanded={search.open}
             aria-controls={search.listId}
-            aria-activedescendant={
-                search.open && search.active
-                    ? search.active
-                    : undefined
-            }
-            aria-label={
-                props["aria-label"] ?? props.placeholder
-            }
+            aria-activedescendant={search.open && search.active ? search.active : undefined}
+            aria-label={props["aria-label"] ?? props.placeholder}
             value={value ?? search.query}
             onChange={(event) => {
                 search.setQuery(event.target.value)
@@ -163,10 +146,7 @@ export function SearchListField({
         />
     )
 }
-export function SearchListResults({
-    className,
-    ...props
-}: ComponentProps<"div">) {
+export function SearchListResults({ className, ...props }: ComponentProps<"div">) {
     const search = useSearch()
     return (
         <div
@@ -178,42 +158,34 @@ export function SearchListResults({
         />
     )
 }
-export function SearchListEmpty(
-    props: ComponentProps<"div">
-) {
+export function SearchListEmpty(props: ComponentProps<"div">) {
     const search = useSearch()
-    return search.visible ? null : (
-        <div {...props} role="status" />
-    )
+    return search.visible ? null : <div {...props} role="status" />
 }
 export function SearchListGroup({
     heading,
     children,
     className,
     ...props
-}: ComponentProps<"fieldset"> & {
+}: ComponentProps<"div"> & {
     heading?: React.ReactNode
 }) {
     const id = useId()
     return (
-        <fieldset
+        // biome-ignore lint/a11y/useSemanticElements: Listbox option groups are not form fieldsets.
+        <div
             {...props}
-            className={cn(
-                "not-has-[[data-search-result]:not([hidden])]:hidden",
-                className
-            )}
+            role="group"
+            className={cn("not-has-[[data-search-result]:not([hidden])]:hidden", className)}
             aria-labelledby={heading ? id : undefined}
         >
             {heading && (
-                <legend
-                    id={id}
-                    className="px-2 py-2 text-caption font-medium text-label-tertiary"
-                >
+                <div id={id} className="px-2 py-2 text-caption font-medium text-label-tertiary">
                     {heading}
-                </legend>
+                </div>
             )}
             {children}
-        </fieldset>
+        </div>
     )
 }
 export function SearchListItem({
@@ -229,18 +201,16 @@ export function SearchListItem({
 }) {
     const search = useSearch()
     const id = useId()
-    const haystack = [value, ...keywords]
-        .join(" ")
-        .toLocaleLowerCase()
+    const haystack = [value, ...keywords].join(" ").toLocaleLowerCase()
     const visible = search.query
         .toLocaleLowerCase()
         .trim()
         .split(/\s+/)
         .every((word) => haystack.includes(word))
     useEffect(() => {
-        search.register(id, visible)
+        search.register(id, visible && !props.disabled)
         return () => search.register(id, null)
-    }, [id, visible, search.register])
+    }, [id, visible, props.disabled, search.register])
     return (
         <button
             {...props}
@@ -251,15 +221,19 @@ export function SearchListItem({
             hidden={!visible}
             data-search-result=""
             aria-selected={search.active === id}
-            data-selected={
-                search.active === id ? "true" : undefined
-            }
+            data-selected={search.active === id ? "true" : undefined}
             className={cn(
                 "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left hover:bg-fill aria-selected:bg-accent-soft",
                 className
             )}
-            onMouseDown={(event) => event.preventDefault()}
-            onClick={() => onSelect?.(value)}
+            onMouseDown={(event) => {
+                props.onMouseDown?.(event)
+                if (!event.defaultPrevented) event.preventDefault()
+            }}
+            onClick={(event) => {
+                props.onClick?.(event)
+                if (!event.defaultPrevented) onSelect?.(value)
+            }}
         />
     )
 }