@passui/react 0.1.17 → 0.1.20

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

@@ -1,24 +1,11 @@
-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 { 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 { spring } from "../../motion/transitions"
+import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
     formatTime,
     fromTwelveHours,
@@ -42,6 +29,8 @@ export interface CompactTimePickerProps {
     placeholder?: string
     labels: { hour: string; minute: string; period: string }
     className?: string
+    /** Prevents opening the time panel. @default false */
+    disabled?: boolean
 }
 
 /**
@@ -58,8 +47,10 @@ export function CompactTimePicker({
     placeholder,
     labels,
     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)
@@ -68,17 +59,7 @@ export function CompactTimePicker({
               hour: "numeric",
               minute: "2-digit",
               timeZone: "UTC",
-          }).format(
-              new Date(
-                  Date.UTC(
-                      2000,
-                      0,
-                      1,
-                      chosen.hour,
-                      chosen.minute
-                  )
-              )
-          )
+          }).format(new Date(Date.UTC(2000, 0, 1, chosen.hour, chosen.minute)))
         : (placeholder ?? "")
 
     return (
@@ -86,17 +67,13 @@ export function CompactTimePicker({
             <button
                 ref={trigger}
                 type="button"
-                aria-label={
-                    chosen ? `${label}, ${shown}` : label
-                }
+                aria-label={chosen ? `${label}, ${shown}` : label}
                 aria-haspopup="dialog"
-                aria-expanded={open}
-                aria-controls={open ? panelId : undefined}
-                onClick={() => setOpen((current) => !current)}
-                className={cn(
-                    "flex w-full min-w-0 items-center gap-2 rounded-lg control-field px-3 py-2 text-start text-subheadline text-label",
-                    className
-                )}
+                aria-expanded={open && !disabled}
+                aria-controls={open && !disabled ? panelId : undefined}
+                disabled={disabled}
+                onClick={() => panel.toggle()}
+                className={pickerTriggerStyle(className)}
             >
                 <span
                     className={cn(
@@ -106,39 +83,36 @@ export function CompactTimePicker({
                 >
                     {shown}
                 </span>
-                <ClockIcon
-                    size={16}
-                    className="shrink-0 text-label-tertiary"
-                />
+                <ClockIcon size={16} className="shrink-0 text-label-tertiary" />
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
-                    <AnimatePresence>
-                        {open && 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={() => {
-                                    setOpen(false)
-                                    trigger.current?.focus()
-                                }}
-                            />
-                        )}
-                    </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
                 )}
         </>
@@ -151,6 +125,8 @@ interface ColumnItem {
 }
 
 function TimeColumns({
+    open,
+    onExited,
     id,
     anchor,
     label,
@@ -161,6 +137,8 @@ function TimeColumns({
     onChange,
     onClose,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     label: string
@@ -169,16 +147,10 @@ function TimeColumns({
     minuteStep: number
     labels: CompactTimePickerProps["labels"]
     onChange: (time: TimeOfDay) => void
-    onClose: () => void
+    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,20 +158,15 @@ function TimeColumns({
     const clock = toTwelveHours(time.hour)
 
     const hours: ColumnItem[] = twelve
-        ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
-              (hour) => ({
-                  key: hour,
-                  text: plain.format(hour),
-              })
-          )
+        ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((hour) => ({
+              key: hour,
+              text: plain.format(hour),
+          }))
         : Array.from({ length: 24 }, (_, hour) => ({
               key: hour,
               text: number.format(hour),
           }))
-    const minutes = minuteChoices(
-        minuteStep,
-        time.minute
-    ).map((minute) => ({
+    const minutes = minuteChoices(minuteStep, time.minute).map((minute) => ({
         key: minute,
         text: number.format(minute),
     }))
@@ -210,88 +177,31 @@ function TimeColumns({
             hour12: true,
             timeZone: "UTC",
         })
-            .formatToParts(
-                new Date(Date.UTC(2000, 0, 1, pm ? 13 : 1))
-            )
-            .find((part) => part.type === "dayPeriod")
-            ?.value ?? (pm ? "PM" : "AM")
+            .formatToParts(new Date(Date.UTC(2000, 0, 1, pm ? 13 : 1)))
+            .find((part) => part.type === "dayPeriod")?.value ?? (pm ? "PM" : "AM")
     const periods = [
         { key: 0, text: periodName(false) },
         { key: 1, text: periodName(true) },
     ]
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        return registerFloatingLayer(root.current, anchor)
-    }, [anchor])
-
-    useEffect(() => {
-        const onPointer = (event: PointerEvent) => {
-            const target = event.target as Node
-            if (
-                !root.current?.contains(target) &&
-                !anchor.contains(target)
-            )
-                onClose()
-        }
-        document.addEventListener("pointerdown", onPointer)
-        return () =>
-            document.removeEventListener(
-                "pointerdown",
-                onPointer
-            )
-    }, [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: 0.96,
-                          y: placement.above ? 6 : -6,
-                      }
-            }
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 0.98,
-                          transition: { duration: 0.1 },
-                      }
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : spring.smooth
-            }
-            style={{
-                left: placement.left,
-                width: placement.width,
-                top: placement.top,
-                bottom: placement.bottom,
-                maxHeight: placement.maxHeight,
-                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()
                 event.stopPropagation()
-                onClose()
+                onClose(true)
             }}
         >
             <Column
@@ -302,9 +212,7 @@ function TimeColumns({
                 onSelect={(hour) =>
                     onChange({
                         ...time,
-                        hour: twelve
-                            ? fromTwelveHours(hour, clock.pm)
-                            : hour,
+                        hour: twelve ? fromTwelveHours(hour, clock.pm) : hour,
                     })
                 }
             />
@@ -312,9 +220,7 @@ function TimeColumns({
                 label={labels.minute}
                 items={minutes}
                 selected={time.minute}
-                onSelect={(minute) =>
-                    onChange({ ...time, minute })
-                }
+                onSelect={(minute) => onChange({ ...time, minute })}
             />
             {twelve && (
                 <Column
@@ -324,15 +230,12 @@ function TimeColumns({
                     onSelect={(period) =>
                         onChange({
                             ...time,
-                            hour: fromTwelveHours(
-                                clock.hour,
-                                period === 1
-                            ),
+                            hour: fromTwelveHours(clock.hour, period === 1),
                         })
                     }
                 />
             )}
-        </motion.div>
+        </AnchoredSurface>
     )
 }
 
@@ -354,45 +257,21 @@ function Column({
 
     // The chosen item starts in the middle of the column, then follows changes.
     useEffect(() => {
-        const element =
-            list.current?.querySelector<HTMLElement>(
-                `[data-key="${selected}"]`
-            )
+        const element = list.current?.querySelector<HTMLElement>(`[data-key="${selected}"]`)
         element?.scrollIntoView({ block: "center" })
-        if (
-            autoFocus &&
-            list.current?.contains(document.activeElement) ===
-                false
-        )
-            element?.focus()
+        if (autoFocus && list.current?.contains(document.activeElement) === false) element?.focus()
     }, [selected, autoFocus])
 
-    const onKeyDown = (
-        event: KeyboardEvent<HTMLDivElement>
-    ) => {
-        const step =
-            event.key === "ArrowDown"
-                ? 1
-                : event.key === "ArrowUp"
-                  ? -1
-                  : 0
+    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0
         if (!step) return
         event.preventDefault()
-        const index = items.findIndex(
-            (item) => item.key === selected
-        )
-        const next =
-            items[
-                (index + step + items.length) % items.length
-            ]
+        const index = items.findIndex((item) => item.key === selected)
+        const next = items[(index + step + items.length) % items.length]
         if (!next) return
         onSelect(next.key)
         requestAnimationFrame(() =>
-            list.current
-                ?.querySelector<HTMLElement>(
-                    `[data-key="${next.key}"]`
-                )
-                ?.focus()
+            list.current?.querySelector<HTMLElement>(`[data-key="${next.key}"]`)?.focus()
         )
     }
 

package/src/components/compact-time-picker/time-value.ts

@@ -13,10 +13,7 @@ export function parseTime(value: string): TimeOfDay | null {
     return hour < 24 && minute < 60 ? { hour, minute } : null
 }
 
-export function formatTime({
-    hour,
-    minute,
-}: TimeOfDay): string {
+export function formatTime({ hour, minute }: TimeOfDay): string {
     return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`
 }
 
@@ -43,22 +40,13 @@ export function toTwelveHours(hour: number): {
     }
 }
 
-export function fromTwelveHours(
-    hour: number,
-    pm: boolean
-): number {
+export function fromTwelveHours(hour: number, pm: boolean): number {
     return (hour % 12) + (pm ? 12 : 0)
 }
 
 /** Minutes offered in steps of `step`, keeping `current` when it falls between them. */
-export function minuteChoices(
-    step: number,
-    current?: number
-): number[] {
-    const choices = Array.from(
-        { length: Math.ceil(60 / step) },
-        (_, index) => index * step
-    )
+export function minuteChoices(step: number, current?: number): number[] {
+    const choices = Array.from({ length: Math.ceil(60 / step) }, (_, index) => index * step)
     if (current !== undefined && !choices.includes(current)) {
         choices.push(current)
         choices.sort((a, b) => a - b)

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/content-view/content-view.tsx

@@ -1,17 +1,12 @@
-import type {
-    ComponentPropsWithoutRef,
-    PropsWithChildren,
-    ReactNode,
-} from "react"
+import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
 export type ContentViewVariant = keyof typeof variants
 export type ContentViewHeadingLevel = "h1" | "h2" | "h3"
 
-type ContentViewProps =
-    ComponentPropsWithoutRef<"section"> & {
-        variant?: ContentViewVariant
-    }
+type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
+    variant?: ContentViewVariant
+}
 
 type RowProps = ComponentPropsWithoutRef<"div">
 
@@ -48,10 +43,7 @@ export function ContentView({
     ...props
 }: ContentViewProps) {
     return (
-        <section
-            className={cn(variants[variant], className)}
-            {...props}
-        >
+        <section className={cn(variants[variant], className)} {...props}>
             {children}
         </section>
     )
@@ -59,25 +51,15 @@ export function ContentView({
 
 function Row({ className, children, ...props }: RowProps) {
     return (
-        <div
-            className={cn("flex items-center", className)}
-            {...props}
-        >
+        <div className={cn("flex items-center", className)} {...props}>
             {children}
         </div>
     )
 }
 
-function Section({
-    className,
-    children,
-    ...props
-}: SectionProps) {
+function Section({ className, children, ...props }: SectionProps) {
     return (
-        <section
-            className={cn("flex flex-col gap-3", className)}
-            {...props}
-        >
+        <section className={cn("flex flex-col gap-3", className)} {...props}>
             {children}
         </section>
     )
@@ -95,9 +77,7 @@ function Header({
     children,
 }: HeaderProps) {
     const title = (
-        <Tag
-            className={cn(icon && "flex items-center gap-2")}
-        >
+        <Tag className={cn(icon && "flex items-center gap-2")}>
             {icon}
             {heading}
         </Tag>
@@ -106,12 +86,7 @@ function Header({
     return (
         <div className={className}>
             {action ? (
-                <div
-                    className={cn(
-                        "flex items-center gap-3",
-                        actionClassName
-                    )}
-                >
+                <div className={cn("flex items-center gap-3", actionClassName)}>
                     {title}
                     {action}
                 </div>
@@ -146,13 +121,7 @@ function H2({ className, children, ...props }: H2Props) {
 
 function P({ className, children, ...props }: PProps) {
     return (
-        <p
-            className={cn(
-                "leading-tight font-medium",
-                className
-            )}
-            {...props}
-        >
+        <p className={cn("leading-tight font-medium", className)} {...props}>
             {children}
         </p>
     )
@@ -160,13 +129,7 @@ function P({ className, children, ...props }: PProps) {
 
 function Span({ className, children, ...props }: SpanProps) {
     return (
-        <span
-            className={cn(
-                "text-callout tracking-tighter font-light",
-                className
-            )}
-            {...props}
-        >
+        <span className={cn("text-callout tracking-tighter font-light", className)} {...props}>
             {children}
         </span>
     )
@@ -174,13 +137,7 @@ function Span({ className, children, ...props }: SpanProps) {
 
 function Sub({ className, children, ...props }: SubProps) {
     return (
-        <sub
-            className={cn(
-                "text-subheadline text-label",
-                className
-            )}
-            {...props}
-        >
+        <sub className={cn("text-subheadline text-label", className)} {...props}>
             {children}
         </sub>
     )

package/src/components/context-menu/conceal-menu-source.ts

@@ -6,10 +6,7 @@ type ConcealedSource = {
 const sources = new WeakMap<HTMLElement, ConcealedSource>()
 
 /** Follow-up menus share ownership until the last surface finishes closing. */
-export function concealMenuSource(
-    element: HTMLElement,
-    inert: boolean
-) {
+export function concealMenuSource(element: HTMLElement, inert: boolean) {
     const state = sources.get(element) ?? {
         count: 0,
         opacity: element.style.opacity,