@transferwise/components 46.27.0 → 46.29.0

package/src/common/deviceDetection/deviceDetection.spec.js

@@ -2,8 +2,10 @@ import { isIosDevice } from './deviceDetection';
 
 describe('Device detection', () => {
   function fakeUserAgent(userAgent) {
-    navigator.__defineGetter__('userAgent', () => userAgent);
-    // need to use this instead of defineProperty, as it's blocked from overriding
+    Object.defineProperty(navigator, 'userAgent', {
+      value: userAgent,
+      configurable: true,
+    });
   }
 
   beforeEach(() => {

package/src/common/propsValues/sentiment.ts

@@ -18,13 +18,3 @@ export enum Sentiment {
    */
   SUCCESS = 'success',
 }
-
-export type SentimentString =
-  | 'negative'
-  | 'neutral'
-  | 'positive'
-  | 'warning'
-  | 'pending'
-  | 'info'
-  | 'error'
-  | 'success';

package/src/common/responsivePanel/ResponsivePanel.spec.js

@@ -1,5 +1,5 @@
 import { Breakpoint, Position } from '..';
-import { mockMatchMedia, render, waitFor } from '../../test-utils';
+import { mockMatchMedia, render } from '../../test-utils';
 
 import ResponsivePanel from './ResponsivePanel';
 
@@ -45,13 +45,11 @@ describe('ResponsivePanel', () => {
 
   describe('on desktop', () => {
     it('renders Panel', async () => {
-      await waitFor(() => {
-        ({ container } = render(
-          <ResponsivePanel {...props} intialOpen>
-            children
-          </ResponsivePanel>,
-        ));
-      });
+      ({ container } = render(
+        <ResponsivePanel {...props} intialOpen>
+          children
+        </ResponsivePanel>,
+      ));
 
       expect(container).toMatchSnapshot();
     });
@@ -63,13 +61,11 @@ describe('ResponsivePanel', () => {
     });
 
     it('renders bottomSheet', async () => {
-      await waitFor(() => {
-        ({ container } = render(
-          <ResponsivePanel {...props} open>
-            children
-          </ResponsivePanel>,
-        ));
-      });
+      ({ container } = render(
+        <ResponsivePanel {...props} open>
+          children
+        </ResponsivePanel>,
+      ));
 
       expect(container).toMatchSnapshot();
     });

package/src/dateLookup/DateLookup.state.spec.js

@@ -66,4 +66,11 @@ describe('DateLookup state', () => {
     DateLookup.getDerivedStateFromProps(props, defaultState);
     expect(onChange).toHaveBeenCalledWith(new Date(2018, 10, 1));
   });
+
+  it('updates viewMonth and viewYear to date within min/max on Clear', () => {
+    const props = { value: null, min: new Date(2018, 11, 26), max: new Date(2018, 11, 26) };
+    const newState = DateLookup.getDerivedStateFromProps(props, defaultState);
+    expect(newState.viewMonth).toBe(11);
+    expect(newState.viewYear).toBe(2018);
+  });
 });

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

@@ -1,5 +1,5 @@
-import { boolean, select, date, text } from '@storybook/addon-knobs';
-import { userEvent, within } from '@storybook/test';
+import { boolean, select, text, date } from '@storybook/addon-knobs';
+import { userEvent } from '@storybook/test';
 import { useState } from 'react';
 
 import { Size } from '../common';
@@ -13,21 +13,21 @@ export default {
 };
 
 const epoch = new Date('2011-01-01');
-let theFuture = new Date(epoch);
+const theFuture = new Date(epoch);
 theFuture.setUTCDate(epoch.getUTCDate() + 10);
-let thePast = new Date(epoch);
+const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
+const size = select('size', Object.values([Size.SMALL, Size.MEDIUM, Size.LARGE]), Size.MEDIUM);
 
 export const Basic = () => {
-  const [value, setValue] = useState(epoch);
+  const [value, setValue] = useState<Date | null>(epoch);
   const disabled = boolean('disabled', false);
   const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short']);
+  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
   const placeholder = text('placeholder', 'placeholder');
-  const size = select('size', Object.values(Size), Size.MEDIUM);
   const id = text('id', 'date-lookup');
 
-  const clearable = boolean('clearable', false);
+  const clearable = boolean('clearable', true);
 
   return (
     <DateLookup
@@ -35,6 +35,7 @@ export const Basic = () => {
       id={id}
       label={label}
       min={thePast}
+      max={theFuture}
       monthFormat={monthFormat}
       placeholder={placeholder}
       size={size}
@@ -48,10 +49,9 @@ export const Basic = () => {
   );
 };
 
-Basic.play = async ({ canvasElement }) => {
+Basic.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   // testing focus state on keyboard nav
-  const canvas = within(canvasElement);
-  await userEvent.tab(canvas.getByRole('button'));
+  await userEvent.tab();
   await userEvent.keyboard(' ');
 };
 
@@ -61,12 +61,11 @@ export const Basic400Zoom = storyConfig(
 );
 
 export const RightAligned = () => {
-  const [value, setValue] = useState(epoch);
+  const [value, setValue] = useState<Date | null>(epoch);
   const disabled = boolean('disabled', false);
   const label = text('label', 'label');
-  const monthFormat = select('monthFormat', ['long', 'short']);
+  const monthFormat = select('monthFormat', ['long', 'short'], 'long');
   const placeholder = text('placeholder', 'placeholder');
-  const size = select('size', Object.values(Size), Size.MEDIUM);
 
   const minvalue = date('minvalue', thePast);
   const maxvalue = date('maxvalue', theFuture);

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);