@transferwise/components 0.0.0-experimental-15273df → 0.0.0-experimental-d6d5b6e

package/build/Calendar/Calendar.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactIntl = require('react-intl');
+var formatting = require('@transferwise/formatting');
 require('../common/theme.js');
 require('../common/direction.js');
 require('@transferwise/neptune-tokens');
@@ -22,17 +24,19 @@ require('../common/PropsValues/variant.js');
 require('../common/PropsValues/scroll.js');
 require('../common/PropsValues/markdownNodeType.js');
 require('../common/fileType.js');
-require('@transferwise/formatting');
 require('@transferwise/icons');
 require('clsx');
-require('react-intl');
 require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var moveToWithinRange = require('../common/DateUtils/moveToWithinRange/moveToWithinRange.js');
 var isWithinRange = require('../common/DateUtils/isWithinRange/isWithinRange.js');
 var getDateView = require('../common/DateUtils/getDateView/getDateView.js');
+var isDateDisabled = require('../common/DateUtils/isDateDisabled/isDateDisabled.js');
+var hasDisabledDatesInMonth = require('../common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.js');
+var InlinePrompt = require('../Prompt/InlinePrompt/InlinePrompt.js');
 var DayCalendar = require('./DayCalendar/DayCalendar.js');
 var GetStartOfDay = require('./GetStartOfDay/GetStartOfDay.js');
+var Calendar_messages = require('./Calendar.messages.js');
 var MonthCalendar = require('./MonthCalendar/MonthCalendar.js');
 var YearCalendar = require('./YearCalendar/YearCalendar.js');
 
@@ -42,17 +46,38 @@ const Calendar = ({
   max: maxProp = null,
   monthFormat: monthFormat$1 = monthFormat.MonthFormat.LONG,
   placeholder,
-  onChange,
-  onSelect
+  disabledRules,
+  onDateFocus,
+  onChange
 }) => {
+  const intl = reactIntl.useIntl();
   const selectedDate = GetStartOfDay.getStartOfDay(value);
   const min = GetStartOfDay.getStartOfDay(minProp);
   const max = GetStartOfDay.getStartOfDay(maxProp);
+  const disabledReasonId = React.useId();
+  const disabledRulesRef = React.useRef(disabledRules);
+  React.useEffect(() => {
+    disabledRulesRef.current = disabledRules;
+  });
+  const [focusedDate, setFocusedDate] = React.useState(selectedDate);
+  React.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 => {
+    if (!date) return true;
+    return isWithinRange.isWithinRange(date, min, max) && !isDateDisabled.isDateDisabled(date, disabledRulesRef.current);
+  };
+  const focusedDateDisabled = focusedDate ? !isWithinRange.isWithinRange(focusedDate, min, max) || isDateDisabled.isDateDisabled(focusedDate, disabledRules) : false;
   React.useEffect(() => {
     if (selectedDate && !isWithinRange.isWithinRange(selectedDate, min, max)) {
-      onChange(moveToWithinRange.moveToWithinRange(selectedDate, min, max));
+      const clamped = moveToWithinRange.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 = getDateView.returnDateView(selectedDate, min, max);
   const [viewMonth, setViewMonth] = React.useState(dateView.getMonth());
   const [viewYear, setViewYear] = React.useState(dateView.getFullYear());
@@ -63,6 +88,13 @@ const Calendar = ({
     setViewMonth(view.getMonth());
     setViewYear(view.getFullYear());
   }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
+  React.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 = React.useCallback(
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   ({
@@ -76,24 +108,31 @@ const Calendar = ({
   const switchToMonths = React.useCallback(() => setMode('month'), []);
   const switchToYears = React.useCallback(() => setMode('year'), []);
   const handleSelectedDateUpdate = React.useCallback(date => {
-    if (onSelect) {
-      onSelect(date);
-    } else {
+    const isEnabled = checkIsEnabled(date);
+    setFocusedDate(date);
+    onDateFocus?.(date, {
+      isEnabled
+    });
+    if (isEnabled && onChange) {
       onChange(date);
     }
-  }, [onChange, onSelect]);
+  }, [onDateFocus, onChange]);
   const adjustDate = React.useCallback((daysToAdd, monthsToAdd, yearsToAdd) => {
+    const base = focusedDate ?? selectedDate;
     let date;
-    if (selectedDate) {
-      date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
+    if (base) {
+      date = new Date(mode === 'year' ? base.getFullYear() + yearsToAdd : base.getFullYear(), mode === 'month' ? base.getMonth() + monthsToAdd : base.getMonth(), mode === 'day' ? base.getDate() + daysToAdd : base.getDate());
     } else {
       date = GetStartOfDay.getStartOfDay(new Date());
     }
     date &&= moveToWithinRange.moveToWithinRange(date, min, max);
-    if (date?.getTime() !== selectedDate?.getTime()) {
-      onChange(date);
+    if (date?.getTime() !== focusedDate?.getTime()) {
+      setFocusedDate(date);
+      onDateFocus?.(date, {
+        isEnabled: checkIsEnabled(date)
+      });
     }
-  }, [selectedDate, min, max, mode, onChange]);
+  }, [focusedDate, selectedDate, min, max, mode, onDateFocus]);
   const handleKeyDown = React.useCallback(event => {
     switch (event.key) {
       case 'ArrowLeft':
@@ -112,8 +151,36 @@ const Calendar = ({
         adjustDate(7, 4, 4);
         event.preventDefault();
         break;
+      case 'Enter':
+      case ' ':
+        if (mode === 'day' && focusedDate && event.target.hasAttribute('data-calendar-cell')) {
+          handleSelectedDateUpdate(focusedDate);
+          event.preventDefault();
+        }
+        break;
     }
-  }, [adjustDate]);
+  }, [adjustDate, focusedDate, mode, handleSelectedDateUpdate]);
+  const focusedDateOutOfRange = focusedDate ? !isWithinRange.isWithinRange(focusedDate, min, max) : false;
+  const formatDateForPrompt = date => formatting.formatDate(date, intl.locale, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+  const outOfRangePromptText = min && max ? intl.formatMessage(Calendar_messages.default.outOfRangeBetween, {
+    min: formatDateForPrompt(min),
+    max: formatDateForPrompt(max)
+  }) : min ? intl.formatMessage(Calendar_messages.default.outOfRangeAfter, {
+    min: formatDateForPrompt(min)
+  }) : max ? intl.formatMessage(Calendar_messages.default.outOfRangeBefore, {
+    max: formatDateForPrompt(max)
+  }) : '';
+  const hasOutOfRangeDates = mode === 'day' && !!(min || max);
+  const showRulesPrompt = mode === 'day' && !!disabledRules && hasDisabledDatesInMonth.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';
+  const promptClassName = showOutOfRangePrompt || showRulesPrompt && !showOutOfRangePrompt ? 'm-t-1' : 'sr-only';
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -121,16 +188,20 @@ const Calendar = ({
       onKeyDown: handleKeyDown,
       children: [mode === 'day' && /*#__PURE__*/jsxRuntime.jsx(DayCalendar.default, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewMonth: viewMonth,
         viewYear: viewYear,
         monthFormat: monthFormat$1,
+        disabledRules: disabledRules,
+        disabledReasonId: showPrompt ? disabledReasonId : undefined,
         onSelect: handleSelectedDateUpdate,
         onLabelClick: switchToYears,
         onViewDateUpdate: handleViewDateUpdate
       }), mode === 'month' && /*#__PURE__*/jsxRuntime.jsx(MonthCalendar.default, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,
@@ -142,6 +213,7 @@ const Calendar = ({
         onViewDateUpdate: handleViewDateUpdate
       }), mode === 'year' && /*#__PURE__*/jsxRuntime.jsx(YearCalendar.default, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,
@@ -150,6 +222,12 @@ const Calendar = ({
         }),
         onSelect: switchToMonths,
         onViewDateUpdate: handleViewDateUpdate
+      }), showPrompt && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+        sentiment: promptSentiment,
+        width: "full",
+        id: disabledReasonId,
+        className: promptClassName,
+        children: promptText
       })]
     })
   );

package/build/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, KeyboardEvent } from 'react';\n\nimport { MonthFormat } from '../common';\nimport { isWithinRange, moveToWithinRange, returnDateView } from '../common/DateUtils';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n  value: Date | null;\n  min?: Date | null;\n  max?: Date | null;\n  monthFormat?: `${MonthFormat}`;\n  placeholder?: string;\n  onChange: (date: Date | null) => void;\n  onSelect?: (date: Date) => void;\n}\n\nconst Calendar = ({\n  value,\n  min: minProp = null,\n  max: maxProp = null,\n  monthFormat = MonthFormat.LONG,\n  placeholder,\n  onChange,\n  onSelect,\n}: CalendarProps) => {\n  const selectedDate = getStartOfDay(value);\n  const min = getStartOfDay(minProp);\n  const max = getStartOfDay(maxProp);\n\n  useEffect(() => {\n    if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n      onChange(moveToWithinRange(selectedDate, min, max));\n    }\n  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const dateView = returnDateView(selectedDate, min, max);\n  const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n  const [viewYear, setViewYear] = useState(dateView.getFullYear());\n  const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n  useEffect(() => {\n    const view = returnDateView(selectedDate, min, max);\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setViewMonth(view.getMonth());\n\n    setViewYear(view.getFullYear());\n  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleViewDateUpdate = useCallback(\n    // eslint-disable-next-line react-hooks/preserve-manual-memoization\n    ({ month, year }: { month?: number; year?: number }) => {\n      if (month !== undefined) setViewMonth(month);\n      if (year !== undefined) setViewYear(year);\n    },\n    [],\n  );\n\n  const switchToDays = useCallback(() => setMode('day'), []);\n  const switchToMonths = useCallback(() => setMode('month'), []);\n  const switchToYears = useCallback(() => setMode('year'), []);\n\n  const handleSelectedDateUpdate = useCallback(\n    (date: Date) => {\n      if (onSelect) {\n        onSelect(date);\n      } else {\n        onChange(date);\n      }\n    },\n    [onChange, onSelect],\n  );\n\n  const adjustDate = useCallback(\n    (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n      let date: Date | null;\n      if (selectedDate) {\n        date = new Date(\n          mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),\n          mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),\n          mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),\n        );\n      } else {\n        date = getStartOfDay(new Date());\n      }\n      date &&= moveToWithinRange(date, min, max);\n      if (date?.getTime() !== selectedDate?.getTime()) {\n        onChange(date);\n      }\n    },\n    [selectedDate, min, max, mode, onChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      switch (event.key) {\n        case 'ArrowLeft':\n          adjustDate(-1, -1, -1);\n          event.preventDefault();\n          break;\n        case 'ArrowUp':\n          adjustDate(-7, -4, -4);\n          event.preventDefault();\n          break;\n        case 'ArrowRight':\n          adjustDate(1, 1, 1);\n          event.preventDefault();\n          break;\n        case 'ArrowDown':\n          adjustDate(7, 4, 4);\n          event.preventDefault();\n          break;\n        default:\n          break;\n      }\n    },\n    [adjustDate],\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div onKeyDown={handleKeyDown}>\n      {mode === 'day' && (\n        <DayCalendar\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewMonth={viewMonth}\n          viewYear={viewYear}\n          monthFormat={monthFormat}\n          onSelect={handleSelectedDateUpdate}\n          onLabelClick={switchToYears}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n      {mode === 'month' && (\n        <MonthCalendar\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          {...(placeholder != null && { placeholder })}\n          onSelect={switchToDays}\n          onLabelClick={switchToYears}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n      {mode === 'year' && (\n        <YearCalendar\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          {...(placeholder != null && { placeholder })}\n          onSelect={switchToMonths}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","onChange","onSelect","selectedDate","getStartOfDay","useEffect","isWithinRange","moveToWithinRange","getTime","dateView","returnDateView","viewMonth","setViewMonth","useState","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","date","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","Date","getDate","handleKeyDown","event","key","preventDefault","_jsxs","onKeyDown","children","_jsx","DayCalendar","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useState, useCallback, useEffect, useId, useRef, KeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\nimport { formatDate } from '@transferwise/formatting';\n\nimport { MonthFormat } from '../common';\nimport {\n  isWithinRange,\n  moveToWithinRange,\n  returnDateView,\n  isDateDisabled,\n  hasDisabledDatesInMonth,\n} from '../common/DateUtils';\nimport { InlinePrompt } from '../Prompt/InlinePrompt';\nimport type { DateChangeMeta, DisabledRules } from './Calendar.types';\nimport DayCalendar from './DayCalendar';\nimport { getStartOfDay } from './GetStartOfDay';\nimport messages from './Calendar.messages';\nimport MonthCalendar from './MonthCalendar';\nimport YearCalendar from './YearCalendar';\n\nexport interface CalendarProps {\n  /** The currently selected date, or `null` for no selection. */\n  value: Date | null;\n  /** Earliest selectable date (inclusive). Dates before this are interactive but not selectable, and show a boundary prompt. */\n  min?: Date | null;\n  /** Latest selectable date (inclusive). Dates after this are interactive but not selectable, and show a boundary prompt. */\n  max?: Date | null;\n  /** Month name format in the header. Defaults to `'long'` (e.g. \"January\"). */\n  monthFormat?: `${MonthFormat}`;\n  /** Placeholder text shown in the month/year cells when no date is selected. */\n  placeholder?: string;\n  /** 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. */\n  disabledRules?: DisabledRules;\n  /** Called whenever the focused date changes — including disabled and out-of-range dates. `meta.isEnabled` is `false` when the date is not selectable. */\n  onDateFocus?: (date: Date | null, meta: DateChangeMeta) => void;\n  /** Called when a date is confirmed (click or Enter). Only fires for enabled dates. */\n  onChange?: (date: Date) => void;\n}\n\n/**\n * Inline calendar for selecting a single date. Powers [DateLookup](?path=/docs/forms-datelookup--docs).\n */\nconst Calendar = ({\n  value,\n  min: minProp = null,\n  max: maxProp = null,\n  monthFormat = MonthFormat.LONG,\n  placeholder,\n  disabledRules,\n  onDateFocus,\n  onChange,\n}: CalendarProps) => {\n  const intl = useIntl();\n  const selectedDate = getStartOfDay(value);\n  const min = getStartOfDay(minProp);\n  const max = getStartOfDay(maxProp);\n  const disabledReasonId = useId();\n  const disabledRulesRef = useRef(disabledRules);\n  useEffect(() => {\n    disabledRulesRef.current = disabledRules;\n  });\n\n  const [focusedDate, setFocusedDate] = useState<Date | null>(selectedDate);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setFocusedDate(selectedDate);\n  }, [selectedDate?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const checkIsEnabled = (date: Date | null) => {\n    if (!date) return true;\n    return isWithinRange(date, min, max) && !isDateDisabled(date, disabledRulesRef.current);\n  };\n\n  const focusedDateDisabled = focusedDate\n    ? !isWithinRange(focusedDate, min, max) || isDateDisabled(focusedDate, disabledRules)\n    : false;\n\n  useEffect(() => {\n    if (selectedDate && !isWithinRange(selectedDate, min, max)) {\n      const clamped = moveToWithinRange(selectedDate, min, max);\n      setFocusedDate(clamped); // eslint-disable-line react-hooks/set-state-in-effect\n      onDateFocus?.(clamped, { isEnabled: checkIsEnabled(clamped) });\n    }\n  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onDateFocus]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const dateView = returnDateView(selectedDate, min, max);\n  const [viewMonth, setViewMonth] = useState(dateView.getMonth());\n  const [viewYear, setViewYear] = useState(dateView.getFullYear());\n  const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');\n\n  useEffect(() => {\n    const view = returnDateView(selectedDate, min, max);\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setViewMonth(view.getMonth());\n\n    setViewYear(view.getFullYear());\n  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (focusedDate) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setViewMonth(focusedDate.getMonth());\n      setViewYear(focusedDate.getFullYear());\n    }\n  }, [focusedDate?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleViewDateUpdate = useCallback(\n    // eslint-disable-next-line react-hooks/preserve-manual-memoization\n    ({ month, year }: { month?: number; year?: number }) => {\n      if (month !== undefined) setViewMonth(month);\n      if (year !== undefined) setViewYear(year);\n    },\n    [],\n  );\n\n  const switchToDays = useCallback(() => setMode('day'), []);\n  const switchToMonths = useCallback(() => setMode('month'), []);\n  const switchToYears = useCallback(() => setMode('year'), []);\n\n  const handleSelectedDateUpdate = useCallback(\n    (date: Date) => {\n      const isEnabled = checkIsEnabled(date);\n      setFocusedDate(date);\n      onDateFocus?.(date, { isEnabled });\n      if (isEnabled && onChange) {\n        onChange(date);\n      }\n    },\n    [onDateFocus, onChange], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const adjustDate = useCallback(\n    (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {\n      const base = focusedDate ?? selectedDate;\n      let date: Date | null;\n      if (base) {\n        date = new Date(\n          mode === 'year' ? base.getFullYear() + yearsToAdd : base.getFullYear(),\n          mode === 'month' ? base.getMonth() + monthsToAdd : base.getMonth(),\n          mode === 'day' ? base.getDate() + daysToAdd : base.getDate(),\n        );\n      } else {\n        date = getStartOfDay(new Date());\n      }\n      date &&= moveToWithinRange(date, min, max);\n      if (date?.getTime() !== focusedDate?.getTime()) {\n        setFocusedDate(date);\n        onDateFocus?.(date, { isEnabled: checkIsEnabled(date) });\n      }\n    },\n    [focusedDate, selectedDate, min, max, mode, onDateFocus], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      switch (event.key) {\n        case 'ArrowLeft':\n          adjustDate(-1, -1, -1);\n          event.preventDefault();\n          break;\n        case 'ArrowUp':\n          adjustDate(-7, -4, -4);\n          event.preventDefault();\n          break;\n        case 'ArrowRight':\n          adjustDate(1, 1, 1);\n          event.preventDefault();\n          break;\n        case 'ArrowDown':\n          adjustDate(7, 4, 4);\n          event.preventDefault();\n          break;\n        case 'Enter':\n        case ' ':\n          if (\n            mode === 'day' &&\n            focusedDate &&\n            (event.target as HTMLElement).hasAttribute('data-calendar-cell')\n          ) {\n            handleSelectedDateUpdate(focusedDate);\n            event.preventDefault();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [adjustDate, focusedDate, mode, handleSelectedDateUpdate],  \n  );\n\n  const focusedDateOutOfRange = focusedDate ? !isWithinRange(focusedDate, min, max) : false;\n\n  const formatDateForPrompt = (date: Date) =>\n    formatDate(date, intl.locale, { day: 'numeric', month: 'long', year: 'numeric' });\n\n  const outOfRangePromptText =\n    min && max\n      ? intl.formatMessage(messages.outOfRangeBetween, {\n          min: formatDateForPrompt(min),\n          max: formatDateForPrompt(max),\n        })\n      : min\n        ? intl.formatMessage(messages.outOfRangeAfter, { min: formatDateForPrompt(min) })\n        : max\n          ? intl.formatMessage(messages.outOfRangeBefore, { max: formatDateForPrompt(max) })\n          : '';\n\n  const hasOutOfRangeDates = mode === 'day' && !!(min || max);\n  const showRulesPrompt =\n    mode === 'day' &&\n    !!disabledRules &&\n    hasDisabledDatesInMonth(viewMonth, viewYear, disabledRules, min, max);\n  const showOutOfRangePrompt = mode === 'day' && focusedDateOutOfRange;\n  const showPrompt = hasOutOfRangeDates || showRulesPrompt;\n\n  const promptText = showOutOfRangePrompt\n    ? outOfRangePromptText\n    : (disabledRules?.reason ?? outOfRangePromptText);\n  const promptSentiment = showOutOfRangePrompt || focusedDateDisabled ? 'negative' : 'neutral';\n  const promptClassName =\n    showOutOfRangePrompt || (showRulesPrompt && !showOutOfRangePrompt) ? 'm-t-1' : 'sr-only';\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div onKeyDown={handleKeyDown}>\n      {mode === 'day' && (\n        <DayCalendar\n          selectedDate={selectedDate}\n          focusedDate={focusedDate}\n          min={min}\n          max={max}\n          viewMonth={viewMonth}\n          viewYear={viewYear}\n          monthFormat={monthFormat}\n          disabledRules={disabledRules}\n          disabledReasonId={showPrompt ? disabledReasonId : undefined}\n          onSelect={handleSelectedDateUpdate}\n          onLabelClick={switchToYears}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n      {mode === 'month' && (\n        <MonthCalendar\n          selectedDate={selectedDate}\n          focusedDate={focusedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          {...(placeholder != null && { placeholder })}\n          onSelect={switchToDays}\n          onLabelClick={switchToYears}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n      {mode === 'year' && (\n        <YearCalendar\n          selectedDate={selectedDate}\n          focusedDate={focusedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          {...(placeholder != null && { placeholder })}\n          onSelect={switchToMonths}\n          onViewDateUpdate={handleViewDateUpdate}\n        />\n      )}\n      {showPrompt && (\n        <InlinePrompt\n          sentiment={promptSentiment}\n          width=\"full\"\n          id={disabledReasonId}\n          className={promptClassName}\n        >\n          {promptText}\n        </InlinePrompt>\n      )}\n    </div>\n  );\n};\n\nexport default Calendar;\n"],"names":["Calendar","value","min","minProp","max","maxProp","monthFormat","MonthFormat","LONG","placeholder","disabledRules","onDateFocus","onChange","intl","useIntl","selectedDate","getStartOfDay","disabledReasonId","useId","disabledRulesRef","useRef","useEffect","current","focusedDate","setFocusedDate","useState","getTime","checkIsEnabled","date","isWithinRange","isDateDisabled","focusedDateDisabled","clamped","moveToWithinRange","isEnabled","dateView","returnDateView","viewMonth","setViewMonth","getMonth","viewYear","setViewYear","getFullYear","mode","setMode","view","handleViewDateUpdate","useCallback","month","year","undefined","switchToDays","switchToMonths","switchToYears","handleSelectedDateUpdate","adjustDate","daysToAdd","monthsToAdd","yearsToAdd","base","Date","getDate","handleKeyDown","event","key","preventDefault","target","hasAttribute","focusedDateOutOfRange","formatDateForPrompt","formatDate","locale","day","outOfRangePromptText","formatMessage","messages","outOfRangeBetween","outOfRangeAfter","outOfRangeBefore","hasOutOfRangeDates","showRulesPrompt","hasDisabledDatesInMonth","showOutOfRangePrompt","showPrompt","promptText","reason","promptSentiment","promptClassName","_jsxs","onKeyDown","children","_jsx","DayCalendar","onSelect","onLabelClick","onViewDateUpdate","MonthCalendar","YearCalendar","InlinePrompt","sentiment","width","id","className"],"mappings":"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"}

package/build/Calendar/Calendar.messages.js

@@ -26,8 +26,20 @@ var messages = reactIntl.defineMessages({
   selected: {
     id: "neptune.DateLookup.selected"
   },
+  notAvailable: {
+    id: "neptune.DateLookup.notAvailable"
+  },
   goTo20YearView: {
     id: "neptune.DateLookup.goTo20YearView"
+  },
+  outOfRangeBetween: {
+    id: "neptune.DateLookup.outOfRangeBetween"
+  },
+  outOfRangeAfter: {
+    id: "neptune.DateLookup.outOfRangeAfter"
+  },
+  outOfRangeBefore: {
+    id: "neptune.DateLookup.outOfRangeBefore"
   }
 });
 

package/build/Calendar/Calendar.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.messages.js","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  next: {\n    id: 'neptune.DateLookup.next',\n    defaultMessage: 'next',\n    description: 'Description of next button',\n  },\n  previous: {\n    id: 'neptune.DateLookup.previous',\n    defaultMessage: 'previous',\n    description: 'Description of previous button',\n  },\n  day: {\n    id: 'neptune.DateLookup.day',\n    defaultMessage: 'day',\n    description: 'Description of next/previous/selected day button',\n  },\n  month: {\n    id: 'neptune.DateLookup.month',\n    defaultMessage: 'month',\n    description: 'Description of next/previous/selected month button',\n  },\n  year: {\n    id: 'neptune.DateLookup.year',\n    defaultMessage: 'year',\n    description: 'Description of next/previous/selected year button',\n  },\n  twentyYears: {\n    id: 'neptune.DateLookup.twentyYears',\n    defaultMessage: '20 years',\n    description: 'Description of next/previous 20 years button',\n  },\n  selected: {\n    id: 'neptune.DateLookup.selected',\n    defaultMessage: 'selected',\n    description: 'Description of the selected day/month/year',\n  },\n  goTo20YearView: {\n    id: 'neptune.DateLookup.goTo20YearView',\n    defaultMessage: 'Go to 20 year view',\n    description: 'Description of the button to go to 20 year view',\n  },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","goTo20YearView"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,cAAc,EAAE;IACdP,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Calendar.messages.js","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  next: {\n    id: 'neptune.DateLookup.next',\n    defaultMessage: 'next',\n    description: 'Description of next button',\n  },\n  previous: {\n    id: 'neptune.DateLookup.previous',\n    defaultMessage: 'previous',\n    description: 'Description of previous button',\n  },\n  day: {\n    id: 'neptune.DateLookup.day',\n    defaultMessage: 'day',\n    description: 'Description of next/previous/selected day button',\n  },\n  month: {\n    id: 'neptune.DateLookup.month',\n    defaultMessage: 'month',\n    description: 'Description of next/previous/selected month button',\n  },\n  year: {\n    id: 'neptune.DateLookup.year',\n    defaultMessage: 'year',\n    description: 'Description of next/previous/selected year button',\n  },\n  twentyYears: {\n    id: 'neptune.DateLookup.twentyYears',\n    defaultMessage: '20 years',\n    description: 'Description of next/previous 20 years button',\n  },\n  selected: {\n    id: 'neptune.DateLookup.selected',\n    defaultMessage: 'selected',\n    description: 'Description of the selected day/month/year',\n  },\n  notAvailable: {\n    id: 'neptune.DateLookup.notAvailable',\n    defaultMessage: 'not available',\n    description: 'Announces that a date is disabled/unavailable',\n  },\n  goTo20YearView: {\n    id: 'neptune.DateLookup.goTo20YearView',\n    defaultMessage: 'Go to 20 year view',\n    description: 'Description of the button to go to 20 year view',\n  },\n  outOfRangeBetween: {\n    id: 'neptune.DateLookup.outOfRangeBetween',\n    defaultMessage: 'Please select a date between {min} and {max}.',\n    description:\n      'Inline prompt when a date outside min/max boundaries is focused and both min and max are set',\n  },\n  outOfRangeAfter: {\n    id: 'neptune.DateLookup.outOfRangeAfter',\n    defaultMessage: 'Please select a date on or after {min}.',\n    description: 'Inline prompt when a date before min is focused and only min is set',\n  },\n  outOfRangeBefore: {\n    id: 'neptune.DateLookup.outOfRangeBefore',\n    defaultMessage: 'Please select a date on or before {max}.',\n    description: 'Inline prompt when a date after max is focused and only max is set',\n  },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","notAvailable","goTo20YearView","outOfRangeBetween","outOfRangeAfter","outOfRangeBefore"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,YAAY,EAAE;IACZP,EAAE,EAAA;GAGH;AACDQ,EAAAA,cAAc,EAAE;IACdR,EAAE,EAAA;GAGH;AACDS,EAAAA,iBAAiB,EAAE;IACjBT,EAAE,EAAA;GAIH;AACDU,EAAAA,eAAe,EAAE;IACfV,EAAE,EAAA;GAGH;AACDW,EAAAA,gBAAgB,EAAE;IAChBX,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}

package/build/Calendar/Calendar.messages.mjs

@@ -22,8 +22,20 @@ var messages = defineMessages({
   selected: {
     id: "neptune.DateLookup.selected"
   },
+  notAvailable: {
+    id: "neptune.DateLookup.notAvailable"
+  },
   goTo20YearView: {
     id: "neptune.DateLookup.goTo20YearView"
+  },
+  outOfRangeBetween: {
+    id: "neptune.DateLookup.outOfRangeBetween"
+  },
+  outOfRangeAfter: {
+    id: "neptune.DateLookup.outOfRangeAfter"
+  },
+  outOfRangeBefore: {
+    id: "neptune.DateLookup.outOfRangeBefore"
   }
 });
 

package/build/Calendar/Calendar.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.messages.mjs","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  next: {\n    id: 'neptune.DateLookup.next',\n    defaultMessage: 'next',\n    description: 'Description of next button',\n  },\n  previous: {\n    id: 'neptune.DateLookup.previous',\n    defaultMessage: 'previous',\n    description: 'Description of previous button',\n  },\n  day: {\n    id: 'neptune.DateLookup.day',\n    defaultMessage: 'day',\n    description: 'Description of next/previous/selected day button',\n  },\n  month: {\n    id: 'neptune.DateLookup.month',\n    defaultMessage: 'month',\n    description: 'Description of next/previous/selected month button',\n  },\n  year: {\n    id: 'neptune.DateLookup.year',\n    defaultMessage: 'year',\n    description: 'Description of next/previous/selected year button',\n  },\n  twentyYears: {\n    id: 'neptune.DateLookup.twentyYears',\n    defaultMessage: '20 years',\n    description: 'Description of next/previous 20 years button',\n  },\n  selected: {\n    id: 'neptune.DateLookup.selected',\n    defaultMessage: 'selected',\n    description: 'Description of the selected day/month/year',\n  },\n  goTo20YearView: {\n    id: 'neptune.DateLookup.goTo20YearView',\n    defaultMessage: 'Go to 20 year view',\n    description: 'Description of the button to go to 20 year view',\n  },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","goTo20YearView"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,cAAc,EAAE;IACdP,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Calendar.messages.mjs","sources":["../../src/Calendar/Calendar.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  next: {\n    id: 'neptune.DateLookup.next',\n    defaultMessage: 'next',\n    description: 'Description of next button',\n  },\n  previous: {\n    id: 'neptune.DateLookup.previous',\n    defaultMessage: 'previous',\n    description: 'Description of previous button',\n  },\n  day: {\n    id: 'neptune.DateLookup.day',\n    defaultMessage: 'day',\n    description: 'Description of next/previous/selected day button',\n  },\n  month: {\n    id: 'neptune.DateLookup.month',\n    defaultMessage: 'month',\n    description: 'Description of next/previous/selected month button',\n  },\n  year: {\n    id: 'neptune.DateLookup.year',\n    defaultMessage: 'year',\n    description: 'Description of next/previous/selected year button',\n  },\n  twentyYears: {\n    id: 'neptune.DateLookup.twentyYears',\n    defaultMessage: '20 years',\n    description: 'Description of next/previous 20 years button',\n  },\n  selected: {\n    id: 'neptune.DateLookup.selected',\n    defaultMessage: 'selected',\n    description: 'Description of the selected day/month/year',\n  },\n  notAvailable: {\n    id: 'neptune.DateLookup.notAvailable',\n    defaultMessage: 'not available',\n    description: 'Announces that a date is disabled/unavailable',\n  },\n  goTo20YearView: {\n    id: 'neptune.DateLookup.goTo20YearView',\n    defaultMessage: 'Go to 20 year view',\n    description: 'Description of the button to go to 20 year view',\n  },\n  outOfRangeBetween: {\n    id: 'neptune.DateLookup.outOfRangeBetween',\n    defaultMessage: 'Please select a date between {min} and {max}.',\n    description:\n      'Inline prompt when a date outside min/max boundaries is focused and both min and max are set',\n  },\n  outOfRangeAfter: {\n    id: 'neptune.DateLookup.outOfRangeAfter',\n    defaultMessage: 'Please select a date on or after {min}.',\n    description: 'Inline prompt when a date before min is focused and only min is set',\n  },\n  outOfRangeBefore: {\n    id: 'neptune.DateLookup.outOfRangeBefore',\n    defaultMessage: 'Please select a date on or before {max}.',\n    description: 'Inline prompt when a date after max is focused and only max is set',\n  },\n});\n"],"names":["defineMessages","next","id","previous","day","month","year","twentyYears","selected","notAvailable","goTo20YearView","outOfRangeBetween","outOfRangeAfter","outOfRangeBefore"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;GAGH;AACDC,EAAAA,QAAQ,EAAE;IACRD,EAAE,EAAA;GAGH;AACDE,EAAAA,GAAG,EAAE;IACHF,EAAE,EAAA;GAGH;AACDG,EAAAA,KAAK,EAAE;IACLH,EAAE,EAAA;GAGH;AACDI,EAAAA,IAAI,EAAE;IACJJ,EAAE,EAAA;GAGH;AACDK,EAAAA,WAAW,EAAE;IACXL,EAAE,EAAA;GAGH;AACDM,EAAAA,QAAQ,EAAE;IACRN,EAAE,EAAA;GAGH;AACDO,EAAAA,YAAY,EAAE;IACZP,EAAE,EAAA;GAGH;AACDQ,EAAAA,cAAc,EAAE;IACdR,EAAE,EAAA;GAGH;AACDS,EAAAA,iBAAiB,EAAE;IACjBT,EAAE,EAAA;GAIH;AACDU,EAAAA,eAAe,EAAE;IACfV,EAAE,EAAA;GAGH;AACDW,EAAAA,gBAAgB,EAAE;IAChBX,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}

package/build/Calendar/Calendar.mjs

@@ -1,4 +1,6 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useId, useRef, useEffect, useState, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { formatDate } from '@transferwise/formatting';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '@transferwise/neptune-tokens';
@@ -18,17 +20,19 @@ import '../common/PropsValues/variant.mjs';
 import '../common/PropsValues/scroll.mjs';
 import '../common/PropsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
-import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'clsx';
-import 'react-intl';
 import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { moveToWithinRange } from '../common/DateUtils/moveToWithinRange/moveToWithinRange.mjs';
 import { isWithinRange } from '../common/DateUtils/isWithinRange/isWithinRange.mjs';
 import { returnDateView } from '../common/DateUtils/getDateView/getDateView.mjs';
+import { isDateDisabled } from '../common/DateUtils/isDateDisabled/isDateDisabled.mjs';
+import { hasDisabledDatesInMonth } from '../common/DateUtils/hasDisabledDatesInMonth/hasDisabledDatesInMonth.mjs';
+import { InlinePrompt } from '../Prompt/InlinePrompt/InlinePrompt.mjs';
 import DayCalendar from './DayCalendar/DayCalendar.mjs';
 import { getStartOfDay } from './GetStartOfDay/GetStartOfDay.mjs';
+import messages from './Calendar.messages.mjs';
 import MonthCalendar from './MonthCalendar/MonthCalendar.mjs';
 import YearCalendar from './YearCalendar/YearCalendar.mjs';
 
@@ -38,17 +42,38 @@ const Calendar = ({
   max: maxProp = null,
   monthFormat = MonthFormat.LONG,
   placeholder,
-  onChange,
-  onSelect
+  disabledRules,
+  onDateFocus,
+  onChange
 }) => {
+  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 [focusedDate, setFocusedDate] = useState(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 => {
+    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());
   const [viewYear, setViewYear] = useState(dateView.getFullYear());
@@ -59,6 +84,13 @@ const Calendar = ({
     setViewMonth(view.getMonth());
     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
   ({
@@ -72,24 +104,31 @@ const Calendar = ({
   const switchToMonths = useCallback(() => setMode('month'), []);
   const switchToYears = useCallback(() => setMode('year'), []);
   const handleSelectedDateUpdate = useCallback(date => {
-    if (onSelect) {
-      onSelect(date);
-    } else {
+    const isEnabled = checkIsEnabled(date);
+    setFocusedDate(date);
+    onDateFocus?.(date, {
+      isEnabled
+    });
+    if (isEnabled && onChange) {
       onChange(date);
     }
-  }, [onChange, onSelect]);
+  }, [onDateFocus, onChange]);
   const adjustDate = useCallback((daysToAdd, monthsToAdd, yearsToAdd) => {
+    const base = focusedDate ?? selectedDate;
     let date;
-    if (selectedDate) {
-      date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
+    if (base) {
+      date = new Date(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);
+    if (date?.getTime() !== focusedDate?.getTime()) {
+      setFocusedDate(date);
+      onDateFocus?.(date, {
+        isEnabled: checkIsEnabled(date)
+      });
     }
-  }, [selectedDate, min, max, mode, onChange]);
+  }, [focusedDate, selectedDate, min, max, mode, onDateFocus]);
   const handleKeyDown = useCallback(event => {
     switch (event.key) {
       case 'ArrowLeft':
@@ -108,8 +147,36 @@ const Calendar = ({
         adjustDate(7, 4, 4);
         event.preventDefault();
         break;
+      case 'Enter':
+      case ' ':
+        if (mode === 'day' && focusedDate && event.target.hasAttribute('data-calendar-cell')) {
+          handleSelectedDateUpdate(focusedDate);
+          event.preventDefault();
+        }
+        break;
     }
-  }, [adjustDate]);
+  }, [adjustDate, focusedDate, mode, handleSelectedDateUpdate]);
+  const focusedDateOutOfRange = focusedDate ? !isWithinRange(focusedDate, min, max) : false;
+  const formatDateForPrompt = date => formatDate(date, intl.locale, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+  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';
+  const promptClassName = showOutOfRangePrompt || showRulesPrompt && !showOutOfRangePrompt ? 'm-t-1' : 'sr-only';
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -117,16 +184,20 @@ const Calendar = ({
       onKeyDown: handleKeyDown,
       children: [mode === 'day' && /*#__PURE__*/jsx(DayCalendar, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewMonth: viewMonth,
         viewYear: viewYear,
         monthFormat: monthFormat,
+        disabledRules: disabledRules,
+        disabledReasonId: showPrompt ? disabledReasonId : undefined,
         onSelect: handleSelectedDateUpdate,
         onLabelClick: switchToYears,
         onViewDateUpdate: handleViewDateUpdate
       }), mode === 'month' && /*#__PURE__*/jsx(MonthCalendar, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,
@@ -138,6 +209,7 @@ const Calendar = ({
         onViewDateUpdate: handleViewDateUpdate
       }), mode === 'year' && /*#__PURE__*/jsx(YearCalendar, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,
@@ -146,6 +218,12 @@ const Calendar = ({
         }),
         onSelect: switchToMonths,
         onViewDateUpdate: handleViewDateUpdate
+      }), showPrompt && /*#__PURE__*/jsx(InlinePrompt, {
+        sentiment: promptSentiment,
+        width: "full",
+        id: disabledReasonId,
+        className: promptClassName,
+        children: promptText
       })]
     })
   );