@transferwise/components 0.0.0-experimental-7089f72 → 0.0.0-experimental-26e03bf

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts

@@ -41,9 +41,10 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'ar
      */
     title?: string;
     /**
-     * Description text for the prompt (required)
+     * Description content for the prompt (required). Accepts plain text or rich content (ReactNode).
+     * If the description contains an interactive element, the `action` prop must not be used simultaneously.
      */
-    description: string;
+    description: ReactNode;
     className?: string;
     /**
      * Sets the ARIA live region politeness level.

package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCAiFjB,CAAC"}
+{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAEtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC,GAChG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;CACxB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,GAAI,wIAWxB,eAAe,gCA2FjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7089f72",
+  "version": "0.0.0-experimental-26e03bf",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.28.0",
-    "@wise/components-theming": "1.10.2",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/dateLookup/DateLookup.css

@@ -1,3 +1,93 @@
 .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,3 +1,94 @@
+@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,6 +198,28 @@ 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', () => {
@@ -274,6 +296,75 @@ 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();
@@ -349,11 +440,44 @@ 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 });
+  };
 });

package/src/dateLookup/DateLookup.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
-import CalendarInput from '../calendarInput';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+
 import {
   Size,
   MonthFormat,
@@ -9,10 +10,15 @@ import {
   type SizeMedium,
   type SizeLarge,
 } from '../common';
+import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
 import { OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
 import DateTrigger from './dateTrigger';
+import DayCalendar from './dayCalendar';
+import { getStartOfDay } from './getStartOfDay';
+import MonthCalendar from './monthCalendar';
+import YearCalendar from './yearCalendar';
 
 export interface DateLookupProps {
   id?: string;
@@ -34,8 +40,15 @@ export interface DateLookupProps {
 type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
 
 interface DateLookupState {
+  selectedDate: Date | null;
   originalDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewMonth: number;
+  viewYear: number;
   open: boolean;
+  mode: 'day' | 'month' | 'year';
+  isMobile: boolean;
 }
 
 class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
@@ -55,29 +68,64 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   } satisfies Partial<DateLookupPropsWithInputAttributes>;
 
   element = createRef<HTMLDivElement>();
+  dropdown = createRef<HTMLDivElement>();
 
   constructor(props: DateLookup['props']) {
     super(props);
+    const dateView = returnDateView(props.value, props.min, props.max);
     this.state = {
+      selectedDate: getStartOfDay(props.value),
       originalDate: null,
+      min: getStartOfDay(props.min),
+      max: getStartOfDay(props.max),
+      viewMonth: dateView.getMonth(),
+      viewYear: dateView.getFullYear(),
       open: false,
+      mode: 'day',
+      isMobile: false,
     };
   }
 
+  static getDerivedStateFromProps(props: DateLookup['props'], state: DateLookupState) {
+    const propsSelected = getStartOfDay(props.value);
+    const propsMin = getStartOfDay(props.min);
+    const propsMax = getStartOfDay(props.max);
+    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();
+    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();
+    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();
+    if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {
+      const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;
+      const min = hasMinChanged ? propsMin : state.min;
+      const max = hasMaxChanged ? propsMax : state.max;
+      if (selectedDate && !isWithinRange(selectedDate, min, max)) {
+        props.onChange(moveToWithinRange(selectedDate, min, max));
+        return null;
+      }
+      const viewDateThatIsWithinRange: Date = returnDateView(selectedDate, min, max);
+      const viewMonth = viewDateThatIsWithinRange.getMonth();
+      const viewYear = viewDateThatIsWithinRange.getFullYear();
+      return { selectedDate, min, max, viewMonth, viewYear };
+    }
+    return null;
+  }
+
   componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
+    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
+    this.setState({ isMobile: mediaQuery.matches });
   }
 
   componentWillUnmount() {
+    // Prevents memory leak by cleaning state.
     this.setState = () => {};
   }
 
   open = () => {
     const { onFocus } = this.props;
 
-    this.setState({ open: true });
+    this.setState({ open: true, mode: 'day' });
     if (onFocus) {
       onFocus();
     }
@@ -103,13 +151,36 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     const { open, originalDate } = this.state;
     switch (event.key) {
       case 'ArrowLeft':
+        if (open) {
+          this.adjustDate(-1, -1, -1);
+        } else {
+          this.open();
+        }
+        event.preventDefault();
+        break;
       case 'ArrowUp':
+        if (open) {
+          this.adjustDate(-7, -4, -4);
+        } else {
+          this.open();
+        }
+        event.preventDefault();
+        break;
       case 'ArrowRight':
+        if (open) {
+          this.adjustDate(1, 1, 1);
+        } else {
+          this.open();
+        }
+        event.preventDefault();
+        break;
       case 'ArrowDown':
-        if (!open) {
+        if (open) {
+          this.adjustDate(7, 4, 4);
+        } else {
           this.open();
-          event.preventDefault();
         }
+        event.preventDefault();
         break;
       case 'Escape':
         if (originalDate !== null) {
@@ -123,6 +194,27 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
+  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
+    const { selectedDate, min, max, mode, originalDate } = this.state;
+    if (originalDate === null) {
+      this.setState({ originalDate: selectedDate });
+    }
+    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()) {
+      this.props.onChange(date);
+    }
+  };
+
   focusOn = (preferredElement: string, fallbackElement?: string) => {
     const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;
     if (element) {
@@ -132,37 +224,71 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  handleDateChange = (date: Date | null) => {
-    this.setState(
-      (state) => {
-        const originalDate = state.originalDate ?? this.props.value;
-        return { originalDate };
-      },
-      () => {
-        this.props.onChange(date);
-      },
-    );
+  switchMode = (mode: 'day' | 'month' | 'year') => {
+    this.setState({ mode }, () => {
+      this.focusOn('.active', '.today');
+    });
   };
 
-  handleDateSelect = (date: Date) => {
-    this.props.onChange(date);
-    this.close();
-    this.focusOn('.btn');
+  switchToDays = () => this.switchMode('day');
+
+  switchToMonths = () => this.switchMode('month');
+
+  switchToYears = () => this.switchMode('year');
+
+  handleSelectedDateUpdate = (selectedDate: Date) => {
+    this.setState({ selectedDate }, () => {
+      this.props.onChange(selectedDate);
+      this.close();
+      this.focusOn('.btn');
+    });
+  };
+
+  handleViewDateUpdate = ({ month = this.state.viewMonth, year = this.state.viewYear }) => {
+    this.setState({ viewMonth: month, viewYear: year });
   };
 
   getCalendar = () => {
-    const { value, min, max, monthFormat, placeholder } = this.props;
+    const { selectedDate, min, max, viewMonth, viewYear, mode, isMobile } = this.state;
+    const { placeholder, monthFormat } = this.props;
     return (
-      <div className="p-a-1">
-        <CalendarInput
-          value={value}
-          min={min}
-          max={max}
-          monthFormat={monthFormat}
-          placeholder={placeholder}
-          onChange={this.handleDateChange}
-          onSelect={this.handleDateSelect}
-        />
+      <div className={clsx({ 'p-a-1': !isMobile })}>
+        {mode === 'day' && (
+          <DayCalendar
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewMonth={viewMonth}
+            viewYear={viewYear}
+            monthFormat={monthFormat}
+            onSelect={this.handleSelectedDateUpdate}
+            onLabelClick={this.switchToYears}
+            onViewDateUpdate={this.handleViewDateUpdate}
+          />
+        )}
+        {mode === 'month' && (
+          <MonthCalendar
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewYear={viewYear}
+            placeholder={placeholder}
+            onSelect={this.switchToDays}
+            onLabelClick={this.switchToYears}
+            onViewDateUpdate={this.handleViewDateUpdate}
+          />
+        )}
+        {mode === 'year' && (
+          <YearCalendar
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewYear={viewYear}
+            placeholder={placeholder}
+            onSelect={this.switchToMonths}
+            onViewDateUpdate={this.handleViewDateUpdate}
+          />
+        )}
       </div>
     );
   };
@@ -173,7 +299,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
   };
 
   render() {
-    const { open } = this.state;
+    const { selectedDate, open } = this.state;
 
     const {
       inputAttributes,
@@ -203,7 +329,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
           <DateTrigger
             id={id}
             ariaLabelledBy={ariaLabelledBy}
-            selectedDate={value}
+            selectedDate={selectedDate}
             size={size}
             placeholder={placeholder}
             label={label}

package/src/{calendarInput → dateLookup}/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 '../CalendarInput.messages';
+import messages from '../DateLookup.messages';
 import Button from '../../button/Button';
 import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
 import IconButton from '../../iconButton';

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

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