@passui/react 0.1.16 → 0.1.19

package/src/components/picker/picker.tsx

@@ -1,8 +1,4 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import {
     type KeyboardEvent,
     useCallback,
@@ -14,21 +10,15 @@ import {
     useState,
 } from "react"
 import { createPortal } from "react-dom"
+import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
+import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
 import { FLOATING_LAYER } from "../../hooks/use-dismiss"
-import {
-    CheckIcon,
-    SearchIcon,
-    SelectorIcon,
-} from "../../icons/icons"
+import { CheckIcon, SearchIcon, SelectorIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
-import {
-    type AnchoredPlacement,
-    placeInViewport,
-} from "../../lib/anchored-placement"
 import { registerFloatingLayer } from "../../lib/floating-layers"
 import { haptic } from "../../lib/haptics"
-import { screenEdges } from "../../lib/screen-edges"
-import { spring } from "../../motion/transitions"
+import { floatingPanelMotion } from "../../motion/transitions"
+import { pickerTriggerStyle } from "./picker-trigger"
 
 export interface PickerOption<T extends string> {
     value: T
@@ -39,6 +29,29 @@ export interface PickerOption<T extends string> {
     lang?: string
 }
 
+/** Values and callbacks share the option value type, including literal unions. */
+export interface PickerProps<T extends string> {
+    /** The selected option's value. */
+    value: T
+    /** Available choices. Use a literal union for a fixed set of values. */
+    options: ReadonlyArray<PickerOption<T>>
+    /** Called with the selected option value. */
+    onChange: (value: NoInfer<T>) => void
+    /** Accessible name for the trigger. */
+    label: string
+    /** Shown when the selected value has no matching option. */
+    placeholder?: string
+    /** Defaults to on for lists of ten or more options. */
+    searchable?: boolean
+    /** Label for the filter field. @default "Search" */
+    searchPlaceholder?: string
+    /** Shown when the filter matches nothing. @default "No matches" */
+    emptyLabel?: string
+    className?: string
+    /** Prevents opening or choosing an option. @default false */
+    disabled?: boolean
+}
+
 /** Long lists get a filter field, as in the system pickers. */
 const SEARCH_FROM = 10
 
@@ -58,39 +71,20 @@ export function Picker<T extends string>({
     searchPlaceholder = "Search",
     emptyLabel = "No matches",
     className,
-}: {
-    value: T
-    options: ReadonlyArray<PickerOption<T>>
-    onChange: (value: T) => void
-    /** Read by assistive technology; the visible label is the field around it. */
-    label: string
-    placeholder?: string
-    /** Defaults to on for lists longer than ten. */
-    searchable?: boolean
-    searchPlaceholder?: string
-    /** Shown when the filter matches nothing. */
-    emptyLabel?: string
-    className?: string
-}) {
+    disabled = false,
+}: PickerProps<T>) {
     const [open, setOpen] = useState(false)
     const trigger = useRef<HTMLButtonElement>(null)
     const listId = useId()
-    const selected = options.find(
-        (option) => option.value === value
-    )
+    const selected = options.find((option) => option.value === value)
 
     const close = useCallback((refocus: boolean) => {
         setOpen(false)
-        if (refocus) trigger.current?.focus()
+        if (refocus) trigger.current?.focus({ preventScroll: true })
     }, [])
 
-    const onTriggerKey = (
-        event: KeyboardEvent<HTMLButtonElement>
-    ) => {
-        if (
-            event.key === "ArrowDown" ||
-            event.key === "ArrowUp"
-        ) {
+    const onTriggerKey = (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault()
             setOpen(true)
         }
@@ -104,48 +98,33 @@ export function Picker<T extends string>({
                 role="combobox"
                 aria-label={label}
                 aria-haspopup="listbox"
-                aria-expanded={open}
-                aria-controls={open ? listId : undefined}
+                aria-expanded={open && !disabled}
+                aria-controls={open && !disabled ? listId : undefined}
+                disabled={disabled}
                 onClick={() => setOpen((current) => !current)}
                 onKeyDown={onTriggerKey}
-                className={cn(
-                    "flex w-full min-w-0 items-center gap-2 rounded-lg control-field px-3 py-2 text-start text-subheadline text-label",
-                    className
-                )}
+                className={pickerTriggerStyle(className)}
             >
                 <span
                     lang={selected?.lang}
-                    className={cn(
-                        "min-w-0 grow truncate",
-                        !selected && "text-label-tertiary"
-                    )}
+                    className={cn("min-w-0 grow truncate", !selected && "text-label-tertiary")}
                 >
                     {selected?.label ?? placeholder ?? ""}
                 </span>
-                <SelectorIcon
-                    size={15}
-                    strokeWidth={2}
-                    className="shrink-0 text-label-tertiary"
-                />
+                <SelectorIcon size={15} strokeWidth={2} className="shrink-0 text-label-tertiary" />
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
                     <AnimatePresence>
-                        {open && trigger.current && (
+                        {open && !disabled && trigger.current && (
                             <SelectList
                                 id={listId}
                                 anchor={trigger.current}
                                 options={options}
                                 value={value}
                                 label={label}
-                                searchable={
-                                    searchable ??
-                                    options.length >
-                                        SEARCH_FROM
-                                }
-                                searchPlaceholder={
-                                    searchPlaceholder
-                                }
+                                searchable={searchable ?? options.length > SEARCH_FROM}
+                                searchPlaceholder={searchPlaceholder}
                                 emptyLabel={emptyLabel}
                                 onPick={(next) => {
                                     close(true)
@@ -163,30 +142,6 @@ export function Picker<T extends string>({
     )
 }
 
-function place(anchor: HTMLElement): AnchoredPlacement {
-    const rect = anchor.getBoundingClientRect()
-    const viewport = window.visualViewport
-    const frame = {
-        anchor: {
-            top: rect.top,
-            bottom: rect.bottom,
-            left: rect.left,
-        },
-        viewport: {
-            width: viewport?.width ?? window.innerWidth,
-            height: viewport?.height ?? window.innerHeight,
-        },
-        edges: screenEdges(),
-    }
-    const width = Math.min(Math.max(rect.width, 220), 360)
-    const placed = placeInViewport(frame, width, 240)
-    // Long lists scroll rather than stretch past 420 px.
-    return {
-        ...placed,
-        maxHeight: Math.min(placed.maxHeight ?? 420, 420),
-    }
-}
-
 function SelectList<T extends string>({
     id,
     anchor,
@@ -214,8 +169,10 @@ function SelectList<T extends string>({
     const reducedMotion = useReducedMotion()
     const list = useRef<HTMLDivElement>(null)
     const search = useRef<HTMLInputElement>(null)
-    const [placement, setPlacement] = useState(() =>
-        place(anchor)
+    const placement = useAnchoredPlacement(
+        anchor,
+        Math.min(Math.max(anchor.getBoundingClientRect().width, 220), 360),
+        240
     )
     const [query, setQuery] = useState("")
     const typed = useRef({ text: "", at: 0 })
@@ -233,20 +190,14 @@ function SelectList<T extends string>({
     const [active, setActive] = useState(() =>
         Math.max(
             0,
-            options.findIndex(
-                (option) => option.value === value
-            )
+            options.findIndex((option) => option.value === value)
         )
     )
-    const activeOption =
-        shown[Math.min(active, shown.length - 1)]
+    const activeOption = shown[Math.min(active, shown.length - 1)]
 
     useLayoutEffect(() => {
         if (!root.current) return
-        const unregister = registerFloatingLayer(
-            root.current,
-            anchor
-        )
+        const unregister = registerFloatingLayer(root.current, anchor)
         if (searchable) search.current?.focus()
         else list.current?.focus()
         return unregister
@@ -256,58 +207,11 @@ function SelectList<T extends string>({
     useEffect(() => {
         if (!activeOption) return
         list.current
-            ?.querySelector(
-                `[data-value="${CSS.escape(activeOption.value)}"]`
-            )
+            ?.querySelector(`[data-value="${CSS.escape(activeOption.value)}"]`)
             ?.scrollIntoView({ block: "nearest" })
     }, [activeOption])
 
-    useEffect(() => {
-        const onPointer = (event: PointerEvent) => {
-            const target = event.target as Node
-            if (
-                !root.current?.contains(target) &&
-                !anchor.contains(target)
-            )
-                onClose(false)
-        }
-        const onScroll = (event: Event) => {
-            if (!root.current?.contains(event.target as Node))
-                setPlacement(place(anchor))
-        }
-        const onResize = () => setPlacement(place(anchor))
-        const onBlur = () => onClose(false)
-        document.addEventListener(
-            "pointerdown",
-            onPointer,
-            true
-        )
-        window.addEventListener("scroll", onScroll, true)
-        window.addEventListener("resize", onResize)
-        window.visualViewport?.addEventListener(
-            "resize",
-            onResize
-        )
-        window.addEventListener("blur", onBlur)
-        return () => {
-            document.removeEventListener(
-                "pointerdown",
-                onPointer,
-                true
-            )
-            window.removeEventListener(
-                "scroll",
-                onScroll,
-                true
-            )
-            window.removeEventListener("resize", onResize)
-            window.visualViewport?.removeEventListener(
-                "resize",
-                onResize
-            )
-            window.removeEventListener("blur", onBlur)
-        }
-    }, [anchor, onClose])
+    useFloatingDismiss(root, anchor, onClose)
 
     const onKeyDown = (event: KeyboardEvent) => {
         const last = shown.length - 1
@@ -319,14 +223,10 @@ function SelectList<T extends string>({
         if (event.key === "ArrowDown") step(current + 1)
         else if (event.key === "ArrowUp") step(current - 1)
         else if (event.key === "Home" && !searchable) step(0)
-        else if (event.key === "End" && !searchable)
-            step(last)
+        else if (event.key === "End" && !searchable) step(last)
         else if (event.key === "PageDown") step(current + 8)
         else if (event.key === "PageUp") step(current - 8)
-        else if (
-            event.key === "Enter" ||
-            (event.key === " " && !searchable)
-        ) {
+        else if (event.key === "Enter" || (event.key === " " && !searchable)) {
             event.preventDefault()
             if (activeOption) onPick(activeOption.value)
         } else if (event.key === "Escape") {
@@ -335,23 +235,13 @@ function SelectList<T extends string>({
             onClose(true)
         } else if (event.key === "Tab") {
             onClose(false)
-        } else if (
-            !searchable &&
-            event.key.length === 1 &&
-            !event.metaKey &&
-            !event.ctrlKey
-        ) {
+        } else if (!searchable && event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
             // Type to jump, as in a native pop-up button.
             const now = Date.now()
-            const text =
-                (now - typed.current.at < 700
-                    ? typed.current.text
-                    : "") + event.key
+            const text = (now - typed.current.at < 700 ? typed.current.text : "") + event.key
             typed.current = { text, at: now }
             const match = shown.findIndex((option) =>
-                option.label
-                    .toLocaleLowerCase()
-                    .startsWith(text.toLocaleLowerCase())
+                option.label.toLocaleLowerCase().startsWith(text.toLocaleLowerCase())
             )
             if (match >= 0) setActive(match)
         }
@@ -365,7 +255,7 @@ function SelectList<T extends string>({
                     ? { opacity: 0 }
                     : {
                           opacity: 0,
-                          scale: 0.96,
+                          scale: 1,
                           y: placement.above ? 6 : -6,
                       }
             }
@@ -375,24 +265,22 @@ function SelectList<T extends string>({
                     ? { opacity: 0 }
                     : {
                           opacity: 0,
-                          scale: 0.98,
-                          transition: { duration: 0.1 },
+                          scale: 1,
+                          y: placement.above ? 4 : -4,
                       }
             }
             transition={
                 reducedMotion
                     ? { duration: 0 }
-                    : spring.smooth
+                    : floatingPanelMotion(placement.above ? "above" : "below").transition
             }
             style={{
                 left: placement.left,
                 width: placement.width,
                 top: placement.top,
                 bottom: placement.bottom,
-                maxHeight: placement.maxHeight,
-                transformOrigin: placement.above
-                    ? "50% 100%"
-                    : "50% 0%",
+                maxHeight: Math.min(placement.maxHeight ?? 420, 420),
+                transformOrigin: placement.above ? "50% 100%" : "50% 0%",
             }}
             className="glass-menu fixed z-[80] flex flex-col overflow-hidden rounded-3xl"
             {...{ [FLOATING_LAYER]: "" }}
@@ -400,10 +288,7 @@ function SelectList<T extends string>({
         >
             {searchable && (
                 <div className="flex shrink-0 items-center gap-2 border-b border-separator/70 px-3 py-2">
-                    <SearchIcon
-                        size={15}
-                        className="shrink-0 text-label-tertiary"
-                    />
+                    <SearchIcon size={15} className="shrink-0 text-label-tertiary" />
                     <input
                         ref={search}
                         value={query}
@@ -411,9 +296,7 @@ function SelectList<T extends string>({
                         aria-label={searchPlaceholder}
                         aria-controls={id}
                         aria-activedescendant={
-                            activeOption
-                                ? `${id}-${activeOption.value}`
-                                : undefined
+                            activeOption ? `${id}-${activeOption.value}` : undefined
                         }
                         onChange={(event) => {
                             setQuery(event.target.value)
@@ -429,11 +312,7 @@ function SelectList<T extends string>({
                 role="listbox"
                 aria-label={label}
                 tabIndex={-1}
-                aria-activedescendant={
-                    activeOption
-                        ? `${id}-${activeOption.value}`
-                        : undefined
-                }
+                aria-activedescendant={activeOption ? `${id}-${activeOption.value}` : undefined}
                 className="no-scrollbar flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1.5 outline-none"
             >
                 {shown.map((option, index) => {
@@ -448,18 +327,12 @@ function SelectList<T extends string>({
                             tabIndex={-1}
                             aria-selected={chosen}
                             lang={option.lang}
-                            onPointerMove={() =>
-                                setActive(index)
-                            }
-                            onClick={() =>
-                                onPick(option.value)
-                            }
+                            onPointerMove={() => setActive(index)}
+                            onClick={() => onPick(option.value)}
                             className={cn(
                                 "flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-subheadline [@media(pointer:coarse)]:min-h-11",
                                 focused ? "bg-fill" : "",
-                                chosen
-                                    ? "font-semibold text-label"
-                                    : "text-label"
+                                chosen ? "font-semibold text-label" : "text-label"
                             )}
                         >
                             <span className="flex w-4 shrink-0 justify-center">
@@ -471,9 +344,7 @@ function SelectList<T extends string>({
                                     />
                                 )}
                             </span>
-                            <span className="min-w-0 grow break-words">
-                                {option.label}
-                            </span>
+                            <span className="min-w-0 grow break-words">{option.label}</span>
                             {option.detail && (
                                 <span className="shrink-0 text-caption font-normal text-label-tertiary">
                                     {option.detail}
@@ -483,9 +354,7 @@ function SelectList<T extends string>({
                     )
                 })}
                 {shown.length === 0 && (
-                    <p className="px-3 py-2 text-footnote text-label-tertiary">
-                        {emptyLabel}
-                    </p>
+                    <p className="px-3 py-2 text-footnote text-label-tertiary">{emptyLabel}</p>
                 )}
             </div>
         </motion.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,
+    }
+}