@passui/react 0.1.17 → 0.1.19

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

@@ -1,24 +1,15 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
-import {
-    type KeyboardEvent,
-    useEffect,
-    useId,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import { type KeyboardEvent, useEffect, useId, useLayoutEffect, useRef, useState } 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 { spring } from "../../motion/transitions"
+import { floatingPanelMotion } from "../../motion/transitions"
+import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
     formatTime,
     fromTwelveHours,
@@ -42,6 +33,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,6 +51,7 @@ export function CompactTimePicker({
     placeholder,
     labels,
     className,
+    disabled = false,
 }: CompactTimePickerProps) {
     const [open, setOpen] = useState(false)
     const trigger = useRef<HTMLButtonElement>(null)
@@ -68,17 +62,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 +70,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}
+                aria-expanded={open && !disabled}
+                aria-controls={open && !disabled ? panelId : undefined}
+                disabled={disabled}
                 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
-                )}
+                className={pickerTriggerStyle(className)}
             >
                 <span
                     className={cn(
@@ -106,15 +86,12 @@ 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 && (
+                        {open && !disabled && trigger.current && (
                             <TimeColumns
                                 id={panelId}
                                 anchor={trigger.current}
@@ -132,9 +109,10 @@ export function CompactTimePicker({
                                     haptic("selection")
                                     onChange(formatTime(next))
                                 }}
-                                onClose={() => {
+                                onClose={(restoreFocus) => {
                                     setOpen(false)
-                                    trigger.current?.focus()
+                                    if (restoreFocus)
+                                        trigger.current?.focus({ preventScroll: true })
                                 }}
                             />
                         )}
@@ -169,16 +147,12 @@ 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 placement = useAnchoredPlacement(anchor, twelve ? 240 : 180, 280)
     const number = new Intl.NumberFormat(locale, {
         minimumIntegerDigits: 2,
     })
@@ -186,20 +160,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,11 +179,8 @@ 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) },
@@ -225,22 +191,7 @@ function TimeColumns({
         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])
+    useFloatingDismiss(root, anchor, onClose)
 
     return (
         <motion.div
@@ -253,7 +204,7 @@ function TimeColumns({
                     ? { opacity: 0 }
                     : {
                           opacity: 0,
-                          scale: 0.96,
+                          scale: 1,
                           y: placement.above ? 6 : -6,
                       }
             }
@@ -263,14 +214,14 @@ function TimeColumns({
                     ? { opacity: 0 }
                     : {
                           opacity: 0,
-                          scale: 0.98,
-                          transition: { duration: 0.1 },
+                          scale: 1,
+                          y: placement.above ? 4 : -4,
                       }
             }
             transition={
                 reducedMotion
                     ? { duration: 0 }
-                    : spring.smooth
+                    : floatingPanelMotion(placement.above ? "above" : "below").transition
             }
             style={{
                 left: placement.left,
@@ -278,12 +229,8 @@ function TimeColumns({
                 top: placement.top,
                 bottom: placement.bottom,
                 maxHeight: placement.maxHeight,
-                overflowY: placement.maxHeight
-                    ? "auto"
-                    : undefined,
-                transformOrigin: placement.above
-                    ? "50% 100%"
-                    : "50% 0%",
+                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]: "" }}
@@ -291,7 +238,7 @@ function TimeColumns({
                 if (event.key !== "Escape") return
                 event.preventDefault()
                 event.stopPropagation()
-                onClose()
+                onClose(true)
             }}
         >
             <Column
@@ -302,9 +249,7 @@ function TimeColumns({
                 onSelect={(hour) =>
                     onChange({
                         ...time,
-                        hour: twelve
-                            ? fromTwelveHours(hour, clock.pm)
-                            : hour,
+                        hour: twelve ? fromTwelveHours(hour, clock.pm) : hour,
                     })
                 }
             />
@@ -312,9 +257,7 @@ function TimeColumns({
                 label={labels.minute}
                 items={minutes}
                 selected={time.minute}
-                onSelect={(minute) =>
-                    onChange({ ...time, minute })
-                }
+                onSelect={(minute) => onChange({ ...time, minute })}
             />
             {twelve && (
                 <Column
@@ -324,10 +267,7 @@ function TimeColumns({
                     onSelect={(period) =>
                         onChange({
                             ...time,
-                            hour: fromTwelveHours(
-                                clock.hour,
-                                period === 1
-                            ),
+                            hour: fromTwelveHours(clock.hour, period === 1),
                         })
                     }
                 />
@@ -354,45 +294,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-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,