@passui/react 0.1.16 → 0.1.19

package/src/components/context-menu/context-menu-host.tsx

@@ -1,25 +1,15 @@
-import {
-    AnimatePresence,
-    motion,
-    useIsPresent,
-    useReducedMotion,
-} from "motion/react"
-import {
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useState,
-    useSyncExternalStore,
-} from "react"
+import { AnimatePresence, motion, useIsPresent, useReducedMotion } from "motion/react"
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"
 import { FLOATING_LAYER } from "../../hooks/use-dismiss"
 import { CheckIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
-import { registerFloatingLayer } from "../../lib/floating-layers"
+import { belongsToFloatingSurface, registerFloatingLayer } from "../../lib/floating-layers"
 import { screenEdges } from "../../lib/screen-edges"
 import { spring } from "../../motion/transitions"
 import { concealMenuSource } from "./conceal-menu-source"
+import { findMenuTypeaheadIndex, isMenuNavigationKey, nextMenuIndex } from "./menu-navigation"
 import { menuPosition } from "./menu-position"
-import { menuReveal, toolbarMenuReveal } from "./menu-reveal"
+import { menuSurfaceReveal } from "./menu-reveal"
 import {
     closeContextMenu,
     getContextMenu,
@@ -29,22 +19,15 @@ import {
 
 /** Renders the open context menu. Mount once, near the app root. */
 export function ContextMenuHost() {
-    const menu = useSyncExternalStore(
-        subscribeContextMenu,
-        getContextMenu,
-        () => null
-    )
-    return (
-        <AnimatePresence>
-            {menu && <Menu key={menu.id} menu={menu} />}
-        </AnimatePresence>
-    )
+    const menu = useSyncExternalStore(subscribeContextMenu, getContextMenu, () => null)
+    return <AnimatePresence>{menu && <Menu key={menu.id} menu={menu} />}</AnimatePresence>
 }
 
 function Menu({ menu }: { menu: OpenMenu }) {
     const present = useIsPresent()
     const reducedMotion = useReducedMotion()
     const ref = useRef<HTMLDivElement>(null)
+    const content = useRef<HTMLDivElement>(null)
     const [position, setPosition] = useState({
         left: menu.x,
         top: menu.y,
@@ -56,6 +39,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
         ready: false,
     })
     const [focused, setFocused] = useState(-1)
+    const typeahead = useRef({ query: "", at: 0 })
 
     useLayoutEffect(() => {
         if (
@@ -66,10 +50,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
             return
         const anchor = menu.toolbar ?? menu.anchor
         const surface = ref.current
-        const restore = concealMenuSource(
-            anchor,
-            Boolean(menu.toolbar)
-        )
+        const restore = concealMenuSource(anchor, Boolean(menu.toolbar))
         return () => {
             const restored = restore()
             if (
@@ -87,9 +68,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
     useLayoutEffect(() => {
         const surface = ref.current
         if (!surface || !present || !position.ready) return
-        const unregister = menu.anchor
-            ? registerFloatingLayer(surface, menu.anchor)
-            : undefined
+        const unregister = menu.anchor ? registerFloatingLayer(surface, menu.anchor) : undefined
         surface.focus()
         return unregister
     }, [menu.anchor, present, position.ready])
@@ -106,33 +85,37 @@ function Menu({ menu }: { menu: OpenMenu }) {
             const edges = screenEdges()
             const left = viewport?.offsetLeft ?? 0
             const top = viewport?.offsetTop ?? 0
-            setPosition({
+            const next = {
                 ...menuPosition(
                     menu,
                     {
                         width: element.offsetWidth,
                         height: Math.max(
                             element.offsetHeight,
-                            element.scrollHeight
+                            (content.current?.scrollHeight ?? 0) + 12
                         ),
                     },
                     {
                         left: left + edges.left,
                         top: top + edges.top,
-                        right:
-                            left +
-                            (viewport?.width ??
-                                window.innerWidth) -
-                            edges.right,
-                        bottom:
-                            top +
-                            (viewport?.height ??
-                                window.innerHeight) -
-                            edges.bottom,
+                        right: left + (viewport?.width ?? window.innerWidth) - edges.right,
+                        bottom: top + (viewport?.height ?? window.innerHeight) - edges.bottom,
                     }
                 ),
                 ready: true,
-            })
+            }
+            setPosition((current) =>
+                current.left === next.left &&
+                current.top === next.top &&
+                current.originX === next.originX &&
+                current.originY === next.originY &&
+                current.maxHeight === next.maxHeight &&
+                current.width === next.width &&
+                current.height === next.height &&
+                current.ready === next.ready
+                    ? current
+                    : next
+            )
         }
         const schedule = () => {
             cancelAnimationFrame(frame)
@@ -153,7 +136,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
     useEffect(() => {
         if (!present) return
         const onPointer = (event: PointerEvent) => {
-            if (!ref.current?.contains(event.target as Node))
+            if (!ref.current || !belongsToFloatingSurface(ref.current, event.target as Element))
                 closeContextMenu(false)
         }
         const close = () => closeContextMenu(false)
@@ -163,16 +146,8 @@ function Menu({ menu }: { menu: OpenMenu }) {
         }
         const onScrollKey = (event: KeyboardEvent) => {
             if (
-                !ref.current?.contains(
-                    event.target as Node
-                ) &&
-                [
-                    "PageDown",
-                    "PageUp",
-                    "Home",
-                    "End",
-                    " ",
-                ].includes(event.key)
+                !ref.current?.contains(event.target as Node) &&
+                ["PageDown", "PageUp", "Home", "End", " "].includes(event.key)
             )
                 markScroll()
         }
@@ -185,11 +160,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
         }
         // Opened by a long-press: ignore the finger lifting off.
         const timer = setTimeout(() => {
-            window.addEventListener(
-                "pointerdown",
-                onPointer,
-                true
-            )
+            window.addEventListener("pointerdown", onPointer, true)
         }, 0)
         window.addEventListener("blur", close)
         window.addEventListener("wheel", markScroll, {
@@ -204,47 +175,19 @@ function Menu({ menu }: { menu: OpenMenu }) {
         window.addEventListener("scroll", onScroll, true)
         return () => {
             clearTimeout(timer)
-            window.removeEventListener(
-                "pointerdown",
-                onPointer,
-                true
-            )
+            window.removeEventListener("pointerdown", onPointer, true)
             window.removeEventListener("blur", close)
-            window.removeEventListener(
-                "wheel",
-                markScroll,
-                true
-            )
-            window.removeEventListener(
-                "touchmove",
-                markScroll,
-                true
-            )
-            window.removeEventListener(
-                "keydown",
-                onScrollKey,
-                true
-            )
-            window.removeEventListener(
-                "scroll",
-                onScroll,
-                true
-            )
+            window.removeEventListener("wheel", markScroll, true)
+            window.removeEventListener("touchmove", markScroll, true)
+            window.removeEventListener("keydown", onScrollKey, true)
+            window.removeEventListener("scroll", onScroll, true)
         }
     }, [present])
 
-    const source = menuReveal(
-        position.ready ? menu.source : undefined,
+    const source = menuSurfaceReveal(
+        position.ready ? (menu.toolbarRect ?? menu.source) : undefined,
         position
     )
-    const toolbarReveal =
-        menu.source && menu.toolbarRect
-            ? toolbarMenuReveal(
-                  menu.source,
-                  menu.toolbarRect,
-                  position
-              )
-            : undefined
     let actionIndex = -1
     return (
         <motion.div
@@ -264,41 +207,48 @@ function Menu({ menu }: { menu: OpenMenu }) {
                     closeContextMenu()
                     return
                 }
-                const keys = [
-                    "ArrowDown",
-                    "ArrowUp",
-                    "Home",
-                    "End",
-                ]
-                if (!keys.includes(event.key)) return
-                event.preventDefault()
                 const controls = Array.from(
                     ref.current?.querySelectorAll<HTMLButtonElement>(
                         "[role=menuitem]:not(:disabled)"
                     ) ?? []
                 )
+                if (!isMenuNavigationKey(event.key)) {
+                    if (
+                        event.key.length !== 1 ||
+                        !event.key.trim() ||
+                        event.altKey ||
+                        event.ctrlKey ||
+                        event.metaKey ||
+                        event.nativeEvent.isComposing
+                    )
+                        return
+                    const now = performance.now()
+                    const query =
+                        (now - typeahead.current.at < 700 ? typeahead.current.query : "") +
+                        event.key
+                    typeahead.current = { query, at: now }
+                    const labels = controls.map((control) => control.textContent ?? "")
+                    const current = controls.indexOf(document.activeElement as HTMLButtonElement)
+                    let next = findMenuTypeaheadIndex(labels, query, current)
+                    if (next < 0) {
+                        typeahead.current.query = event.key
+                        next = findMenuTypeaheadIndex(labels, event.key, current)
+                    }
+                    if (next >= 0) {
+                        event.preventDefault()
+                        controls[next]?.focus()
+                    }
+                    return
+                }
+                event.preventDefault()
                 if (!controls.length) return
-                const current = controls.indexOf(
-                    document.activeElement as HTMLButtonElement
-                )
-                const next =
-                    event.key === "Home"
-                        ? 0
-                        : event.key === "End"
-                          ? controls.length - 1
-                          : event.key === "ArrowDown"
-                            ? (current + 1) % controls.length
-                            : current < 0
-                              ? controls.length - 1
-                              : (current -
-                                    1 +
-                                    controls.length) %
-                                controls.length
+                const current = controls.indexOf(document.activeElement as HTMLButtonElement)
+                const next = nextMenuIndex(event.key, current, controls.length)
                 controls[next]?.focus()
             }}
             {...{ [FLOATING_LAYER]: "" }}
             className={cn(
-                "glass-menu fixed z-75 flex min-w-50 max-w-[min(280px,calc(100vw-24px))] flex-col overflow-y-auto overscroll-contain rounded-3xl p-1.5",
+                "fixed z-75 isolate flex min-w-50 max-w-[min(280px,calc(100vw-24px))] flex-col rounded-3xl p-1.5",
                 menu.touch && "min-w-60",
                 !present && "pointer-events-none"
             )}
@@ -307,65 +257,58 @@ function Menu({ menu }: { menu: OpenMenu }) {
                 top: position.top,
                 maxHeight: position.maxHeight,
                 minWidth: menu.toolbarRect
-                    ? Math.min(
-                          Math.max(
-                              200,
-                              menu.toolbarRect.width
-                          ),
-                          window.innerWidth - 24
-                      )
+                    ? Math.min(Math.max(200, menu.toolbarRect.width), window.innerWidth - 24)
                     : undefined,
-                transformOrigin: menu.source
-                    ? "50% 50%"
-                    : `${position.originX * 100}% ${position.originY * 100}%`,
-                visibility: position.ready
-                    ? undefined
-                    : "hidden",
+                visibility: position.ready ? undefined : "hidden",
             }}
-            initial={reducedMotion ? false : source}
-            animate={
-                toolbarReveal && !reducedMotion
-                    ? toolbarReveal.enter
-                    : {
-                          opacity: 1,
-                          x: 0,
-                          y: 0,
-                          scaleX: 1,
-                          scaleY: 1,
-                      }
-            }
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : (toolbarReveal?.exit ?? source)
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : toolbarReveal
-                      ? {
-                            duration: 0.34,
-                            times: present
-                                ? [0, 0.35, 1]
-                                : [0, 0.65, 1],
-                            ease: [0.22, 1, 0.36, 1],
-                        }
-                      : spring.smooth
-            }
             onContextMenu={(event) => event.preventDefault()}
         >
             <motion.div
-                className="flex flex-col"
-                initial={{ opacity: reducedMotion ? 1 : 0 }}
-                animate={{ opacity: 1 }}
+                aria-hidden="true"
+                className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-3xl"
+                style={{ width: "100%", height: "100%" }}
+                initial={reducedMotion || !position.ready ? false : source}
+                animate={
+                    position.ready
+                        ? {
+                              x: 0,
+                              y: 0,
+                              width: position.width,
+                              height: position.height,
+                              opacity: 1,
+                              borderRadius: "var(--radius-3xl)",
+                          }
+                        : undefined
+                }
+                exit={reducedMotion ? { opacity: 0 } : source}
+                transition={reducedMotion ? { duration: 0 } : spring.smooth}
+            />
+            <motion.div
+                ref={content}
+                className="flex flex-col overflow-y-auto overscroll-contain"
+                style={{
+                    maxHeight: position.maxHeight
+                        ? Math.max(0, position.maxHeight - 12)
+                        : undefined,
+                }}
+                initial={
+                    reducedMotion
+                        ? false
+                        : {
+                              opacity: 0,
+                              y: menu.source && menu.source.top > position.top ? 4 : -4,
+                          }
+                }
+                animate={{ opacity: 1, y: 0 }}
+                exit={{
+                    opacity: 0,
+                    transition: {
+                        duration: reducedMotion ? 0 : 0.06,
+                    },
+                }}
                 transition={{
-                    duration: reducedMotion ? 0 : 0.12,
-                    delay:
-                        reducedMotion || !menu.source
-                            ? 0
-                            : menu.toolbar
-                              ? 0.14
-                              : 0.08,
+                    duration: reducedMotion ? 0 : 0.16,
+                    delay: reducedMotion || !menu.source ? 0 : 0.06,
                 }}
             >
                 {menu.items.map((item, index) => {
@@ -380,7 +323,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                     if ("heading" in item) {
                         return (
                             <span
-                                key={`heading-${item.heading}`}
+                                key={`heading-${index}`}
                                 className="px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary"
                             >
                                 {item.heading}
@@ -391,35 +334,24 @@ function Menu({ menu }: { menu: OpenMenu }) {
                     const current = actionIndex
                     return (
                         <button
-                            key={item.label}
+                            key={`item-${index}`}
                             type="button"
                             role="menuitem"
                             tabIndex={-1}
                             disabled={item.disabled}
-                            onFocus={() =>
-                                setFocused(current)
-                            }
-                            onPointerEnter={() =>
-                                !item.disabled &&
-                                setFocused(current)
-                            }
+                            onFocus={() => setFocused(current)}
+                            onPointerEnter={() => !item.disabled && setFocused(current)}
                             onClick={() => {
                                 closeContextMenu()
                                 item.onSelect()
                             }}
                             className={cn(
                                 "flex items-center gap-2.5 rounded-lg px-2.5 text-start text-subheadline transition-colors disabled:opacity-40",
-                                menu.touch
-                                    ? "py-2.5"
-                                    : "py-1.5",
-                                item.destructive
-                                    ? "text-danger"
-                                    : "text-label",
+                                menu.touch ? "py-2.5" : "py-1.5",
+                                item.destructive ? "text-danger" : "text-label",
                                 focused === current &&
                                     !item.disabled &&
-                                    (item.destructive
-                                        ? "bg-danger/10"
-                                        : "bg-fill")
+                                    (item.destructive ? "bg-danger/10" : "bg-fill")
                             )}
                         >
                             <span className="flex w-4 shrink-0 justify-center text-label-secondary">
@@ -433,9 +365,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                                     item.icon
                                 )}
                             </span>
-                            <span className="grow truncate">
-                                {item.label}
-                            </span>
+                            <span className="grow truncate">{item.label}</span>
                         </button>
                     )
                 })}

package/src/components/context-menu/context-menu-store.ts

@@ -52,9 +52,7 @@ export function openContextMenu(
     y: number,
     items: ContextMenuItem[],
     touch = false,
-    anchor: Element | null = typeof document === "undefined"
-        ? null
-        : document.activeElement
+    anchor: Element | null = typeof document === "undefined" ? null : document.activeElement
 ) {
     menu = {
         id: nextId++,
@@ -111,14 +109,8 @@ export function openMenu(
     menu = {
         id: nextId++,
         anchor,
-        x: right
-            ? (toolbarRect ?? rect).right
-            : (toolbarRect ?? rect).left,
-        y: toolbar
-            ? rect.top
-            : above
-              ? rect.top - gap
-              : rect.bottom + gap,
+        x: right ? (toolbarRect ?? rect).right : (toolbarRect ?? rect).left,
+        y: toolbar ? rect.top : above ? rect.top - gap : rect.bottom + gap,
         items,
         touch: false,
         alignX: right ? "end" : "start",

package/src/components/context-menu/menu-navigation.ts

@@ -0,0 +1,29 @@
+export type MenuNavigationKey = "ArrowDown" | "ArrowUp" | "Home" | "End"
+
+export function isMenuNavigationKey(key: string): key is MenuNavigationKey {
+    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End"
+}
+
+/** Index of the next enabled action in a menu, with wrapping arrow navigation. */
+export function nextMenuIndex(key: MenuNavigationKey, current: number, count: number): number {
+    if (count <= 0) return -1
+    if (key === "Home") return 0
+    if (key === "End") return count - 1
+    if (key === "ArrowDown") return (current + 1) % count
+    return current < 0 ? count - 1 : (current - 1 + count) % count
+}
+
+/** Finds a matching label after the current action, wrapping at the end. */
+export function findMenuTypeaheadIndex(
+    labels: ReadonlyArray<string>,
+    query: string,
+    current: number
+): number {
+    if (!labels.length || !query.trim()) return -1
+    const needle = query.toLocaleLowerCase()
+    for (let offset = 1; offset <= labels.length; offset++) {
+        const index = (current + offset + labels.length) % labels.length
+        if (labels[index]?.trim().toLocaleLowerCase().startsWith(needle)) return index
+    }
+    return -1
+}

package/src/components/context-menu/menu-position.ts

@@ -1,10 +1,7 @@
 import type { OpenMenu } from "./context-menu-store"
 import type { MenuRect } from "./menu-reveal"
 
-type MenuAnchor = Pick<
-    OpenMenu,
-    "x" | "y" | "alignX" | "alignY"
->
+type MenuAnchor = Pick<OpenMenu, "x" | "y" | "alignX" | "alignY">
 type MenuSize = Pick<MenuRect, "width" | "height">
 type MenuBounds = {
     left: number
@@ -14,38 +11,20 @@ type MenuBounds = {
 }
 
 /** Fit within the current visible viewport, including a keyboard or Safari pan. */
-export function menuPosition(
-    menu: MenuAnchor,
-    size: MenuSize,
-    bounds: MenuBounds
-) {
+export function menuPosition(menu: MenuAnchor, size: MenuSize, bounds: MenuBounds) {
     const { width, height } = size
     const { left, top, right, bottom } = bounds
     const fitsAfterX = menu.x + width <= right
     const fitsBeforeX = menu.x - width >= left
-    const endX =
-        menu.alignX === "end"
-            ? fitsBeforeX || !fitsAfterX
-            : !fitsAfterX
+    const endX = menu.alignX === "end" ? fitsBeforeX || !fitsAfterX : !fitsAfterX
     const fitsBelow = menu.y + height <= bottom
     const fitsAbove = menu.y - height >= top
-    const endY =
-        menu.alignY === "bottom"
-            ? fitsAbove || !fitsBelow
-            : !fitsBelow
+    const endY = menu.alignY === "bottom" ? fitsAbove || !fitsBelow : !fitsBelow
     const clamp = (value: number, min: number, max: number) =>
         Math.min(Math.max(value, min), Math.max(min, max))
     return {
-        left: clamp(
-            endX ? menu.x - width : menu.x,
-            left,
-            right - width
-        ),
-        top: clamp(
-            endY ? menu.y - height : menu.y,
-            top,
-            bottom - height
-        ),
+        left: clamp(endX ? menu.x - width : menu.x, left, right - width),
+        top: clamp(endY ? menu.y - height : menu.y, top, bottom - height),
         originX: endX ? 1 : 0,
         originY: endY ? 1 : 0,
         maxHeight: Math.max(0, bottom - top),

package/src/components/context-menu/menu-reveal.ts

@@ -5,71 +5,30 @@ export type MenuRect = {
     height: number
 }
 
-/** The closed surface occupies its trigger, even when the final menu flips at an edge. */
-export function menuReveal(
-    source: MenuRect | undefined,
-    target: MenuRect
-) {
+/** Animate the material's bounds independently so menu text never stretches. */
+export function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect) {
     if (
         !source ||
         source.width <= 0 ||
         source.height <= 0 ||
         target.width <= 0 ||
         target.height <= 0
-    )
+    ) {
         return {
             x: 0,
-            y: 0,
-            scaleX: 0.96,
-            scaleY: 0.96,
+            y: -4,
+            width: target.width,
+            height: target.height,
             opacity: 0,
+            borderRadius: "var(--radius-3xl)",
         }
-    return {
-        x:
-            source.left +
-            source.width / 2 -
-            target.left -
-            target.width / 2,
-        y:
-            source.top +
-            source.height / 2 -
-            target.top -
-            target.height / 2,
-        scaleX: source.width / target.width,
-        scaleY: source.height / target.height,
-        opacity: 1,
     }
-}
-
-/** Stretch across the action group before opening vertically; reverse on dismissal. */
-export function toolbarMenuReveal(
-    source: MenuRect,
-    toolbar: MenuRect,
-    target: MenuRect
-) {
-    const start = menuReveal(source, target)
-    const stretched = menuReveal(
-        {
-            ...toolbar,
-            top: source.top,
-            height: source.height,
-        },
-        target
-    )
     return {
-        enter: {
-            x: [start.x, stretched.x, 0],
-            y: [start.y, stretched.y, 0],
-            scaleX: [start.scaleX, stretched.scaleX, 1],
-            scaleY: [start.scaleY, stretched.scaleY, 1],
-            opacity: 1,
-        },
-        exit: {
-            x: [0, stretched.x, start.x],
-            y: [0, stretched.y, start.y],
-            scaleX: [1, stretched.scaleX, start.scaleX],
-            scaleY: [1, stretched.scaleY, start.scaleY],
-            opacity: 1,
-        },
+        x: source.left - target.left,
+        y: source.top - target.top,
+        width: source.width,
+        height: source.height,
+        opacity: 1,
+        borderRadius: Math.min(source.width, source.height) / 2,
     }
 }