@passui/react 0.1.19 → 0.1.20

package/src/components/compact-time-picker/compact-time-picker.tsx

@@ -1,14 +1,10 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import { type KeyboardEvent, useEffect, useId, useLayoutEffect, useRef, useState } from "react"
+import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure"
+import { AnchoredSurface } from "../popover/anchored-surface"
+import { type KeyboardEvent, useEffect, useId, useRef } from "react"
 import { createPortal } from "react-dom"
-import { FLOATING_LAYER } from "../../hooks/use-dismiss"
-import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
 import { ClockIcon } from "../../icons/icons"
-import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
 import { cn } from "../../lib/class-names"
-import { registerFloatingLayer } from "../../lib/floating-layers"
 import { haptic } from "../../lib/haptics"
-import { floatingPanelMotion } from "../../motion/transitions"
 import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
     formatTime,
@@ -53,7 +49,8 @@ export function CompactTimePicker({
     className,
     disabled = false,
 }: CompactTimePickerProps) {
-    const [open, setOpen] = useState(false)
+    const panel = useAnchoredDisclosure(disabled)
+    const { open } = panel
     const trigger = useRef<HTMLButtonElement>(null)
     const panelId = useId()
     const chosen = parseTime(value)
@@ -75,7 +72,7 @@ export function CompactTimePicker({
                 aria-expanded={open && !disabled}
                 aria-controls={open && !disabled ? panelId : undefined}
                 disabled={disabled}
-                onClick={() => setOpen((current) => !current)}
+                onClick={() => panel.toggle()}
                 className={pickerTriggerStyle(className)}
             >
                 <span
@@ -90,33 +87,32 @@ export function CompactTimePicker({
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
-                    <AnimatePresence>
-                        {open && !disabled && trigger.current && (
-                            <TimeColumns
-                                id={panelId}
-                                anchor={trigger.current}
-                                label={label}
-                                locale={locale}
-                                time={
-                                    chosen ?? {
-                                        hour: 9,
-                                        minute: 0,
-                                    }
+                    panel.mounted && trigger.current ? (
+                        <TimeColumns
+                            open={open}
+                            onExited={panel.onExited}
+                            id={panelId}
+                            anchor={trigger.current}
+                            label={label}
+                            locale={locale}
+                            time={
+                                chosen ?? {
+                                    hour: 9,
+                                    minute: 0,
                                 }
-                                minuteStep={minuteStep}
-                                labels={labels}
-                                onChange={(next) => {
-                                    haptic("selection")
-                                    onChange(formatTime(next))
-                                }}
-                                onClose={(restoreFocus) => {
-                                    setOpen(false)
-                                    if (restoreFocus)
-                                        trigger.current?.focus({ preventScroll: true })
-                                }}
-                            />
-                        )}
-                    </AnimatePresence>,
+                            }
+                            minuteStep={minuteStep}
+                            labels={labels}
+                            onChange={(next) => {
+                                haptic("selection")
+                                onChange(formatTime(next))
+                            }}
+                            onClose={(restoreFocus) => {
+                                panel.close()
+                                if (restoreFocus) trigger.current?.focus({ preventScroll: true })
+                            }}
+                        />
+                    ) : null,
                     document.body
                 )}
         </>
@@ -129,6 +125,8 @@ interface ColumnItem {
 }
 
 function TimeColumns({
+    open,
+    onExited,
     id,
     anchor,
     label,
@@ -139,6 +137,8 @@ function TimeColumns({
     onChange,
     onClose,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     label: string
@@ -150,9 +150,7 @@ function TimeColumns({
     onClose: (restoreFocus: boolean) => void
 }) {
     const root = useRef<HTMLDivElement>(null)
-    const reducedMotion = useReducedMotion()
     const twelve = usesTwelveHours(locale)
-    const placement = useAnchoredPlacement(anchor, twelve ? 240 : 180, 280)
     const number = new Intl.NumberFormat(locale, {
         minimumIntegerDigits: 2,
     })
@@ -186,54 +184,19 @@ function TimeColumns({
         { key: 1, text: periodName(true) },
     ]
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        return registerFloatingLayer(root.current, anchor)
-    }, [anchor])
-
-    useFloatingDismiss(root, anchor, onClose)
-
     return (
-        <motion.div
+        <AnchoredSurface
+            open={open}
+            onExited={onExited}
             ref={root}
+            anchor={anchor}
+            width={twelve ? 240 : 180}
+            needed={280}
+            onClose={onClose}
             id={id}
             role="dialog"
             aria-label={label}
-            initial={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 1,
-                          y: placement.above ? 6 : -6,
-                      }
-            }
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 1,
-                          y: placement.above ? 4 : -4,
-                      }
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : floatingPanelMotion(placement.above ? "above" : "below").transition
-            }
-            style={{
-                left: placement.left,
-                width: placement.width,
-                top: placement.top,
-                bottom: placement.bottom,
-                maxHeight: placement.maxHeight,
-                overflowY: placement.maxHeight ? "auto" : undefined,
-                transformOrigin: placement.above ? "50% 100%" : "50% 0%",
-            }}
-            className="glass-menu fixed z-[80] flex gap-1 rounded-3xl p-2"
-            {...{ [FLOATING_LAYER]: "" }}
+            contentClassName="flex-row gap-1 overflow-hidden p-2"
             onKeyDown={(event) => {
                 if (event.key !== "Escape") return
                 event.preventDefault()
@@ -272,7 +235,7 @@ function TimeColumns({
                     }
                 />
             )}
-        </motion.div>
+        </AnchoredSurface>
     )
 }
 

package/src/components/content-unavailable-view/content-unavailable-view.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode, ComponentProps } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
+    title: string
+    description?: string
+    icon?: ReactNode
+    actions?: ReactNode
+}
+
+/** A focused empty or unavailable state with an optional next action. */
+export function ContentUnavailableView({
+    title,
+    description,
+    icon,
+    actions,
+    className,
+    ...props
+}: ContentUnavailableViewProps) {
+    return (
+        <div
+            {...props}
+            className={cn("flex flex-col items-center gap-3 px-6 py-10 text-center", className)}
+        >
+            {icon && (
+                <span aria-hidden="true" className="text-label-tertiary">
+                    {icon}
+                </span>
+            )}
+            <p className="text-headline font-semibold text-label">{title}</p>
+            {description && (
+                <p className="max-w-sm text-footnote text-label-secondary">{description}</p>
+            )}
+            {actions && <div className="mt-1 flex flex-wrap justify-center gap-2">{actions}</div>}
+        </div>
+    )
+}

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

@@ -36,6 +36,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
         maxHeight: undefined as number | undefined,
         width: 0,
         height: 0,
+        radius: 0,
         ready: false,
     })
     const [focused, setFocused] = useState(-1)
@@ -102,6 +103,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                         bottom: top + (viewport?.height ?? window.innerHeight) - edges.bottom,
                     }
                 ),
+                radius: Number.parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0,
                 ready: true,
             }
             setPosition((current) =>
@@ -112,6 +114,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                 current.maxHeight === next.maxHeight &&
                 current.width === next.width &&
                 current.height === next.height &&
+                current.radius === next.radius &&
                 current.ready === next.ready
                     ? current
                     : next
@@ -190,8 +193,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
     )
     let actionIndex = -1
     return (
-        <motion.div
-            key={position.ready ? "surface" : "measure"}
+        <div
             ref={ref}
             role="menu"
             tabIndex={-1}
@@ -248,7 +250,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
             }}
             {...{ [FLOATING_LAYER]: "" }}
             className={cn(
-                "fixed z-75 isolate flex min-w-50 max-w-[min(280px,calc(100vw-24px))] flex-col 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 outline-none",
                 menu.touch && "min-w-60",
                 !present && "pointer-events-none"
             )}
@@ -263,26 +265,28 @@ function Menu({ menu }: { menu: OpenMenu }) {
             }}
             onContextMenu={(event) => event.preventDefault()}
         >
-            <motion.div
-                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}
-            />
+            {position.ready && (
+                <motion.div
+                    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: position.radius,
+                              }
+                            : 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"
@@ -370,6 +374,6 @@ function Menu({ menu }: { menu: OpenMenu }) {
                     )
                 })}
             </motion.div>
-        </motion.div>
+        </div>
     )
 }

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

@@ -81,8 +81,8 @@ export function openFollowUpMenu(items: ContextMenuItem[]) {
 }
 
 /**
- * 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
+ * Expands a control into a menu, lined up with its leading or trailing
+ * edge and growing down (or up) from the control's bounds. 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.
  */
@@ -105,12 +105,11 @@ export function openMenu(
     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,
+        y: toolbar ? rect.top : above ? rect.bottom : rect.top,
         items,
         touch: false,
         alignX: right ? "end" : "start",

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

@@ -6,7 +6,10 @@ export type MenuRect = {
 }
 
 /** Animate the material's bounds independently so menu text never stretches. */
-export function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect) {
+export function menuSurfaceReveal(
+    source: MenuRect | undefined,
+    target: MenuRect & { radius?: number }
+) {
     if (
         !source ||
         source.width <= 0 ||
@@ -20,7 +23,7 @@ export function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect
             width: target.width,
             height: target.height,
             opacity: 0,
-            borderRadius: "var(--radius-3xl)",
+            borderRadius: target.radius ?? 0,
         }
     }
     return {

package/src/components/dialog/dialog-host.tsx

@@ -2,7 +2,13 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { useEffect, useRef, useSyncExternalStore } from "react"
 import { Button } from "../button/button"
 import { spring } from "../../motion/transitions"
-import { getDialog, type PendingDialog, settleDialog, subscribeDialogs } from "./dialog-store"
+import {
+    advanceDialogQueue,
+    getDialog,
+    type PendingDialog,
+    settleDialog,
+    subscribeDialogs,
+} from "./dialog-store"
 
 /**
  * Renders confirmation dialogs: a glass card that springs up over blurred
@@ -12,7 +18,7 @@ import { getDialog, type PendingDialog, settleDialog, subscribeDialogs } from ".
 export function DialogHost() {
     const dialog = useSyncExternalStore(subscribeDialogs, getDialog, () => null)
     return (
-        <AnimatePresence>
+        <AnimatePresence mode="wait" onExitComplete={advanceDialogQueue}>
             {dialog && <ConfirmCard key={dialog.id} dialog={dialog} />}
         </AnimatePresence>
     )
@@ -31,7 +37,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
         const onKey = (event: KeyboardEvent) => {
             if (event.key === "Escape") {
                 event.preventDefault()
-                settleDialog(false)
+                settleDialog(false, dialog.id)
             }
             // Keep focus inside the dialog.
             if (event.key === "Tab") {
@@ -48,7 +54,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
             window.removeEventListener("keydown", onKey)
             previous?.focus?.()
         }
-    }, [dialog.destructive])
+    }, [dialog.destructive, dialog.id])
 
     return (
         <div className="fixed inset-0 z-[70] flex items-center justify-center p-5">
@@ -59,7 +65,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={reducedMotion ? { duration: 0 } : spring.smooth}
-                onClick={() => settleDialog(false)}
+                onClick={() => settleDialog(false, dialog.id)}
             />
             <motion.div
                 role="alertdialog"
@@ -90,7 +96,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                         ref={cancelRef}
                         type="button"
                         variant="secondary"
-                        onClick={() => settleDialog(false)}
+                        onClick={() => settleDialog(false, dialog.id)}
                         className="min-w-0 grow rounded-2xl"
                     >
                         {dialog.cancelLabel ?? "Cancel"}
@@ -99,7 +105,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                         ref={confirmRef}
                         type="button"
                         variant={dialog.destructive ? "destructive" : "default"}
-                        onClick={() => settleDialog(true)}
+                        onClick={() => settleDialog(true, dialog.id)}
                         className="min-w-0 grow rounded-2xl"
                     >
                         {dialog.confirmLabel ?? "OK"}

package/src/components/dialog/dialog-store.ts

@@ -20,6 +20,7 @@ export interface PendingDialog extends ConfirmOptions {
 let current: PendingDialog | null = null
 let nextId = 1
 const queue: PendingDialog[] = []
+let exitingId: number | null = null
 const listeners = new Set<() => void>()
 
 const emit = () => {
@@ -29,15 +30,25 @@ const emit = () => {
 export function confirmDialog(options: ConfirmOptions): Promise<boolean> {
     return new Promise((resolve) => {
         const dialog = { ...options, id: nextId++, resolve }
-        if (current) queue.push(dialog)
+        if (current || exitingId !== null) queue.push(dialog)
         else current = dialog
         emit()
     })
 }
 
-export function settleDialog(confirmed: boolean) {
-    if (!current) return
-    current.resolve(confirmed)
+export function settleDialog(confirmed: boolean, id?: number) {
+    if (!current || exitingId !== null || (id !== undefined && current.id !== id)) return
+    const settled = current
+    exitingId = settled.id
+    current = null
+    settled.resolve(confirmed)
+    emit()
+}
+
+/** Advance queued confirmations only after the dismissed card has exited. */
+export function advanceDialogQueue() {
+    if (exitingId === null) return
+    exitingId = null
     current = queue.shift() ?? null
     emit()
 }

package/src/components/disclosure-group/disclosure-group.tsx

@@ -1,3 +1,4 @@
+import { Button } from "../button/button"
 import { type ReactNode, useId } from "react"
 import { ChevronDownIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
@@ -10,6 +11,8 @@ export interface DisclosureGroupProps {
     children: ReactNode
     disabled?: boolean
     className?: string
+    /** Trigger layout when composed inside a shared surface such as Accordion. */
+    triggerClassName?: string
     /** Supporting text beneath the title. */
     description?: string
 }
@@ -22,14 +25,17 @@ export function DisclosureGroup({
     children,
     disabled = false,
     className,
+    triggerClassName,
     description,
 }: DisclosureGroupProps) {
     const id = useId()
 
     return (
-        <div className={cn("min-w-0", className)}>
+        <div className={cn("w-full min-w-0", className)}>
             <h3 className="m-0">
-                <button
+                <Button
+                    variant="ghost"
+                    contentClassName="w-full min-w-0 justify-between gap-3"
                     type="button"
                     id={`${id}-trigger`}
                     aria-expanded={open}
@@ -37,15 +43,16 @@ export function DisclosureGroup({
                     disabled={disabled}
                     onClick={() => onOpenChange(!open)}
                     className={cn(
-                        "flex min-h-11 w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-start",
-                        "text-subheadline text-label hover:bg-fill/60 focus-visible:outline-2 focus-visible:outline-offset-2",
-                        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40"
+                        "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start active:scale-100",
+                        "text-subheadline font-normal text-label hover:bg-fill/60 focus-visible:ring-inset focus-visible:ring-offset-0",
+                        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40",
+                        triggerClassName
                     )}
                 >
                     <span className="flex min-w-0 flex-col gap-0.5">
-                        <span className="font-semibold">{label}</span>
+                        <span className="font-medium break-words whitespace-normal">{label}</span>
                         {description && (
-                            <span className="text-footnote font-normal text-label-secondary">
+                            <span className="text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary">
                                 {description}
                             </span>
                         )}
@@ -58,11 +65,13 @@ export function DisclosureGroup({
                             open && "rotate-180"
                         )}
                     />
-                </button>
+                </Button>
             </h3>
-            <section id={id} aria-labelledby={`${id}-trigger`}>
+            <section id={id} aria-labelledby={`${id}-trigger`} aria-hidden={!open} inert={!open}>
                 <InlineDisclosure open={open}>
-                    <div className="px-3 pb-3">{children}</div>
+                    <div className="min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]">
+                        {children}
+                    </div>
                 </InlineDisclosure>
             </section>
         </div>

package/src/components/keyboard-shortcut/keyboard-shortcut.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {}
+
+/** A quiet keycap for a shortcut supplied and localized by the application. */
+export function KeyboardShortcut({ className, ...props }: KeyboardShortcutProps) {
+    return (
+        <kbd
+            {...props}
+            className={cn(
+                "inline-flex shrink-0 items-center rounded-md border border-separator/70 bg-fill/50 px-1.5 py-0.5 font-mono text-caption2 leading-none text-label-secondary",
+                className
+            )}
+        />
+    )
+}

package/src/components/menu/menu.tsx

@@ -17,7 +17,7 @@ export interface MenuProps extends Omit<ButtonProps, "onClick" | "children"> {
     children: ReactNode
     /** Logical edge used to align the menu, including RTL. @default "leading" */
     edge?: ContextMenuEdge
-    /** Open above the trigger instead of below it. @default false */
+    /** Expand upward from the trigger instead of downward. @default false */
     above?: boolean
 }