@passui/react 0.1.17 → 0.1.20

package/src/components/picker/picker.tsx

@@ -1,44 +1,50 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
-import {
-    type KeyboardEvent,
-    useCallback,
-    useEffect,
-    useId,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure"
+import { type KeyboardEvent, useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom"
-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 { AnchoredSurface } from "../popover/anchored-surface"
+import { pickerTriggerStyle } from "./picker-trigger"
 
 export interface PickerOption<T extends string> {
     value: T
     label: string
     /** A quieter second line or trailing note, such as "Free" or a region. */
+    disabled?: boolean
+    keywords?: string[]
     detail?: string
     /** The option's own language, so it is spoken and shaped right. */
     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
+    /** Offers a new value when no option has the same label or value. */
+    onCreate?: (query: string) => void
+    /** Localized creation action; receives the trimmed query. */
+    createLabel?: (query: string) => 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,41 +64,28 @@ 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
-}) {
-    const [open, setOpen] = useState(false)
+    onCreate,
+    createLabel,
+    disabled = false,
+}: PickerProps<T>) {
+    const panel = useAnchoredDisclosure(disabled)
+    const { open } = panel
     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()
-    }, [])
+    const close = useCallback(
+        (refocus: boolean) => {
+            panel.close()
+            if (refocus) trigger.current?.focus({ preventScroll: true })
+        },
+        [panel.close]
+    )
 
-    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)
+            panel.show()
         }
     }
 
@@ -104,90 +97,57 @@ export function Picker<T extends string>({
                 role="combobox"
                 aria-label={label}
                 aria-haspopup="listbox"
-                aria-expanded={open}
-                aria-controls={open ? listId : undefined}
-                onClick={() => setOpen((current) => !current)}
+                aria-expanded={open && !disabled}
+                aria-controls={open && !disabled ? listId : undefined}
+                disabled={disabled}
+                onClick={() => panel.toggle()}
                 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 && (
-                            <SelectList
-                                id={listId}
-                                anchor={trigger.current}
-                                options={options}
-                                value={value}
-                                label={label}
-                                searchable={
-                                    searchable ??
-                                    options.length >
-                                        SEARCH_FROM
-                                }
-                                searchPlaceholder={
-                                    searchPlaceholder
-                                }
-                                emptyLabel={emptyLabel}
-                                onPick={(next) => {
-                                    close(true)
-                                    if (next === value) return
-                                    haptic("selection")
-                                    onChange(next)
-                                }}
-                                onClose={close}
-                            />
-                        )}
-                    </AnimatePresence>,
+                    panel.mounted && trigger.current ? (
+                        <SelectList
+                            open={open}
+                            onExited={panel.onExited}
+                            id={listId}
+                            anchor={trigger.current}
+                            options={options}
+                            value={value}
+                            label={label}
+                            searchable={
+                                searchable ?? (Boolean(onCreate) || options.length >= SEARCH_FROM)
+                            }
+                            searchPlaceholder={searchPlaceholder}
+                            emptyLabel={emptyLabel}
+                            onCreate={onCreate}
+                            createLabel={createLabel}
+                            onPick={(next) => {
+                                close(true)
+                                if (next === value) return
+                                haptic("selection")
+                                onChange(next)
+                            }}
+                            onClose={close}
+                        />
+                    ) : null,
                     document.body
                 )}
         </>
     )
 }
 
-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>({
+    open,
+    onExited,
     id,
     anchor,
     options,
@@ -198,7 +158,11 @@ function SelectList<T extends string>({
     emptyLabel,
     onPick,
     onClose,
+    onCreate,
+    createLabel,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     options: ReadonlyArray<PickerOption<T>>
@@ -207,16 +171,13 @@ function SelectList<T extends string>({
     searchable: boolean
     searchPlaceholder: string
     emptyLabel: string
+    onCreate?: (query: string) => void
+    createLabel?: (query: string) => string
     onPick: (value: T) => void
     onClose: (refocus: boolean) => void
 }) {
-    const root = useRef<HTMLDivElement>(null)
-    const reducedMotion = useReducedMotion()
     const list = useRef<HTMLDivElement>(null)
     const search = useRef<HTMLInputElement>(null)
-    const [placement, setPlacement] = useState(() =>
-        place(anchor)
-    )
     const [query, setQuery] = useState("")
     const typed = useRef({ text: "", at: 0 })
 
@@ -224,93 +185,58 @@ function SelectList<T extends string>({
         const needle = query.trim().toLocaleLowerCase()
         if (!needle) return options
         return options.filter((option) =>
-            `${option.label} ${option.detail ?? ""} ${option.value}`
+            `${option.label} ${option.detail ?? ""} ${option.value} ${(option.keywords ?? []).join(" ")}`
                 .toLocaleLowerCase()
                 .includes(needle)
         )
     }, [options, query])
 
+    const enabled = shown.filter((option) => !option.disabled)
+    const trimmed = query.trim()
+    const canCreate = Boolean(
+        onCreate &&
+            trimmed &&
+            !options.some(
+                (option) =>
+                    option.label.toLocaleLowerCase() === trimmed.toLocaleLowerCase() ||
+                    option.value.toLocaleLowerCase() === trimmed.toLocaleLowerCase()
+            )
+    )
+    const create = () => {
+        if (!canCreate) return
+        onClose(true)
+        onCreate?.(trimmed)
+    }
     const [active, setActive] = useState(() =>
         Math.max(
             0,
-            options.findIndex(
-                (option) => option.value === value
-            )
+            options
+                .filter((option) => !option.disabled)
+                .findIndex((option) => option.value === value)
         )
     )
-    const activeOption =
-        shown[Math.min(active, shown.length - 1)]
+    const last = enabled.length + (canCreate ? 1 : 0) - 1
+    const activeOption = enabled[Math.min(active, last)]
+    const activeId = activeOption
+        ? `${id}-${activeOption.value}`
+        : canCreate
+          ? `${id}-create`
+          : undefined
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        const unregister = registerFloatingLayer(
-            root.current,
-            anchor
-        )
+    useEffect(() => {
         if (searchable) search.current?.focus()
         else list.current?.focus()
-        return unregister
-    }, [searchable, anchor])
+    }, [searchable])
 
     // The chosen option starts in view, then follows the keyboard.
     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])
-
     const onKeyDown = (event: KeyboardEvent) => {
-        const last = shown.length - 1
         const step = (to: number) => {
             event.preventDefault()
             setActive(Math.max(0, Math.min(last, to)))
@@ -319,102 +245,52 @@ 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 (canCreate) create()
         } else if (event.key === "Escape") {
             event.preventDefault()
             event.stopPropagation()
             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())
+            const match = enabled.findIndex((option) =>
+                option.label.toLocaleLowerCase().startsWith(text.toLocaleLowerCase())
             )
             if (match >= 0) setActive(match)
         }
     }
 
     return (
-        <motion.div
-            ref={root}
-            initial={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 0.96,
-                          y: placement.above ? 6 : -6,
-                      }
-            }
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 0.98,
-                          transition: { duration: 0.1 },
-                      }
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : spring.smooth
-            }
-            style={{
-                left: placement.left,
-                width: placement.width,
-                top: placement.top,
-                bottom: placement.bottom,
-                maxHeight: placement.maxHeight,
-                transformOrigin: placement.above
-                    ? "50% 100%"
-                    : "50% 0%",
-            }}
-            className="glass-menu fixed z-[80] flex flex-col overflow-hidden rounded-3xl"
-            {...{ [FLOATING_LAYER]: "" }}
+        <AnchoredSurface
+            open={open}
+            onExited={onExited}
+            anchor={anchor}
+            width={Math.min(Math.max(anchor.getBoundingClientRect().width, 220), 360)}
+            needed={240}
+            onClose={onClose}
             onKeyDown={onKeyDown}
+            contentClassName="overflow-hidden"
         >
             {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}
                         placeholder={searchPlaceholder}
                         aria-label={searchPlaceholder}
                         aria-controls={id}
-                        aria-activedescendant={
-                            activeOption
-                                ? `${id}-${activeOption.value}`
-                                : undefined
-                        }
+                        aria-activedescendant={activeId}
                         onChange={(event) => {
                             setQuery(event.target.value)
                             setActive(0)
@@ -429,14 +305,10 @@ function SelectList<T extends string>({
                 role="listbox"
                 aria-label={label}
                 tabIndex={-1}
-                aria-activedescendant={
-                    activeOption
-                        ? `${id}-${activeOption.value}`
-                        : undefined
-                }
+                aria-activedescendant={activeId}
                 className="no-scrollbar flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1.5 outline-none"
             >
-                {shown.map((option, index) => {
+                {shown.map((option) => {
                     const chosen = option.value === value
                     const focused = option === activeOption
                     return (
@@ -447,19 +319,17 @@ function SelectList<T extends string>({
                             role="option"
                             tabIndex={-1}
                             aria-selected={chosen}
+                            aria-disabled={option.disabled || undefined}
                             lang={option.lang}
                             onPointerMove={() =>
-                                setActive(index)
-                            }
-                            onClick={() =>
-                                onPick(option.value)
+                                !option.disabled && setActive(enabled.indexOf(option))
                             }
+                            onClick={() => !option.disabled && 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"
+                                option.disabled && "opacity-40",
+                                chosen ? "font-semibold text-label" : "text-label"
                             )}
                         >
                             <span className="flex w-4 shrink-0 justify-center">
@@ -471,9 +341,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}
@@ -482,12 +350,26 @@ function SelectList<T extends string>({
                         </div>
                     )
                 })}
-                {shown.length === 0 && (
-                    <p className="px-3 py-2 text-footnote text-label-tertiary">
-                        {emptyLabel}
-                    </p>
+                {canCreate && (
+                    <div
+                        id={`${id}-create`}
+                        role="option"
+                        aria-selected={false}
+                        tabIndex={-1}
+                        onPointerMove={() => setActive(enabled.length)}
+                        onClick={create}
+                        className={cn(
+                            "flex min-h-9 cursor-default items-center rounded-lg px-2 py-1.5 text-subheadline text-accent-text",
+                            !activeOption && "bg-fill"
+                        )}
+                    >
+                        {createLabel?.(trimmed) ?? trimmed}
+                    </div>
+                )}
+                {shown.length === 0 && !canCreate && (
+                    <p className="px-3 py-2 text-footnote text-label-tertiary">{emptyLabel}</p>
                 )}
             </div>
-        </motion.div>
+        </AnchoredSurface>
     )
 }