Calendar

1"use client";2​3import * as React from "react";4import { CaretDownIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react/ssr";5​6import { cn } from "@/lib/utils";7​8// A month grid (extrapolated from the Inkbox console, Figma 427:2715: its 8px keys, the lilac wash and the purple9// action). The caption is 14px medium ink between two ghost caret keys; weekdays are 12px muted; days are 36px keys with10// 8px corners and 14px ink. Today is purple and medium; a selected day is the purple key with white text; the days11// inside a range sit on a lilac band between its two purple ends; days of the next and last month are faint. Arrow keys12// move a day or a week, Home and End go to the week's ends, Page Up and Page Down change the month (with Shift, the13// year), Enter or Space selects. Changing month is instant: it happens many times in a row.14​15type DateRange = { from: Date | undefined; to?: Date | undefined };16type Matcher = Date | Date[] | ((date: Date) => boolean) | { before?: Date; after?: Date } | { from: Date; to: Date } | { dayOfWeek: number[] };17​18type CommonProps = {19  /** The month shown first (controlled). */20  month?: Date;21  defaultMonth?: Date;22  onMonthChange?: (month: Date) => void;23  numberOfMonths?: number;24  /** Show the days of the months before and after in the grid (default true). */25  showOutsideDays?: boolean;26  /** 0 is Sunday (default), 1 is Monday. */27  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;28  disabled?: Matcher | Matcher[];29  /** "label" (the default) or "dropdown": month and year selects in the caption. */30  captionLayout?: "label" | "dropdown";31  fromYear?: number;32  toYear?: number;33  /** Today, for the marker (defaults to the current date). */34  today?: Date;35  locale?: string;36  className?: string;37  autoFocus?: boolean;38};39​40type SingleProps = { mode?: "single"; selected?: Date; onSelect?: (date: Date | undefined) => void; required?: boolean };41type MultipleProps = { mode: "multiple"; selected?: Date[]; onSelect?: (dates: Date[]) => void; max?: number };42type RangeProps = { mode: "range"; selected?: DateRange; onSelect?: (range: DateRange | undefined) => void; min?: number; max?: number };43​44type CalendarProps = CommonProps & (SingleProps | MultipleProps | RangeProps);45​46const day0 = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());47const sameDay = (a?: Date, b?: Date) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();48const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);49const addMonths = (d: Date, n: number) => {50  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);51  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();52  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), last));53};54const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);55const diffDays = (a: Date, b: Date) => Math.round((day0(a).getTime() - day0(b).getTime()) / 86_400_000);56​57function matches(date: Date, matcher: Matcher): boolean {58  if (matcher instanceof Date) return sameDay(date, matcher);59  if (Array.isArray(matcher)) return matcher.some((d) => sameDay(date, d));60  if (typeof matcher === "function") return matcher(date);61  if ("dayOfWeek" in matcher) return matcher.dayOfWeek.includes(date.getDay());62  if ("from" in matcher && "to" in matcher) return diffDays(date, matcher.from) >= 0 && diffDays(matcher.to, date) >= 0;63  const m = matcher as { before?: Date; after?: Date };64  return (!!m.before && diffDays(date, m.before) < 0) || (!!m.after && diffDays(date, m.after) > 0);65}66​67/** The weeks shown for a month: whole weeks from the one holding the 1st. */68function weeksOf(month: Date, weekStartsOn: number) {69  const first = startOfMonth(month);70  const start = addDays(first, -((first.getDay() - weekStartsOn + 7) % 7));71  const weeks: Date[][] = [];72  for (let w = 0; w < 6; w++) {73    const week = Array.from({ length: 7 }, (_, i) => addDays(start, w * 7 + i));74    if (w > 3 && week[0].getMonth() !== month.getMonth()) break;75    weeks.push(week);76  }77  return weeks;78}79​80function Calendar(props: CalendarProps) {81  const { month: monthProp, defaultMonth, onMonthChange, numberOfMonths = 1, showOutsideDays = true, weekStartsOn = 0, disabled, captionLayout = "label", fromYear, toYear, locale, className, autoFocus } = props;82  const today = React.useMemo(() => day0(props.today ?? new Date()), [props.today]);83  const initial = (() => {84    if (props.mode === "range") return props.selected?.from;85    if (props.mode === "multiple") return props.selected?.[0];86    return props.selected;87  })();88  const [monthState, setMonthState] = React.useState(() => startOfMonth(defaultMonth ?? initial ?? today));89  const month = monthProp ? startOfMonth(monthProp) : monthState;90  const setMonth = (m: Date) => {91    const next = startOfMonth(m);92    if (!monthProp) setMonthState(next);93    onMonthChange?.(next);94  };95  const [focused, setFocused] = React.useState<Date | undefined>(undefined);96  const grid = React.useRef<HTMLDivElement>(null);97  const focusPending = React.useRef(!!autoFocus);98​99  const isDisabled = (d: Date) => (disabled ? (Array.isArray(disabled) && !(disabled[0] instanceof Date) ? (disabled as Matcher[]).some((m) => matches(d, m)) : matches(d, disabled as Matcher)) : false);100​101  const state = (d: Date) => {102    if (props.mode === "range") {103      const { from, to } = props.selected ?? { from: undefined };104      const start = sameDay(d, from);105      const end = sameDay(d, to ?? from);106      const middle = !!from && !!to && diffDays(d, from) > 0 && diffDays(to, d) > 0;107      return { selected: start || end || middle, start: start && !!to && !sameDay(from, to), end: end && !!to && !sameDay(from, to), middle };108    }109    if (props.mode === "multiple") return { selected: !!props.selected?.some((s) => sameDay(s, d)), start: false, end: false, middle: false };110    return { selected: sameDay(props.selected, d), start: false, end: false, middle: false };111  };112​113  const select = (d: Date) => {114    if (isDisabled(d)) return;115    if (props.mode === "range") {116      const cur = props.selected;117      if (!cur?.from || cur.to) {118        props.onSelect?.({ from: d, to: undefined });119        return;120      }121      const [from, to] = diffDays(d, cur.from) < 0 ? [d, cur.from] : [cur.from, d];122      const length = diffDays(to, from);123      if ((props.max && length > props.max) || (props.min && length < props.min)) {124        props.onSelect?.({ from: d, to: undefined });125        return;126      }127      props.onSelect?.({ from, to });128    } else if (props.mode === "multiple") {129      const cur = props.selected ?? [];130      const has = cur.some((s) => sameDay(s, d));131      if (has) props.onSelect?.(cur.filter((s) => !sameDay(s, d)));132      else if (!props.max || cur.length < props.max) props.onSelect?.([...cur, d]);133    } else {134      const p = props as SingleProps;135      p.onSelect?.(sameDay(p.selected, d) && !p.required ? undefined : d);136    }137    if (d.getMonth() !== month.getMonth() && numberOfMonths === 1) setMonth(d);138  };139​140  // The day that takes Tab focus in the grid: the focused day, else the selection, else today, else the 1st.141  const months = Array.from({ length: numberOfMonths }, (_, i) => addMonths(month, i));142  const inView = (d: Date) => months.some((m) => m.getMonth() === d.getMonth() && m.getFullYear() === d.getFullYear());143  const tabDay = [focused, initial, today, month].find((d) => d && inView(d))!;144​145  // Focus the moved-to day, or with autoFocus the day that takes Tab focus (the selection, else today) on mount.146  const target = focused ?? tabDay;147  React.useEffect(() => {148    if (!focusPending.current || !target) return;149    focusPending.current = false;150    grid.current?.querySelector<HTMLButtonElement>(`[data-day="${target.toDateString()}"]`)?.focus();151  }, [target, month]);152​153  const move = (d: Date) => {154    if (!inView(d)) setMonth(diffDays(d, month) < 0 ? d : addMonths(d, -(numberOfMonths - 1)));155    focusPending.current = true;156    setFocused(d);157  };158​159  const onKeyDown = (event: React.KeyboardEvent, d: Date) => {160    const weekStart = addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));161    const keys: Record<string, () => Date> = {162      ArrowLeft: () => addDays(d, -1),163      ArrowRight: () => addDays(d, 1),164      ArrowUp: () => addDays(d, -7),165      ArrowDown: () => addDays(d, 7),166      Home: () => weekStart,167      End: () => addDays(weekStart, 6),168      PageUp: () => addMonths(d, event.shiftKey ? -12 : -1),169      PageDown: () => addMonths(d, event.shiftKey ? 12 : 1),170    };171    const next = keys[event.key];172    if (!next) return;173    event.preventDefault();174    move(next());175  };176​177  const fmt = (opts: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, opts);178  const weekdayNames = Array.from({ length: 7 }, (_, i) => addDays(new Date(2023, 0, 1 + weekStartsOn), i));179  const years = (() => {180    const from = fromYear ?? today.getFullYear() - 100;181    const to = toYear ?? today.getFullYear() + 10;182    return Array.from({ length: to - from + 1 }, (_, i) => from + i);183  })();184​185  return (186    <div data-slot="calendar" className={cn("w-fit p-3 font-sans text-fg", className)}>187      <div ref={grid} className="flex flex-col gap-4 sm:flex-row">188        {months.map((m, index) => (189          <div key={m.toISOString()} data-slot="calendar-month" className="flex flex-col gap-3">190            <div data-slot="calendar-caption" className="relative flex h-8 items-center justify-center">191              {index === 0 && (192                <button type="button" aria-label="Go to the previous month" onClick={() => setMonth(addMonths(month, -1))} className={NAV_BUTTON + " absolute left-0"}>193                  <CaretLeftIcon />194                </button>195              )}196              {captionLayout === "dropdown" && index === 0 ? (197                <div className="flex items-center gap-1.5">198                  <CaptionSelect label="Month" value={m.getMonth()} onChange={(v) => setMonth(new Date(m.getFullYear(), v, 1))} options={Array.from({ length: 12 }, (_, i) => ({ value: i, label: fmt({ month: "short" }).format(new Date(2023, i, 1)) }))} />199                  <CaptionSelect label="Year" value={m.getFullYear()} onChange={(v) => setMonth(new Date(v, m.getMonth(), 1))} options={years.map((y) => ({ value: y, label: String(y) }))} />200                </div>201              ) : (202                <p aria-live="polite" className="text-body leading-tight font-medium text-fg">203                  {fmt({ month: "long", year: "numeric" }).format(m)}204                </p>205              )}206              {index === months.length - 1 && (207                <button type="button" aria-label="Go to the next month" onClick={() => setMonth(addMonths(month, 1))} className={NAV_BUTTON + " absolute right-0"}>208                  <CaretRightIcon />209                </button>210              )}211            </div>212            <table role="grid" aria-label={fmt({ month: "long", year: "numeric" }).format(m)} className="border-collapse">213              <thead>214                <tr>215                  {weekdayNames.map((w) => (216                    <th key={w.getDay()} scope="col" aria-label={fmt({ weekday: "long" }).format(w)} className="size-9 p-0 text-caption leading-tight font-normal text-fg-muted">217                      {fmt({ weekday: "short" }).format(w).slice(0, 2)}218                    </th>219                  ))}220                </tr>221              </thead>222              <tbody>223                {weeksOf(m, weekStartsOn).map((week) => (224                  <tr key={week[0].toISOString()} className="mt-0.5">225                    {week.map((d) => {226                      const outside = d.getMonth() !== m.getMonth();227                      if (outside && !showOutsideDays) return <td key={d.toISOString()} className="size-9 p-0" />;228                      const s = state(d);229                      const off = isDisabled(d);230                      return (231                        <td232                          key={d.toISOString()}233                          role="gridcell"234                          aria-selected={s.selected || undefined}235                          data-range-start={s.start || undefined}236                          data-range-end={s.end || undefined}237                          data-range-middle={s.middle || undefined}238                          className="relative size-9 p-0 py-0.5 text-center data-range-end:bg-[linear-gradient(to_left,transparent_50%,var(--ds-color-bg-subtle)_50%)] data-range-middle:bg-subtle data-range-start:bg-[linear-gradient(to_right,transparent_50%,var(--ds-color-bg-subtle)_50%)] data-range-start:[background-clip:content-box] data-range-end:[background-clip:content-box] data-range-middle:[background-clip:content-box]"239                        >240                          <CalendarDayButton241                            date={d}242                            label={fmt({ weekday: "long", month: "long", day: "numeric", year: "numeric" }).format(d)}243                            today={sameDay(d, today)}244                            outside={outside}245                            disabled={off}246                            selected={s.selected && !s.middle}247                            middle={s.middle}248                            tabIndex={sameDay(d, tabDay) && !outside ? 0 : -1}249                            onClick={() => select(d)}250                            onFocus={() => setFocused(d)}251                            onKeyDown={(e) => onKeyDown(e, d)}252                          />253                        </td>254                      );255                    })}256                  </tr>257                ))}258              </tbody>259            </table>260          </div>261        ))}262      </div>263    </div>264  );265}266​267const NAV_BUTTON =268  "inline-flex size-8 items-center justify-center rounded-control text-icon-secondary outline-none transition-[background-color,color,scale] duration-150 ease-out hover:bg-subtle hover:text-fg active:scale-97 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none [&_svg]:size-4";269​270function CaptionSelect({ label, value, options, onChange }: { label: string; value: number; options: { value: number; label: string }[]; onChange: (value: number) => void }) {271  return (272    <span className="relative inline-flex">273      <select274        aria-label={label}275        value={value}276        onChange={(e) => onChange(Number(e.target.value))}277        className="h-8 appearance-none rounded-control bg-surface pr-7 pl-2.5 font-sans text-body leading-tight font-medium text-fg shadow-s outline-none focus-visible:shadow-focus"278      >279        {options.map((o) => (280          <option key={o.value} value={o.value}>281            {o.label}282          </option>283        ))}284      </select>285      <CaretDownIcon aria-hidden className="pointer-events-none absolute top-1/2 right-2 size-3.5 -translate-y-1/2 text-fg" />286    </span>287  );288}289​290type DayButtonProps = Omit<React.ComponentProps<"button">, "children"> & { date: Date; label: string; today?: boolean; outside?: boolean; selected?: boolean; middle?: boolean };291​292/** One day: a 36px key with 8px corners. Exported so an app can render a day its own way inside the same grid. */293function CalendarDayButton({ date, label, today, outside, selected, middle, disabled, className, ...props }: DayButtonProps) {294  return (295    <button296      type="button"297      data-slot="calendar-day"298      data-day={date.toDateString()}299      data-today={today || undefined}300      data-outside={outside || undefined}301      data-selected={selected || undefined}302      data-range-middle={middle || undefined}303      aria-label={label}304      aria-pressed={selected || middle || undefined}305      aria-current={today ? "date" : undefined}306      disabled={disabled}307      className={cn(308        "relative mx-auto flex size-9 items-center justify-center rounded-control font-sans text-body leading-tight text-fg tabular-nums outline-none transition-[background-color,color,scale] duration-150 ease-out hover:bg-subtle active:scale-97 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:text-fg-faint disabled:line-through motion-reduce:transition-none",309        today && "font-medium text-fg-brand",310        outside && "text-fg-faint",311        middle && "rounded-none bg-transparent text-fg hover:bg-subtle-hover",312        selected && "bg-primary text-on-primary hover:bg-primary-hover",313        className,314      )}315      {...props}316    >317      {date.getDate()}318    </button>319  );320}321​322export { Calendar, CalendarDayButton };323export type { CalendarProps, DateRange };