@passui/react 0.0.0-stage → 0.1.15

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

@@ -0,0 +1,445 @@
+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 { screenEdges } from "../../lib/screen-edges"
+import { spring } from "../../motion/transitions"
+import { concealMenuSource } from "./conceal-menu-source"
+import { menuPosition } from "./menu-position"
+import { menuReveal, toolbarMenuReveal } from "./menu-reveal"
+import {
+    closeContextMenu,
+    getContextMenu,
+    type OpenMenu,
+    subscribeContextMenu,
+} from "./context-menu-store"
+
+/** 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>
+    )
+}
+
+function Menu({ menu }: { menu: OpenMenu }) {
+    const present = useIsPresent()
+    const reducedMotion = useReducedMotion()
+    const ref = useRef<HTMLDivElement>(null)
+    const [position, setPosition] = useState({
+        left: menu.x,
+        top: menu.y,
+        originX: 0,
+        originY: 0,
+        maxHeight: undefined as number | undefined,
+        width: 0,
+        height: 0,
+        ready: false,
+    })
+    const [focused, setFocused] = useState(-1)
+
+    useLayoutEffect(() => {
+        if (
+            (!menu.source && !menu.toolbar) ||
+            !position.ready ||
+            !(menu.anchor instanceof HTMLElement)
+        )
+            return
+        const anchor = menu.toolbar ?? menu.anchor
+        const surface = ref.current
+        const restore = concealMenuSource(
+            anchor,
+            Boolean(menu.toolbar)
+        )
+        return () => {
+            const restored = restore()
+            if (
+                restored &&
+                menu.toolbar &&
+                menu.restoreFocus &&
+                menu.anchor instanceof HTMLElement &&
+                (document.activeElement === document.body ||
+                    surface?.contains(document.activeElement))
+            )
+                menu.anchor.focus({ preventScroll: true })
+        }
+    }, [menu, position.ready])
+
+    useLayoutEffect(() => {
+        const surface = ref.current
+        if (!surface || !present || !position.ready) return
+        const unregister = menu.anchor
+            ? registerFloatingLayer(surface, menu.anchor)
+            : undefined
+        surface.focus()
+        return unregister
+    }, [menu.anchor, present, position.ready])
+
+    // Keep the whole menu on screen, opening up or left when near an edge. The
+    // layout size, not the on-screen one: the menu is still mid-scale here.
+    useLayoutEffect(() => {
+        if (!ref.current || !present) return
+        const viewport = window.visualViewport
+        let frame = 0
+        const refit = () => {
+            const element = ref.current
+            if (!element) return
+            const edges = screenEdges()
+            const left = viewport?.offsetLeft ?? 0
+            const top = viewport?.offsetTop ?? 0
+            setPosition({
+                ...menuPosition(
+                    menu,
+                    {
+                        width: element.offsetWidth,
+                        height: Math.max(
+                            element.offsetHeight,
+                            element.scrollHeight
+                        ),
+                    },
+                    {
+                        left: left + edges.left,
+                        top: top + edges.top,
+                        right:
+                            left +
+                            (viewport?.width ??
+                                window.innerWidth) -
+                            edges.right,
+                        bottom:
+                            top +
+                            (viewport?.height ??
+                                window.innerHeight) -
+                            edges.bottom,
+                    }
+                ),
+                ready: true,
+            })
+        }
+        const schedule = () => {
+            cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(refit)
+        }
+        refit()
+        viewport?.addEventListener("resize", schedule)
+        viewport?.addEventListener("scroll", schedule)
+        window.addEventListener("resize", schedule)
+        return () => {
+            cancelAnimationFrame(frame)
+            viewport?.removeEventListener("resize", schedule)
+            viewport?.removeEventListener("scroll", schedule)
+            window.removeEventListener("resize", schedule)
+        }
+    }, [menu, present])
+
+    useEffect(() => {
+        if (!present) return
+        const onPointer = (event: PointerEvent) => {
+            if (!ref.current?.contains(event.target as Node))
+                closeContextMenu(false)
+        }
+        const close = () => closeContextMenu(false)
+        let scrollIntentUntil = 0
+        const markScroll = () => {
+            scrollIntentUntil = performance.now() + 2000
+        }
+        const onScrollKey = (event: KeyboardEvent) => {
+            if (
+                !ref.current?.contains(
+                    event.target as Node
+                ) &&
+                [
+                    "PageDown",
+                    "PageUp",
+                    "Home",
+                    "End",
+                    " ",
+                ].includes(event.key)
+            )
+                markScroll()
+        }
+        const onScroll = (event: Event) => {
+            if (
+                performance.now() < scrollIntentUntil &&
+                !ref.current?.contains(event.target as Node)
+            )
+                close()
+        }
+        // Opened by a long-press: ignore the finger lifting off.
+        const timer = setTimeout(() => {
+            window.addEventListener(
+                "pointerdown",
+                onPointer,
+                true
+            )
+        }, 0)
+        window.addEventListener("blur", close)
+        window.addEventListener("wheel", markScroll, {
+            capture: true,
+            passive: true,
+        })
+        window.addEventListener("touchmove", markScroll, {
+            capture: true,
+            passive: true,
+        })
+        window.addEventListener("keydown", onScrollKey, true)
+        window.addEventListener("scroll", onScroll, true)
+        return () => {
+            clearTimeout(timer)
+            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
+            )
+        }
+    }, [present])
+
+    const source = menuReveal(
+        position.ready ? menu.source : undefined,
+        position
+    )
+    const toolbarReveal =
+        menu.source && menu.toolbarRect
+            ? toolbarMenuReveal(
+                  menu.source,
+                  menu.toolbarRect,
+                  position
+              )
+            : undefined
+    let actionIndex = -1
+    return (
+        <motion.div
+            key={position.ready ? "surface" : "measure"}
+            ref={ref}
+            role="menu"
+            tabIndex={-1}
+            onKeyDown={(event) => {
+                if (!present) return
+                if (event.key === "Escape") {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    closeContextMenu()
+                    return
+                }
+                if (event.key === "Tab") {
+                    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 (!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
+                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",
+                menu.touch && "min-w-60",
+                !present && "pointer-events-none"
+            )}
+            style={{
+                left: position.left,
+                top: position.top,
+                maxHeight: position.maxHeight,
+                minWidth: menu.toolbarRect
+                    ? 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",
+            }}
+            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 }}
+                transition={{
+                    duration: reducedMotion ? 0 : 0.12,
+                    delay:
+                        reducedMotion || !menu.source
+                            ? 0
+                            : menu.toolbar
+                              ? 0.14
+                              : 0.08,
+                }}
+            >
+                {menu.items.map((item, index) => {
+                    if (item === "divider") {
+                        return (
+                            <div
+                                key={`divider-${index}`}
+                                className="mx-2 my-1 h-px bg-separator/80"
+                            />
+                        )
+                    }
+                    if ("heading" in item) {
+                        return (
+                            <span
+                                key={`heading-${item.heading}`}
+                                className="px-2.5 pt-1.5 pb-0.5 text-caption2 font-semibold text-label-tertiary"
+                            >
+                                {item.heading}
+                            </span>
+                        )
+                    }
+                    if (!item.disabled) actionIndex += 1
+                    const current = actionIndex
+                    return (
+                        <button
+                            key={item.label}
+                            type="button"
+                            role="menuitem"
+                            tabIndex={-1}
+                            disabled={item.disabled}
+                            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",
+                                focused === current &&
+                                    !item.disabled &&
+                                    (item.destructive
+                                        ? "bg-danger/10"
+                                        : "bg-fill")
+                            )}
+                        >
+                            <span className="flex w-4 shrink-0 justify-center text-label-secondary">
+                                {item.checked ? (
+                                    <CheckIcon
+                                        size={15}
+                                        strokeWidth={2.4}
+                                        className="text-accent-text"
+                                    />
+                                ) : (
+                                    item.icon
+                                )}
+                            </span>
+                            <span className="grow truncate">
+                                {item.label}
+                            </span>
+                        </button>
+                    )
+                })}
+            </motion.div>
+        </motion.div>
+    )
+}

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

@@ -0,0 +1,165 @@
+import type { ReactNode } from "react"
+import type { MenuRect } from "./menu-reveal"
+
+export type ContextMenuAlignX = "start" | "end"
+export type ContextMenuAlignY = "top" | "bottom"
+export type ContextMenuEdge = "leading" | "trailing"
+
+/** One row of a context menu, or a divider between groups of rows. */
+export type ContextMenuItem =
+    | {
+          label: string
+          icon?: ReactNode
+          onSelect: () => void
+          destructive?: boolean
+          disabled?: boolean
+          /** Marks the current choice, e.g. a note's kind. */
+          checked?: boolean
+      }
+    | { heading: string }
+    | "divider"
+
+export interface OpenMenu {
+    id: number
+    anchor: Element | null
+    x: number
+    y: number
+    items: ContextMenuItem[]
+    /** Opened by long-press: bigger rows for fingers. */
+    touch: boolean
+    /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
+    alignX: ContextMenuAlignX
+    /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
+    alignY: ContextMenuAlignY
+    source?: MenuRect
+    toolbar?: HTMLElement
+    toolbarRect?: MenuRect
+    restoreFocus?: boolean
+}
+
+let menu: OpenMenu | null = null
+/** The menu shown most recently, kept after it closes so a follow-up can stand in its place. */
+let last: OpenMenu | null = null
+let nextId = 1
+const listeners = new Set<() => void>()
+const emit = () => {
+    for (const listener of listeners) listener()
+}
+
+/** Opens a menu at a point, such as where a pointer was pressed. */
+export function openContextMenu(
+    x: number,
+    y: number,
+    items: ContextMenuItem[],
+    touch = false,
+    anchor: Element | null = typeof document === "undefined"
+        ? null
+        : document.activeElement
+) {
+    menu = {
+        id: nextId++,
+        anchor,
+        x,
+        y,
+        items,
+        touch,
+        alignX: "start",
+        alignY: "top",
+    }
+    last = menu
+    emit()
+}
+
+/**
+ * Opens a second menu where the last one stood, the way an iOS menu swaps
+ * in a submenu: a long list (a note's fonts, its kinds) stays one row in the
+ * first menu instead of making it tall.
+ */
+export function openFollowUpMenu(items: ContextMenuItem[]) {
+    if (!last) return
+    menu = { ...last, id: nextId++, items, source: undefined }
+    last = menu
+    emit()
+}
+
+/**
+ * Opens a menu from a control, the way a SwiftUI `Menu` does: under it (or
+ * above it), lined up with its leading or trailing edge. Leading and
+ * trailing follow the text direction, so right-to-left languages mirror.
+ * The menu's real size decides where it goes; nothing is guessed.
+ */
+export function openMenu(
+    anchor: Element,
+    items: ContextMenuItem[],
+    {
+        edge = "leading",
+        above = false,
+        toolbar,
+    }: {
+        edge?: ContextMenuEdge
+        above?: boolean
+        /** Replace this action group with a horizontally expanding menu surface. */
+        toolbar?: HTMLElement
+    } = {}
+) {
+    const rect = anchor.getBoundingClientRect()
+    const toolbarRect = toolbar?.getBoundingClientRect()
+    const rtl = getComputedStyle(anchor).direction === "rtl"
+    // Trailing is the right edge in left-to-right text, the left edge in right-to-left.
+    const right = (edge === "trailing") !== rtl
+    const gap = 6
+    menu = {
+        id: nextId++,
+        anchor,
+        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",
+        alignY: above ? "bottom" : "top",
+        toolbar,
+        toolbarRect,
+        source: {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+        },
+    }
+    last = menu
+    emit()
+}
+
+export function closeContextMenu(restoreFocus = true) {
+    if (!menu) return
+    const anchor = menu.anchor
+    const toolbar = menu.toolbar
+    menu.restoreFocus = restoreFocus
+    menu = null
+    if (
+        restoreFocus &&
+        !toolbar &&
+        typeof HTMLElement !== "undefined" &&
+        anchor instanceof HTMLElement &&
+        anchor.isConnected
+    )
+        anchor.focus()
+    emit()
+}
+
+export function subscribeContextMenu(listener: () => void) {
+    listeners.add(listener)
+    return () => {
+        listeners.delete(listener)
+    }
+}
+
+export function getContextMenu(): OpenMenu | null {
+    return menu
+}

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

@@ -0,0 +1,92 @@
+import { ContextMenuToolbar } from "./examples/context-menu-toolbar"
+import { ContextMenuChecked } from "./examples/context-menu-checked"
+import { toast } from "../toast/toast-store"
+import { defineDocs } from "../../docs/types"
+import type { ContextMenuItem } from "./context-menu-store"
+import { ContextMenuList } from "./examples/context-menu-list"
+import { ContextMenuShowcase } from "./examples/context-menu-showcase"
+import { ContextMenuUsage } from "./examples/context-menu-usage"
+import { useContextMenu } from "./use-context-menu"
+
+// useContextMenu is a hook: the playground spreads its handlers on a
+// card, and the switches change the menu's rows.
+type DemoProps = {
+    heading: boolean
+    destructive: boolean
+}
+
+function items({
+    heading,
+    destructive,
+}: DemoProps): ContextMenuItem[] {
+    return [
+        ...(heading ? [{ heading: "Photo" }] : []),
+        { label: "Copy", onSelect: () => toast("Copied") },
+        { label: "Share", onSelect: () => toast("Shared") },
+        ...(destructive
+            ? [
+                  "divider" as const,
+                  {
+                      label: "Delete",
+                      destructive: true,
+                      onSelect: () => toast("Deleted"),
+                  },
+              ]
+            : []),
+    ]
+}
+
+function ContextMenuDemo(props: DemoProps) {
+    const menu = useContextMenu(() => items(props))
+    return (
+        <div
+            {...menu}
+            className="flex h-36 w-64 select-none items-center justify-center rounded-4xl bg-fill/60 p-6 text-center text-callout text-label-secondary"
+        >
+            Right-click, or press and hold on a touch screen
+        </div>
+    )
+}
+
+export const contextMenuDocs = defineDocs<DemoProps>()({
+    slug: "context-menu",
+    name: "useContextMenu",
+    importPath: "@passui/react",
+    controls: {
+        heading: { kind: "boolean", default: false },
+        destructive: { kind: "boolean", default: true },
+    },
+    render: (values) => <ContextMenuDemo {...values} />,
+    childrenSnippet: ({ heading, destructive }) => ({
+        imports: ['import { toast } from "@passui/react"'],
+        element: "div",
+        omit: ["heading", "destructive"],
+        setup: [
+            "const menu = useContextMenu(() => [",
+            ...(heading ? ['    { heading: "Photo" },'] : []),
+            '    { label: "Copy", onSelect: () => toast("Copied") },',
+            '    { label: "Share", onSelect: () => toast("Shared") },',
+            ...(destructive
+                ? [
+                      '    "divider",',
+                      '    { label: "Delete", destructive: true, onSelect: () => toast("Deleted") },',
+                  ]
+                : []),
+            "])",
+        ],
+        spreadProps: ["menu"],
+        children: "\n    Right-click me\n",
+    }),
+    usage: ContextMenuUsage,
+    showcase: ContextMenuShowcase,
+    examples: [
+        { id: "toolbar", component: ContextMenuToolbar },
+        {
+            id: "list",
+            component: ContextMenuList,
+            playground: { heading: true },
+        },
+        { id: "checked", component: ContextMenuChecked },
+    ],
+    previewHeight: 360,
+})