@passui/react 0.1.17 → 0.1.19

package/src/components/compact-date-picker/calendar-month.ts

@@ -9,11 +9,7 @@ export interface CalendarDay {
 export function parseDay(value: string): CalendarDay | null {
     const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
     if (!match) return null
-    const [year, month, day] = [
-        Number(match[1]),
-        Number(match[2]),
-        Number(match[3]),
-    ]
+    const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])]
     const date = new Date(Date.UTC(year, month - 1, day))
     const real =
         date.getUTCFullYear() === year &&
@@ -22,24 +18,14 @@ export function parseDay(value: string): CalendarDay | null {
     return real ? { year, month, day } : null
 }
 
-export function formatDay({
-    year,
-    month,
-    day,
-}: CalendarDay): string {
-    const pad = (value: number, width: number) =>
-        String(value).padStart(width, "0")
+export function formatDay({ year, month, day }: CalendarDay): string {
+    const pad = (value: number, width: number) => String(value).padStart(width, "0")
     return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`
 }
 
 /** Moves by whole days, across months and years. */
-export function addDays(
-    day: CalendarDay,
-    count: number
-): CalendarDay {
-    const date = new Date(
-        Date.UTC(day.year, day.month - 1, day.day + count)
-    )
+export function addDays(day: CalendarDay, count: number): CalendarDay {
+    const date = new Date(Date.UTC(day.year, day.month - 1, day.day + count))
     return {
         year: date.getUTCFullYear(),
         month: date.getUTCMonth() + 1,
@@ -48,18 +34,11 @@ export function addDays(
 }
 
 /** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
-export function addMonths(
-    day: CalendarDay,
-    count: number
-): CalendarDay {
-    const first = new Date(
-        Date.UTC(day.year, day.month - 1 + count, 1)
-    )
+export function addMonths(day: CalendarDay, count: number): CalendarDay {
+    const first = new Date(Date.UTC(day.year, day.month - 1 + count, 1))
     const year = first.getUTCFullYear()
     const month = first.getUTCMonth() + 1
-    const last = new Date(
-        Date.UTC(year, month, 0)
-    ).getUTCDate()
+    const last = new Date(Date.UTC(year, month, 0)).getUTCDate()
     return { year, month, day: Math.min(day.day, last) }
 }
 
@@ -70,31 +49,14 @@ export function addMonths(
  */
 export function firstWeekday(locale: string): number {
     try {
-        const info = new Intl.Locale(
-            locale
-        ) as Intl.Locale & {
+        const info = new Intl.Locale(locale) as Intl.Locale & {
             getWeekInfo?: () => { firstDay: number }
             weekInfo?: { firstDay: number }
         }
-        const first =
-            info.getWeekInfo?.().firstDay ??
-            info.weekInfo?.firstDay
+        const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
         if (first) return first
         const region = info.maximize().region ?? ""
-        return [
-            "US",
-            "CA",
-            "JP",
-            "KR",
-            "TW",
-            "BR",
-            "MX",
-            "IL",
-            "PH",
-            "IN",
-        ].includes(region)
-            ? 7
-            : 1
+        return ["US", "CA", "JP", "KR", "TW", "BR", "MX", "IL", "PH", "IN"].includes(region) ? 7 : 1
     } catch {
         return 1
     }
@@ -107,9 +69,7 @@ export function monthGrid(
     firstDay: number
 ): Array<CalendarDay & { inMonth: boolean }> {
     // getUTCDay counts Sunday as 0; weeks here count it as 7.
-    const weekday =
-        new Date(Date.UTC(year, month - 1, 1)).getUTCDay() ||
-        7
+    const weekday = new Date(Date.UTC(year, month - 1, 1)).getUTCDay() || 7
     const lead = (weekday - firstDay + 7) % 7
     const start = addDays({ year, month, day: 1 }, -lead)
     return Array.from({ length: 42 }, (_, index) => {
@@ -122,10 +82,6 @@ export function monthGrid(
 }
 
 /** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
-export function withinBounds(
-    value: string,
-    min?: string,
-    max?: string
-): boolean {
+export function withinBounds(value: string, min?: string, max?: string): boolean {
     return (!min || value >= min) && (!max || value <= max)
 }

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

@@ -1,8 +1,4 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import {
     type KeyboardEvent,
     useEffect,
@@ -14,17 +10,15 @@ import {
 } from "react"
 import { createPortal } from "react-dom"
 import { FLOATING_LAYER } from "../../hooks/use-dismiss"
-import {
-    CalendarIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-} from "../../icons/icons"
+import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { registerFloatingLayer } from "../../lib/floating-layers"
 import { haptic } from "../../lib/haptics"
 import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
-import { spring } from "../../motion/transitions"
+import { floatingPanelMotion } from "../../motion/transitions"
 import { IconButton } from "../button/icon-button"
+import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
     addDays,
     addMonths,
@@ -54,12 +48,13 @@ export interface CompactDatePickerProps {
         clear?: string
     }
     className?: string
+    /** Prevents opening the date panel. @default false */
+    disabled?: boolean
 }
 
 const WIDTH = 308
 
-const toDate = ({ year, month, day }: CalendarDay) =>
-    new Date(Date.UTC(year, month - 1, day))
+const toDate = ({ year, month, day }: CalendarDay) => new Date(Date.UTC(year, month - 1, day))
 
 function todayDay(): CalendarDay {
     const now = new Date()
@@ -85,6 +80,7 @@ export function CompactDatePicker({
     placeholder,
     labels,
     className,
+    disabled = false,
 }: CompactDatePickerProps) {
     const [open, setOpen] = useState(false)
     const trigger = useRef<HTMLButtonElement>(null)
@@ -97,9 +93,9 @@ export function CompactDatePicker({
           }).format(toDate(chosen))
         : (placeholder ?? "")
 
-    const close = () => {
+    const close = (restoreFocus: boolean) => {
         setOpen(false)
-        trigger.current?.focus()
+        if (restoreFocus) trigger.current?.focus({ preventScroll: true })
     }
 
     return (
@@ -107,17 +103,13 @@ export function CompactDatePicker({
             <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 ? calendarId : undefined}
+                aria-expanded={open && !disabled}
+                aria-controls={open && !disabled ? calendarId : 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(
@@ -127,15 +119,12 @@ export function CompactDatePicker({
                 >
                     {shown}
                 </span>
-                <CalendarIcon
-                    size={16}
-                    className="shrink-0 text-label-tertiary"
-                />
+                <CalendarIcon size={16} className="shrink-0 text-label-tertiary" />
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
                     <AnimatePresence>
-                        {open && trigger.current && (
+                        {open && !disabled && trigger.current && (
                             <MonthCalendar
                                 id={calendarId}
                                 anchor={trigger.current}
@@ -148,7 +137,7 @@ export function CompactDatePicker({
                                 onChoose={(next) => {
                                     haptic("selection")
                                     onChange(next)
-                                    close()
+                                    close(true)
                                 }}
                                 onClose={close}
                             />
@@ -181,24 +170,15 @@ function MonthCalendar({
     max?: string
     labels: CompactDatePickerProps["labels"]
     onChoose: (value: string) => void
-    onClose: () => void
+    onClose: (restoreFocus: boolean) => void
 }) {
     const root = useRef<HTMLDivElement>(null)
     const reducedMotion = useReducedMotion()
     const placement = useAnchoredPlacement(anchor, WIDTH, 360)
     const today = todayDay()
-    const [focused, setFocused] = useState<CalendarDay>(
-        () => parseDay(value) ?? today
-    )
-    const firstDay = useMemo(
-        () => firstWeekday(locale),
-        [locale]
-    )
-    const days = monthGrid(
-        focused.year,
-        focused.month,
-        firstDay
-    )
+    const [focused, setFocused] = useState<CalendarDay>(() => parseDay(value) ?? today)
+    const firstDay = useMemo(() => firstWeekday(locale), [locale])
+    const days = monthGrid(focused.year, focused.month, firstDay)
     const title = new Intl.DateTimeFormat(locale, {
         month: "long",
         year: "numeric",
@@ -223,59 +203,24 @@ function MonthCalendar({
     // The focused day takes keyboard focus as it moves.
     useEffect(() => {
         root.current
-            ?.querySelector<HTMLButtonElement>(
-                `[data-day="${formatDay(focused)}"]`
-            )
+            ?.querySelector<HTMLButtonElement>(`[data-day="${formatDay(focused)}"]`)
             ?.focus()
     }, [focused])
 
-    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)
 
     const move = (next: CalendarDay) => setFocused(next)
 
-    const onKeyDown = (
-        event: KeyboardEvent<HTMLDivElement>
-    ) => {
-        const rtl =
-            getComputedStyle(event.currentTarget)
-                .direction === "rtl"
-                ? -1
-                : 1
+    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
         const keys: Record<string, () => void> = {
             ArrowLeft: () => move(addDays(focused, -rtl)),
             ArrowRight: () => move(addDays(focused, rtl)),
             ArrowUp: () => move(addDays(focused, -7)),
             ArrowDown: () => move(addDays(focused, 7)),
-            PageUp: () =>
-                move(
-                    addMonths(
-                        focused,
-                        event.shiftKey ? -12 : -1
-                    )
-                ),
-            PageDown: () =>
-                move(
-                    addMonths(
-                        focused,
-                        event.shiftKey ? 12 : 1
-                    )
-                ),
-            Escape: onClose,
+            PageUp: () => move(addMonths(focused, event.shiftKey ? -12 : -1)),
+            PageDown: () => move(addMonths(focused, event.shiftKey ? 12 : 1)),
+            Escape: () => onClose(true),
         }
         const action = keys[event.key]
         if (!action) return
@@ -295,7 +240,7 @@ function MonthCalendar({
                     ? { opacity: 0 }
                     : {
                           opacity: 0,
-                          scale: 0.96,
+                          scale: 1,
                           y: placement.above ? 6 : -6,
                       }
             }
@@ -305,14 +250,14 @@ function MonthCalendar({
                     ? { 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,
@@ -320,22 +265,15 @@ function MonthCalendar({
                 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 flex-col gap-2 rounded-3xl p-3"
             {...{ [FLOATING_LAYER]: "" }}
             onKeyDown={onKeyDown}
         >
             <div className="flex items-center justify-between gap-2 ps-2">
-                <p
-                    className="text-headline font-semibold"
-                    aria-live="polite"
-                >
+                <p className="text-headline font-semibold" aria-live="polite">
                     {title}
                 </p>
                 <div className="flex items-center rtl:flex-row-reverse">
@@ -343,9 +281,7 @@ function MonthCalendar({
                         variant="ghost"
                         size="icon-sm"
                         label={labels.previousMonth}
-                        onClick={() =>
-                            move(addMonths(focused, -1))
-                        }
+                        onClick={() => move(addMonths(focused, -1))}
                         className="text-accent-text"
                     >
                         <ChevronLeftIcon size={20} />
@@ -354,20 +290,14 @@ function MonthCalendar({
                         variant="ghost"
                         size="icon-sm"
                         label={labels.nextMonth}
-                        onClick={() =>
-                            move(addMonths(focused, 1))
-                        }
+                        onClick={() => move(addMonths(focused, 1))}
                         className="text-accent-text"
                     >
                         <ChevronRightIcon size={20} />
                     </IconButton>
                 </div>
             </div>
-            <div
-                role="grid"
-                aria-label={title}
-                className="grid grid-cols-7 gap-y-0.5"
-            >
+            <div role="grid" aria-label={title} className="grid grid-cols-7 gap-y-0.5">
                 <div role="row" className="contents">
                     {weekdays.map((weekday, index) => (
                         <span
@@ -383,13 +313,8 @@ function MonthCalendar({
                     const key = formatDay(day)
                     const selected = key === value
                     const isToday = key === formatDay(today)
-                    const isFocused =
-                        key === formatDay(focused)
-                    const allowed = withinBounds(
-                        key,
-                        min,
-                        max
-                    )
+                    const isFocused = key === formatDay(focused)
+                    const allowed = withinBounds(key, min, max)
                     return (
                         <button
                             key={key}
@@ -399,12 +324,8 @@ function MonthCalendar({
                             tabIndex={isFocused ? 0 : -1}
                             disabled={!allowed}
                             aria-selected={selected}
-                            aria-current={
-                                isToday ? "date" : undefined
-                            }
-                            aria-label={fullDate.format(
-                                toDate(day)
-                            )}
+                            aria-current={isToday ? "date" : undefined}
+                            aria-label={fullDate.format(toDate(day))}
                             onClick={() => onChoose(key)}
                             className={cn(
                                 "mx-auto flex size-10 items-center justify-center rounded-full text-body tabular-nums transition-colors",