@passui/react 0.1.17 → 0.1.20

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

@@ -1,30 +1,12 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
-import {
-    type KeyboardEvent,
-    useEffect,
-    useId,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure"
+import { AnchoredSurface } from "../popover/anchored-surface"
+import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom"
-import { FLOATING_LAYER } from "../../hooks/use-dismiss"
-import {
-    CalendarIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-} from "../../icons/icons"
+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 { IconButton } from "../button/icon-button"
+import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
     addDays,
     addMonths,
@@ -54,12 +36,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,8 +68,10 @@ export function CompactDatePicker({
     placeholder,
     labels,
     className,
+    disabled = false,
 }: CompactDatePickerProps) {
-    const [open, setOpen] = useState(false)
+    const panel = useAnchoredDisclosure(disabled)
+    const { open } = panel
     const trigger = useRef<HTMLButtonElement>(null)
     const calendarId = useId()
     const chosen = parseDay(value)
@@ -97,9 +82,9 @@ export function CompactDatePicker({
           }).format(toDate(chosen))
         : (placeholder ?? "")
 
-    const close = () => {
-        setOpen(false)
-        trigger.current?.focus()
+    const close = (restoreFocus: boolean) => {
+        panel.close()
+        if (restoreFocus) trigger.current?.focus({ preventScroll: true })
     }
 
     return (
@@ -107,17 +92,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}
-                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 ? calendarId : undefined}
+                disabled={disabled}
+                onClick={() => panel.toggle()}
+                className={pickerTriggerStyle(className)}
             >
                 <span
                     className={cn(
@@ -127,33 +108,30 @@ 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 && (
-                            <MonthCalendar
-                                id={calendarId}
-                                anchor={trigger.current}
-                                label={label}
-                                locale={locale}
-                                value={value}
-                                min={min}
-                                max={max}
-                                labels={labels}
-                                onChoose={(next) => {
-                                    haptic("selection")
-                                    onChange(next)
-                                    close()
-                                }}
-                                onClose={close}
-                            />
-                        )}
-                    </AnimatePresence>,
+                    panel.mounted && trigger.current ? (
+                        <MonthCalendar
+                            open={open}
+                            onExited={panel.onExited}
+                            id={calendarId}
+                            anchor={trigger.current}
+                            label={label}
+                            locale={locale}
+                            value={value}
+                            min={min}
+                            max={max}
+                            labels={labels}
+                            onChoose={(next) => {
+                                haptic("selection")
+                                onChange(next)
+                                close(true)
+                            }}
+                            onClose={close}
+                        />
+                    ) : null,
                     document.body
                 )}
         </>
@@ -161,6 +139,8 @@ export function CompactDatePicker({
 }
 
 function MonthCalendar({
+    open,
+    onExited,
     id,
     anchor,
     label,
@@ -172,6 +152,8 @@ function MonthCalendar({
     onChoose,
     onClose,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     label: string
@@ -181,24 +163,13 @@ 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",
@@ -215,67 +186,25 @@ function MonthCalendar({
         timeZone: "UTC",
     })
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        return registerFloatingLayer(root.current, anchor)
-    }, [anchor])
-
     // 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])
-
     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
@@ -285,57 +214,22 @@ function MonthCalendar({
     }
 
     return (
-        <motion.div
+        <AnchoredSurface
+            open={open}
+            onExited={onExited}
             ref={root}
+            anchor={anchor}
+            width={WIDTH}
+            needed={360}
+            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 flex-col gap-2 rounded-3xl p-3"
-            {...{ [FLOATING_LAYER]: "" }}
+            contentClassName="gap-2 p-3"
             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 +237,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 +246,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 +269,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 +280,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",
@@ -433,6 +310,6 @@ function MonthCalendar({
                     {labels.clear}
                 </button>
             )}
-        </motion.div>
+        </AnchoredSurface>
     )
 }