@cahyo-dimas/freeday 3.7.0 → 3.9.0

package/adapters/react/components/FdyDatepicker.tsx

@@ -1,6 +1,31 @@
 import type { JSX } from 'react';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { usePopover } from '../usePopover';
+/* The month and year grids, which `FdyMonthpicker` reads from the same module. They were written
+   here and moved out when the month picker arrived: a second copy of the bounds rule is a second
+   place to fix it, and this release spent three items on exactly that failure in the panel-position
+   logic (#079). What the two components do differently with the grid stays in each of them, which
+   is one branch: whether choosing a month commits or walks down into its days. */
+import {
+  YEARS_PER_PAGE,
+  addMonths,
+  monthCells as buildMonthCells,
+  monthDisabled,
+  monthFormatters,
+  monthKeyIntent,
+  pageLocale,
+  parseISOMonth,
+  startOfDay,
+  startOfMonth,
+  toISOMonth,
+  yearCells as buildYearCells,
+  yearKeyIntent,
+  yearPageStart,
+  yearRangeLabel,
+  type FdyMonthCell,
+  type FdyMonthFormatters,
+  type FdyYearCell,
+} from '../../core/month-grid.js';
 
 // React port of adapters/vue/components/FdyDatepicker.vue over freeday's `.fdy-datepicker` /
 // `.fdy-cal__*` classes (see src/components/datepicker.css). Re-implements the single-date
@@ -9,6 +34,12 @@ import { usePopover } from '../usePopover';
 // (outside-click + focusout) mirrors the already-approved FdyCombo.tsx pattern. Range mode is
 // out of scope (v1 = single date).
 
+/** Which grid is on screen. The drill goes days -> months -> years and back down. */
+type CalendarLevel = 'days' | 'months' | 'years';
+
+/** What the picker answers with: a day (`YYYY-MM-DD`) or a whole month (`YYYY-MM`). */
+export type FdyDatepickerMode = 'day' | 'month';
+
 interface DayCell {
   date: Date;
   iso: string;
@@ -21,27 +52,20 @@ interface DayCell {
   focusable: boolean;
 }
 
-interface YearCell {
-  year: number;
-  selected: boolean;
-  today: boolean;
-  disabled: boolean;
-  focusable: boolean;
-}
-
-interface MonthCell {
-  index: number;
-  label: string;
-  ariaLabel: string;
-  selected: boolean;
-  today: boolean;
-  disabled: boolean;
-  focusable: boolean;
-}
-
 export interface FdyDatepickerProps {
+  /** ISO `YYYY-MM-DD`, or `YYYY-MM` when `mode` is `'month'`. `''`/`null` for empty. */
   value: string | null;
   onChange: (value: string) => void;
+  /**
+   * `'day'` (default) answers with a date. `'month'` opens on the month grid, stops there, and
+   * answers with `YYYY-MM`.
+   *
+   * @deprecated Use `FdyMonthpicker` for a month. This prop makes `value`, `min` and `max` carry
+   * two different formats while a *different* prop decides which, so the type cannot state what to
+   * store in them. `FdyMonthpicker` has one format per prop and no mode to read. Still works,
+   * unchanged, and removed in 4.0.
+   */
+  mode?: FdyDatepickerMode;
   min?: string;
   max?: string;
   locale?: string;
@@ -89,12 +113,6 @@ function parseISO(s: string | null | undefined): Date | null {
   const d: Date = new Date(y, m - 1, day);
   return Number.isNaN(d.getTime()) ? null : d;
 }
-function startOfDay(d: Date): Date {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-}
-function startOfMonth(d: Date): Date {
-  return new Date(d.getFullYear(), d.getMonth(), 1);
-}
 function sameDay(a: Date | null, b: Date | null): boolean {
   return a !== null && b !== null && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
@@ -103,11 +121,6 @@ function addDays(d: Date, n: number): Date {
   x.setDate(x.getDate() + n);
   return x;
 }
-function addMonths(d: Date, n: number): Date {
-  const x: Date = new Date(d);
-  x.setMonth(x.getMonth() + n);
-  return x;
-}
 
 function dayClassName(cell: DayCell): string {
   let cls = 'fdy-cal__day';
@@ -131,18 +144,23 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   // don't steal DOM focus off the button, matching the Vue template's behavior.
   const pendingFocusRef = useRef<string | null>(null);
 
+  const isMonthMode: boolean = props.mode === 'month';
+  /** Resolved once so every formatter below reads the same tag. */
+  const activeLocale: string = props.locale ?? pageLocale();
+  const parseValue = isMonthMode ? parseISOMonth : parseISO;
+
   const [open, setOpen] = useState<boolean>(false);
-  /* 'days' | 'months', the calendar drills one level up instead of growing furniture beside the
-     title. Before this the only pointer route to another month was one click per month. */
-  const [mode, setMode] = useState<'days' | 'months' | 'years'>('days');
+  /* Which grid is showing, and the calendar drills one level up instead of growing furniture beside
+     the title. Before this the only pointer route to another month was one click per month.
+     Named `level`, not `mode`: `mode` is the PROP that decides what the picker answers with.
+
+     Month mode has no level below months, so the day grid is unreachable by construction rather
+     than by every path remembering not to ask for it. */
+  const startLevel = (): CalendarLevel => (props.mode === 'month' ? 'months' : 'days');
+  const [level, setLevel] = useState<CalendarLevel>(startLevel);
   const [focusMonth, setFocusMonth] = useState<number>(0);
   const [focusYear, setFocusYear] = useState<number>(0);
 
-  /* A page of twelve years, ALIGNED so pages tile: 2016-2027, 2028-2039. Anchoring on the year in
-     view would make the arrows land on overlapping windows, and the same year would sit somewhere
-     different every step. */
-  const YEARS_PER_PAGE = 12;
-  const yearPageStart = (year: number): number => Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
   const monthRefs = useRef<Record<number, HTMLButtonElement | null>>({});
   const pendingMonthFocusRef = useRef<number | null>(null);
   const yearRefs = useRef<Record<number, HTMLButtonElement | null>>({});
@@ -157,13 +175,13 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     panelRef.current?.setAttribute('popover', 'manual');
   }, []);
 
-  const selectedDate: Date | null = useMemo((): Date | null => parseISO(props.value), [props.value]);
-  const minDate: Date | null = useMemo((): Date | null => parseISO(props.min), [props.min]);
-  const maxDate: Date | null = useMemo((): Date | null => parseISO(props.max), [props.max]);
+  const selectedDate: Date | null = useMemo((): Date | null => parseValue(props.value), [props.value, isMonthMode]);
+  const minDate: Date | null = useMemo((): Date | null => parseValue(props.min), [props.min, isMonthMode]);
+  const maxDate: Date | null = useMemo((): Date | null => parseValue(props.max), [props.max, isMonthMode]);
   const isDisabled: boolean = props.disabled === true;
   const isReadonly: boolean = props.readonly === true;
   const isInvalid: boolean = props.invalid === true;
-  const displayPlaceholder: string = props.placeholder ?? 'Select date';
+  const displayPlaceholder: string = props.placeholder ?? (isMonthMode ? 'Select month' : 'Select date');
   const showClear: boolean = props.clearable === true && selectedDate !== null && !isDisabled && !isReadonly;
   const chooseMonthLabelText: string = props.chooseMonthLabel ?? 'Choose month';
   const prevYearLabelText: string = props.prevYearLabel ?? 'Previous year';
@@ -171,20 +189,16 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const chooseYearLabelText: string = props.chooseYearLabel ?? 'Choose year';
   const prevYearsLabelText: string = props.prevYearsLabel ?? 'Previous years';
   const nextYearsLabelText: string = props.nextYearsLabel ?? 'Next years';
-  const monthCellFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'short' }),
-    [props.locale],
-  );
-  const monthNameFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }),
-    [props.locale],
+  const formatters: FdyMonthFormatters = useMemo(
+    (): FdyMonthFormatters => monthFormatters(activeLocale),
+    [activeLocale],
   );
   const prevMonthLabelText: string = props.prevMonthLabel ?? 'Previous month';
   const nextMonthLabelText: string = props.nextMonthLabel ?? 'Next month';
   const clearLabelText: string = props.clearLabel ?? 'Clear date';
 
-  const [viewMonth, setViewMonth] = useState<Date>((): Date => startOfMonth(parseISO(props.value) ?? new Date()));
-  const [focusDate, setFocusDate] = useState<Date>((): Date => parseISO(props.value) ?? new Date());
+  const [viewMonth, setViewMonth] = useState<Date>((): Date => startOfMonth(parseValue(props.value) ?? new Date()));
+  const [focusDate, setFocusDate] = useState<Date>((): Date => parseValue(props.value) ?? new Date());
 
   // Keep the roving-tabindex cell inside the visible month so the grid stays keyboard-reachable
   // after navigating with Home/End/PageUp/PageDown (mirrors freeday-datepicker.js's clamp).
@@ -195,23 +209,28 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   }, [focusDate, viewMonth]);
 
   const monthFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }),
-    [props.locale],
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(activeLocale, { month: 'long', year: 'numeric' }),
+    [activeLocale],
   );
   const valueFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { day: '2-digit', month: 'short', year: 'numeric' }),
-    [props.locale],
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(activeLocale, { day: '2-digit', month: 'short', year: 'numeric' }),
+    [activeLocale],
   );
   const dayLabelFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
-    [props.locale],
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(activeLocale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+    [activeLocale],
   );
   const dowFmt: Intl.DateTimeFormat = useMemo(
-    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'short' }),
-    [props.locale],
+    (): Intl.DateTimeFormat => new Intl.DateTimeFormat(activeLocale, { weekday: 'short' }),
+    [activeLocale],
   );
 
-  const displayValue: string = selectedDate !== null ? valueFmt.format(selectedDate) : displayPlaceholder;
+  /* Month mode shows the month through the SAME formatter the month cells and the day grid's title
+     already use, which is the whole point of the mode: <input type="month"> names the month in the
+     browser's language, this names it in the page's. */
+  const displayValue: string = selectedDate === null
+    ? displayPlaceholder
+    : (isMonthMode ? formatters.name : valueFmt).format(selectedDate);
 
   const weekdayHeaders: string[] = useMemo((): string[] => {
     const monday: Date = new Date(2024, 0, 1); // a known Monday
@@ -224,36 +243,22 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     return false;
   }
 
-  /** A month is only unreachable when the WHOLE month falls outside min/max, a range that sits
-   *  inside one month disables both ends while the middle is perfectly selectable. */
-  function isMonthDisabled(year: number, month: number): boolean {
-    const first: Date = new Date(year, month, 1);
-    const last: Date = new Date(year, month + 1, 0);
-    if (minDate !== null && startOfDay(last).getTime() < startOfDay(minDate).getTime()) return true;
-    if (maxDate !== null && startOfDay(first).getTime() > startOfDay(maxDate).getTime()) return true;
-    return false;
-  }
-
-  const monthCells: MonthCell[] = useMemo((): MonthCell[] => {
-    const year: number = viewMonth.getFullYear();
-    const today: Date = new Date();
-    const sel: Date | null = parseISO(props.value);
-    return Array.from({ length: 12 }, (_unused: unknown, index: number): MonthCell => {
-      const cellDate: Date = new Date(year, index, 1);
-      return {
-        index,
-        label: monthCellFmt.format(cellDate),
-        ariaLabel: monthNameFmt.format(cellDate),
-        selected: sel !== null && sel.getFullYear() === year && sel.getMonth() === index,
-        today: today.getFullYear() === year && today.getMonth() === index,
-        disabled: isMonthDisabled(year, index),
-        focusable: index === focusMonth,
-      };
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewMonth, props.value, focusMonth, monthCellFmt, monthNameFmt, minDate, maxDate]);
+  const monthCells: FdyMonthCell[] = useMemo((): FdyMonthCell[] => buildMonthCells({
+    year: viewMonth.getFullYear(),
+    selected: parseValue(props.value),
+    min: minDate,
+    max: maxDate,
+    focusMonth,
+    formatters,
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [viewMonth, props.value, focusMonth, formatters, minDate, maxDate]);
 
   const gridCells: DayCell[] = useMemo((): DayCell[] => {
+    /* Month mode never mounts this grid, and useMemo runs whether or not its result is read, so
+       without this every arrow key in the month grid would format forty two day labels through Intl
+       for cells nobody sees. Vue needs no such guard: a computed is lazy. */
+    if (isMonthMode) return [];
     const first: Date = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1);
     const offset: number = (first.getDay() + 6) % 7; // Monday-first
     const startCell: Date = addDays(first, -offset);
@@ -278,7 +283,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     // Deps intentionally mirror the port recipe, not every closure read: minDate/maxDate,
     // dayLabelFmt and effectiveFocusDate all derive deterministically from the listed deps
     // within the same render pass, so this stays in sync without listing them separately.
-  }, [viewMonth, props.value, props.min, props.max, props.locale]);
+  }, [viewMonth, props.value, props.min, props.max, activeLocale, isMonthMode]);
 
   // Focus the roving-tabindex cell after a render triggered by moveFocus/openPanel (React's
   // analogue of Vue's `nextTick(focusCell)`). Runs after every render; cheap no-op otherwise.
@@ -305,10 +310,27 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
 
   function openMonthGrid(): void {
     setFocusMonth(viewMonth.getMonth());
-    setMode('months');
+    setLevel('months');
     pendingMonthFocusRef.current = viewMonth.getMonth();
   }
 
+  /* What a month cell DOES, decided in one place for the click handler and the Enter key alike. In
+     day mode a month is a step on the way down; in month mode it is the answer. */
+  function chooseMonth(index: number): void {
+    if (isMonthMode) pickMonth(index);
+    else openMonth(index);
+  }
+
+  function pickMonth(index: number): void {
+    const year: number = viewMonth.getFullYear();
+    if (monthDisabled(year, index, minDate, maxDate)) return;
+    const first: Date = new Date(year, index, 1);
+    setFocusMonth(index);
+    setFocusDate(first);
+    props.onChange(toISOMonth(first));
+    closePanel(true);
+  }
+
   /* Picking a month is NAVIGATION, not selection: back to the day grid with the roving cell clamped
      into the new month, so nothing is committed until a day is chosen. */
   function openMonth(index: number): void {
@@ -317,47 +339,33 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     const next: Date = new Date(year, index, Math.min(focusDate.getDate(), daysInMonth));
     setViewMonth(new Date(year, index, 1));
     setFocusDate(next);
-    setMode('days');
+    setLevel('days');
     pendingFocusRef.current = toISO(next);
   }
 
+  /** `index` is already 0-11: the wrap lives in `monthKeyIntent`, so it is applied in one place. */
   function moveMonthFocus(index: number, yearDelta: number): void {
     if (yearDelta !== 0) setViewMonth(addMonths(viewMonth, yearDelta * 12));
-    const next: number = (index + 12) % 12;
-    setFocusMonth(next);
-    pendingMonthFocusRef.current = next;
-  }
-
-  /** A year is unreachable only when EVERY month in it falls outside min/max. */
-  function isYearDisabled(year: number): boolean {
-    if (minDate !== null && startOfDay(new Date(year, 11, 31)).getTime() < startOfDay(minDate).getTime()) return true;
-    if (maxDate !== null && startOfDay(new Date(year, 0, 1)).getTime() > startOfDay(maxDate).getTime()) return true;
-    return false;
+    setFocusMonth(index);
+    pendingMonthFocusRef.current = index;
   }
 
   const yearPage: number = yearPageStart(focusYear);
-  const yearRangeLabel: string = `${yearPage} – ${yearPage + YEARS_PER_PAGE - 1}`;
-
-  const yearCells: YearCell[] = useMemo((): YearCell[] => {
-    const start: number = yearPageStart(focusYear);
-    const thisYear: number = new Date().getFullYear();
-    const sel: Date | null = parseISO(props.value);
-    return Array.from({ length: YEARS_PER_PAGE }, (_unused: unknown, index: number): YearCell => {
-      const year: number = start + index;
-      return {
-        year,
-        selected: sel !== null && sel.getFullYear() === year,
-        today: thisYear === year,
-        disabled: isYearDisabled(year),
-        focusable: year === focusYear,
-      };
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [focusYear, props.value, minDate, maxDate]);
+  const yearRangeText: string = yearRangeLabel(yearPage);
+
+  const yearCells: FdyYearCell[] = useMemo((): FdyYearCell[] => buildYearCells({
+    pageStart: yearPageStart(focusYear),
+    selected: parseValue(props.value),
+    min: minDate,
+    max: maxDate,
+    focusYear,
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [focusYear, props.value, minDate, maxDate]);
 
   function openYearGrid(): void {
     setFocusYear(viewMonth.getFullYear());
-    setMode('years');
+    setLevel('years');
     pendingYearFocusRef.current = viewMonth.getFullYear();
   }
 
@@ -366,7 +374,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   function openYear(year: number): void {
     setViewMonth(new Date(year, viewMonth.getMonth(), 1));
     setFocusMonth(viewMonth.getMonth());
-    setMode('months');
+    setLevel('months');
     pendingMonthFocusRef.current = viewMonth.getMonth();
   }
 
@@ -377,41 +385,22 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   }
 
   function onYearKeydown(e: React.KeyboardEvent): void {
-    let handled: boolean = true;
-    switch (e.key) {
-      case 'ArrowLeft': moveYearFocus(focusYear - 1); break;
-      case 'ArrowRight': moveYearFocus(focusYear + 1); break;
-      case 'ArrowUp': moveYearFocus(focusYear - 3); break;
-      case 'ArrowDown': moveYearFocus(focusYear + 3); break;
-      case 'Home': moveYearFocus(yearPageStart(focusYear)); break;
-      case 'End': moveYearFocus(yearPageStart(focusYear) + YEARS_PER_PAGE - 1); break;
-      case 'PageUp': moveYearFocus(focusYear - YEARS_PER_PAGE); break;
-      case 'PageDown': moveYearFocus(focusYear + YEARS_PER_PAGE); break;
-      case 'Enter':
-      case ' ': openYear(focusYear); break;
-      case 'Escape': closePanel(true); break;
-      default: handled = false;
-    }
-    if (handled) { e.preventDefault(); e.stopPropagation(); }
+    const intent = yearKeyIntent(e.key, focusYear);
+    if (intent.action === 'none') return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (intent.action === 'focus') moveYearFocus(intent.year);
+    else if (intent.action === 'choose') openYear(intent.year);
+    else closePanel(true);
   }
 
   function onMonthKeydown(e: React.KeyboardEvent): void {
-    let handled: boolean = true;
-    switch (e.key) {
-      case 'ArrowLeft': moveMonthFocus(focusMonth - 1, 0); break;
-      case 'ArrowRight': moveMonthFocus(focusMonth + 1, 0); break;
-      case 'ArrowUp': moveMonthFocus(focusMonth - 3, 0); break;
-      case 'ArrowDown': moveMonthFocus(focusMonth + 3, 0); break;
-      case 'Home': moveMonthFocus(0, 0); break;
-      case 'End': moveMonthFocus(11, 0); break;
-      case 'PageUp': moveMonthFocus(focusMonth, -1); break;
-      case 'PageDown': moveMonthFocus(focusMonth, 1); break;
-      case 'Enter':
-      case ' ': openMonth(focusMonth); break;
-      case 'Escape': closePanel(true); break;
-      default: handled = false;
-    }
-    if (handled) e.preventDefault();
+    const intent = monthKeyIntent(e.key, focusMonth);
+    if (intent.action === 'none') return;
+    e.preventDefault();
+    if (intent.action === 'focus') moveMonthFocus(intent.index, intent.yearDelta);
+    else if (intent.action === 'choose') chooseMonth(intent.index);
+    else closePanel(true);
   }
 
   function moveFocus(next: Date): void {
@@ -441,7 +430,16 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     const next: Date = selectedDate ?? focusDate ?? new Date();
     setFocusDate(next);
     setViewMonth(new Date(next.getFullYear(), next.getMonth(), 1));
+    /* Reopening starts at the mode's own floor. Without this a month picker that drilled to the
+       year grid and was dismissed would open on years the next time, and a keyboard user would
+       land on a grid that cannot answer. */
+    setLevel(startLevel());
     setOpen(true);
+    if (isMonthMode) {
+      setFocusMonth(next.getMonth());
+      pendingMonthFocusRef.current = next.getMonth();
+      return;
+    }
     pendingFocusRef.current = toISO(next);
   }
 
@@ -575,10 +573,10 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
           <button
             type="button"
             className="fdy-cal__nav"
-            aria-label={mode === 'years' ? prevYearsLabelText : mode === 'months' ? prevYearLabelText : prevMonthLabelText}
+            aria-label={level === 'years' ? prevYearsLabelText : level === 'months' ? prevYearLabelText : prevMonthLabelText}
             onClick={(): void => {
-              if (mode === 'years') moveYearFocus(focusYear - YEARS_PER_PAGE);
-              else if (mode === 'months') moveMonthFocus(focusMonth, -1);
+              if (level === 'years') moveYearFocus(focusYear - YEARS_PER_PAGE);
+              else if (level === 'months') moveMonthFocus(focusMonth, -1);
               else setViewMonth(addMonths(viewMonth, -1));
             }}
           >
@@ -588,27 +586,27 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
             id={titleId}
             type="button"
             className="fdy-cal__title"
-            aria-label={mode === 'years' ? undefined : mode === 'months' ? chooseYearLabelText : chooseMonthLabelText}
-            onClick={(): void => { if (mode === 'months') openYearGrid(); else openMonthGrid(); }}
+            aria-label={level === 'years' ? undefined : level === 'months' ? chooseYearLabelText : chooseMonthLabelText}
+            onClick={(): void => { if (level === 'months') openYearGrid(); else openMonthGrid(); }}
           >
-            {mode === 'years' ? yearRangeLabel : mode === 'months' ? String(viewMonth.getFullYear()) : monthFmt.format(viewMonth)}
+            {level === 'years' ? yearRangeText : level === 'months' ? String(viewMonth.getFullYear()) : monthFmt.format(viewMonth)}
           </button>
           <button
             type="button"
             className="fdy-cal__nav"
-            aria-label={mode === 'years' ? nextYearsLabelText : mode === 'months' ? nextYearLabelText : nextMonthLabelText}
+            aria-label={level === 'years' ? nextYearsLabelText : level === 'months' ? nextYearLabelText : nextMonthLabelText}
             onClick={(): void => {
-              if (mode === 'years') moveYearFocus(focusYear + YEARS_PER_PAGE);
-              else if (mode === 'months') moveMonthFocus(focusMonth, 1);
+              if (level === 'years') moveYearFocus(focusYear + YEARS_PER_PAGE);
+              else if (level === 'months') moveMonthFocus(focusMonth, 1);
               else setViewMonth(addMonths(viewMonth, 1));
             }}
           >
             &rsaquo;
           </button>
         </div>
-        {mode === 'years' ? (
+        {level === 'years' ? (
           <div className="fdy-cal__grid fdy-cal__grid--years" role="grid" aria-labelledby={titleId} onKeyDown={onYearKeydown}>
-            {yearCells.map((cell: YearCell) => (
+            {yearCells.map((cell: FdyYearCell): JSX.Element => (
               <button
                 key={cell.year}
                 ref={(el: HTMLButtonElement | null): void => { yearRefs.current[cell.year] = el; }}
@@ -625,9 +623,9 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
               </button>
             ))}
           </div>
-        ) : mode === 'months' ? (
+        ) : level === 'months' ? (
           <div className="fdy-cal__grid fdy-cal__grid--months" role="grid" aria-labelledby={titleId} onKeyDown={onMonthKeydown}>
-            {monthCells.map((cell: MonthCell) => (
+            {monthCells.map((cell: FdyMonthCell): JSX.Element => (
               <button
                 key={cell.index}
                 ref={(el: HTMLButtonElement | null): void => { monthRefs.current[cell.index] = el; }}
@@ -638,7 +636,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
                 aria-selected={cell.selected ? true : undefined}
                 disabled={cell.disabled}
                 tabIndex={cell.focusable ? 0 : -1}
-                onClick={(): void => openMonth(cell.index)}
+                onClick={(): void => chooseMonth(cell.index)}
               >
                 {cell.label}
               </button>