@transferwise/components 0.0.0-experimental-fa3aa98 → 0.0.0-experimental-f4a328f

package/src/Calendar/DateHeader/DateHeader.tsx

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

package/src/Calendar/DayCalendar/DayCalendar.tsx

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

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

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

package/src/Calendar/MonthCalendar/MonthCalendar.tsx

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

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

@@ -2,11 +2,10 @@ 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;
@@ -20,7 +19,6 @@ const MONTH_ONLY_FORMAT: Intl.DateTimeFormatOptions = { month: 'short' };
 
 const MonthCalendarTable = ({
   selectedDate,
-  focusedDate,
   min,
   max,
   viewYear,
@@ -36,8 +34,7 @@ const MonthCalendarTable = ({
         type="month"
         title={formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT)}
         active={isActive(month)}
-        outOfRange={isDisabled(month)}
-        disabled={false}
+        disabled={isDisabled(month)}
         today={viewYear === new Date().getFullYear() && month === new Date().getMonth()}
         autofocus={autofocusMonth === month}
         onClick={onSelect}
@@ -49,10 +46,6 @@ 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();
   };
@@ -67,12 +60,7 @@ const MonthCalendarTable = ({
 
   const autofocusMonth = (() => {
     const months = Array.from({ length: ROWS * COLS }, (_, index) => index);
-    return getFocusableTime({
-      isActive: isFocused,
-      isNow: isThisMonth,
-      isDisabled,
-      timeSpan: months,
-    });
+    return getFocusableTime({ isActive, isNow: isThisMonth, isDisabled, timeSpan: months });
   })();
 
   return (

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

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

package/src/Calendar/YearCalendar/YearCalendar.tsx

@@ -8,7 +8,6 @@ import YearCalendarTable from './Table';
 
 interface YearCalendarProps extends WrappedComponentProps {
   selectedDate: Date | null;
-  focusedDate?: Date | null;
   min: Date | null;
   max: Date | null;
   viewYear: number;
@@ -34,29 +33,21 @@ 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/_stories/Calendar.story.tsx

@@ -1,47 +1,22 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
-import { fn, userEvent, within } from 'storybook/test';
+import { userEvent, within } from 'storybook/test';
 import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import { storySourceWithoutNoise } from '../../../.storybook/helpers';
 import Calendar, { type CalendarProps } from '../Calendar';
 import Modal from '../../Modal';
 import Button from '../../Button';
-import { action } from 'storybook/actions';
 
+/** Inline calendar for selecting a single date, with optional min/max bounds. */
 export default {
   component: Calendar,
   title: 'Forms/Calendar',
-  args: {
-    value: undefined,
-    min: undefined,
-    max: undefined,
-    monthFormat: undefined,
-    placeholder: undefined,
-    disabledRules: undefined,
-    onChange: fn(),
-    onDateFocus: fn(),
-  },
   argTypes: {
     monthFormat: { control: 'select', options: ['long', 'short'] },
     min: { control: 'date' },
     max: { control: 'date' },
-    disabledRules: {
-      control: false,
-      table: {
-        type: {
-          summary: 'DisabledRules',
-          detail: `{
-  weekdays?: ('mon'|'tue'|'wed'|'thu'|'fri'|'sat'|'sun')[]
-  dates?: Date[]
-  ranges?: { start: Date; end: Date }[]
-  reason: string  // required — shown in prompt, linked via aria-describedby
-}`,
-        },
-      },
-    },
   },
 };
 
@@ -55,17 +30,12 @@ thePast.setUTCDate(epoch.getUTCDate() - 10);
 
 export const Sandbox = createSandboxStory({
   code: `const App = () => {
-  const [value, setValue] = React.useState(new Date(2024, 5, 18));
+  const [value, setValue] = React.useState(new Date('2024-06-15'));
 
   return (
     <Calendar
       monthFormat="long"
       value={value}
-      disabledRules={{
-        weekdays: ['sat', 'sun'],
-        dates: [new Date(2024, 5, 19)],
-        reason: 'Weekends and holidays are unavailable.',
-      }}
       onChange={(date) => setValue(date)}
     />
   );
@@ -82,13 +52,7 @@ export const Basic: Story = {
         min={args.min ? new Date(args.min) : thePast}
         max={args.max ? new Date(args.max) : theFuture}
         value={value}
-        onDateFocus={(date, options) => {
-          action('onDateFocus')(date, options);
-        }}
-        onChange={(date) => {
-          action('onChange')(date);
-          setValue(date);
-        }}
+        onChange={(v) => setValue(v)}
       />
     );
   },
@@ -138,101 +102,3 @@ export const InsideModal: Story = {
     await userEvent.click(canvas.getByRole('button', { name: 'Open modal' }));
   },
 };
-
-/**
- * Use `disabledRules` to disable specific weekdays, individual dates, or date ranges.
- * Disabled dates remain focusable and keyboard-navigable — clicking or focusing one
- * fires `onDateFocus` with `isEnabled: false` and shows a negative inline prompt with
- * the `reason` text. `min`/`max` out-of-range dates show a built-in boundary prompt
- * (e.g. "Please select a date between 4 December 2024 and 18 January 2025.").
- *
- * The `reason` field is **required for accessibility**: it renders as an InlinePrompt
- * below the grid and is linked to every disabled cell via `aria-describedby`, so screen
- * reader users understand why a date is unavailable. For per-date reason customisation
- * see [DisabledDatesWithDynamicReason](#disabled-dates-with-dynamic-reason).
- */
-export const DisabledDates: Story = storySourceWithoutNoise({
-  render: function Render() {
-    const [value, setValue] = useState<Date | null>(new Date(2024, 11, 13));
-
-    return (
-      <Calendar
-        value={value}
-        min={new Date(2024, 11, 4)}
-        max={new Date(2025, 0, 18)}
-        disabledRules={{
-          weekdays: ['sat', 'sun'],
-          dates: [new Date(2024, 11, 10), new Date(2025, 0, 15)],
-          ranges: [{ start: new Date(2024, 11, 23), end: new Date(2024, 11, 27) }],
-          reason: 'Some dates are unavailable for this service.',
-        }}
-        onDateFocus={(date, { isEnabled }) => {
-          action('onDateFocus')(date, { isEnabled });
-        }}
-        onChange={(date) => {
-          action('onChange')(date);
-          setValue(date);
-        }}
-      />
-    );
-  },
-});
-
-/**
- * When different disabled dates warrant different explanations, drive the `reason`
- * dynamically from `onDateFocus`. The `isEnabled` flag tells you whether the focused
- * date is selectable; from there you can look up the specific reason and update state.
- *
- * `min`/`max` out-of-range dates are handled automatically — the component shows a
- * built-in prompt with the boundary dates, so `determineReason` only needs to cover
- * rule-disabled dates.
- */
-export const DisabledDatesWithDynamicReason: Story = storySourceWithoutNoise({
-  render: function Render() {
-    const DEFAULT_REASON = 'Some dates are unavailable for this service.';
-    const min = new Date(2024, 11, 4);
-    const max = new Date(2025, 0, 18);
-    const maintenanceDays = [new Date(2024, 11, 10), new Date(2025, 0, 15)];
-    const [value, setValue] = useState<Date | null>(new Date(2024, 11, 13));
-    const [reason, setReason] = useState(DEFAULT_REASON);
-
-    function determineReason(date: Date, isEnabled: boolean): string {
-      if (isEnabled) return DEFAULT_REASON;
-      if (
-        maintenanceDays.some(
-          (maintenanceDay) => maintenanceDay.toDateString() === date.toDateString(),
-        )
-      ) {
-        return 'This date is a maintenance day.';
-      }
-      if (date.getDay() === 0 || date.getDay() === 6) {
-        return 'We do not operate on weekends.';
-      }
-      return 'This date is unavailable.';
-    }
-
-    return (
-      <Calendar
-        value={value}
-        min={min}
-        max={max}
-        disabledRules={{
-          weekdays: ['sat', 'sun'],
-          dates: maintenanceDays,
-          ranges: [{ start: new Date(2024, 11, 23), end: new Date(2024, 11, 27) }],
-          reason,
-        }}
-        onDateFocus={(date, { isEnabled }) => {
-          action('onDateFocus')(date, { isEnabled });
-          if (date) {
-            setReason(determineReason(date, isEnabled));
-          }
-        }}
-        onChange={(date) => {
-          action('onChange')(date);
-          setValue(date);
-        }}
-      />
-    );
-  },
-});

package/src/Calendar/index.ts

@@ -1,9 +1,2 @@
 export { default } from './Calendar';
 export type { CalendarProps } from './Calendar';
-export type {
-  DateChangeMeta,
-  DisabledRules,
-  DisabledDateRange,
-  WeekDayType,
-  OnDateSelectParams,
-} from './Calendar.types';