@transferwise/components 46.8.0 → 46.10.0

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

@@ -2,7 +2,6 @@
 import { mount } from 'enzyme';
 
 import { fakeKeyDownEventForKey } from '../common/fakeEvents';
-import KEY_CODES from '../common/keyCodes';
 import { mockMatchMedia } from '../test-utils';
 
 import DateLookup from '.';
@@ -31,28 +30,28 @@ describe('DateLookup (keyboard events)', () => {
   });
 
   it('can be opened by LEFT arrow', () => {
-    pressKey(KEY_CODES.LEFT);
+    pressKey('ArrowLeft');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by UP arrow', () => {
-    pressKey(KEY_CODES.UP);
+    pressKey('ArrowUp');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by RIGHT arrow', () => {
-    pressKey(KEY_CODES.RIGHT);
+    pressKey('ArrowRight');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by DOWN arrow', () => {
-    pressKey(KEY_CODES.DOWN);
+    pressKey('ArrowDown');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be closed by pressing ESCAPE', () => {
     component.setState({ open: true });
-    pressKey(KEY_CODES.ESCAPE);
+    pressKey('Escape');
     expect(component.instance().state.open).toBe(false);
   });
 
@@ -62,33 +61,33 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 day back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
     });
 
     it('moves 7 days back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2018, 11, 20));
     });
 
     it('moves 1 day forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
     });
 
     it('moves 7 day forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2019, 0, 3));
     });
 
     it('resets to original date when escape key is pressed', () => {
-      pressKey(KEY_CODES.LEFT);
-      pressKey(KEY_CODES.ESCAPE);
+      pressKey('ArrowLeft');
+      pressKey('Escape');
       onChangeCalledWith(date);
     });
 
     it('resets to original date when clicking outside modal', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       component.find('.dimmer').simulate('click');
       onChangeCalledWith(date);
     });
@@ -100,22 +99,22 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 month back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 10, 27));
     });
 
     it('moves 4 months back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2018, 7, 27));
     });
 
     it('moves 1 month forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2019, 0, 27));
     });
 
     it('moves 4 months forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2019, 3, 27));
     });
   });
@@ -126,22 +125,22 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 year back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2017, 11, 27));
     });
 
     it('moves 4 years back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2014, 11, 27));
     });
 
     it('moves 1 year forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2019, 11, 27));
     });
 
     it('moves 4 year forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2022, 11, 27));
     });
   });
@@ -157,16 +156,16 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('makes sure that date is >= min', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
     });
 
     it('makes sure that date is <= max', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
     });
   });

package/src/dateLookup/DateLookup.story.js

@@ -1,8 +1,9 @@
 import { boolean, select, date, text } from '@storybook/addon-knobs';
+import { userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
 import { Size } from '../common';
-import { within, userEvent, storyConfig } from '../test-utils';
+import { storyConfig } from '../test-utils';
 
 import DateLookup from './DateLookup';
 
@@ -48,8 +49,8 @@ export const Basic = () => {
 Basic.play = async ({ canvasElement }) => {
   // testing focus state on keyboard nav
   const canvas = within(canvasElement);
-  userEvent.tab(canvas.getByRole('button'));
-  userEvent.keyboard('{space}');
+  await userEvent.tab(canvas.getByRole('button'));
+  await userEvent.keyboard(' ');
 };
 
 export const Basic400Zoom = storyConfig(

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

@@ -111,21 +111,21 @@ describe('DateTrigger', () => {
   it('calls onClear when user press Space', () => {
     const onClear = jest.fn();
     component.setProps({ onClear });
-    clearButton().simulate('keypress', fakeKeyDownEventForKey(32));
+    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(13));
+    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(6));
+    clearButton().simulate('keypress', fakeKeyDownEventForKey('r'));
     expect(onClear).not.toHaveBeenCalled();
   });
 

package/src/index.ts

@@ -16,6 +16,8 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
+export type { SnackbarProps } from './snackbar/Snackbar';
+export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';

package/src/info/Info.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import { lorem10, storyConfig } from '../test-utils';
 
@@ -35,9 +35,9 @@ export const OpenedPopover: Story = {
       delay: 1000,
     },
   },
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    userEvent.click(canvas.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -1,6 +1,5 @@
 import { text } from '@storybook/addon-knobs';
-
-import { within, userEvent } from '../test-utils';
+import { userEvent, within } from '@storybook/test';
 
 import InputWithDisplayFormat from '.';
 
@@ -86,9 +85,5 @@ SecurityPinPlay.args = {
 
 SecurityPinPlay.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  let i = 0;
-  while (i < 6) {
-    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), `${i + 1}`, { delay: 5000 });
-    i++;
-  }
+  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
 };

package/src/inputs/SelectInput.spec.tsx

@@ -208,4 +208,11 @@ describe('SelectInput', () => {
 
     expect(trigger).toHaveTextContent('USD, EUR');
   });
+
+  it('supports custom `id` attribute', () => {
+    render(<SelectInput id="custom" items={[]} />);
+
+    const trigger = screen.getAllByRole('button')[0];
+    expect(trigger).toHaveAttribute('id', 'custom');
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
@@ -7,7 +8,6 @@ import { useState } from 'react';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import Modal from '../modal';
-import { within, userEvent } from '../test-utils';
 
 import {
   SelectInput,
@@ -131,9 +131,9 @@ export const Basic: StoryObj<{
       action: 'cleared',
     },
   },
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const triggerButton = within(canvasElement).getByRole('button');
-    userEvent.click(triggerButton);
+    await userEvent.click(triggerButton);
   },
 };
 
@@ -184,9 +184,9 @@ export const Months: StoryObj<{
       action: 'cleared',
     },
   },
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const triggerButton = within(canvasElement).getByText('January');
-    userEvent.click(triggerButton);
+    await userEvent.click(triggerButton);
   },
 };
 
@@ -402,9 +402,9 @@ export const CustomTrigger: StoryObj = {
       </div>
     );
   },
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const triggerButton = within(canvasElement).getByRole('button');
-    userEvent.click(triggerButton);
+    await userEvent.click(triggerButton);
   },
 };
 

package/src/inputs/SelectInput.tsx

@@ -41,6 +41,7 @@ function inferSearchableStrings(value: unknown) {
 
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement>;
+  id?: string;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   [key: string]: unknown;
@@ -125,6 +126,7 @@ function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle:
 }
 
 export interface SelectInputProps<T = string, M extends boolean = false> {
+  id?: string;
   name?: string;
   multiple?: M;
   placeholder?: string;
@@ -218,6 +220,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
+  id,
   name,
   multiple,
   placeholder,
@@ -288,6 +291,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                 // eslint-disable-next-line react/jsx-no-constructed-context-values
                 value={{
                   ref: mergeRefs([ref, triggerRef]),
+                  id,
                   ...mergeProps(
                     {
                       onClick: () => {

package/src/logo/Logo.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import { LogoType } from './logoTypes';
-import { LogoFlagInverse } from './svg/flag-inverse.svg';
-import { LogoFlag } from './svg/flag.svg';
-import { LogoWiseInverse } from './svg/logo-inverse.svg';
-import { LogoWise } from './svg/logo.svg';
+import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
+import { ReactComponent as LogoFlag } from './svg/flag.svg';
+import { ReactComponent as LogoWiseInverse } from './svg/logo-inverse.svg';
+import { ReactComponent as LogoWise } from './svg/logo.svg';
 
 const svgPaths = {
   WISE: LogoWise,

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
 import React, { useState } from 'react';
 
@@ -150,9 +150,9 @@ export const BalanceCurrencies: Story = {
 
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    userEvent.click(canvas.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 

package/src/moneyInput/MoneyInput.tsx

@@ -5,8 +5,6 @@ import { Component } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { Typography } from '../common';
-import { Key as keyValues } from '../common/key';
-import keyCodes from '../common/keyCodes';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
 import { Input } from '../inputs/Input';
 import {
@@ -76,22 +74,20 @@ const parseNumber = ({
   return Number(amount);
 };
 
-const inputKeyCodeAllowlist = new Set([
-  keyCodes.BACKSPACE,
-  keyCodes.DELETE,
-  keyCodes.COMMA,
-  keyCodes.PERIOD,
-  keyCodes.DOWN,
-  keyCodes.UP,
-  keyCodes.LEFT,
-  keyCodes.RIGHT,
-  keyCodes.ENTER,
-  keyCodes.ESCAPE,
-  keyCodes.TAB,
+const allowedInputKeys = new Set([
+  'Backspace',
+  'Delete',
+  ',',
+  '.',
+  'ArrowDown',
+  'ArrowUp',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  'Escape',
+  'Tab',
 ]);
 
-const inputKeyAllowlist = new Set([keyValues.PERIOD, keyValues.COMMA]);
-
 export interface MoneyInputProps extends WrappedComponentProps {
   id?: string;
   currencies: readonly CurrencyItem[];
@@ -162,16 +158,10 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
   }
 
   isInputAllowedForKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const { keyCode, metaKey, key, ctrlKey } = event;
+    const { metaKey, key, ctrlKey } = event;
     const isNumberKey = isNumber(parseInt(key, 10));
 
-    return (
-      isNumberKey ||
-      metaKey ||
-      ctrlKey ||
-      inputKeyCodeAllowlist.has(keyCode) ||
-      inputKeyAllowlist.has(key)
-    );
+    return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
   };
 
   handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {

package/src/select/Select.js

@@ -10,7 +10,6 @@ import { Position, getSimpleRandomId } from '../common';
 import BottomSheet from '../common/bottomSheet';
 import { stopPropagation } from '../common/domHelpers';
 import { useLayout } from '../common/hooks';
-import KeyCodes from '../common/keyCodes';
 import Panel from '../common/panel';
 import Drawer from '../drawer';
 
@@ -204,17 +203,17 @@ export default function Select({
   };
 
   const handleKeyDown = (event) => {
-    switch (event.keyCode) {
-      case KeyCodes.UP:
-      case KeyCodes.DOWN:
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
         if (open) {
-          moveFocusWithDifference(event.keyCode === KeyCodes.UP ? -1 : 1);
+          moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);
         } else {
           setOpen(true);
         }
         stopPropagation(event);
         break;
-      case KeyCodes.SPACE:
+      case ' ':
         if (event.target !== searchBoxReference.current) {
           if (open) {
             selectKeyboardFocusedOption();
@@ -224,7 +223,7 @@ export default function Select({
           stopPropagation(event);
         }
         break;
-      case KeyCodes.ENTER:
+      case 'Enter':
         if (open) {
           selectKeyboardFocusedOption();
         } else {
@@ -232,11 +231,11 @@ export default function Select({
         }
         stopPropagation(event);
         break;
-      case KeyCodes.ESCAPE:
+      case 'Escape':
         handleCloseOptions();
         stopPropagation(event);
         break;
-      case KeyCodes.TAB:
+      case 'Tab':
         if (open) {
           selectKeyboardFocusedOption();
         }

package/src/snackbar/{Snackbar.story.js → Snackbar.story.tsx}

@@ -1,10 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
+import { StoryContext } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
 
 import Button from '../button';
 import CheckboxOption from '../checkboxOption/CheckboxOption';
-import { within, userEvent } from '../test-utils';
 
 import { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
@@ -120,7 +121,7 @@ export const basic = () => {
   );
 };
 
-basic.play = async ({ canvasElement }) => {
+basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  userEvent.click(canvas.getByRole('button'));
+  await userEvent.click(canvas.getByRole('button'));
 };

package/src/snackbar/{Snackbar.js → Snackbar.tsx}

@@ -1,21 +1,36 @@
-import PropTypes from 'prop-types';
-import { Component, createRef, RefObject } from 'react';
+import { Component, createRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import ActionButton from '../actionButton';
 import Body from '../body';
-import { Theme } from '../common';
+import { Theme, ThemeDark, ThemeLight } from '../common';
 import { DirectionContext } from '../provider/direction';
 import withNextPortal from '../withNextPortal/withNextPortal';
 
 export const CSS_TRANSITION_DURATION = 400;
 
-export class Snackbar extends Component {
-  /** @type {RefObject<HTMLSpanElement>} */
-  bodyRef = createRef();
+export interface SnackbarProps {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  text: React.ReactNode;
+  theme?: ThemeLight | ThemeDark;
+  timeout: number;
+  timestamp: number;
+}
+
+interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
+  visible: boolean;
+}
+
+export class Snackbar extends Component<SnackbarProps, SnackbarState> {
+  bodyRef = createRef<HTMLSpanElement>();
+  timeout = 0;
+  transitionTimeout = 0;
 
-  constructor() {
-    super();
+  constructor(props: SnackbarProps) {
+    super(props);
     this.state = {
       visible: false,
       text: '',
@@ -23,11 +38,11 @@ export class Snackbar extends Component {
   }
 
   componentWillUnmount() {
-    clearTimeout(this.timeout);
-    clearTimeout(this.transitionTimeout);
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
     if (!nextProps.text) {
       return false;
     }
@@ -45,12 +60,12 @@ export class Snackbar extends Component {
   setLeaveTimeout = () => {
     const { timeout } = this.props;
 
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({ visible: false });
     }, timeout);
   };
 
-  componentDidUpdate(previousProps) {
+  componentDidUpdate(previousProps: SnackbarProps) {
     const { action, text, theme, timestamp } = this.props;
 
     if (!previousProps.text) {
@@ -58,11 +73,11 @@ export class Snackbar extends Component {
         this.setLeaveTimeout();
       });
     } else if (previousProps.timestamp !== timestamp) {
-      clearTimeout(this.timeout);
+      window.clearTimeout(this.timeout);
 
       if (this.state.visible) {
         this.setState({ visible: false }, () => {
-          this.transitionTimeout = setTimeout(() => {
+          this.transitionTimeout = window.setTimeout(() => {
             this.setState({ visible: true, action, text, theme });
             this.setLeaveTimeout();
           }, CSS_TRANSITION_DURATION);
@@ -75,7 +90,7 @@ export class Snackbar extends Component {
   }
 
   render() {
-    const { action, text, theme, visible } = this.state;
+    const { action, text, theme = Theme.LIGHT, visible } = this.state;
     const { timeout } = this.props;
 
     return (
@@ -112,20 +127,4 @@ export class Snackbar extends Component {
 
 Snackbar.contextType = DirectionContext;
 
-Snackbar.propTypes = {
-  action: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-  }),
-  text: PropTypes.node.isRequired,
-  theme: PropTypes.oneOf(['light', 'dark']),
-  timeout: PropTypes.number.isRequired,
-  timestamp: PropTypes.number.isRequired,
-};
-
-Snackbar.defaultProps = {
-  action: null,
-  theme: Theme.LIGHT,
-};
-
 export default withNextPortal(Snackbar);

package/src/snackbar/SnackbarContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { SnackbarProps } from './Snackbar';
+
+export type SnackbarContextType = {
+  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
+};
+
+export const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });
+
+export const SnackbarConsumer = SnackbarContext.Consumer;