@passui/react 0.1.17 → 0.1.20

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,
@@ -40,10 +37,12 @@ export function SearchList({
     open?: boolean
 }) {
     const [query, setQuery] = useState("")
+    const updateQuery = useCallback((next: string) => {
+        setQuery(next)
+        setActive("")
+    }, [])
     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(
@@ -59,20 +58,20 @@ export function SearchList({
             }),
         []
     )
+    useEffect(() => {
+        if (!open) return
+        const available = Object.keys(results).filter((id) => results[id])
+        if (!available.includes(active)) setActive(available[0] ?? "")
+    }, [open, results, active])
     return (
         <SearchContext
             value={{
                 query,
-                setQuery: (next) => {
-                    setQuery(next)
-                    setActive("")
-                },
+                setQuery: updateQuery,
                 active,
                 listId,
                 open,
-                visible:
-                    Object.values(results).filter(Boolean)
-                        .length,
+                visible: Object.values(results).filter(Boolean).length,
                 register,
             }}
         >
@@ -82,39 +81,35 @@ export function SearchList({
                 className={cn("relative", className)}
                 onKeyDown={(event) => {
                     onKeyDown?.(event)
-                    if (event.defaultPrevented || !open)
-                        return
+                    if (event.defaultPrevented || !open || event.nativeEvent.isComposing) 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)
@@ -136,21 +131,18 @@ export function SearchListField({
     onValueChange?: (value: string) => void
 }) {
     const search = useSearch()
+    useEffect(() => {
+        if (value !== undefined) search.setQuery(value)
+    }, [value, search.setQuery])
     return (
         <input
             {...props}
             role="combobox"
             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-controls={search.open ? search.listId : undefined}
+            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 +155,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 +167,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 +210,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 +230,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",
+                "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
                 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)
+            }}
         />
     )
 }

package/src/components/section/section.tsx

@@ -1,27 +1,30 @@
-import type { ReactNode } from "react"
+import { useId, type HTMLAttributes, type ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /** Optional group heading and accessible name. */
+    title?: string
+    /** Supporting text below the grouped rows. */
+    footer?: ReactNode
+    /** Rows, typically LabeledContent. */
+    children?: ReactNode
+}
 
 /**
  * A titled, inset group of rows with an optional footer, as in iOS Settings
  * and SwiftUI's grouped `List` with `Section(header:footer:)`. Rows are
  * usually `LabeledContent`; dividers between them come for free.
  */
-export function Section({
-    title,
-    footer,
-    children,
-}: {
-    /** iOS groups can stand without a header. */
-    title?: string
-    footer?: ReactNode
-    children?: ReactNode
-}) {
+export function Section({ title, footer, children, className, ...props }: SectionProps) {
+    const headingId = useId()
     return (
         <section
-            aria-label={title}
-            className="flex flex-col gap-2"
+            aria-labelledby={title ? headingId : undefined}
+            className={cn("flex flex-col gap-2", className)}
+            {...props}
         >
             {title && (
-                <h2 className="px-4 text-footnote font-medium text-label-tertiary">
+                <h2 id={headingId} className="px-4 text-footnote font-medium text-label-tertiary">
                     {title}
                 </h2>
             )}
@@ -32,9 +35,7 @@ export function Section({
                 </div>
             ) : null}
             {footer && (
-                <p className="px-4 text-caption leading-snug text-label-tertiary">
-                    {footer}
-                </p>
+                <div className="px-4 text-caption leading-snug text-label-tertiary">{footer}</div>
             )}
         </section>
     )

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

@@ -1,10 +1,8 @@
-import {
-    TextField,
-    type TextFieldProps,
-} from "../text-field/text-field"
+import { TextField, type TextFieldProps } from "../text-field/text-field"
 
-export function SecureField(
-    props: Omit<TextFieldProps, "type">
-) {
+/** TextField's native input props, with the password type managed by SecureField. */
+export type SecureFieldProps = Omit<TextFieldProps, "type">
+
+export function SecureField(props: SecureFieldProps) {
     return <TextField {...props} type="password" />
 }

package/src/components/segmented-control/segmented-control.tsx

@@ -1,15 +1,21 @@
-import { motion } from "motion/react"
-import {
-    useId,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
+import { motion, useReducedMotion } from "motion/react"
+import { useId, useLayoutEffect, useRef, useState } from "react"
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
 import { spring } from "../../motion/transitions"
 import { Picker } from "../picker/picker"
 
+export interface SegmentedControlProps<T extends string> {
+    /** Value of the selected segment. */
+    value: T
+    /** The choices, in display order. */
+    options: ReadonlyArray<{ value: T; label: string }>
+    /** Called with the selected segment's value. */
+    onChange: (value: NoInfer<T>) => void
+    /** Accessible name for the group and its compact picker. */
+    label: string
+}
+
 /**
  * Mutually exclusive choices with a sliding selection, as on Apple
  * platforms. When the labels can't all fit the space it is given (a long
@@ -21,13 +27,9 @@ export function SegmentedControl<T extends string>({
     options,
     onChange,
     label,
-}: {
-    value: T
-    options: Array<{ value: T; label: string }>
-    onChange: (value: T) => void
-    label: string
-}) {
+}: SegmentedControlProps<T>) {
     const id = useId()
+    const reducedMotion = useReducedMotion()
     const frame = useRef<HTMLDivElement>(null)
     const measure = useRef<HTMLDivElement>(null)
     const [fits, setFits] = useState(true)
@@ -36,10 +38,7 @@ export function SegmentedControl<T extends string>({
         const box = frame.current
         const natural = measure.current
         if (!box || !natural) return
-        const check = () =>
-            setFits(
-                natural.offsetWidth <= box.clientWidth + 0.5
-            )
+        const check = () => setFits(natural.offsetWidth <= box.clientWidth + 0.5)
         check()
         const observer = new ResizeObserver(check)
         observer.observe(box)
@@ -56,22 +55,16 @@ export function SegmentedControl<T extends string>({
                 className="pointer-events-none invisible absolute top-0 flex w-max p-[3px] text-footnote font-semibold"
             >
                 {options.map((option) => (
-                    <span
-                        key={option.value}
-                        className="min-w-[64px] px-3 py-1 whitespace-nowrap"
-                    >
+                    <span key={option.value} className="min-w-[64px] px-3 py-1 whitespace-nowrap">
                         {option.label}
                     </span>
                 ))}
             </div>
             {fits ? (
                 <fieldset className="flex w-full rounded-lg bg-fill p-[3px] shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]">
-                    <legend className="sr-only">
-                        {label}
-                    </legend>
+                    <legend className="sr-only">{label}</legend>
                     {options.map((option) => {
-                        const selected =
-                            option.value === value
+                        const selected = option.value === value
                         return (
                             <label
                                 key={option.value}
@@ -97,9 +90,7 @@ export function SegmentedControl<T extends string>({
                                     <motion.span
                                         layoutId={`segment-${id}`}
                                         className="absolute inset-0 -z-10 rounded-md bg-elevated shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]"
-                                        transition={
-                                            spring.snappy
-                                        }
+                                        transition={reducedMotion ? { duration: 0 } : spring.snappy}
                                     />
                                 )}
                                 {option.label}

package/src/components/sheet/modal-environment.ts

@@ -1,7 +1,4 @@
-import {
-    FLOATING_LAYER,
-    ownsFloatingLayer,
-} from "../../lib/floating-layers"
+import { FLOATING_LAYER, ownsFloatingLayer } from "../../lib/floating-layers"
 
 const surfaces: HTMLElement[] = []
 const isolated = new Map<HTMLElement, boolean>()
@@ -9,8 +6,7 @@ let overflow = ""
 let overflowPriority = ""
 
 function restoreBackground() {
-    for (const [element, inert] of isolated)
-        element.inert = inert
+    for (const [element, inert] of isolated) element.inert = inert
     isolated.clear()
 }
 
@@ -19,11 +15,8 @@ function isolateBackground() {
     const surface = surfaces.at(-1)
     if (!surface) return
     const roots = [surface.parentElement ?? surface]
-    for (const layer of document.querySelectorAll<HTMLElement>(
-        `[${FLOATING_LAYER}]`
-    )) {
-        if (ownsFloatingLayer(surface, layer))
-            roots.push(layer)
+    for (const layer of document.querySelectorAll<HTMLElement>(`[${FLOATING_LAYER}]`)) {
+        if (ownsFloatingLayer(surface, layer)) roots.push(layer)
     }
     const visit = (parent: HTMLElement) => {
         for (const child of parent.children) {
@@ -31,9 +24,7 @@ function isolateBackground() {
             if (roots.includes(child)) continue
             if (roots.some((root) => child.contains(root))) {
                 visit(child)
-            } else if (
-                !child.matches("script, style, link")
-            ) {
+            } else if (!child.matches("script, style, link")) {
                 isolated.set(child, child.inert)
                 child.inert = true
             }
@@ -43,43 +34,26 @@ function isolateBackground() {
 }
 
 /** Keeps nested sheets and their portaled controls above an inactive background. */
-export function enterModalEnvironment(
-    surface: HTMLElement
-): () => void {
+export function enterModalEnvironment(surface: HTMLElement): () => void {
     if (!surfaces.length) {
-        overflow =
-            document.body.style.getPropertyValue("overflow")
-        overflowPriority =
-            document.body.style.getPropertyPriority(
-                "overflow"
-            )
+        overflow = document.body.style.getPropertyValue("overflow")
+        overflowPriority = document.body.style.getPropertyPriority("overflow")
         document.body.style.setProperty("overflow", "hidden")
     }
     surfaces.push(surface)
     isolateBackground()
-    const preventBackgroundScroll = (
-        event: WheelEvent | TouchEvent
-    ) => {
+    const preventBackgroundScroll = (event: WheelEvent | TouchEvent) => {
         if (surfaces.at(-1) !== surface) return
         const target = event.target
         if (
             target instanceof Element &&
-            (surface.contains(target) ||
-                ownsFloatingLayer(surface, target))
+            (surface.contains(target) || ownsFloatingLayer(surface, target))
         )
             return
         event.preventDefault()
     }
-    document.addEventListener(
-        "wheel",
-        preventBackgroundScroll,
-        { passive: false }
-    )
-    document.addEventListener(
-        "touchmove",
-        preventBackgroundScroll,
-        { passive: false }
-    )
+    document.addEventListener("wheel", preventBackgroundScroll, { passive: false })
+    document.addEventListener("touchmove", preventBackgroundScroll, { passive: false })
     const observer = new MutationObserver(() => {
         if (surfaces.at(-1) === surface) isolateBackground()
     })
@@ -89,25 +63,13 @@ export function enterModalEnvironment(
     })
     return () => {
         observer.disconnect()
-        document.removeEventListener(
-            "wheel",
-            preventBackgroundScroll
-        )
-        document.removeEventListener(
-            "touchmove",
-            preventBackgroundScroll
-        )
+        document.removeEventListener("wheel", preventBackgroundScroll)
+        document.removeEventListener("touchmove", preventBackgroundScroll)
         surfaces.splice(surfaces.indexOf(surface), 1)
         isolateBackground()
         if (!surfaces.length) {
-            if (overflow)
-                document.body.style.setProperty(
-                    "overflow",
-                    overflow,
-                    overflowPriority
-                )
-            else
-                document.body.style.removeProperty("overflow")
+            if (overflow) document.body.style.setProperty("overflow", overflow, overflowPriority)
+            else document.body.style.removeProperty("overflow")
         }
     }
 }

package/src/components/sheet/sheet-portal.tsx

@@ -1,21 +1,10 @@
-import {
-    type ReactNode,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 
 /** Escape transformed page layers while retaining the source's scoped appearance. */
-export function SheetPortal({
-    children,
-}: {
-    children: ReactNode
-}) {
+export function SheetPortal({ children }: { children: ReactNode }) {
     const source = useRef<HTMLSpanElement>(null)
-    const [host, setHost] = useState<HTMLDivElement | null>(
-        null
-    )
+    const [host, setHost] = useState<HTMLDivElement | null>(null)
     useLayoutEffect(() => {
         const marker = source.current
         if (!marker) return
@@ -23,20 +12,12 @@ export function SheetPortal({
         const layer = document.createElement("div")
         layer.dataset.passuiOverlay = ""
         layer.style.display = "contents"
-        const attributes = [
-            "data-theme",
-            "data-accent",
-            "data-os",
-            "dir",
-        ]
+        const attributes = ["data-theme", "data-accent", "data-os", "dir"]
         let properties = new Set<string>()
         const inherit = () => {
             for (const name of attributes) {
-                const value = marker
-                    .closest(`[${name}]`)
-                    ?.getAttribute(name)
-                if (value === null || value === undefined)
-                    layer.removeAttribute(name)
+                const value = marker.closest(`[${name}]`)?.getAttribute(name)
+                if (value === null || value === undefined) layer.removeAttribute(name)
                 else layer.setAttribute(name, value)
             }
             const computed = getComputedStyle(marker)
@@ -44,14 +25,9 @@ export function SheetPortal({
             for (const name of computed) {
                 if (!name.startsWith("--")) continue
                 next.add(name)
-                layer.style.setProperty(
-                    name,
-                    computed.getPropertyValue(name)
-                )
+                layer.style.setProperty(name, computed.getPropertyValue(name))
             }
-            for (const name of properties)
-                if (!next.has(name))
-                    layer.style.removeProperty(name)
+            for (const name of properties) if (!next.has(name)) layer.style.removeProperty(name)
             properties = next
             layer.style.colorScheme = computed.colorScheme
             layer.style.fontFamily = computed.fontFamily
@@ -61,18 +37,10 @@ export function SheetPortal({
         document.body.appendChild(layer)
         setHost(layer)
         const observer = new MutationObserver(inherit)
-        for (
-            let ancestor = marker.parentElement;
-            ancestor;
-            ancestor = ancestor.parentElement
-        ) {
+        for (let ancestor = marker.parentElement; ancestor; ancestor = ancestor.parentElement) {
             observer.observe(ancestor, {
                 attributes: true,
-                attributeFilter: [
-                    ...attributes,
-                    "style",
-                    "class",
-                ],
+                attributeFilter: [...attributes, "style", "class"],
             })
         }
         return () => {