@transferwise/components 46.156.0 → 46.157.0

package/src/Calendar/Calendar.tsx

@@ -1,40 +1,91 @@
-import { useState, useCallback, useEffect, KeyboardEvent } from 'react';
+import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';
+import { useIntl } from 'react-intl';
+import { formatDate } from '@transferwise/formatting';
 
 import { MonthFormat } from '../common';
 import { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';
+import { clampToDayViewBoundary, isDateDisabled, hasDisabledDatesInMonth } from './_helpers';
+import { LONG_DAY_FORMAT } from './Calendar.constants';
+import { InlinePrompt } from '../Prompt/InlinePrompt';
+import type { DateChangeMeta, DisabledRules } from './Calendar.types';
 import DayCalendar from './DayCalendar';
 import { getStartOfDay } from './GetStartOfDay';
+import messages from './Calendar.messages';
 import MonthCalendar from './MonthCalendar';
 import YearCalendar from './YearCalendar';
 
 export interface CalendarProps {
+  /** The currently selected date, or `null` for no selection. */
   value: Date | null;
+  /** Earliest selectable date (inclusive). Dates before this are interactive but not selectable, and show a boundary prompt. */
   min?: Date | null;
+  /** Latest selectable date (inclusive). Dates after this are interactive but not selectable, and show a boundary prompt. */
   max?: Date | null;
+  /** Month name format in the header. Defaults to `'long'` (e.g. "January"). */
   monthFormat?: `${MonthFormat}`;
+  /** Placeholder text shown in the month/year cells when no date is selected. */
   placeholder?: string;
-  onChange: (date: Date | null) => void;
-  onSelect?: (date: Date) => void;
+  /** Rules for disabling specific weekdays, individual dates, or date ranges. The required `reason` is shown in an inline prompt and linked to disabled cells via `aria-describedby` for screen reader accessibility. */
+  disabledRules?: DisabledRules;
+  /** Called whenever the focused date changes — including disabled and out-of-range dates. `meta.isEnabled` is `false` when the date is not selectable. */
+  onDateFocus?: (date: Date | null, meta: DateChangeMeta) => void;
+  /** Called when a date is confirmed (click or Enter). Only fires for enabled dates. */
+  onChange?: (date: Date | null) => void;
 }
 
+/**
+ * Temporary toggle — set `true` to restore strict min/max keyboard clamping.
+ * @see https://transferwise.atlassian.net/browse/DS-8518
+ */
+const STRICT_KEYBOARD_CLAMPING = false;
+
+/**
+ * Inline calendar for selecting a single date. Powers [DateLookup](?path=/docs/forms-datelookup--docs).
+ */
 const Calendar = ({
   value,
   min: minProp = null,
   max: maxProp = null,
   monthFormat = MonthFormat.LONG,
   placeholder,
+  disabledRules,
+  onDateFocus,
   onChange,
-  onSelect,
 }: CalendarProps) => {
+  const intl = useIntl();
   const selectedDate = getStartOfDay(value);
   const min = getStartOfDay(minProp);
   const max = getStartOfDay(maxProp);
+  const disabledReasonId = useId();
+  const disabledRulesRef = useRef(disabledRules);
+  useEffect(() => {
+    disabledRulesRef.current = disabledRules;
+  });
+
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [focusedDate, setFocusedDate] = useState<Date | null>(selectedDate);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setFocusedDate(selectedDate);
+  }, [selectedDate?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const checkIsEnabled = (date: Date | null) => {
+    if (!date) return true;
+    return isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);
+  };
+
+  const focusedDateDisabled = focusedDate
+    ? !isWithinRange(focusedDate, min, max) || isDateDisabled(focusedDate, disabledRules)
+    : false;
 
   useEffect(() => {
     if (selectedDate && !isWithinRange(selectedDate, min, max)) {
-      onChange(moveToWithinRange(selectedDate, min, max));
+      const clamped = moveToWithinRange(selectedDate, min, max);
+      setFocusedDate(clamped); // eslint-disable-line react-hooks/set-state-in-effect
+      onDateFocus?.(clamped, { isEnabled: checkIsEnabled(clamped) });
     }
-  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onDateFocus]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const dateView = returnDateView(selectedDate, min, max);
   const [viewMonth, setViewMonth] = useState(dateView.getMonth());
@@ -49,11 +100,20 @@ const Calendar = ({
     setViewYear(view.getFullYear());
   }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (focusedDate) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setViewMonth(focusedDate.getMonth());
+      setViewYear(focusedDate.getFullYear());
+    }
+  }, [focusedDate?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleViewDateUpdate = useCallback(
     // eslint-disable-next-line react-hooks/preserve-manual-memoization
     ({ month, year }: { month?: number; year?: number }) => {
       if (month !== undefined) setViewMonth(month);
       if (year !== undefined) setViewYear(year);
+      setHasInteracted(false);
     },
     [],
   );
@@ -64,33 +124,63 @@ const Calendar = ({
 
   const handleSelectedDateUpdate = useCallback(
     (date: Date) => {
-      if (onSelect) {
-        onSelect(date);
-      } else {
+      if (!hasInteracted) setHasInteracted(true);
+      const isEnabled = checkIsEnabled(date);
+      setFocusedDate(date);
+      onDateFocus?.(date, { isEnabled });
+      if (isEnabled && onChange) {
         onChange(date);
       }
     },
-    [onChange, onSelect],
+    [onDateFocus, onChange], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const adjustDate = useCallback(
     (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
+      const base = focusedDate ?? selectedDate;
       let date: Date | null;
-      if (selectedDate) {
+      if (base) {
         date = new Date(
-          mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),
-          mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),
-          mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),
+          mode === 'year' ? base.getFullYear() + yearsToAdd : base.getFullYear(),
+          mode === 'month' ? base.getMonth() + monthsToAdd : base.getMonth(),
+          mode === 'day' ? base.getDate() + daysToAdd : base.getDate(),
         );
       } else {
         date = getStartOfDay(new Date());
       }
-      date &&= moveToWithinRange(date, min, max);
-      if (date?.getTime() !== selectedDate?.getTime()) {
-        onChange(date);
+      date &&=
+        STRICT_KEYBOARD_CLAMPING || mode !== 'day'
+          ? moveToWithinRange(date, min, max)
+          : clampToDayViewBoundary(date, min, max);
+      if (date?.getTime() !== focusedDate?.getTime()) {
+        const monthChanged = date
+          ? date.getMonth() !== focusedDate?.getMonth() ||
+            date.getFullYear() !== focusedDate?.getFullYear()
+          : false;
+        setFocusedDate(date);
+        if (date) {
+          setViewMonth(date.getMonth());
+          setViewYear(date.getFullYear());
+        }
+        if (monthChanged) {
+          setHasInteracted(false);
+        } else if (!hasInteracted) {
+          setHasInteracted(true);
+        }
+        onDateFocus?.(date, { isEnabled: checkIsEnabled(date) });
       }
     },
-    [selectedDate, min, max, mode, onChange],
+    [focusedDate, selectedDate, min, max, mode, onDateFocus], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const handleDayFocus = useCallback(
+    (date: Date) => {
+      if (date.getTime() !== focusedDate?.getTime()) {
+        setFocusedDate(date);
+        onDateFocus?.(date, { isEnabled: checkIsEnabled(date) });
+      }
+    },
+    [focusedDate, onDateFocus], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const handleKeyDown = useCallback(
@@ -112,25 +202,73 @@ const Calendar = ({
           adjustDate(7, 4, 4);
           event.preventDefault();
           break;
+        case 'Enter':
+        case ' ':
+          if (
+            mode === 'day' &&
+            focusedDate &&
+            (event.target as HTMLElement).hasAttribute('data-calendar-cell')
+          ) {
+            handleSelectedDateUpdate(focusedDate);
+            event.preventDefault();
+          }
+          break;
         default:
           break;
       }
     },
-    [adjustDate],
+    [adjustDate, focusedDate, mode, handleSelectedDateUpdate],
   );
 
+  const focusedDateOutOfRange = focusedDate ? !isWithinRange(focusedDate, min, max) : false;
+
+  const formatDateForPrompt = (date: Date) => formatDate(date, intl.locale, LONG_DAY_FORMAT);
+
+  const outOfRangePromptText =
+    min && max
+      ? intl.formatMessage(messages.outOfRangeBetween, {
+          min: formatDateForPrompt(min),
+          max: formatDateForPrompt(max),
+        })
+      : min
+        ? intl.formatMessage(messages.outOfRangeAfter, { min: formatDateForPrompt(min) })
+        : max
+          ? intl.formatMessage(messages.outOfRangeBefore, { max: formatDateForPrompt(max) })
+          : '';
+
+  const hasOutOfRangeDates = mode === 'day' && !!(min || max);
+  const showRulesPrompt =
+    mode === 'day' &&
+    !!disabledRules &&
+    hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);
+  const showOutOfRangePrompt = mode === 'day' && focusedDateOutOfRange;
+  const showPrompt = hasOutOfRangeDates || showRulesPrompt;
+
+  const promptText = showOutOfRangePrompt
+    ? outOfRangePromptText
+    : (disabledRules?.reason ?? outOfRangePromptText);
+  const promptSentiment = showOutOfRangePrompt || focusedDateDisabled ? 'negative' : 'neutral';
+  // Visible when there's an actionable message; sr-only when only hasOutOfRangeDates is true
+  // (prompt exists for aria-describedby but no visual cue needed until an out-of-range date is focused)
+  const promptClassName = showOutOfRangePrompt || showRulesPrompt ? 'm-t-1' : 'sr-only';
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onKeyDown={handleKeyDown}>
       {mode === 'day' && (
         <DayCalendar
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewMonth={viewMonth}
           viewYear={viewYear}
           monthFormat={monthFormat}
+          disabledRules={disabledRules}
+          disabledReasonId={showPrompt ? disabledReasonId : undefined}
+          announceReasonOnFocus={!hasInteracted}
           onSelect={handleSelectedDateUpdate}
+          onDayFocus={handleDayFocus}
           onLabelClick={switchToYears}
           onViewDateUpdate={handleViewDateUpdate}
         />
@@ -138,6 +276,7 @@ const Calendar = ({
       {mode === 'month' && (
         <MonthCalendar
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewYear={viewYear}
@@ -150,6 +289,7 @@ const Calendar = ({
       {mode === 'year' && (
         <YearCalendar
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewYear={viewYear}
@@ -158,6 +298,16 @@ const Calendar = ({
           onViewDateUpdate={handleViewDateUpdate}
         />
       )}
+      {showPrompt && (
+        <InlinePrompt
+          sentiment={promptSentiment}
+          width="full"
+          id={disabledReasonId}
+          className={promptClassName}
+        >
+          {promptText}
+        </InlinePrompt>
+      )}
     </div>
   );
 };

package/src/Calendar/Calendar.types.ts

@@ -0,0 +1,35 @@
+export interface DisabledDateRange {
+  start: Date;
+  end: Date;
+}
+
+export type WeekDayType = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+
+export interface DisabledRules {
+  /** Days of the week to disable (e.g. `['sat', 'sun']` for weekends). */
+  weekdays?: WeekDayType[];
+  /** Specific calendar dates to disable. */
+  dates?: Date[];
+  /** Inclusive date ranges to disable. */
+  ranges?: DisabledDateRange[];
+  /**
+   * Human-readable explanation shown in an InlinePrompt below the calendar grid when
+   * disabled dates exist in the current month. Required for accessibility: it is linked
+   * to disabled cells via `aria-describedby` so screen reader users understand why a
+   * date is unavailable. When an out-of-range date is focused, the built-in boundary
+   * message takes precedence over this text.
+   */
+  reason: string;
+}
+
+export interface DateChangeMeta {
+  /** Whether the focused date is selectable (not disabled or out of range). */
+  isEnabled: boolean;
+}
+
+export interface OnDateSelectParams {
+  /** The date that was focused or clicked. */
+  date: Date;
+  /** Whether the date is selectable (not disabled or out of range). */
+  isEnabled: boolean;
+}

package/src/Calendar/DateHeader/DateHeader.tsx

@@ -15,6 +15,8 @@ interface DateHeaderProps {
   onPreviousClick: () => void;
   onNextClick: () => void;
   dateMode: string;
+  isPreviousDisabled?: boolean;
+  isNextDisabled?: boolean;
 }
 
 const DateHeader: React.FC<DateHeaderProps> = ({
@@ -23,6 +25,8 @@ const DateHeader: React.FC<DateHeaderProps> = ({
   onPreviousClick,
   onNextClick,
   dateMode,
+  isPreviousDisabled,
+  isNextDisabled,
 }) => {
   const intl = useIntl();
   const { isMobile } = useLayout();
@@ -34,6 +38,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           priority="minimal"
           className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
+          disabled={isPreviousDisabled}
           onClick={onPreviousClick}
         >
           <ChevronLeft className="left-single-direction" />
@@ -61,6 +66,7 @@ const DateHeader: React.FC<DateHeaderProps> = ({
           className="d-inline-flex"
           aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}
           priority="minimal"
+          disabled={isNextDisabled}
           onClick={onNextClick}
         >
           <ChevronRight className="right-single-direction" />

package/src/Calendar/DayCalendar/DayCalendar.tsx

@@ -2,6 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
 
 import { MonthFormat } from '../../common';
+import type { DisabledRules } from '../Calendar.types';
 import messages from '../Calendar.messages';
 import DateHeader from '../DateHeader';
 
@@ -10,12 +11,17 @@ import { injectIntl, type WrappedComponentProps } from '../../common/injectIntl'
 
 interface DayCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewMonth: number;
   viewYear: number;
   monthFormat: `${MonthFormat}`;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
+  announceReasonOnFocus?: boolean;
   onSelect: (date: Date) => void;
+  onDayFocus?: (date: Date) => void;
   onLabelClick: () => void;
   onViewDateUpdate: (date: { month: number; year: number }) => void;
 }
@@ -40,15 +46,31 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewMonth,
       viewYear,
       intl: { locale, formatMessage },
       monthFormat,
+      disabledRules,
+      disabledReasonId,
+      announceReasonOnFocus,
       onLabelClick,
       onSelect,
+      onDayFocus,
     } = this.props;
+    const prevMonth = viewMonth <= 0 ? 11 : viewMonth - 1;
+    const prevYear = viewMonth <= 0 ? viewYear - 1 : viewYear;
+    const nextMonth = viewMonth >= 11 ? 0 : viewMonth + 1;
+    const nextYear = viewMonth >= 11 ? viewYear + 1 : viewYear;
+    const isPreviousDisabled = !!(
+      min && new Date(prevYear, prevMonth) < new Date(min.getFullYear(), min.getMonth())
+    );
+    const isNextDisabled = !!(
+      max && new Date(nextYear, nextMonth) > new Date(max.getFullYear(), max.getMonth())
+    );
+
     return (
       <>
         <DateHeader
@@ -57,11 +79,27 @@ class DayCalendar extends PureComponent<DayCalendarProps> {
             year: 'numeric',
           })}
           dateMode={formatMessage(messages.month)}
+          isPreviousDisabled={isPreviousDisabled}
+          isNextDisabled={isNextDisabled}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousMonth}
           onNextClick={this.selectNextMonth}
         />
-        <DayCalendarTable {...{ selectedDate, min, max, viewMonth, viewYear, onSelect }} />
+        <DayCalendarTable
+          {...{
+            selectedDate,
+            focusedDate,
+            min,
+            max,
+            viewMonth,
+            viewYear,
+            disabledRules,
+            disabledReasonId,
+            announceReasonOnFocus,
+            onSelect,
+            onDayFocus,
+          }}
+        />
       </>
     );
   }

package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx

@@ -3,19 +3,27 @@ import { PureComponent } from 'react';
 import { injectIntl, type WrappedComponentProps } from '../../../common/injectIntl';
 
 import { getDayNames, isWithinRange } from '../../../common/DateUtils';
+import { isDateDisabled } from '../../_helpers';
+import { LONG_DAY_FORMAT } from '../../Calendar.constants';
+import type { DisabledRules } from '../../Calendar.types';
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
 import { getStartOfDay } from '../../GetStartOfDay';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 const SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };
 
 interface DayCalendarTableProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewMonth: number;
   viewYear: number;
+  disabledRules?: DisabledRules;
+  disabledReasonId?: string;
+  announceReasonOnFocus?: boolean;
   onSelect: (date: Date) => void;
+  onDayFocus?: (date: Date) => void;
 }
 
 class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
@@ -63,21 +71,41 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
     onSelect(new Date(viewYear, viewMonth, day));
   };
 
-  isDisabled = (day: number) => {
+  focusDay = (day: number) => {
+    const { viewMonth, viewYear, onDayFocus } = this.props;
+    onDayFocus?.(new Date(viewYear, viewMonth, day));
+  };
+
+  isOutOfRange = (day: number) => {
     if (day < 0) {
       return true;
     }
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
-
     return !isWithinRange(date, min, max);
   };
 
+  isDisabled = (day: number) => {
+    if (day < 0) {
+      return false;
+    }
+    const { viewMonth, viewYear, disabledRules } = this.props;
+    const date = new Date(viewYear, viewMonth, day);
+    return isDateDisabled(date, disabledRules);
+  };
+
+  isUnavailable = (day: number) => this.isOutOfRange(day) || this.isDisabled(day);
+
   isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
     return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
   };
 
+  isFocused = (day: number) => {
+    const { focusedDate, viewMonth, viewYear } = this.props;
+    return !!(focusedDate && Number(new Date(viewYear, viewMonth, day)) === Number(focusedDate));
+  };
+
   isToday = (day: number) => {
     const { viewMonth, viewYear } = this.props;
     return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
@@ -86,15 +114,15 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   getAutofocusDay = (weeks: number[][]) => {
     const days = weeks.flatMap((week) => week);
     return getFocusableTime({
-      isActive: this.isActive,
+      isActive: this.isFocused,
       isNow: this.isToday,
-      isDisabled: this.isDisabled,
+      isDisabled: this.isUnavailable,
       timeSpan: days,
     });
   };
 
   render() {
-    const { viewMonth, viewYear, intl } = this.props;
+    const { viewMonth, viewYear, intl, disabledReasonId, announceReasonOnFocus } = this.props;
     const weeks = this.getTableStructure();
     const autoFocusDay = this.getAutofocusDay(weeks);
     return (
@@ -124,27 +152,39 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
           {/* eslint-disable react/no-array-index-key */}
           {weeks.map((week, weekIndex) => (
             <tr key={weekIndex}>
-              {week.map((day, dayIndex) => (
-                <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
-                  {day !== -1 && (
-                    <TableLink
-                      item={day}
-                      type="day"
-                      title={formatDate(
-                        new Date(viewYear, viewMonth, day),
-                        intl.locale,
-                        SHORT_DAY_FORMAT,
-                      )}
-                      autofocus={day === autoFocusDay}
-                      longTitle={formatDate(new Date(viewYear, viewMonth, day), intl.locale)}
-                      active={this.isActive(day)}
-                      disabled={this.isDisabled(day)}
-                      today={this.isToday(day)}
-                      onClick={this.selectDay}
-                    />
-                  )}
-                </td>
-              ))}
+              {week.map((day, dayIndex) => {
+                const dayOutOfRange = this.isOutOfRange(day);
+                const dayDisabled = this.isDisabled(day);
+                return (
+                  <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>
+                    {day !== -1 && (
+                      <TableLink
+                        item={day}
+                        type="day"
+                        title={formatDate(
+                          new Date(viewYear, viewMonth, day),
+                          intl.locale,
+                          SHORT_DAY_FORMAT,
+                        )}
+                        autofocus={day === autoFocusDay}
+                        longTitle={formatDate(
+                          new Date(viewYear, viewMonth, day),
+                          intl.locale,
+                          LONG_DAY_FORMAT,
+                        )}
+                        active={this.isActive(day)}
+                        outOfRange={dayOutOfRange}
+                        disabled={dayDisabled}
+                        today={this.isToday(day)}
+                        disabledReasonId={disabledReasonId}
+                        announceReasonOnFocus={announceReasonOnFocus}
+                        onClick={this.selectDay}
+                        onFocus={this.focusDay}
+                      />
+                    )}
+                  </td>
+                );
+              })}
             </tr>
           ))}
           {/* eslint-enable react/no-array-index-key */}

package/src/Calendar/MonthCalendar/MonthCalendar.tsx

@@ -9,6 +9,7 @@ import MonthCalendarTable from './Table';
 
 interface MonthCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -35,6 +36,7 @@ class MonthCalendar extends PureComponent<MonthCalendarProps> {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewYear,
@@ -42,17 +44,23 @@ class MonthCalendar extends PureComponent<MonthCalendarProps> {
       placeholder,
       onLabelClick,
     } = this.props;
+    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());
+    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());
+
     return (
       <>
         <DateHeader
           dateMode={formatMessage(messages.year)}
           label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}
+          isPreviousDisabled={isPreviousDisabled}
+          isNextDisabled={isNextDisabled}
           onLabelClick={onLabelClick}
           onPreviousClick={this.selectPreviousYear}
           onNextClick={this.selectNextYear}
         />
         <MonthCalendarTable
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewYear={viewYear}