@passui/react 0.1.21 → 0.1.23

package/dist/types/src/components/context-menu/menu-reveal.d.ts

@@ -4,6 +4,15 @@ export type MenuRect = {
     width: number;
     height: number;
 };
+/** Return toward the source while handing its material back to the real trigger. */
+export declare function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>): {
+    opacity: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+};
 /** Animate the material's bounds independently so menu text never stretches. */
 export declare function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect & {
     radius?: number;

package/dist/types/src/icons/icons.d.ts

@@ -152,6 +152,10 @@ export declare const LanguageIcon: {
     ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
+export declare const LoadingIcon: {
+    ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
 export declare const SignOutIcon: {
     ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.21",
+    "version": "0.1.23",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

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

@@ -9,7 +9,7 @@ import { spring } from "../../motion/transitions"
 import { concealMenuSource } from "./conceal-menu-source"
 import { findMenuTypeaheadIndex, isMenuNavigationKey, nextMenuIndex } from "./menu-navigation"
 import { menuPosition } from "./menu-position"
-import { menuSurfaceReveal } from "./menu-reveal"
+import { menuSurfaceExit, menuSurfaceReveal } from "./menu-reveal"
 import {
     closeContextMenu,
     getContextMenu,
@@ -44,6 +44,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
 
     useLayoutEffect(() => {
         if (
+            !present ||
             (!menu.source && !menu.toolbar) ||
             !position.ready ||
             !(menu.anchor instanceof HTMLElement)
@@ -64,7 +65,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
             )
                 menu.anchor.focus({ preventScroll: true })
         }
-    }, [menu, position.ready])
+    }, [menu, position.ready, present])
 
     useLayoutEffect(() => {
         const surface = ref.current
@@ -283,8 +284,12 @@ function Menu({ menu }: { menu: OpenMenu }) {
                               }
                             : undefined
                     }
-                    exit={reducedMotion ? { opacity: 0 } : source}
-                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                    exit={reducedMotion ? { opacity: 0 } : menuSurfaceExit(source)}
+                    transition={
+                        reducedMotion
+                            ? { duration: 0 }
+                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                    }
                 />
             )}
             <motion.div

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

@@ -5,6 +5,11 @@ export type MenuRect = {
     height: number
 }
 
+/** Return toward the source while handing its material back to the real trigger. */
+export function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>) {
+    return { ...source, opacity: 0 }
+}
+
 /** Animate the material's bounds independently so menu text never stretches. */
 export function menuSurfaceReveal(
     source: MenuRect | undefined,

package/src/components/locale-switcher/locale-switcher.tsx

@@ -1,7 +1,10 @@
 import { getNativeLanguageName } from "../../lib/language"
 import { cn } from "../../lib/class-names"
-import { AnimatePresence, motion, useDragControls, useMotionValue } from "motion/react"
+import { motion, useDragControls, useMotionValue } from "motion/react"
 import { useEffect, useRef, useState } from "react"
+import { useDismiss } from "../../hooks/use-dismiss"
+import { CheckIcon, GlobeIcon } from "../../icons/icons"
+import { Popover } from "../popover/popover"
 
 type Side = "left" | "right"
 type Edge = "top" | "bottom"
@@ -66,6 +69,7 @@ export function LocaleSwitcher<L extends string>({
     label,
 }: LocaleSwitcherProps<L>) {
     const containerRef = useRef<HTMLDivElement>(null)
+    const triggerRef = useRef<HTMLButtonElement>(null)
     const dragControls = useDragControls()
     const x = useMotionValue(0)
     const y = useMotionValue(0)
@@ -82,15 +86,12 @@ export function LocaleSwitcher<L extends string>({
         if (stored) setAnchor(stored)
     }, [storageKey])
 
+    useDismiss(containerRef, open, () => setOpen(false))
     useEffect(() => {
-        if (!open) return
-        function handlePointerDown(e: PointerEvent) {
-            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-                setOpen(false)
-            }
-        }
-        document.addEventListener("pointerdown", handlePointerDown)
-        return () => document.removeEventListener("pointerdown", handlePointerDown)
+        if (open)
+            containerRef.current
+                ?.querySelector<HTMLButtonElement>('[role="menuitemradio"][aria-checked="true"]')
+                ?.focus()
     }, [open])
 
     function commitDraggedPosition() {
@@ -129,74 +130,114 @@ export function LocaleSwitcher<L extends string>({
                 ...(anchor.edge === "top" ? { top: anchor.y } : { bottom: anchor.y }),
             }}
             onDragEnd={commitDraggedPosition}
-            onMouseLeave={() => open && setOpen(false)}
+            onDragStart={() => setOpen(false)}
+            onKeyDown={(event) => {
+                if (!open) return
+                if (event.key === "Escape") {
+                    event.preventDefault()
+                    setOpen(false)
+                    triggerRef.current?.focus()
+                    return
+                }
+                if (event.key === "Tab") {
+                    setOpen(false)
+                    return
+                }
+                if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return
+                const options = Array.from(
+                    containerRef.current?.querySelectorAll<HTMLButtonElement>(
+                        '[role="menuitemradio"]'
+                    ) ?? []
+                )
+                if (!options.length) return
+                event.preventDefault()
+                const current = options.indexOf(document.activeElement as HTMLButtonElement)
+                const next =
+                    event.key === "Home"
+                        ? 0
+                        : event.key === "End"
+                          ? options.length - 1
+                          : (current + (event.key === "ArrowDown" ? 1 : -1) + options.length) %
+                            options.length
+                options[next]?.focus()
+            }}
             className="z-60"
         >
-            <motion.div
-                layout
-                transition={{
-                    type: "spring",
-                    damping: 28,
-                    stiffness: 380,
+            <button
+                ref={triggerRef}
+                type="button"
+                aria-label={label}
+                aria-haspopup="menu"
+                aria-expanded={open}
+                onPointerDown={(e) => dragControls.start(e)}
+                onClick={() => setOpen((prev) => !prev)}
+                onKeyDown={(event) => {
+                    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+                        event.preventDefault()
+                        setOpen(true)
+                    }
                 }}
+                className="glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing"
+            >
+                <GlobeIcon aria-hidden="true" className="size-5" />
+                {locale.toUpperCase()}
+            </button>
+            <Popover
+                open={open}
+                anchorRef={triggerRef}
+                origin={anchor.side === "right" ? "top-right" : "top-left"}
+                role="menu"
+                aria-label={label}
                 className={cn(
-                    "overflow-hidden rounded-2xl border border-separator/35 bg-elevated/80 shadow-lg",
-                    "backdrop-blur-xl backdrop-saturate-150",
-                    "flex",
-                    growsUp ? "flex-col-reverse" : "flex-col",
-                    open ? "w-40 gap-px p-1" : "size-10"
+                    "top-0 flex w-52 max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    anchor.side === "right" ? "right-0" : "left-0",
+                    growsUp ? "flex-col-reverse" : "flex-col"
                 )}
             >
                 <button
                     type="button"
                     aria-label={label}
-                    aria-expanded={open}
-                    onPointerDown={(e) => dragControls.start(e)}
-                    onClick={() => setOpen((prev) => !prev)}
-                    className={cn(
-                        "flex shrink-0 cursor-grab items-center justify-center",
-                        "active:cursor-grabbing text-xs font-semibold",
-                        open ? "h-9 w-full rounded-lg hover:bg-accent" : "size-10 rounded-2xl"
-                    )}
+                    onClick={() => {
+                        setOpen(false)
+                        triggerRef.current?.focus()
+                    }}
+                    className="flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label"
                 >
+                    <GlobeIcon aria-hidden="true" className="size-5" />
                     {locale.toUpperCase()}
                 </button>
-
-                <AnimatePresence>
-                    {open && (
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ delay: 0.05 }}
-                            className="flex flex-col gap-px"
-                        >
-                            {langs.map((item) => {
-                                const active = item.value === locale
-                                return (
-                                    <button
-                                        key={item.value}
-                                        type="button"
-                                        onClick={() => {
-                                            setOpen(false)
-                                            if (!active) {
-                                                onSelect(item.value)
-                                            }
-                                        }}
-                                        className={cn(
-                                            "rounded-sm px-2 py-1.5 text-left text-sm",
-                                            "hover:bg-accent transition-colors",
-                                            active && "text-primary font-medium"
-                                        )}
-                                    >
-                                        {item.label}
-                                    </button>
-                                )
-                            })}
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-            </motion.div>
+                <div className="flex flex-col gap-1">
+                    {langs.map((item) => {
+                        const active = item.value === locale
+                        return (
+                            <button
+                                key={item.value}
+                                type="button"
+                                role="menuitemradio"
+                                aria-checked={active}
+                                tabIndex={-1}
+                                onClick={() => {
+                                    setOpen(false)
+                                    triggerRef.current?.focus()
+                                    if (!active) {
+                                        onSelect(item.value)
+                                    }
+                                }}
+                                className={cn(
+                                    "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+                                    "hover:bg-fill/65 focus-visible:bg-fill/65 transition-colors",
+                                    active && "bg-accent/12 font-medium"
+                                )}
+                            >
+                                {item.label}
+                                {active && (
+                                    <CheckIcon aria-hidden="true" className="size-4 shrink-0" />
+                                )}
+                            </button>
+                        )
+                    })}
+                </div>
+            </Popover>
         </motion.div>
     )
 }

package/src/components/popover/anchored-surface.tsx

@@ -40,9 +40,12 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
         const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
         const material = useRef<HTMLDivElement>(null)
         const content = useRef<HTMLDivElement>(null)
-        const animated = useRef<{ values: number[]; velocities: number[]; opacity: number } | null>(
-            null
-        )
+        const animated = useRef<{
+            values: number[]
+            velocities: number[]
+            opacity: number
+            materialOpacity: number
+        } | null>(null)
         const placement = useAnchoredPlacement(anchor, width, needed, true)
         const [geometry, setGeometry] = useState<{
             source: ReturnType<typeof menuSurfaceReveal>
@@ -82,12 +85,16 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
         useLayoutEffect(() => {
             if (!root.current) return
             const unregister = registerFloatingLayer(root.current, anchor)
+            return unregister
+        }, [anchor])
+
+        useLayoutEffect(() => {
+            if (!present) return
             const restore = concealMenuSource(anchor, false)
             return () => {
-                unregister()
                 restore()
             }
-        }, [anchor])
+        }, [anchor, present])
 
         useLayoutEffect(() => {
             if (!geometry || !material.current || !content.current) {
@@ -110,6 +117,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 values: [...source],
                 velocities: source.map(() => 0),
                 opacity: 0,
+                materialOpacity: 1,
             }
             animated.current = state
             let frame = 0,
@@ -120,6 +128,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 pane.style.width = `${Math.max(0, width)}px`
                 pane.style.height = `${Math.max(0, height)}px`
                 pane.style.borderRadius = `${Math.max(0, radius)}px`
+                pane.style.opacity = String(state.materialOpacity)
                 body.style.opacity = String(state.opacity)
             }
             const tick = (now: number) => {
@@ -151,11 +160,18 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 )
                 const opacity = present ? Math.max(0, (progress - 0.25) / 0.75) : 0
                 state.opacity += (opacity - state.opacity) * (1 - Math.exp(-dt / 0.04))
+                state.materialOpacity +=
+                    ((present ? 1 : 0) - state.materialOpacity) * (1 - Math.exp(-dt / 0.04))
                 paint()
-                if (resting && Math.abs(opacity - state.opacity) < 0.01) {
+                if (
+                    resting &&
+                    Math.abs(opacity - state.opacity) < 0.01 &&
+                    Math.abs((present ? 1 : 0) - state.materialOpacity) < 0.01
+                ) {
                     state.values = [...target]
                     state.velocities.fill(0)
                     state.opacity = present ? 1 : 0
+                    state.materialOpacity = present ? 1 : 0
                     paint()
                     if (!present) remove?.()
                     return
@@ -166,6 +182,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 state.values = [...target]
                 state.velocities.fill(0)
                 state.opacity = present ? 1 : 0
+                state.materialOpacity = present ? 1 : 0
                 paint()
                 if (!present) remove?.()
             } else {

package/src/components/popover/popover.tsx

@@ -7,7 +7,7 @@ import {
 } from "motion/react"
 import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from "react"
 import { concealMenuSource } from "../context-menu/conceal-menu-source"
-import { menuSurfaceReveal } from "../context-menu/menu-reveal"
+import { menuSurfaceExit, menuSurfaceReveal } from "../context-menu/menu-reveal"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
 import { floatingPanelMotion, spring } from "../../motion/transitions"
@@ -183,11 +183,16 @@ function OpenPopover({
                 }
             )
         )
+    }, [anchorRef, fit])
+
+    useLayoutEffect(() => {
+        const source = anchorRef?.current
+        if (!source || !present) return
         const restoreSource = concealMenuSource(source, false)
         return () => {
             restoreSource()
         }
-    }, [anchorRef, fit])
+    }, [anchorRef, present])
 
     return (
         <motion.div
@@ -274,8 +279,12 @@ function OpenPopover({
                               }
                             : undefined
                     }
-                    exit={reducedMotion ? { opacity: 0 } : (reveal ?? { opacity: 0 })}
-                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                    exit={reducedMotion || !reveal ? { opacity: 0 } : menuSurfaceExit(reveal)}
+                    transition={
+                        reducedMotion
+                            ? { duration: 0 }
+                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                    }
                 />
             )}
             {children}

package/src/icons/icons.tsx

@@ -1,5 +1,6 @@
 import {
     LanguagesIcon,
+    Loading03Icon,
     Logout01Icon,
     MoreVertical,
     SentIcon,
@@ -227,6 +228,7 @@ export const catalogIcons = {
 
 export const NoteIcon = /* @__PURE__ */ icon(Note01Icon, "NoteIcon")
 export const LanguageIcon = /* @__PURE__ */ icon(LanguagesIcon, "LanguageIcon")
+export const LoadingIcon = /* @__PURE__ */ icon(Loading03Icon, "LoadingIcon")
 export const SignOutIcon = /* @__PURE__ */ icon(Logout01Icon, "SignOutIcon")
 export const MoreVerticalIcon = /* @__PURE__ */ icon(MoreVertical, "MoreVerticalIcon")
 export const SendIcon = /* @__PURE__ */ icon(SentIcon, "SendIcon")

package/src/styles/motion-controls.css

@@ -9,7 +9,7 @@
        No painted background patch needs to match the field's surroundings. */
     .passui-field-outline {
         position: absolute;
-        inset: -0.45em 0 0;
+        inset: calc(var(--text-footnote) / -2) 0 0;
         min-width: 0;
         margin: 0;
         padding: 0 0.5rem;
@@ -23,6 +23,8 @@
         overflow: hidden;
         padding: 0;
         font-size: var(--text-footnote);
+        line-height: 1;
+        height: 1em;
         white-space: nowrap;
         visibility: hidden;
         transition: max-width 320ms ease, padding 320ms ease;
@@ -38,6 +40,7 @@
         white-space: nowrap;
         color: var(--color-label-secondary);
         font-size: var(--text-body);
+        line-height: 1;
         transform: translateY(-50%);
         transform-origin: left center;
         transition: top 320ms ease, transform 320ms ease, color 200ms ease;