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

package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs

@@ -3,14 +3,20 @@ import { PureComponent } from 'react';
 import { injectIntl } from '../../../common/injectIntl.mjs';
 import { getDayNames } from '../../../common/DateUtils/getDayNames/getDayNames.mjs';
 import { isWithinRange } from '../../../common/DateUtils/isWithinRange/isWithinRange.mjs';
+import { isDateDisabled } from '../../../common/DateUtils/isDateDisabled/isDateDisabled.mjs';
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime.mjs';
 import { getStartOfDay } from '../../GetStartOfDay/GetStartOfDay.mjs';
-import TableLink from '../../tableLink/TableLink.mjs';
+import TableLink from '../../TableLink/TableLink.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
 };
+const LONG_DAY_FORMAT = {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric'
+};
 class DayCalendarTable extends PureComponent {
   getTableStructure = () => {
     const {
@@ -58,7 +64,7 @@ class DayCalendarTable extends PureComponent {
     } = this.props;
     onSelect(new Date(viewYear, viewMonth, day));
   };
-  isDisabled = day => {
+  isOutOfRange = day => {
     if (day < 0) {
       return true;
     }
@@ -71,6 +77,19 @@ class DayCalendarTable extends PureComponent {
     const date = new Date(viewYear, viewMonth, day);
     return !isWithinRange(date, min, max);
   };
+  isDisabled = day => {
+    if (day < 0) {
+      return false;
+    }
+    const {
+      viewMonth,
+      viewYear,
+      disabledRules
+    } = this.props;
+    const date = new Date(viewYear, viewMonth, day);
+    return isDateDisabled(date, disabledRules);
+  };
+  isUnavailable = day => this.isOutOfRange(day) || this.isDisabled(day);
   isActive = day => {
     const {
       selectedDate,
@@ -79,6 +98,14 @@ class DayCalendarTable extends PureComponent {
     } = this.props;
     return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
   };
+  isFocused = day => {
+    const {
+      focusedDate,
+      viewMonth,
+      viewYear
+    } = this.props;
+    return !!(focusedDate && Number(new Date(viewYear, viewMonth, day)) === Number(focusedDate));
+  };
   isToday = day => {
     const {
       viewMonth,
@@ -89,9 +116,9 @@ class DayCalendarTable extends PureComponent {
   getAutofocusDay = weeks => {
     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
     });
   };
@@ -99,7 +126,8 @@ class DayCalendarTable extends PureComponent {
     const {
       viewMonth,
       viewYear,
-      intl
+      intl,
+      disabledReasonId
     } = this.props;
     const weeks = this.getTableStructure();
     const autoFocusDay = this.getAutofocusDay(weeks);
@@ -126,20 +154,26 @@ class DayCalendarTable extends PureComponent {
         })
       }), /*#__PURE__*/jsx("tbody", {
         children: weeks.map((week, weekIndex) => /*#__PURE__*/jsx("tr", {
-          children: week.map((day, dayIndex) => /*#__PURE__*/jsx("td", {
-            className: dayIndex > 4 ? 'weekend' : '',
-            children: day !== -1 && /*#__PURE__*/jsx(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
-            })
-          }, dayIndex))
+          children: week.map((day, dayIndex) => {
+            const dayOutOfRange = this.isOutOfRange(day);
+            const dayDisabled = this.isDisabled(day);
+            return /*#__PURE__*/jsx("td", {
+              className: dayIndex > 4 ? 'weekend' : '',
+              children: day !== -1 && /*#__PURE__*/jsx(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,
+                onClick: this.selectDay
+              })
+            }, dayIndex);
+          })
         }, weekIndex))
       })]
     });

package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DayCalendarTable.mjs","sources":["../../../../src/Calendar/DayCalendar/Table/DayCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../../common/injectIntl';\n\nimport { getDayNames, isWithinRange } from '../../../common/DateUtils';\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport { getStartOfDay } from '../../GetStartOfDay';\nimport TableLink from '../../tableLink';\n\nconst SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };\n\ninterface DayCalendarTableProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewMonth: number;\n  viewYear: number;\n  onSelect: (date: Date) => void;\n}\n\nclass DayCalendarTable extends PureComponent<DayCalendarTableProps> {\n  getTableStructure = () => {\n    const { viewMonth, viewYear } = this.props;\n    let firstDayOfMonth = new Date(viewYear, viewMonth, 1).getDay();\n    // JS Sunday is 0, we're setting it last\n    if (firstDayOfMonth === 0) {\n      firstDayOfMonth = 7;\n    }\n    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n\n    let week: number[] = [];\n    const weeks: number[][] = [];\n    let i;\n\n    // Pad first week\n    for (i = 1; i < firstDayOfMonth; i += 1) {\n      week.push(-1);\n    }\n    // Fill in days\n    for (i = 1; i <= daysInMonth; i += 1) {\n      week.push(i);\n      if ((firstDayOfMonth + i - 1) % 7 === 0) {\n        weeks.push(week);\n        week = [];\n      }\n    }\n    if (week.length > 0) {\n      // Pad last week\n      for (i = week.length; i < 7; i += 1) {\n        week.push(-1);\n      }\n      weeks.push(week);\n    }\n    return weeks;\n  };\n\n  days = getDayNames(this.props.intl.locale, 'short');\n  daysShort = getDayNames(this.props.intl.locale, 'narrow');\n  daysLong = getDayNames(this.props.intl.locale, 'long');\n\n  selectDay = (day: number) => {\n    const { viewMonth, viewYear, onSelect } = this.props;\n    onSelect(new Date(viewYear, viewMonth, day));\n  };\n\n  isDisabled = (day: number) => {\n    if (day < 0) {\n      return true;\n    }\n    const { min, max, viewMonth, viewYear } = this.props;\n    const date = new Date(viewYear, viewMonth, day);\n\n    return !isWithinRange(date, min, max);\n  };\n\n  isActive = (day: number) => {\n    const { selectedDate, viewMonth, viewYear } = this.props;\n    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));\n  };\n\n  isToday = (day: number) => {\n    const { viewMonth, viewYear } = this.props;\n    return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));\n  };\n\n  getAutofocusDay = (weeks: number[][]) => {\n    const days = weeks.flatMap((week) => week);\n    return getFocusableTime({\n      isActive: this.isActive,\n      isNow: this.isToday,\n      isDisabled: this.isDisabled,\n      timeSpan: days,\n    });\n  };\n\n  render() {\n    const { viewMonth, viewYear, intl } = this.props;\n    const weeks = this.getTableStructure();\n    const autoFocusDay = this.getAutofocusDay(weeks);\n    return (\n      <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n        <thead>\n          <tr>\n            {this.days.map((day, index) => (\n              <th\n                key={day}\n                className={\n                  index > 4\n                    ? 'text-xs-center np-text-body-default'\n                    : 'text-xs-center np-text-body-default-bold'\n                }\n              >\n                <span className=\"hidden-xs\">\n                  <abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>\n                </span>\n                <span className=\"visible-xs-inline-block\">\n                  <abbr title={this.daysLong[index]}>{this.daysShort[index].slice(0, 2)}</abbr>\n                </span>\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {/* eslint-disable react/no-array-index-key */}\n          {weeks.map((week, weekIndex) => (\n            <tr key={weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>\n                  {day !== -1 && (\n                    <TableLink\n                      item={day}\n                      type=\"day\"\n                      title={formatDate(\n                        new Date(viewYear, viewMonth, day),\n                        intl.locale,\n                        SHORT_DAY_FORMAT,\n                      )}\n                      autofocus={day === autoFocusDay}\n                      longTitle={formatDate(new Date(viewYear, viewMonth, day), intl.locale)}\n                      active={this.isActive(day)}\n                      disabled={this.isDisabled(day)}\n                      today={this.isToday(day)}\n                      onClick={this.selectDay}\n                    />\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n          {/* eslint-enable react/no-array-index-key */}\n        </tbody>\n      </table>\n    );\n  }\n}\n\nexport default injectIntl(DayCalendarTable);\n"],"names":["SHORT_DAY_FORMAT","day","DayCalendarTable","PureComponent","getTableStructure","viewMonth","viewYear","props","firstDayOfMonth","Date","getDay","daysInMonth","getDate","week","weeks","i","push","length","days","getDayNames","intl","locale","daysShort","daysLong","selectDay","onSelect","isDisabled","min","max","date","isWithinRange","isActive","selectedDate","Number","isToday","getStartOfDay","getAutofocusDay","flatMap","getFocusableTime","isNow","timeSpan","render","autoFocusDay","_jsxs","className","children","_jsx","map","index","title","slice","weekIndex","dayIndex","TableLink","item","type","formatDate","autofocus","longTitle","active","disabled","today","onClick","injectIntl"],"mappings":"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"}
+{"version":3,"file":"DayCalendarTable.mjs","sources":["../../../../src/Calendar/DayCalendar/Table/DayCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../../common/injectIntl';\n\nimport { getDayNames, isWithinRange, isDateDisabled } from '../../../common/DateUtils';\nimport type { DisabledRules } from '../../Calendar.types';\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport { getStartOfDay } from '../../GetStartOfDay';\nimport TableLink from '../../TableLink';\n\nconst SHORT_DAY_FORMAT: Intl.DateTimeFormatOptions = { day: 'numeric' };\nconst LONG_DAY_FORMAT: Intl.DateTimeFormatOptions = {\n  day: 'numeric',\n  month: 'long',\n  year: 'numeric',\n};\n\ninterface DayCalendarTableProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  focusedDate?: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewMonth: number;\n  viewYear: number;\n  disabledRules?: DisabledRules;\n  disabledReasonId?: string;\n  onSelect: (date: Date) => void;\n}\n\nclass DayCalendarTable extends PureComponent<DayCalendarTableProps> {\n  getTableStructure = () => {\n    const { viewMonth, viewYear } = this.props;\n    let firstDayOfMonth = new Date(viewYear, viewMonth, 1).getDay();\n    // JS Sunday is 0, we're setting it last\n    if (firstDayOfMonth === 0) {\n      firstDayOfMonth = 7;\n    }\n    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n\n    let week: number[] = [];\n    const weeks: number[][] = [];\n    let i;\n\n    // Pad first week\n    for (i = 1; i < firstDayOfMonth; i += 1) {\n      week.push(-1);\n    }\n    // Fill in days\n    for (i = 1; i <= daysInMonth; i += 1) {\n      week.push(i);\n      if ((firstDayOfMonth + i - 1) % 7 === 0) {\n        weeks.push(week);\n        week = [];\n      }\n    }\n    if (week.length > 0) {\n      // Pad last week\n      for (i = week.length; i < 7; i += 1) {\n        week.push(-1);\n      }\n      weeks.push(week);\n    }\n    return weeks;\n  };\n\n  days = getDayNames(this.props.intl.locale, 'short');\n  daysShort = getDayNames(this.props.intl.locale, 'narrow');\n  daysLong = getDayNames(this.props.intl.locale, 'long');\n\n  selectDay = (day: number) => {\n    const { viewMonth, viewYear, onSelect } = this.props;\n    onSelect(new Date(viewYear, viewMonth, day));\n  };\n\n  isOutOfRange = (day: number) => {\n    if (day < 0) {\n      return true;\n    }\n    const { min, max, viewMonth, viewYear } = this.props;\n    const date = new Date(viewYear, viewMonth, day);\n    return !isWithinRange(date, min, max);\n  };\n\n  isDisabled = (day: number) => {\n    if (day < 0) {\n      return false;\n    }\n    const { viewMonth, viewYear, disabledRules } = this.props;\n    const date = new Date(viewYear, viewMonth, day);\n    return isDateDisabled(date, disabledRules);\n  };\n\n  isUnavailable = (day: number) => this.isOutOfRange(day) || this.isDisabled(day);\n\n  isActive = (day: number) => {\n    const { selectedDate, viewMonth, viewYear } = this.props;\n    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));\n  };\n\n  isFocused = (day: number) => {\n    const { focusedDate, viewMonth, viewYear } = this.props;\n    return !!(focusedDate && Number(new Date(viewYear, viewMonth, day)) === Number(focusedDate));\n  };\n\n  isToday = (day: number) => {\n    const { viewMonth, viewYear } = this.props;\n    return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));\n  };\n\n  getAutofocusDay = (weeks: number[][]) => {\n    const days = weeks.flatMap((week) => week);\n    return getFocusableTime({\n      isActive: this.isFocused,\n      isNow: this.isToday,\n      isDisabled: this.isUnavailable,\n      timeSpan: days,\n    });\n  };\n\n  render() {\n    const { viewMonth, viewYear, intl, disabledReasonId } = this.props;\n    const weeks = this.getTableStructure();\n    const autoFocusDay = this.getAutofocusDay(weeks);\n    return (\n      <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n        <thead>\n          <tr>\n            {this.days.map((day, index) => (\n              <th\n                key={day}\n                className={\n                  index > 4\n                    ? 'text-xs-center np-text-body-default'\n                    : 'text-xs-center np-text-body-default-bold'\n                }\n              >\n                <span className=\"hidden-xs\">\n                  <abbr title={this.daysLong[index]}>{day.slice(0, 3)}</abbr>\n                </span>\n                <span className=\"visible-xs-inline-block\">\n                  <abbr title={this.daysLong[index]}>{this.daysShort[index].slice(0, 2)}</abbr>\n                </span>\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {/* eslint-disable react/no-array-index-key */}\n          {weeks.map((week, weekIndex) => (\n            <tr key={weekIndex}>\n              {week.map((day, dayIndex) => {\n                const dayOutOfRange = this.isOutOfRange(day);\n                const dayDisabled = this.isDisabled(day);\n                return (\n                  <td key={dayIndex} className={dayIndex > 4 ? 'weekend' : ''}>\n                    {day !== -1 && (\n                      <TableLink\n                        item={day}\n                        type=\"day\"\n                        title={formatDate(\n                          new Date(viewYear, viewMonth, day),\n                          intl.locale,\n                          SHORT_DAY_FORMAT,\n                        )}\n                        autofocus={day === autoFocusDay}\n                        longTitle={formatDate(\n                          new Date(viewYear, viewMonth, day),\n                          intl.locale,\n                          LONG_DAY_FORMAT,\n                        )}\n                        active={this.isActive(day)}\n                        outOfRange={dayOutOfRange}\n                        disabled={dayDisabled}\n                        today={this.isToday(day)}\n                        disabledReasonId={disabledReasonId}\n                        onClick={this.selectDay}\n                      />\n                    )}\n                  </td>\n                );\n              })}\n            </tr>\n          ))}\n          {/* eslint-enable react/no-array-index-key */}\n        </tbody>\n      </table>\n    );\n  }\n}\n\nexport default injectIntl(DayCalendarTable);\n"],"names":["SHORT_DAY_FORMAT","day","LONG_DAY_FORMAT","month","year","DayCalendarTable","PureComponent","getTableStructure","viewMonth","viewYear","props","firstDayOfMonth","Date","getDay","daysInMonth","getDate","week","weeks","i","push","length","days","getDayNames","intl","locale","daysShort","daysLong","selectDay","onSelect","isOutOfRange","min","max","date","isWithinRange","isDisabled","disabledRules","isDateDisabled","isUnavailable","isActive","selectedDate","Number","isFocused","focusedDate","isToday","getStartOfDay","getAutofocusDay","flatMap","getFocusableTime","isNow","timeSpan","render","disabledReasonId","autoFocusDay","_jsxs","className","children","_jsx","map","index","title","slice","weekIndex","dayIndex","dayOutOfRange","dayDisabled","TableLink","item","type","formatDate","autofocus","longTitle","active","outOfRange","disabled","today","onClick","injectIntl"],"mappings":"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"}

package/build/Calendar/MonthCalendar/MonthCalendar.js

@@ -30,6 +30,7 @@ let MonthCalendar$1 = class MonthCalendar extends React.PureComponent {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewYear,
@@ -40,17 +41,22 @@ let MonthCalendar$1 = class MonthCalendar extends React.PureComponent {
       placeholder,
       onLabelClick
     } = this.props;
+    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());
+    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader.default, {
         dateMode: formatMessage(Calendar_messages.default.year),
         label: formatting.formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
+        isPreviousDisabled: isPreviousDisabled,
+        isNextDisabled: isNextDisabled,
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousYear,
         onNextClick: this.selectNextYear
       }), /*#__PURE__*/jsxRuntime.jsx(MonthCalendarTable.default, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,

package/build/Calendar/MonthCalendar/MonthCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendar.js","sources":["../../../src/Calendar/MonthCalendar/MonthCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport MonthCalendarTable from './Table';\n\ninterface MonthCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: () => void;\n  onLabelClick: () => void;\n  onViewDateUpdate: (date: { year?: number; month?: number }) => void;\n}\n\nclass MonthCalendar extends PureComponent<MonthCalendarProps> {\n  onMonthSelect = (month: number) => {\n    this.props.onViewDateUpdate({ month });\n    this.props.onSelect();\n  };\n\n  selectPreviousYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 1 });\n  };\n\n  selectNextYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 1 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      intl: { locale, formatMessage },\n      placeholder,\n      onLabelClick,\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.year)}\n          label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}\n          onLabelClick={onLabelClick}\n          onPreviousClick={this.selectPreviousYear}\n          onNextClick={this.selectNextYear}\n        />\n        <MonthCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onMonthSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(MonthCalendar);\n"],"names":["MonthCalendar","PureComponent","onMonthSelect","month","props","onViewDateUpdate","onSelect","selectPreviousYear","year","viewYear","selectNextYear","render","selectedDate","min","max","intl","locale","formatMessage","placeholder","onLabelClick","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","label","formatDate","Date","onPreviousClick","onNextClick","MonthCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;;sBAoBA,MAAMA,aAAc,SAAQC,mBAAiC,CAAA;EAC3DC,aAAa,GAAIC,KAAa,IAAI;AAChC,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAK,KAAE,CAAC;AACtC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,kBAAkB,GAAGA,MAAK;AACxB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;EAEDC,cAAc,GAAGA,MAAK;AACpB,IAAA,IAAI,CAACN,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;AACRM,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;AACXC,MAAAA;KACD,GAAG,IAAI,CAACf,KAAK;IACd,oBACEgB,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,QAAQ,EAAER,aAAa,CAACS,yBAAQ,CAAClB,IAAI,CAAE;AACvCmB,QAAAA,KAAK,EAAEC,qBAAU,CAAC,IAAIC,IAAI,CAACpB,QAAQ,EAAE,CAAC,CAAC,EAAEO,MAAM,EAAE;AAAER,UAAAA,IAAI,EAAE;AAAS,SAAE,CAAE;AACtEW,QAAAA,YAAY,EAAEA,YAAa;QAC3BW,eAAe,EAAE,IAAI,CAACvB,kBAAmB;QACzCwB,WAAW,EAAE,IAAI,CAACrB;AAAe,OAAA,CAEnC,eAAAa,cAAA,CAACS,0BAAkB,EAAA;AACjBpB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBS,QAAAA,WAAW,EAAEA,WAAY;QACzBZ,QAAQ,EAAE,IAAI,CAACJ;AAAc,OAAA,CAEjC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,oBAAe+B,qBAAU,CAACjC,eAAa,CAAC;;;;"}
+{"version":3,"file":"MonthCalendar.js","sources":["../../../src/Calendar/MonthCalendar/MonthCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport MonthCalendarTable from './Table';\n\ninterface MonthCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  focusedDate?: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: () => void;\n  onLabelClick: () => void;\n  onViewDateUpdate: (date: { year?: number; month?: number }) => void;\n}\n\nclass MonthCalendar extends PureComponent<MonthCalendarProps> {\n  onMonthSelect = (month: number) => {\n    this.props.onViewDateUpdate({ month });\n    this.props.onSelect();\n  };\n\n  selectPreviousYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 1 });\n  };\n\n  selectNextYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 1 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      focusedDate,\n      min,\n      max,\n      viewYear,\n      intl: { locale, formatMessage },\n      placeholder,\n      onLabelClick,\n    } = this.props;\n    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());\n    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());\n\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.year)}\n          label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}\n          isPreviousDisabled={isPreviousDisabled}\n          isNextDisabled={isNextDisabled}\n          onLabelClick={onLabelClick}\n          onPreviousClick={this.selectPreviousYear}\n          onNextClick={this.selectNextYear}\n        />\n        <MonthCalendarTable\n          selectedDate={selectedDate}\n          focusedDate={focusedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onMonthSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(MonthCalendar);\n"],"names":["MonthCalendar","PureComponent","onMonthSelect","month","props","onViewDateUpdate","onSelect","selectPreviousYear","year","viewYear","selectNextYear","render","selectedDate","focusedDate","min","max","intl","locale","formatMessage","placeholder","onLabelClick","isPreviousDisabled","getFullYear","isNextDisabled","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","label","formatDate","Date","onPreviousClick","onNextClick","MonthCalendarTable","injectIntl"],"mappings":";;;;;;;;;;;;sBAqBA,MAAMA,aAAc,SAAQC,mBAAiC,CAAA;EAC3DC,aAAa,GAAIC,KAAa,IAAI;AAChC,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAK,KAAE,CAAC;AACtC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,kBAAkB,GAAGA,MAAK;AACxB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;EAEDC,cAAc,GAAGA,MAAK;AACpB,IAAA,IAAI,CAACN,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,WAAW;MACXC,GAAG;MACHC,GAAG;MACHN,QAAQ;AACRO,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;AACXC,MAAAA;KACD,GAAG,IAAI,CAAChB,KAAK;AACd,IAAA,MAAMiB,kBAAkB,GAAG,CAAC,EAAEP,GAAG,IAAIL,QAAQ,GAAG,CAAC,GAAGK,GAAG,CAACQ,WAAW,EAAE,CAAC;AACtE,IAAA,MAAMC,cAAc,GAAG,CAAC,EAAER,GAAG,IAAIN,QAAQ,GAAG,CAAC,GAAGM,GAAG,CAACO,WAAW,EAAE,CAAC;IAElE,oBACEE,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEX,aAAa,CAACY,yBAAQ,CAACtB,IAAI,CAAE;AACvCuB,QAAAA,KAAK,EAAEC,qBAAU,CAAC,IAAIC,IAAI,CAACxB,QAAQ,EAAE,CAAC,CAAC,EAAEQ,MAAM,EAAE;AAAET,UAAAA,IAAI,EAAE;AAAS,SAAE,CAAE;AACtEa,QAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,QAAAA,cAAc,EAAEA,cAAe;AAC/BH,QAAAA,YAAY,EAAEA,YAAa;QAC3Bc,eAAe,EAAE,IAAI,CAAC3B,kBAAmB;QACzC4B,WAAW,EAAE,IAAI,CAACzB;AAAe,OAAA,CAEnC,eAAAiB,cAAA,CAACS,0BAAkB,EAAA;AACjBxB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTN,QAAAA,QAAQ,EAAEA,QAAS;AACnBU,QAAAA,WAAW,EAAEA,WAAY;QACzBb,QAAQ,EAAE,IAAI,CAACJ;AAAc,OAAA,CAEjC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,oBAAemC,qBAAU,CAACrC,eAAa,CAAC;;;;"}

package/build/Calendar/MonthCalendar/MonthCalendar.mjs

@@ -26,6 +26,7 @@ class MonthCalendar extends PureComponent {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewYear,
@@ -36,17 +37,22 @@ class MonthCalendar extends PureComponent {
       placeholder,
       onLabelClick
     } = this.props;
+    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());
+    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(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
       }), /*#__PURE__*/jsx(MonthCalendarTable, {
         selectedDate: selectedDate,
+        focusedDate: focusedDate,
         min: min,
         max: max,
         viewYear: viewYear,

package/build/Calendar/MonthCalendar/MonthCalendar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendar.mjs","sources":["../../../src/Calendar/MonthCalendar/MonthCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport MonthCalendarTable from './Table';\n\ninterface MonthCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: () => void;\n  onLabelClick: () => void;\n  onViewDateUpdate: (date: { year?: number; month?: number }) => void;\n}\n\nclass MonthCalendar extends PureComponent<MonthCalendarProps> {\n  onMonthSelect = (month: number) => {\n    this.props.onViewDateUpdate({ month });\n    this.props.onSelect();\n  };\n\n  selectPreviousYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 1 });\n  };\n\n  selectNextYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 1 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      min,\n      max,\n      viewYear,\n      intl: { locale, formatMessage },\n      placeholder,\n      onLabelClick,\n    } = this.props;\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.year)}\n          label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}\n          onLabelClick={onLabelClick}\n          onPreviousClick={this.selectPreviousYear}\n          onNextClick={this.selectNextYear}\n        />\n        <MonthCalendarTable\n          selectedDate={selectedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onMonthSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(MonthCalendar);\n"],"names":["MonthCalendar","PureComponent","onMonthSelect","month","props","onViewDateUpdate","onSelect","selectPreviousYear","year","viewYear","selectNextYear","render","selectedDate","min","max","intl","locale","formatMessage","placeholder","onLabelClick","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","label","formatDate","Date","onPreviousClick","onNextClick","MonthCalendarTable","injectIntl"],"mappings":";;;;;;;;AAoBA,MAAMA,aAAc,SAAQC,aAAiC,CAAA;EAC3DC,aAAa,GAAIC,KAAa,IAAI;AAChC,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAK,KAAE,CAAC;AACtC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,kBAAkB,GAAGA,MAAK;AACxB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;EAEDC,cAAc,GAAGA,MAAK;AACpB,IAAA,IAAI,CAACN,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,GAAG;MACHC,GAAG;MACHL,QAAQ;AACRM,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;AACXC,MAAAA;KACD,GAAG,IAAI,CAACf,KAAK;IACd,oBACEgB,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAER,aAAa,CAACS,QAAQ,CAAClB,IAAI,CAAE;AACvCmB,QAAAA,KAAK,EAAEC,UAAU,CAAC,IAAIC,IAAI,CAACpB,QAAQ,EAAE,CAAC,CAAC,EAAEO,MAAM,EAAE;AAAER,UAAAA,IAAI,EAAE;AAAS,SAAE,CAAE;AACtEW,QAAAA,YAAY,EAAEA,YAAa;QAC3BW,eAAe,EAAE,IAAI,CAACvB,kBAAmB;QACzCwB,WAAW,EAAE,IAAI,CAACrB;AAAe,OAAA,CAEnC,eAAAa,GAAA,CAACS,kBAAkB,EAAA;AACjBpB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTL,QAAAA,QAAQ,EAAEA,QAAS;AACnBS,QAAAA,WAAW,EAAEA,WAAY;QACzBZ,QAAQ,EAAE,IAAI,CAACJ;AAAc,OAAA,CAEjC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,sBAAe+B,UAAU,CAACjC,aAAa,CAAC;;;;"}
+{"version":3,"file":"MonthCalendar.mjs","sources":["../../../src/Calendar/MonthCalendar/MonthCalendar.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { PureComponent } from 'react';\nimport { injectIntl, type WrappedComponentProps } from '../../common/injectIntl';\n\nimport messages from '../Calendar.messages';\nimport DateHeader from '../DateHeader';\n\nimport MonthCalendarTable from './Table';\n\ninterface MonthCalendarProps extends WrappedComponentProps {\n  selectedDate: Date | null;\n  focusedDate?: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: () => void;\n  onLabelClick: () => void;\n  onViewDateUpdate: (date: { year?: number; month?: number }) => void;\n}\n\nclass MonthCalendar extends PureComponent<MonthCalendarProps> {\n  onMonthSelect = (month: number) => {\n    this.props.onViewDateUpdate({ month });\n    this.props.onSelect();\n  };\n\n  selectPreviousYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear - 1 });\n  };\n\n  selectNextYear = () => {\n    this.props.onViewDateUpdate({ year: this.props.viewYear + 1 });\n  };\n\n  render() {\n    const {\n      selectedDate,\n      focusedDate,\n      min,\n      max,\n      viewYear,\n      intl: { locale, formatMessage },\n      placeholder,\n      onLabelClick,\n    } = this.props;\n    const isPreviousDisabled = !!(min && viewYear - 1 < min.getFullYear());\n    const isNextDisabled = !!(max && viewYear + 1 > max.getFullYear());\n\n    return (\n      <>\n        <DateHeader\n          dateMode={formatMessage(messages.year)}\n          label={formatDate(new Date(viewYear, 0), locale, { year: 'numeric' })}\n          isPreviousDisabled={isPreviousDisabled}\n          isNextDisabled={isNextDisabled}\n          onLabelClick={onLabelClick}\n          onPreviousClick={this.selectPreviousYear}\n          onNextClick={this.selectNextYear}\n        />\n        <MonthCalendarTable\n          selectedDate={selectedDate}\n          focusedDate={focusedDate}\n          min={min}\n          max={max}\n          viewYear={viewYear}\n          placeholder={placeholder}\n          onSelect={this.onMonthSelect}\n        />\n      </>\n    );\n  }\n}\n\nexport default injectIntl(MonthCalendar);\n"],"names":["MonthCalendar","PureComponent","onMonthSelect","month","props","onViewDateUpdate","onSelect","selectPreviousYear","year","viewYear","selectNextYear","render","selectedDate","focusedDate","min","max","intl","locale","formatMessage","placeholder","onLabelClick","isPreviousDisabled","getFullYear","isNextDisabled","_jsxs","_Fragment","children","_jsx","DateHeader","dateMode","messages","label","formatDate","Date","onPreviousClick","onNextClick","MonthCalendarTable","injectIntl"],"mappings":";;;;;;;;AAqBA,MAAMA,aAAc,SAAQC,aAAiC,CAAA;EAC3DC,aAAa,GAAIC,KAAa,IAAI;AAChC,IAAA,IAAI,CAACC,KAAK,CAACC,gBAAgB,CAAC;AAAEF,MAAAA;AAAK,KAAE,CAAC;AACtC,IAAA,IAAI,CAACC,KAAK,CAACE,QAAQ,EAAE;EACvB,CAAC;EAEDC,kBAAkB,GAAGA,MAAK;AACxB,IAAA,IAAI,CAACH,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;EAEDC,cAAc,GAAGA,MAAK;AACpB,IAAA,IAAI,CAACN,KAAK,CAACC,gBAAgB,CAAC;AAAEG,MAAAA,IAAI,EAAE,IAAI,CAACJ,KAAK,CAACK,QAAQ,GAAG;AAAC,KAAE,CAAC;EAChE,CAAC;AAEDE,EAAAA,MAAMA,GAAA;IACJ,MAAM;MACJC,YAAY;MACZC,WAAW;MACXC,GAAG;MACHC,GAAG;MACHN,QAAQ;AACRO,MAAAA,IAAI,EAAE;QAAEC,MAAM;AAAEC,QAAAA;OAAe;MAC/BC,WAAW;AACXC,MAAAA;KACD,GAAG,IAAI,CAAChB,KAAK;AACd,IAAA,MAAMiB,kBAAkB,GAAG,CAAC,EAAEP,GAAG,IAAIL,QAAQ,GAAG,CAAC,GAAGK,GAAG,CAACQ,WAAW,EAAE,CAAC;AACtE,IAAA,MAAMC,cAAc,GAAG,CAAC,EAAER,GAAG,IAAIN,QAAQ,GAAG,CAAC,GAAGM,GAAG,CAACO,WAAW,EAAE,CAAC;IAElE,oBACEE,IAAA,CAAAC,QAAA,EAAA;MAAAC,QAAA,EAAA,cACEC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,QAAQ,EAAEX,aAAa,CAACY,QAAQ,CAACtB,IAAI,CAAE;AACvCuB,QAAAA,KAAK,EAAEC,UAAU,CAAC,IAAIC,IAAI,CAACxB,QAAQ,EAAE,CAAC,CAAC,EAAEQ,MAAM,EAAE;AAAET,UAAAA,IAAI,EAAE;AAAS,SAAE,CAAE;AACtEa,QAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,QAAAA,cAAc,EAAEA,cAAe;AAC/BH,QAAAA,YAAY,EAAEA,YAAa;QAC3Bc,eAAe,EAAE,IAAI,CAAC3B,kBAAmB;QACzC4B,WAAW,EAAE,IAAI,CAACzB;AAAe,OAAA,CAEnC,eAAAiB,GAAA,CAACS,kBAAkB,EAAA;AACjBxB,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,GAAG,EAAEA,GAAI;AACTC,QAAAA,GAAG,EAAEA,GAAI;AACTN,QAAAA,QAAQ,EAAEA,QAAS;AACnBU,QAAAA,WAAW,EAAEA,WAAY;QACzBb,QAAQ,EAAE,IAAI,CAACJ;AAAc,OAAA,CAEjC;AAAA,KAAA,CAAG;AAEP,EAAA;AACD;AAED,sBAAemC,UAAU,CAACrC,aAAa,CAAC;;;;"}

package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var formatting = require('@transferwise/formatting');
 var reactIntl = require('react-intl');
 var GetFocusableTime = require('../../GetFocusableTime/GetFocusableTime.js');
-var TableLink = require('../../tableLink/TableLink.js');
+var TableLink = require('../../TableLink/TableLink.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const ROWS = 3;
@@ -15,6 +15,7 @@ const MONTH_ONLY_FORMAT = {
 };
 const MonthCalendarTable = ({
   selectedDate,
+  focusedDate,
   min,
   max,
   viewYear,
@@ -30,7 +31,8 @@ const MonthCalendarTable = ({
       type: "month",
       title: formatting.formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
       active: isActive(month),
-      disabled: isDisabled(month),
+      outOfRange: isDisabled(month),
+      disabled: false,
       today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
       autofocus: autofocusMonth === month,
       onClick: onSelect
@@ -39,6 +41,9 @@ const MonthCalendarTable = ({
   const isActive = month => {
     return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());
   };
+  const isFocused = month => {
+    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());
+  };
   const isThisMonth = month => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
@@ -51,7 +56,7 @@ const MonthCalendarTable = ({
       length: ROWS * COLS
     }, (_, index) => index);
     return GetFocusableTime.getFocusableTime({
-      isActive,
+      isActive: isFocused,
       isNow: isThisMonth,
       isDisabled,
       timeSpan: months

package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.js","sources":["../../../../src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
+{"version":3,"file":"MonthCalendarTable.js","sources":["../../../../src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../TableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  focusedDate?: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  focusedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        outOfRange={isDisabled(month)}\n        disabled={false}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());\n  };\n\n  const isFocused = (month: number) => {\n    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({\n      isActive: isFocused,\n      isNow: isThisMonth,\n      isDisabled,\n      timeSpan: months,\n    });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","focusedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","outOfRange","isDisabled","disabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isFocused","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs

@@ -1,7 +1,7 @@
 import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime.mjs';
-import TableLink from '../../tableLink/TableLink.mjs';
+import TableLink from '../../TableLink/TableLink.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ROWS = 3;
@@ -11,6 +11,7 @@ const MONTH_ONLY_FORMAT = {
 };
 const MonthCalendarTable = ({
   selectedDate,
+  focusedDate,
   min,
   max,
   viewYear,
@@ -26,7 +27,8 @@ const MonthCalendarTable = ({
       type: "month",
       title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
       active: isActive(month),
-      disabled: isDisabled(month),
+      outOfRange: isDisabled(month),
+      disabled: false,
       today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
       autofocus: autofocusMonth === month,
       onClick: onSelect
@@ -35,6 +37,9 @@ const MonthCalendarTable = ({
   const isActive = month => {
     return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());
   };
+  const isFocused = month => {
+    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());
+  };
   const isThisMonth = month => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
@@ -47,7 +52,7 @@ const MonthCalendarTable = ({
       length: ROWS * COLS
     }, (_, index) => index);
     return getFocusableTime({
-      isActive,
+      isActive: isFocused,
       isNow: isThisMonth,
       isDisabled,
       timeSpan: months

package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonthCalendarTable.mjs","sources":["../../../../src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        disabled={isDisabled(month)}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
+{"version":3,"file":"MonthCalendarTable.mjs","sources":["../../../../src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';\nimport TableLink from '../../TableLink';\n\ninterface MonthCalendarTableProps {\n  selectedDate: Date | null;\n  focusedDate?: Date | null;\n  min: Date | null;\n  max: Date | null;\n  viewYear: number;\n  placeholder?: string;\n  onSelect: (date: number) => void;\n}\n\nconst ROWS = 3;\nconst COLS = 4;\nconst MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };\n\nconst MonthCalendarTable = ({\n  selectedDate,\n  focusedDate,\n  min,\n  max,\n  viewYear,\n  placeholder,\n  onSelect,\n}: MonthCalendarTableProps) => {\n  const { locale } = useIntl();\n\n  const getLink = (month: number) => {\n    return (\n      <TableLink\n        item={month}\n        type=\"month\"\n        title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}\n        active={isActive(month)}\n        outOfRange={isDisabled(month)}\n        disabled={false}\n        today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}\n        autofocus={autofocusMonth === month}\n        onClick={onSelect}\n      />\n    );\n  };\n\n  const isActive = (month: number) => {\n    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());\n  };\n\n  const isFocused = (month: number) => {\n    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());\n  };\n\n  const isThisMonth = (month: number) => {\n    return viewYear === new Date().getFullYear() && month === new Date().getMonth();\n  };\n\n  const isDisabled = (month: number) => {\n    const date = new Date(viewYear, month);\n    return !!(\n      (min && date < new Date(min.getFullYear(), min.getMonth())) ||\n      (max && date > new Date(max.getFullYear(), max.getMonth()))\n    );\n  };\n\n  const autofocusMonth = (() => {\n    const months = Array.from({ length: ROWS * COLS }, (_, index) => index);\n    return getFocusableTime({\n      isActive: isFocused,\n      isNow: isThisMonth,\n      isDisabled,\n      timeSpan: months,\n    });\n  })();\n\n  return (\n    <table className=\"table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0\">\n      <thead className=\"sr-only\">\n        <tr>\n          <th colSpan={COLS}>{placeholder}</th>\n        </tr>\n      </thead>\n      <tbody>\n        {Array.from({ length: ROWS }, (_, rowIndex) => (\n          <tr key={rowIndex}>\n            {Array.from({ length: COLS }, (_, colIndex) => (\n              <td key={colIndex}>{getLink(rowIndex * COLS + colIndex)}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nexport default MonthCalendarTable;\n"],"names":["ROWS","COLS","MONTH_ONLY_FORMAT","month","MonthCalendarTable","selectedDate","focusedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","outOfRange","isDisabled","disabled","today","getFullYear","getMonth","autofocus","autofocusMonth","onClick","isFocused","isThisMonth","date","months","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}

package/build/Calendar/{tableLink → TableLink}/TableLink.js

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var React = require('react');
 var reactIntl = require('react-intl');
 var Calendar_messages = require('../Calendar.messages.js');
+var SentimentSurface = require('../../SentimentSurface/SentimentSurface.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const TableLink = ({
@@ -14,9 +15,11 @@ const TableLink = ({
   title,
   longTitle,
   active,
+  outOfRange,
   disabled,
   today,
   autofocus,
+  disabledReasonId,
   onClick
 }) => {
   const buttonRef = React.useRef(null);
@@ -30,28 +33,40 @@ const TableLink = ({
   }, [autofocus]);
   const onCalendarClick = event => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
+    onClick(item);
   };
+  const isUnavailable = outOfRange || disabled;
   const calculateAriaLabel = () => {
+    let label = longTitle || title || '';
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(Calendar_messages.default.selected)} ${intl.formatMessage(Calendar_messages.default[type])}`;
+      label += `, ${intl.formatMessage(Calendar_messages.default.selected)} ${intl.formatMessage(Calendar_messages.default[type])}`;
+    }
+    if (isUnavailable) {
+      label += `, ${intl.formatMessage(Calendar_messages.default.notAvailable)}`;
     }
-    return longTitle || title;
+    return label;
   };
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
+  return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default
+  // @ts-expect-error - Generic forwardRef limitation in SentimentSurface
+  , {
     ref: buttonRef,
-    type: "button",
-    className: clsx.clsx(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
+    as: "button",
+    "data-calendar-cell": true,
+    "aria-describedby": isUnavailable ? disabledReasonId : undefined,
+    "aria-disabled": isUnavailable || undefined,
+    "aria-label": calculateAriaLabel(),
+    "aria-pressed": active,
+    className: clsx.clsx(`wds-Calendar__option--${type}`, `tw-date-lookup-${type}-option np-text-body-default-bold`, {
       active: !!active
     }, {
       today: !!today
+    }, {
+      disabled: !!isUnavailable
     }),
-    disabled: disabled,
+    hasBaseStyles: false,
+    sentiment: isUnavailable ? 'negative' : 'neutral',
     tabIndex: autofocus ? 0 : -1,
-    "aria-label": calculateAriaLabel(),
-    "aria-pressed": active,
+    type: "button",
     onClick: onCalendarClick,
     children: title || item
   });

package/build/Calendar/TableLink/TableLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/TableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\nimport SentimentSurface from '../../SentimentSurface';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  outOfRange: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  disabledReasonId?: string;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  outOfRange,\n  disabled,\n  today,\n  autofocus,\n  disabledReasonId,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent) => {\n    event.preventDefault();\n    onClick(item);\n  };\n\n  const isUnavailable = outOfRange || disabled;\n\n  const calculateAriaLabel = () => {\n    let label = longTitle || title || '';\n    if (active) {\n      label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;\n    }\n    if (isUnavailable) {\n      label += `, ${intl.formatMessage(messages.notAvailable)}`;\n    }\n    return label;\n  };\n\n  return (\n    <SentimentSurface\n      // @ts-expect-error - Generic forwardRef limitation in SentimentSurface\n      ref={buttonRef}\n      as=\"button\"\n      data-calendar-cell\n      aria-describedby={isUnavailable ? disabledReasonId : undefined}\n      aria-disabled={isUnavailable || undefined}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      className={clsx(\n        `wds-Calendar__option--${type}`,\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n        { disabled: !!isUnavailable },\n      )}\n      hasBaseStyles={false}\n      sentiment={isUnavailable ? 'negative' : 'neutral'}\n      tabIndex={autofocus ? 0 : -1}\n      type=\"button\"\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </SentimentSurface>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","outOfRange","disabled","today","autofocus","disabledReasonId","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","isUnavailable","calculateAriaLabel","label","formatMessage","messages","selected","notAvailable","_jsx","SentimentSurface","ref","as","undefined","className","clsx","hasBaseStyles","sentiment","tabIndex","children"],"mappings":";;;;;;;;;;;AAqBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,SAAS,EAAE;AACbQ,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,eAAe,GAAIC,KAAuB,IAAI;IAClDA,KAAK,CAACC,cAAc,EAAE;IACtBX,OAAO,CAACV,IAAI,CAAC;EACf,CAAC;AAED,EAAA,MAAMsB,aAAa,GAAGjB,UAAU,IAAIC,QAAQ;EAE5C,MAAMiB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIC,KAAK,GAAGrB,SAAS,IAAID,KAAK,IAAI,EAAE;AACpC,IAAA,IAAIE,MAAM,EAAE;MACVoB,KAAK,IAAI,KAAKX,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACC,QAAQ,CAAC,IAAId,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACzB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC7F,IAAA;AACA,IAAA,IAAIqB,aAAa,EAAE;MACjBE,KAAK,IAAI,CAAA,EAAA,EAAKX,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACE,YAAY,CAAC,CAAA,CAAE;AAC3D,IAAA;AACA,IAAA,OAAOJ,KAAK;EACd,CAAC;AAED,EAAA,oBACEK,cAAA,CAACC;AACC;AAAA,IAAA;AACAC,IAAAA,GAAG,EAAEpB,SAAU;AACfqB,IAAAA,EAAE,EAAC,QAAQ;IACX,oBAAA,EAAA,IAAkB;AAClB,IAAA,kBAAA,EAAkBV,aAAa,GAAGb,gBAAgB,GAAGwB,SAAU;IAC/D,eAAA,EAAeX,aAAa,IAAIW,SAAU;IAC1C,YAAA,EAAYV,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAcnB,MAAO;IACrB8B,SAAS,EAAEC,SAAI,CACb,CAAA,sBAAA,EAAyBlC,IAAI,EAAE,EAC/B,CAAA,eAAA,EAAkBA,IAAI,CAAA,iCAAA,CAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEG,KAAK,EAAE,CAAC,CAACA;AAAK,KAAE,EAClB;MAAED,QAAQ,EAAE,CAAC,CAACgB;AAAa,KAAE,CAC7B;AACFc,IAAAA,aAAa,EAAE,KAAM;AACrBC,IAAAA,SAAS,EAAEf,aAAa,GAAG,UAAU,GAAG,SAAU;AAClDgB,IAAAA,QAAQ,EAAE9B,SAAS,GAAG,CAAC,GAAG,EAAG;AAC7BP,IAAAA,IAAI,EAAC,QAAQ;AACbS,IAAAA,OAAO,EAAES,eAAgB;IAAAoB,QAAA,EAExBrC,KAAK,IAAIF;AAAI,GACE,CAAC;AAEvB;;;;"}

package/build/Calendar/{tableLink → TableLink}/TableLink.mjs

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { useRef, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import messages from '../Calendar.messages.mjs';
+import SentimentSurface from '../../SentimentSurface/SentimentSurface.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const TableLink = ({
@@ -10,9 +11,11 @@ const TableLink = ({
   title,
   longTitle,
   active,
+  outOfRange,
   disabled,
   today,
   autofocus,
+  disabledReasonId,
   onClick
 }) => {
   const buttonRef = useRef(null);
@@ -26,28 +29,40 @@ const TableLink = ({
   }, [autofocus]);
   const onCalendarClick = event => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
+    onClick(item);
   };
+  const isUnavailable = outOfRange || disabled;
   const calculateAriaLabel = () => {
+    let label = longTitle || title || '';
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
+      label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
+    }
+    if (isUnavailable) {
+      label += `, ${intl.formatMessage(messages.notAvailable)}`;
     }
-    return longTitle || title;
+    return label;
   };
-  return /*#__PURE__*/jsx("button", {
+  return /*#__PURE__*/jsx(SentimentSurface
+  // @ts-expect-error - Generic forwardRef limitation in SentimentSurface
+  , {
     ref: buttonRef,
-    type: "button",
-    className: clsx(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
+    as: "button",
+    "data-calendar-cell": true,
+    "aria-describedby": isUnavailable ? disabledReasonId : undefined,
+    "aria-disabled": isUnavailable || undefined,
+    "aria-label": calculateAriaLabel(),
+    "aria-pressed": active,
+    className: clsx(`wds-Calendar__option--${type}`, `tw-date-lookup-${type}-option np-text-body-default-bold`, {
       active: !!active
     }, {
       today: !!today
+    }, {
+      disabled: !!isUnavailable
     }),
-    disabled: disabled,
+    hasBaseStyles: false,
+    sentiment: isUnavailable ? 'negative' : 'neutral',
     tabIndex: autofocus ? 0 : -1,
-    "aria-label": calculateAriaLabel(),
-    "aria-pressed": active,
+    type: "button",
     onClick: onCalendarClick,
     children: title || item
   });