@transferwise/components 0.0.0-experimental-0df72a3 → 0.0.0-experimental-fe160ab

package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx

@@ -2,10 +2,11 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 interface MonthCalendarTableProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -19,6 +20,7 @@ const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
 const MonthCalendarTable = ({
   selectedDate,
+  focusedDate,
   min,
   max,
   viewYear,
@@ -34,7 +36,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}
@@ -46,6 +49,10 @@ const MonthCalendarTable = ({
     return !!(month === selectedDate?.getMonth() && viewYear === selectedDate?.getFullYear());
   };
 
+  const isFocused = (month: number) => {
+    return !!(month === focusedDate?.getMonth() && viewYear === focusedDate?.getFullYear());
+  };
+
   const isThisMonth = (month: number) => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
   };
@@ -60,7 +67,12 @@ const MonthCalendarTable = ({
 
   const autofocusMonth = (() => {
     const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
-    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
+    return getFocusableTime({
+      isActive: isFocused,
+      isNow: isThisMonth,
+      isDisabled,
+      timeSpan: months,
+    });
   })();
 
   return (

package/src/Calendar/TableLink/TableLink.css

@@ -0,0 +1,115 @@
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
+  width: 100%;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  border: transparent;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+@media (max-width: 320px) {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
+    padding: 0;
+  }
+}
+.wds-Calendar__option--day:focus,
+.wds-Calendar__option--month:focus,
+.wds-Calendar__option--year:focus {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+.wds-Calendar__option--day {
+  height: 40px;
+  height: var(--size-40);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  line-height: 40px;
+  line-height: var(--size-40);
+  width: 40px;
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.wds-Calendar__option--day.today {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}

package/src/Calendar/TableLink/TableLink.less

@@ -0,0 +1,68 @@
+@import (reference) "./../../styles/variables/neptune-tokens.less";
+
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
+  width: 100%;
+  padding: var(--size-4) 0;
+  @media (--screen-400-zoom) {
+    padding: 0;
+  }
+  border: transparent;
+  border-radius: var(--radius-small);
+  background-color: transparent;
+  font-weight: var(--font-weight-semi-bold);
+  color: var(--color-content-primary);
+
+  &:focus {
+    background-color: var(--color-background-screen-hover);
+  }
+
+  &.disabled,
+  &[aria-disabled="true"] {
+    --ring-outline-color: var(--color-sentiment-content-primary);
+    color: var(--color-content-tertiary);
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus {
+      filter: unset;
+      opacity: unset;
+      background-color: var(--color-sentiment-background-surface);
+      color: var(--color-sentiment-content-primary);
+    }
+
+    &.active {
+      &,
+      &:hover,
+      &:active,
+      &:focus {
+        filter: unset;
+        opacity: unset;
+        background-color: var(--color-sentiment-interactive-primary);
+        color: var(--color-sentiment-interactive-secondary);
+      }
+    }
+
+    &.today {
+      text-decoration-color: var(--color-content-tertiary);
+    }
+  }
+}
+
+.wds-Calendar__option--day {
+  height: var(--size-40);
+  border-radius: var(--radius-full);
+  line-height: var(--size-40);
+  width: var(--size-40);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.today {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+  }
+}

package/src/Calendar/TableLink/TableLink.tsx

@@ -0,0 +1,112 @@
+import { clsx } from 'clsx';
+import { useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from '../Calendar.messages';
+import SentimentSurface from '../../SentimentSurface';
+
+interface TableLinkProps {
+  item: number;
+  type: 'day' | 'month' | 'year';
+  title?: string;
+  longTitle?: string;
+  active: boolean;
+  outOfRange: boolean;
+  disabled: boolean;
+  today: boolean;
+  autofocus?: boolean;
+  disabledReasonId?: string;
+  announceReasonOnFocus?: boolean;
+  onClick: (item: number) => void;
+  onFocus?: (item: number) => void;
+}
+
+const TableLink = ({
+  item,
+  type,
+  title,
+  longTitle,
+  active,
+  outOfRange,
+  disabled,
+  today,
+  autofocus,
+  disabledReasonId,
+  announceReasonOnFocus,
+  onClick,
+  onFocus,
+}: TableLinkProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  // Distinguishes keyboard-driven .focus() (arrow keys) from screen-reader-initiated focus (VoiceOver cursor).
+  // Without this, the onFocus callback would re-trigger state updates that conflict with the already-committed focusedDate.
+  const isProgrammaticFocus = useRef(false);
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (autofocus) {
+      setTimeout(() => {
+        isProgrammaticFocus.current = true;
+        buttonRef.current?.focus();
+        isProgrammaticFocus.current = false;
+      }, 0);
+    }
+  }, [autofocus]);
+
+  const isUnavailable = outOfRange || disabled;
+
+  const onCalendarClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (!isUnavailable) {
+      onClick(item);
+    }
+  };
+
+  const onCalendarFocus = () => {
+    if (!isProgrammaticFocus.current) {
+      onFocus?.(item);
+    }
+  };
+
+  const calculateAriaLabel = () => {
+    let label = longTitle || title || '';
+    if (active) {
+      label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
+    }
+    if (isUnavailable) {
+      label += `, ${intl.formatMessage(messages.notAvailable)}`;
+    }
+    return label;
+  };
+
+  return (
+    <SentimentSurface
+      // @ts-expect-error - Generic forwardRef limitation in SentimentSurface
+      ref={buttonRef}
+      as="button"
+      data-calendar-cell
+      aria-describedby={
+        isUnavailable || (autofocus && announceReasonOnFocus) ? 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 },
+      )}
+      hasBaseStyles={false}
+      sentiment={isUnavailable ? 'negative' : 'neutral'}
+      tabIndex={autofocus ? 0 : -1}
+      type="button"
+      onClick={onCalendarClick}
+      onFocus={onCalendarFocus}
+    >
+      {title || item}
+    </SentimentSurface>
+  );
+};
+
+export default TableLink;

package/src/Calendar/YearCalendar/Table/YearCalendarTable.tsx

@@ -2,10 +2,11 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import { getFocusableTime } from '../../GetFocusableTime/GetFocusableTime';
-import TableLink from '../../tableLink';
+import TableLink from '../../TableLink';
 
 interface YearCalendarTableProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -19,6 +20,7 @@ const YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };
 
 const YearCalendarTable = ({
   selectedDate,
+  focusedDate,
   min,
   max,
   viewYear,
@@ -34,7 +36,8 @@ const YearCalendarTable = ({
         type="year"
         title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
         active={isActive(year)}
-        disabled={isDisabled(year)}
+        outOfRange={isDisabled(year)}
+        disabled={false}
         today={isThisYear(year)}
         autofocus={autofocusYear === year}
         onClick={onSelect}
@@ -46,6 +49,10 @@ const YearCalendarTable = ({
     return !!(year === selectedDate?.getFullYear());
   };
 
+  const isFocused = (year: number) => {
+    return !!(year === focusedDate?.getFullYear());
+  };
+
   const isThisYear = (year: number) => {
     return year === new Date().getFullYear();
   };
@@ -56,7 +63,12 @@ const YearCalendarTable = ({
 
   const autofocusYear = (() => {
     const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);
-    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
+    return getFocusableTime({
+      isActive: isFocused,
+      isNow: isThisYear,
+      isDisabled,
+      timeSpan: years,
+    });
   })();
 
   return (

package/src/Calendar/YearCalendar/YearCalendar.tsx

@@ -8,6 +8,7 @@ import YearCalendarTable from './Table';
 
 interface YearCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
+  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -33,21 +34,29 @@ class YearCalendar extends PureComponent<YearCalendarProps> {
   render() {
     const {
       selectedDate,
+      focusedDate,
       min,
       max,
       viewYear,
       placeholder,
       intl: { formatMessage },
     } = this.props;
+    const startYear = viewYear - (viewYear % 20);
+    const isPreviousDisabled = !!(min && startYear - 1 < min.getFullYear());
+    const isNextDisabled = !!(max && startYear + 20 > max.getFullYear());
+
     return (
       <>
         <DateHeader
           dateMode={formatMessage(messages.twentyYears)}
+          isPreviousDisabled={isPreviousDisabled}
+          isNextDisabled={isNextDisabled}
           onPreviousClick={this.selectPreviousYears}
           onNextClick={this.selectNextYears}
         />
         <YearCalendarTable
           selectedDate={selectedDate}
+          focusedDate={focusedDate}
           min={min}
           max={max}
           viewYear={viewYear}

package/src/Calendar/_helpers/hasDisabledDatesInMonth/hasDisabledDatesInMonth.test.ts

@@ -0,0 +1,98 @@
+import { hasDisabledDatesInMonth } from './hasDisabledDatesInMonth';
+import type { DisabledRules } from '../../Calendar.types';
+
+describe('hasDisabledDatesInMonth', () => {
+  describe('weekdays', () => {
+    it('returns true when weekday rules exist (every month has all weekdays)', () => {
+      const rules: DisabledRules = { weekdays: ['sat', 'sun'], reason: 'Closed' };
+      expect(hasDisabledDatesInMonth(6, 2024, rules)).toBe(true);
+    });
+
+    it('returns true for any month when weekday rules exist', () => {
+      const rules: DisabledRules = { weekdays: ['mon'], reason: 'Closed' };
+      expect(hasDisabledDatesInMonth(0, 2024, rules)).toBe(true);
+      expect(hasDisabledDatesInMonth(11, 2024, rules)).toBe(true);
+    });
+
+    it('returns false when weekdays array is empty', () => {
+      const rules: DisabledRules = { weekdays: [], reason: 'None' };
+      expect(hasDisabledDatesInMonth(6, 2024, rules)).toBe(false);
+    });
+  });
+
+  describe('specific dates', () => {
+    const rules: DisabledRules = {
+      dates: [new Date(2024, 6, 11), new Date(2024, 6, 25), new Date(2025, 0, 1)],
+      reason: 'Bank holidays',
+    };
+
+    it('returns true when month contains a disabled date', () => {
+      expect(hasDisabledDatesInMonth(6, 2024, rules)).toBe(true);
+    });
+
+    it('returns false when month has no disabled dates', () => {
+      expect(hasDisabledDatesInMonth(5, 2024, rules)).toBe(false);
+    });
+
+    it('returns true for another year with disabled date', () => {
+      expect(hasDisabledDatesInMonth(0, 2025, rules)).toBe(true);
+    });
+  });
+
+  describe('ranges', () => {
+    const rules: DisabledRules = {
+      ranges: [{ start: new Date(2024, 2, 29), end: new Date(2024, 3, 3) }],
+      reason: 'Maintenance',
+    };
+
+    it('returns true when range starts in the month', () => {
+      expect(hasDisabledDatesInMonth(2, 2024, rules)).toBe(true);
+    });
+
+    it('returns true when range ends in the month', () => {
+      expect(hasDisabledDatesInMonth(3, 2024, rules)).toBe(true);
+    });
+
+    it('returns true when range spans the entire month', () => {
+      const spanRules: DisabledRules = {
+        ranges: [{ start: new Date(2024, 0, 1), end: new Date(2024, 11, 31) }],
+        reason: 'Year-long',
+      };
+      expect(hasDisabledDatesInMonth(6, 2024, spanRules)).toBe(true);
+    });
+
+    it('returns false when range does not overlap the month', () => {
+      expect(hasDisabledDatesInMonth(4, 2024, rules)).toBe(false);
+    });
+  });
+
+  describe('min/max constraints', () => {
+    it('returns false when all disabled dates in month are outside min/max', () => {
+      const rules: DisabledRules = {
+        dates: [new Date(2024, 6, 1), new Date(2024, 6, 2)],
+        reason: 'Early',
+      };
+      const min = new Date(2024, 6, 10);
+      const max = new Date(2024, 6, 31);
+      expect(hasDisabledDatesInMonth(6, 2024, rules, min, max)).toBe(false);
+    });
+
+    it('returns true when weekdays exist regardless of min/max', () => {
+      const rules: DisabledRules = { weekdays: ['sat'], reason: 'Closed' };
+      const min = new Date(2024, 6, 10);
+      const max = new Date(2024, 6, 20);
+      expect(hasDisabledDatesInMonth(6, 2024, rules, min, max)).toBe(true);
+    });
+  });
+
+  describe('no rules', () => {
+    it('returns false when disabledRules is undefined', () => {
+      expect(hasDisabledDatesInMonth(6, 2024, undefined)).toBe(false);
+    });
+
+    it('returns false when only reason is provided', () => {
+      const rules: DisabledRules = { reason: 'Reason only' };
+      expect(hasDisabledDatesInMonth(6, 2024, rules)).toBe(false);
+    });
+  });
+});

package/src/Calendar/_helpers/hasDisabledDatesInMonth/hasDisabledDatesInMonth.ts

@@ -0,0 +1,45 @@
+import type { DisabledRules } from '../../Calendar.types';
+
+export function hasDisabledDatesInMonth(
+  month: number,
+  year: number,
+  disabledRules?: DisabledRules,
+  min?: Date | null,
+  max?: Date | null,
+): boolean {
+  if (!disabledRules) return false;
+
+  if (disabledRules.weekdays?.length) {
+    return true;
+  }
+
+  const monthStart = new Date(year, month, 1);
+  const monthEnd = new Date(year, month + 1, 0);
+
+  if (disabledRules.dates?.length) {
+    const hasDateInMonth = disabledRules.dates.some((date) => {
+      if (date.getFullYear() !== year || date.getMonth() !== month) return false;
+      if (min && date < min) return false;
+      if (max && date > max) return false;
+      return true;
+    });
+    if (hasDateInMonth) return true;
+  }
+
+  if (disabledRules.ranges?.length) {
+    const hasOverlap = disabledRules.ranges.some((range) => {
+      const rangeStart = new Date(
+        range.start.getFullYear(),
+        range.start.getMonth(),
+        range.start.getDate(),
+      );
+      const rangeEnd = new Date(range.end.getFullYear(), range.end.getMonth(), range.end.getDate());
+      if (max && rangeStart > max) return false;
+      if (min && rangeEnd < min) return false;
+      return rangeStart <= monthEnd && rangeEnd >= monthStart;
+    });
+    if (hasOverlap) return true;
+  }
+
+  return false;
+}

package/src/Calendar/_helpers/index.ts

@@ -0,0 +1,2 @@
+export { isDateDisabled } from './isDateDisabled/isDateDisabled';
+export { hasDisabledDatesInMonth } from './hasDisabledDatesInMonth/hasDisabledDatesInMonth';