@transferwise/components 46.26.2 → 46.28.0

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -0,0 +1,70 @@
+import { ReactRenderer, Story } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { PlayFunctionContext } from '@storybook/types';
+import { useState } from 'react';
+
+import DateLookup from './DateLookup';
+
+export default {
+  component: DateLookup,
+  title: 'Forms/DateLookup/Tests',
+};
+
+const Template: Story<DateLookup> = () => {
+  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
+
+  return (
+    <DateLookup
+      value={value}
+      clearable
+      placeholder="placeholder"
+      onChange={(v) => {
+        setValue(v);
+      }}
+    />
+  );
+};
+
+export const ClearSpace = Template.bind({});
+
+ClearSpace.play = async ({
+  canvasElement,
+  step,
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+  const canvas = within(canvasElement);
+
+  await step('space can activate clear button', async () => {
+    // focus on clear button
+    const date = await canvas.findByText('January 10, 1987');
+    await expect(date).toBeInTheDocument();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // clear with space
+    await userEvent.keyboard(' ');
+    const placeholder = canvas.getByText('placeholder');
+    await expect(placeholder).toBeInTheDocument();
+  });
+};
+
+export const ClearEnter = Template.bind({});
+
+ClearEnter.play = async ({
+  canvasElement,
+  step,
+}: PlayFunctionContext<ReactRenderer, DateLookup>) => {
+  const canvas = within(canvasElement);
+
+  await step('enter can activate clear button', async () => {
+    // focus on clear button
+    const date = await canvas.findByText('January 10, 1987');
+    await expect(date).toBeInTheDocument();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // clear with space
+    await userEvent.keyboard('{enter}');
+    const placeholder = canvas.getByText('placeholder');
+    await expect(placeholder).toBeInTheDocument();
+  });
+};

package/src/dateLookup/{DateLookup.js → DateLookup.tsx}

@@ -1,8 +1,15 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { createRef, PureComponent } from 'react';
+import { createRef, PureComponent, KeyboardEvent } from 'react';
 
-import { Size, MonthFormat, Position, Breakpoint } from '../common';
+import {
+  Size,
+  MonthFormat,
+  Position,
+  Breakpoint,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
+} from '../common';
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 
@@ -12,18 +19,55 @@ import { getStartOfDay } from './getStartOfDay';
 import MonthCalendar from './monthCalendar';
 import YearCalendar from './yearCalendar';
 
-const MODE = {
-  DAY: 'day',
-  MONTH: 'month',
-  YEAR: 'year',
-};
+export interface DateLookupProps {
+  id?: string;
+  value: Date | null;
+  min?: Date | null;
+  max?: Date | null;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  placeholder?: string;
+  label?: string;
+  'aria-labelledby'?: string;
+  monthFormat?: `${MonthFormat}`;
+  disabled?: boolean;
+  clearable?: boolean;
+  onChange: (date: Date | null) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+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<DateLookupProps, DateLookupState> {
+  declare props: DateLookupProps &
+    Required<Pick<DateLookupProps, keyof typeof DateLookup.defaultProps>>;
 
-class DateLookup extends PureComponent {
-  element = createRef();
+  static defaultProps = {
+    value: null,
+    min: null,
+    max: null,
+    size: Size.MEDIUM,
+    placeholder: '',
+    label: '',
+    monthFormat: MonthFormat.LONG,
+    disabled: false,
+    clearable: false,
+  } satisfies Partial<DateLookupProps>;
 
-  dropdown = createRef();
+  element = createRef<HTMLDivElement>();
+  dropdown = createRef<HTMLDivElement>();
 
-  constructor(props) {
+  constructor(props: DateLookup['props']) {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
@@ -33,40 +77,41 @@ class DateLookup extends PureComponent {
       viewMonth: (props.value || new Date()).getMonth(),
       viewYear: (props.value || new Date()).getFullYear(),
       open: false,
-      mode: MODE.DAY,
+      mode: 'day',
       isMobile: false,
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
+  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 !== +propsSelected;
-    const hasMinChanged = +state.min !== +propsMin;
-    const hasMaxChanged = +state.max !== +propsMax;
+    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;
-      // make sure that selected date is within allowed range
-      if (!isWithinRange(selectedDate, min, max)) {
+      if (selectedDate && !isWithinRange(selectedDate, min, max)) {
         props.onChange(moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewMonth = (selectedDate || new Date()).getMonth();
-      const viewYear = (selectedDate || new Date()).getFullYear();
+      const viewDateThatIsWithinRange: Date =
+        selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();
+      const viewMonth = viewDateThatIsWithinRange.getMonth();
+      const viewYear = viewDateThatIsWithinRange.getFullYear();
       return { selectedDate, min, max, viewMonth, viewYear };
     }
     return null;
   }
 
-  componentDidUpdate(previousProps) {
-    if (+this.props.value !== +previousProps.value && this.state.open) {
+  componentDidUpdate(previousProps: DateLookupProps) {
+    if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
-    this.mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
-    this.setState({ isMobile: this.mediaQuery.matches });
+    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
+    this.setState({ isMobile: mediaQuery.matches });
   }
 
   componentWillUnmount() {
@@ -77,7 +122,7 @@ class DateLookup extends PureComponent {
   open = () => {
     const { onFocus } = this.props;
 
-    this.setState({ open: true, mode: MODE.DAY });
+    this.setState({ open: true, mode: 'day' });
     if (onFocus) {
       onFocus();
     }
@@ -99,7 +144,7 @@ class DateLookup extends PureComponent {
     }
   };
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     const { open, originalDate } = this.state;
     switch (event.key) {
       case 'ArrowLeft':
@@ -146,29 +191,31 @@ class DateLookup extends PureComponent {
     }
   };
 
-  adjustDate = (daysToAdd, monthsToAdd, yearsToAdd) => {
+  adjustDate = (daysToAdd: number, monthsToAdd: number, yearsToAdd: number) => {
     const { selectedDate, min, max, mode, originalDate } = this.state;
     if (originalDate === null) {
       this.setState({ originalDate: selectedDate });
     }
-    let date;
+    let date: Date | null;
     if (selectedDate) {
       date = new Date(
-        mode === MODE.YEAR ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(),
-        mode === MODE.MONTH ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(),
-        mode === MODE.DAY ? selectedDate.getDate() + daysToAdd : selectedDate.getDate(),
+        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 !== +selectedDate) {
+    if (date) {
+      date = moveToWithinRange(date, min, max);
+    }
+    if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }
   };
 
-  focusOn = (preferredElement, fallbackElement) => {
-    const element = this.element.current.querySelector(preferredElement);
+  focusOn = (preferredElement: string, fallbackElement?: string) => {
+    const element = this.element.current?.querySelector(preferredElement) as HTMLElement | null;
     if (element) {
       element.focus();
     } else if (fallbackElement) {
@@ -176,19 +223,19 @@ class DateLookup extends PureComponent {
     }
   };
 
-  switchMode = (mode) => {
+  switchMode = (mode: 'day' | 'month' | 'year') => {
     this.setState({ mode }, () => {
       this.focusOn('.active', '.today');
     });
   };
 
-  switchToDays = () => this.switchMode(MODE.DAY);
+  switchToDays = () => this.switchMode('day');
 
-  switchToMonths = () => this.switchMode(MODE.MONTH);
+  switchToMonths = () => this.switchMode('month');
 
-  switchToYears = () => this.switchMode(MODE.YEAR);
+  switchToYears = () => this.switchMode('year');
 
-  handleSelectedDateUpdate = (selectedDate) => {
+  handleSelectedDateUpdate = (selectedDate: Date) => {
     this.setState({ selectedDate }, () => {
       this.props.onChange(selectedDate);
       this.close();
@@ -205,25 +252,38 @@ class DateLookup extends PureComponent {
     const { placeholder, monthFormat } = this.props;
     return (
       <div className={classNames({ 'p-a-1': !isMobile })}>
-        {mode === MODE.DAY && (
+        {mode === 'day' && (
           <DayCalendar
-            {...{ selectedDate, min, max, viewMonth, viewYear, monthFormat }}
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewMonth={viewMonth}
+            viewYear={viewYear}
+            monthFormat={monthFormat}
             onSelect={this.handleSelectedDateUpdate}
             onLabelClick={this.switchToYears}
             onViewDateUpdate={this.handleViewDateUpdate}
           />
         )}
-        {mode === MODE.MONTH && (
+        {mode === 'month' && (
           <MonthCalendar
-            {...{ selectedDate, min, max, viewYear, placeholder }}
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewYear={viewYear}
+            placeholder={placeholder}
             onSelect={this.switchToDays}
             onLabelClick={this.switchToYears}
             onViewDateUpdate={this.handleViewDateUpdate}
           />
         )}
-        {mode === MODE.YEAR && (
+        {mode === 'year' && (
           <YearCalendar
-            {...{ selectedDate, min, max, viewYear, placeholder }}
+            selectedDate={selectedDate}
+            min={min}
+            max={max}
+            viewYear={viewYear}
+            placeholder={placeholder}
             onSelect={this.switchToMonths}
             onViewDateUpdate={this.handleViewDateUpdate}
           />
@@ -251,7 +311,7 @@ class DateLookup extends PureComponent {
       value,
     } = this.props;
     return (
-      <div // eslint-disable-line jsx-a11y/no-static-element-interactions
+      <div
         ref={this.element}
         id={this.props.id}
         aria-labelledby={ariaLabelledBy}
@@ -259,9 +319,14 @@ class DateLookup extends PureComponent {
         onKeyDown={this.handleKeyDown}
       >
         <DateTrigger
-          {...{ selectedDate, size, placeholder, label, monthFormat, disabled }}
+          selectedDate={selectedDate}
+          size={size}
+          placeholder={placeholder}
+          label={label}
+          monthFormat={monthFormat}
+          disabled={disabled || false}
           onClick={this.open}
-          onClear={!disabled && clearable && value ? this.handleClear : null}
+          onClear={!disabled && clearable && value ? this.handleClear : undefined}
         />
         <ResponsivePanel
           anchorRef={this.element}
@@ -277,35 +342,4 @@ class DateLookup extends PureComponent {
   }
 }
 
-DateLookup.propTypes = {
-  id: PropTypes.string,
-  value: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  monthFormat: PropTypes.oneOf(['long', 'short']),
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  clearable: PropTypes.bool,
-};
-
-DateLookup.defaultProps = {
-  value: null,
-  min: null,
-  max: null,
-  size: Size.MEDIUM,
-  placeholder: '',
-  label: '',
-  monthFormat: MonthFormat.LONG,
-  disabled: false,
-  onFocus: null,
-  onBlur: null,
-  clearable: false,
-};
-
 export default DateLookup;

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

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
@@ -10,7 +9,21 @@ import messages from '../DateLookup.messages';
 
 const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
 
-const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMode }) => {
+interface DateHeaderProps {
+  label?: string;
+  onLabelClick?: () => void;
+  onPreviousClick: () => void;
+  onNextClick: () => void;
+  dateMode: string;
+}
+
+const DateHeader: React.FC<DateHeaderProps> = ({
+  label,
+  onLabelClick,
+  onPreviousClick,
+  onNextClick,
+  dateMode,
+}) => {
   const intl = useIntl();
   const { isMobile } = useLayout();
   return (
@@ -59,17 +72,4 @@ const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMod
   );
 };
 
-DateHeader.propTypes = {
-  label: PropTypes.string,
-  onLabelClick: PropTypes.func,
-  onPreviousClick: PropTypes.func.isRequired,
-  onNextClick: PropTypes.func.isRequired,
-  dateMode: PropTypes.string,
-};
-
-DateHeader.defaultProps = {
-  label: null,
-  onLabelClick: () => {},
-};
-
 export default DateHeader;

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -2,7 +2,6 @@ import * as formatting from '@transferwise/formatting';
 import { shallow } from 'enzyme';
 
 import Chevron from '../../chevron';
-import { fakeKeyDownEventForKey } from '../../common/fakeEvents';
 
 import DateTrigger from '.';
 
@@ -116,27 +115,6 @@ describe('DateTrigger', () => {
     expect(clearButton()).toHaveLength(1);
   });
 
-  it('calls onClear when user press Space', () => {
-    const onClear = jest.fn();
-    component.setProps({ onClear });
-    clearButton().simulate('keypress', fakeKeyDownEventForKey(' '));
-    expect(onClear).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onClear when user press Enter', () => {
-    const onClear = jest.fn();
-    component.setProps({ onClear });
-    clearButton().simulate('keypress', fakeKeyDownEventForKey('Enter'));
-    expect(onClear).toHaveBeenCalledTimes(1);
-  });
-
-  it(`doesn't call onClear when user press a random key`, () => {
-    const onClear = jest.fn();
-    component.setProps({ onClear });
-    clearButton().simulate('keypress', fakeKeyDownEventForKey('r'));
-    expect(onClear).not.toHaveBeenCalled();
-  });
-
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);

package/src/dateLookup/dateTrigger/{DateTrigger.js → DateTrigger.tsx}

@@ -1,17 +1,26 @@
 import { formatDate } from '@transferwise/formatting';
-import { isKey } from '@transferwise/neptune-validation';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 
-const DateTrigger = ({
+interface DateTriggerProps {
+  selectedDate: Date | null;
+  size: SizeSmall | SizeMedium | SizeLarge;
+  placeholder: string;
+  label: string;
+  monthFormat: 'short' | 'long';
+  disabled: boolean;
+  onClick: () => void;
+  onClear?: () => void;
+}
+
+const DateTrigger: React.FC<DateTriggerProps> = ({
   selectedDate,
-  size,
+  size = Size.MEDIUM,
   placeholder,
   label,
   monthFormat,
@@ -21,14 +30,6 @@ const DateTrigger = ({
 }) => {
   const { locale, formatMessage } = useIntl();
 
-  const handleKeyDown = (event) => {
-    if (isKey({ keyType: 'Space', event: event }) || isKey({ keyType: 'Enter', event: event })) {
-      event.stopPropagation();
-      event.preventDefault();
-      onClear();
-    }
-  };
-
   return (
     <>
       <button
@@ -64,12 +65,11 @@ const DateTrigger = ({
               className={`clear-btn clear-btn--${size}`}
               aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}
               size={Size.SMALL}
-              onClick={(event) => {
+              onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
                 event.stopPropagation();
                 event.preventDefault();
                 onClear();
               }}
-              onKeyPress={handleKeyDown}
             />
           </span>
         </>
@@ -78,21 +78,4 @@ const DateTrigger = ({
   );
 };
 
-DateTrigger.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  monthFormat: PropTypes.oneOf(['short', 'long']).isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onClear: PropTypes.func,
-};
-
-DateTrigger.defaultProps = {
-  selectedDate: null,
-  size: Size.MEDIUM,
-  onClear: undefined,
-};
-
 export default DateTrigger;

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

@@ -1,7 +1,6 @@
 import { formatDate } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { MonthFormat } from '../../common';
 import messages from '../DateLookup.messages';
@@ -9,7 +8,19 @@ import DateHeader from '../dateHeader';
 
 import DayCalendarTable from './table';
 
-class DayCalendar extends PureComponent {
+interface DayCalendarProps extends WrappedComponentProps {
+  selectedDate: Date | null;
+  min: Date | null;
+  max: Date | null;
+  viewMonth: number;
+  viewYear: number;
+  monthFormat: `${MonthFormat}`;
+  onSelect: (date: Date) => void;
+  onLabelClick: () => void;
+  onViewDateUpdate: (date: { month: number; year: number }) => void;
+}
+
+class DayCalendar extends PureComponent<DayCalendarProps> {
   selectPreviousMonth = () => {
     const { viewMonth, viewYear } = this.props;
     this.props.onViewDateUpdate({
@@ -56,22 +67,4 @@ class DayCalendar extends PureComponent {
   }
 }
 
-DayCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  monthFormat: PropTypes.oneOf([MonthFormat.LONG, MonthFormat.SHORT]).isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired,
-};
-
-DayCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null,
-};
-
 export default injectIntl(DayCalendar);