@transferwise/components 46.144.0 → 46.145.0

package/src/calendar/Calendar.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback, useEffect, KeyboardEvent } from 'react';
+
+import { MonthFormat } from '../common';
+import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
+import DayCalendar from './dayCalendar';
+import { getStartOfDay } from './getStartOfDay';
+import MonthCalendar from './monthCalendar';
+import YearCalendar from './yearCalendar';
+
+export interface CalendarProps {
+  value: Date | null;
+  min?: Date | null;
+  max?: Date | null;
+  monthFormat?: `${MonthFormat}`;
+  placeholder?: string;
+  onChange: (date: Date | null) => void;
+  onSelect?: (date: Date) => void;
+}
+
+const Calendar = ({
+  value,
+  min: minProp = null,
+  max: maxProp = null,
+  monthFormat = MonthFormat.LONG,
+  placeholder,
+  onChange,
+  onSelect,
+}: CalendarProps) => {
+  const selectedDate = getStartOfDay(value);
+  const min = getStartOfDay(minProp);
+  const max = getStartOfDay(maxProp);
+
+  useEffect(() => {
+    if (selectedDate && !isWithinRange(selectedDate, min, max)) {
+      onChange(moveToWithinRange(selectedDate, min, max));
+    }
+  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime(), onChange]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const dateView = returnDateView(selectedDate, min, max);
+  const [viewMonth, setViewMonth] = useState(dateView.getMonth());
+  const [viewYear, setViewYear] = useState(dateView.getFullYear());
+  const [mode, setMode] = useState<'day' | 'month' | 'year'>('day');
+
+  useEffect(() => {
+    const view = returnDateView(selectedDate, min, max);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setViewMonth(view.getMonth());
+
+    setViewYear(view.getFullYear());
+  }, [selectedDate?.getTime(), min?.getTime(), max?.getTime()]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleViewDateUpdate = useCallback(
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+    ({ month, year }: { month?: number; year?: number }) => {
+      if (month !== undefined) setViewMonth(month);
+      if (year !== undefined) setViewYear(year);
+    },
+    [],
+  );
+
+  const switchToDays = useCallback(() => setMode('day'), []);
+  const switchToMonths = useCallback(() => setMode('month'), []);
+  const switchToYears = useCallback(() => setMode('year'), []);
+
+  const handleSelectedDateUpdate = useCallback(
+    (date: Date) => {
+      if (onSelect) {
+        onSelect(date);
+      } else {
+        onChange(date);
+      }
+    },
+    [onChange, onSelect],
+  );
+
+  const adjustDate = useCallback(
+    (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
+      let date: Date | null;
+      if (selectedDate) {
+        date = new Date(
+          mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),
+          mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),
+          mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),
+        );
+      } else {
+        date = getStartOfDay(new Date());
+      }
+      date &&= moveToWithinRange(date, min, max);
+      if (date?.getTime() !== selectedDate?.getTime()) {
+        onChange(date);
+      }
+    },
+    [selectedDate, min, max, mode, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          adjustDate(-1, -1, -1);
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          adjustDate(-7, -4, -4);
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          adjustDate(1, 1, 1);
+          event.preventDefault();
+          break;
+        case 'ArrowDown':
+          adjustDate(7, 4, 4);
+          event.preventDefault();
+          break;
+        default:
+          break;
+      }
+    },
+    [adjustDate],
+  );
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onKeyDown={handleKeyDown}>
+      {mode === 'day' && (
+        <DayCalendar
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewMonth={viewMonth}
+          viewYear={viewYear}
+          monthFormat={monthFormat}
+          onSelect={handleSelectedDateUpdate}
+          onLabelClick={switchToYears}
+          onViewDateUpdate={handleViewDateUpdate}
+        />
+      )}
+      {mode === 'month' && (
+        <MonthCalendar
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          {...(placeholder != null && { placeholder })}
+          onSelect={switchToDays}
+          onLabelClick={switchToYears}
+          onViewDateUpdate={handleViewDateUpdate}
+        />
+      )}
+      {mode === 'year' && (
+        <YearCalendar
+          selectedDate={selectedDate}
+          min={min}
+          max={max}
+          viewYear={viewYear}
+          {...(placeholder != null && { placeholder })}
+          onSelect={switchToMonths}
+          onViewDateUpdate={handleViewDateUpdate}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Calendar;

package/src/{dateLookup → calendar}/dateHeader/DateHeader.tsx

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Typography } from '../../common';
 import { useLayout } from '../../common/hooks';
 import Title from '../../title';
-import messages from '../DateLookup.messages';
+import messages from '../Calendar.messages';
 import Button from '../../button/Button';
 import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
 import IconButton from '../../iconButton';

package/src/{dateLookup → calendar}/dayCalendar/DayCalendar.tsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { MonthFormat } from '../../common';
-import messages from '../DateLookup.messages';
+import messages from '../Calendar.messages';
 import DateHeader from '../dateHeader';
 
 import DayCalendarTable from './table';

package/src/calendar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Calendar';
+export type { CalendarProps } from './Calendar';

package/src/{dateLookup → calendar}/monthCalendar/MonthCalendar.tsx

@@ -2,7 +2,7 @@ import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import messages from '../DateLookup.messages';
+import messages from '../Calendar.messages';
 import DateHeader from '../dateHeader';
 
 import MonthCalendarTable from './table';
@@ -12,7 +12,7 @@ interface MonthCalendarProps extends WrappedComponentProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder: string;
+  placeholder?: string;
   onSelect: () => void;
   onLabelClick: () => void;
   onViewDateUpdate: (date: { year?: number; month?: number }) => void;

package/src/{dateLookup → calendar}/monthCalendar/table/MonthCalendarTable.tsx

@@ -9,7 +9,7 @@ interface MonthCalendarTableProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder: string;
+  placeholder?: string;
   onSelect: (date: number) => void;
 }
 

package/src/{dateLookup → calendar}/tableLink/TableLink.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
-import messages from '../DateLookup.messages';
+import messages from '../Calendar.messages';
 
 interface TableLinkProps {
   item: number;

package/src/{dateLookup → calendar}/yearCalendar/YearCalendar.tsx

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import messages from '../DateLookup.messages';
+import messages from '../Calendar.messages';
 import DateHeader from '../dateHeader';
 
 import YearCalendarTable from './table';
@@ -11,7 +11,7 @@ interface YearCalendarProps extends WrappedComponentProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder: string;
+  placeholder?: string;
   onSelect: () => void;
   onViewDateUpdate: (date: { year: number }) => void;
 }

package/src/{dateLookup → calendar}/yearCalendar/table/YearCalendarTable.tsx

@@ -9,7 +9,7 @@ interface YearCalendarTableProps {
   min: Date | null;
   max: Date | null;
   viewYear: number;
-  placeholder: string;
+  placeholder?: string;
   onSelect: (year: number) => void;
 }
 

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -9,7 +9,7 @@ import { Label } from '../label/Label';
 /**
  * Use <a href="?path=/docs/forms-checkbox--docs">Checkbox</a> component instead when pairing with a label. Only use CheckboxButton when you need a standalone checkbox (e.g. settings matrix) and provide an `aria-label`.
  *
- * **Design guidance**: <a href="https://wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
  */
 export default {
   component: CheckboxButton,

package/src/checkboxOption/CheckboxOption.tsx

@@ -20,7 +20,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
- * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Design docs](https://docs.wise.design/components/list-item)
  * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
  */
 const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(

package/src/chips/Chips.story.tsx

@@ -8,7 +8,7 @@ import { storySourceWithoutNoise } from '../../.storybook/helpers';
 /**
  * Can be used for making a <a href="?path=/story/actions-chips--choice">choice</a>, or as a <a href="?path=/story/actions-chips--filter">filter</a> with multiple options.
  *
- * **Design guidance**: <a href="https://wise.design/components/chip" target="_blank">wise.design/components/chip</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/chip" target="_blank">wise.design/components/chip</a>
  */
 export default {
   component: Chips,
@@ -93,7 +93,7 @@ export const Playground: Story = storySourceWithoutNoise<typeof Chips>({
 
 /**
  * The user can select any number of chips with the selected prop as an array (`multiple` prop set to `true`). <br />
- * <a href="https://wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/chip#filter-chips" target="_blank">Design documentation</a>
  */
 export const Filter: Story = storySourceWithoutNoise<typeof Chips>({
   args: {
@@ -124,7 +124,7 @@ export const Filter: Story = storySourceWithoutNoise<typeof Chips>({
 
 /**
  * The user can only select one chip with the selected prop as a single value (`multiple` prop set to `false`). <br />
- * <a href="https://wise.design/components/chip#choice-chips" target="_blank">Design documentation</a>
+ * <a href="https://docs.wise.design/components/chip#choice-chips" target="_blank">Design documentation</a>
  */
 export const Choice: Story = storySourceWithoutNoise<typeof Chips>({
   args: {

package/src/circularButton/CircularButton.story.tsx

@@ -9,7 +9,7 @@ import SentimentSurface from '../sentimentSurface';
 /**
  * An <a href="?path=/docs/actions-iconbutton--docs">IconButton</a> with a text label below it.
  *
- * **Design guidance**: <a href="https://wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
+ * **Design guidance**: <a href="https://docs.wise.design/components/circular-button" target="_blank">wise.design/components/circular-button</a>
  */
 export default {
   component: CircularButton,
@@ -45,7 +45,7 @@ export const Playground: Story = {};
 /**
  * Priorities set a visual hierarchy amongst the buttons displayed on the
  * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/circular-button#priority)
+ * [Design documentation](https://docs.wise.design/components/circular-button#priority)
  */
 export const Priority: Story = {
   args: {
@@ -83,7 +83,7 @@ export const Priority: Story = {
 
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * [Design documentation](https://wise.design/components/circular-button#types)
+ * [Design documentation](https://docs.wise.design/components/circular-button#types)
  */
 export const Type: Story = {
   args: {
@@ -163,7 +163,7 @@ export const Disabled: Story = {
 /**
  * `CircularButton` is sentiment-aware and will automatically adjust its colours if wrapped inside
  * the <a href="?path=/docs/foundations-sentimentsurface--docs">SentimentSurface</a> component. <br />
- * [Design documentation](https://wise.design/components/circular-button)
+ * [Design documentation](https://docs.wise.design/components/circular-button)
  */
 export const SentimentAwareness: Story = {
   render: () => {

package/src/container/Container.tsx

@@ -17,7 +17,7 @@ export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<
 /**
  * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.
  *
- * **Design guidance**: <a href="https://wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
+ * **Design guidance**: <a href="https://docs.wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
  */
 const Container = <T extends ElementType = 'div'>({
   size = 'standard',

package/src/dateLookup/DateLookup.css

@@ -1,93 +1,3 @@
 .tw-date-lookup-menu {
   width: 400px;
 }
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  background-color: inherit;
-}
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.tw-date-lookup-calendar > tbody > tr > td {
-  padding: 4px;
-  padding: var(--size-4);
-}
-@media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td {
-    padding: 0;
-  }
-}
-.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
-  padding: 1px;
-}
-.tw-date-lookup-calendar > tbody > tr > td button {
-  width: 100%;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
-  color: #0097c7;
-  color: var(--color-content-accent);
-  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) {
-  .tw-date-lookup-calendar > tbody > tr > td button {
-    padding: 0;
-  }
-}
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
-  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;
-}
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 4px;
-}
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
-  background-color: var(--color-background-screen-hover);
-}
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
-  background-color: var(--color-interactive-primary);
-  color: var(--color-interactive-contrast);
-}
-.tw-date-lookup-calendar abbr {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.tw-date-lookup-header-current-container {
-  display: inline;
-}
-.np-theme-personal.tw-date-lookup-menu .table-bordered,
-.np-theme-personal .tw-date-lookup-menu .table-bordered {
-  border: none;
-}
-.np-theme-personal.tw-date-lookup-menu thead,
-.np-theme-personal .tw-date-lookup-menu thead {
-  background-color: transparent;
-  background-color: initial;
-}
-.np-theme-personal.tw-date-lookup-menu td,
-.np-theme-personal .tw-date-lookup-menu td {
-  border: none;
-}

package/src/dateLookup/DateLookup.less

@@ -1,94 +1,3 @@
-@import (reference) "./../styles/variables/neptune-tokens.less";
-
 .tw-date-lookup-menu {
   width: 400px;
 }
-
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-
-  > tbody > tr > td.weekend button {
-    color: var(--color-content-secondary);
-  }
-
-  > tbody > tr > td {
-    padding: var(--size-4);
-    @media (--screen-400-zoom) {
-      padding: 0;
-    }
-
-    &:has(.tw-date-lookup-day-option) {
-      padding: 1px;
-    }
-    
-    button {
-      width: 100%;
-      padding: var(--size-4) 0;
-      @media (--screen-400-zoom) {
-        padding: 0;
-      }
-      color: var(--color-content-accent);
-      border: transparent;
-      border-radius: var(--radius-small);
-      background-color: transparent;
-      font-weight: var(--font-weight-semi-bold);
-      color: var(--color-content-primary);
-
-      &.tw-date-lookup-day-option {
-        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;
-        }
-      }
-    }
-
-    &:not(.disabled, :disabled) button.show-focus,
-    &:hover button:not(.disabled, :disabled) {
-      background-color: var(--color-background-screen-hover);
-    }
-
-    &:not(.disabled, :disabled) button.active {
-      background-color: var(--color-interactive-primary);
-      color: var(--color-interactive-contrast);
-    }
-  }
-
-  abbr {
-    text-decoration: none;
-  }
-
-  background-color: inherit;
-}
-
-.tw-date-lookup-header-current-container {
-  display: inline;
-}
-
-.np-theme-personal {
-  &.tw-date-lookup-menu,
-  .tw-date-lookup-menu {
-    .table-bordered {
-      border: none;
-    }
-
-    thead {
-      background-color: unset;
-    }
-
-    td {
-      border: none;
-    }
-  }
-}

package/src/dateLookup/DateLookup.test.tsx

@@ -198,28 +198,6 @@ describe('DateLookup', () => {
       expect(handleChange).toHaveBeenCalledWith(initialValue);
     });
   });
-
-  it('limits min value', async () => {
-    const min = new Date(initialValue);
-    min.setDate(min.getDate() - 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ min, onChange: handleChange });
-
-    await user.keyboard('{ArrowLeft}{ArrowLeft}');
-
-    expect(handleChange).toHaveBeenCalledWith(min);
-  });
-
-  it('limits max value', async () => {
-    const max = new Date(initialValue);
-    max.setDate(max.getDate() + 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ max, onChange: handleChange });
-
-    await user.keyboard('{ArrowRight}{ArrowRight}');
-
-    expect(handleChange).toHaveBeenCalledWith(max);
-  });
 });
 
 describe('DateLookup propTypes', () => {
@@ -296,75 +274,6 @@ describe('DateLookup (events)', () => {
       );
     };
 
-    it('switches to years', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-
-      expect(getActiveYearButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria-label for 20 years', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-
-      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to months', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getActiveMonthButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for year', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to days', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getActiveDayButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for month', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
     it('has aria label on selected date', async () => {
       const view = await setup();
       await openDateLookup();
@@ -440,44 +349,11 @@ describe('DateLookup (events)', () => {
     });
   };
 
-  const getDateButton = () => {
-    return screen.getByRole('button', {
-      name: /Go to 20 year view/i,
-    });
-  };
-
   const openDateLookup = async () => userEvent.click(getOpenButton(labelProp));
 
-  const clickDateButton = async () => userEvent.click(getDateButton());
-
   // Close dateLookup and removes events attached to documents.
   const closeDateLookup = async (view: RenderResult) => userEvent.click(view.container);
 
   // @ts-expect-error getClearButton returns node
   const clickClearButton = async (view: RenderResult) => userEvent.click(getClearButton(view));
-
-  const getActiveYearButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected year/i,
-      pressed: true,
-    });
-  };
-
-  const getActiveMonthButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected month/i,
-      pressed: true,
-    });
-  };
-
-  const getActiveDayButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected day/i,
-      pressed: true,
-    });
-  };
-
-  const getButtonByAriaLabel = (ariaLabel: string) => {
-    return screen.getByRole('button', { name: ariaLabel });
-  };
 });