@transferwise/components 46.9.0 → 46.10.0

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.tsx

@@ -1,11 +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';
@@ -121,7 +121,7 @@ export const basic = () => {
   );
 };
 
-basic.play = ({ canvasElement }: StoryContext) => {
+basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  userEvent.click(canvas.getByRole('button'));
+  await userEvent.click(canvas.getByRole('button'));
 };

package/src/switch/Switch.spec.js

@@ -1,4 +1,3 @@
-import KeyCodes from '../common/keyCodes';
 import { render, fireEvent, screen } from '../test-utils';
 
 import Switch from './Switch';
@@ -69,9 +68,9 @@ describe('Switch', () => {
     );
 
     const input = screen.getAllByRole('checkbox')[0];
-    fireEvent.keyDown(input, { key: '33', keyCode: KeyCodes.ENTER });
+    fireEvent.keyDown(input, { key: 'Enter' });
     expect(props.onClick).not.toHaveBeenCalled();
-    fireEvent.keyDown(input, { key: '32', keyCode: KeyCodes.SPACE });
+    fireEvent.keyDown(input, { key: ' ' });
     expect(props.onClick).toHaveBeenCalledTimes(1);
   });
 

package/src/switch/Switch.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import { KeyboardEventHandler, MouseEvent, ReactElement } from 'react';
 
 import { CommonProps } from '../common';
-import KeyCodes from '../common/keyCodes';
 import { logActionRequiredIf } from '../utilities';
 
 type Props = CommonProps & {
@@ -26,7 +25,7 @@ const Switch = (props: Props): ReactElement => {
   const { checked, className, id, onClick, disabled } = props;
 
   const handleKeyDown: KeyboardEventHandler = (event) => {
-    if (event.code === '32' || event.keyCode === KeyCodes.SPACE) {
+    if (event.key === ' ') {
       event.preventDefault();
       onClick();
     }

package/src/switchOption/SwitchOption.spec.js

@@ -63,10 +63,7 @@ describe('SwitchOption', () => {
 
     expect(getSwitch()).toBeChecked();
 
-    fireEvent.keyDown(getSwitch(), {
-      keyCode: 32,
-      code: 'Space',
-    });
+    fireEvent.keyDown(getSwitch(), { key: ' ' });
 
     expect(mockOnChange).toHaveBeenLastCalledWith(false);
     expect(mockOnChange).toHaveBeenCalledTimes(2);

package/src/tabs/Tabs.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { Component, createRef, Fragment, RefObject } from 'react';
 
 import { Size, Width, Direction } from '../common';
-import KeyCodes from '../common/keyCodes';
 import { DirectionContext } from '../provider/direction';
 
 import Tab from './Tab';
@@ -294,7 +293,7 @@ class Tabs extends Component {
   };
 
   onKeyDown = (index) => (event) => {
-    if (event && event.keyCode === KeyCodes.ENTER) {
+    if (event && event.key === 'Enter') {
       this.switchTab(index);
     }
   };

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -1,6 +1,5 @@
 import { StoryObj } from '@storybook/react';
-
-import { userEvent, within } from '../test-utils';
+import { userEvent, within } from '@storybook/test';
 
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
 
@@ -25,8 +24,10 @@ export const Basic: Story = {
   },
   // intentionally use interactive typing (over init value via `value` prop)
   // to trigger event handlers in the component
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    userEvent.type(canvas.getByRole('textbox'), '111122223333');
+    await userEvent.type(canvas.getByRole('textbox'), '111122223333', {
+      initialSelectionStart: Number.MAX_SAFE_INTEGER,
+    });
   },
 };

package/src/tile/Tile.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import Body from '../body';
-import { Size, Key, Typography } from '../common';
+import { Size, Typography } from '../common';
 import Title from '../title';
 
 export const Tile = ({
@@ -41,7 +41,7 @@ export const Tile = ({
         disabled
           ? null
           : ({ key }) => {
-              if (key === Key.ENTER || Key.SPACE.includes(key)) {
+              if (key === 'Enter' || key === ' ') {
                 onClick();
               }
             }

package/src/tile/Tile.spec.js

@@ -1,4 +1,4 @@
-import { Key, Size } from '../common';
+import { Size } from '../common';
 import { render, fireEvent, screen } from '../test-utils';
 
 import Tile from '.';
@@ -44,11 +44,11 @@ describe(Tile, () => {
 
     const title = screen.getByText('Receive money');
 
-    fireEvent.keyDown(title, { key: Key.ENTER });
+    fireEvent.keyDown(title, { key: 'Enter' });
 
     expect(onClick).toHaveBeenCalledTimes(1);
 
-    fireEvent.keyDown(title, { key: Key.SPACE[0] });
+    fireEvent.keyDown(title, { key: ' ' });
 
     expect(onClick).toHaveBeenCalledTimes(2);
   });
@@ -66,11 +66,11 @@ describe(Tile, () => {
 
     const title = screen.getByText('Receive money');
 
-    fireEvent.keyDown(title, { key: Key.ENTER });
+    fireEvent.keyDown(title, { key: 'Enter' });
 
     expect(onClick).not.toHaveBeenCalled();
 
-    fireEvent.keyDown(title, { key: Key.SPACE[0] });
+    fireEvent.keyDown(title, { key: ' ' });
 
     expect(onClick).not.toHaveBeenCalled();
   });

package/src/tooltip/Tooltip.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 Button from '../button';
 import { storyConfig } from '../test-utils';
@@ -33,9 +33,9 @@ export const OpenedTooltip: Story = {
       delay: 1000,
     },
   },
-  play: ({ canvasElement }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    userEvent.hover(canvas.getByRole('button'));
+    await userEvent.hover(canvas.getByRole('button'));
   },
 };
 

package/src/typeahead/Typeahead.js

@@ -15,7 +15,6 @@ import {
   addClickClassToDocumentOnIos,
   removeClickClassFromDocumentOnIos,
 } from '../common/domHelpers';
-import KeyCodes from '../common/keyCodes';
 import InlineAlert from '../inlineAlert';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
@@ -123,16 +122,16 @@ export default class Typeahead extends Component {
       event.preventDefault();
       this.selectItem({ label: query });
     } else {
-      switch (event.keyCode) {
-        case KeyCodes.DOWN:
+      switch (event.key) {
+        case 'ArrowDown':
           event.preventDefault();
           this.moveFocusedOption(1);
           break;
-        case KeyCodes.UP:
+        case 'ArrowUp':
           event.preventDefault();
           this.moveFocusedOption(-1);
           break;
-        case KeyCodes.ENTER:
+        case 'Enter':
           event.preventDefault();
           if (options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
@@ -140,7 +139,7 @@ export default class Typeahead extends Component {
             this.selectItem({ label: query });
           }
           break;
-        case KeyCodes.BACKSPACE:
+        case 'Backspace':
           if (multiple && !query && selected.length > 0) {
             this.updateSelectedValue(selected.slice(0, -1));
           }

package/src/typeahead/Typeahead.spec.js

@@ -4,7 +4,6 @@ import doTimes from 'lodash.times';
 import { InlineAlert } from '..';
 import { Sentiment } from '../common';
 import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
-import KeyCodes from '../common/keyCodes';
 
 import Typeahead from './Typeahead';
 
@@ -94,7 +93,6 @@ describe('Typeahead', () => {
   it('removes last selected value when backspace clicked on empty input', () => {
     const event = {
       key: 'Backspace',
-      keyCode: KeyCodes.BACKSPACE,
     };
 
     component.setProps({
@@ -116,7 +114,6 @@ describe('Typeahead', () => {
   it('does not remove last selected value when backspace clicked on non-empty input', () => {
     const event = {
       key: 'Backspace',
-      keyCode: KeyCodes.BACKSPACE,
     };
 
     component.setProps({
@@ -228,21 +225,20 @@ describe('Typeahead', () => {
   });
 
   it('moves selected items when down and up keys pressed', () => {
-    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.DOWN)));
+    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
 
     expect(option().at(2).parent().is('.tw-dropdown-item--focused')).toBe(true);
 
-    input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.UP));
+    input().simulate('keyDown', fakeKeyDownEventForKey('ArrowUp'));
     expect(option().at(1).parent().is('.tw-dropdown-item--focused')).toBe(true);
 
-    doTimes(5, () => input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.DOWN)));
+    doTimes(5, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
     expect(option().last().parent().is('.tw-dropdown-item--focused')).toBe(true);
   });
 
   it('adds new value as selected and clears the input when no option is highlighted and enter is pressed', () => {
     const event = {
       key: 'Enter',
-      keyCode: KeyCodes.ENTER,
       preventDefault: jest.fn(),
     };
     const text = 'test';
@@ -263,7 +259,6 @@ describe('Typeahead', () => {
   it('displays alert when alert is provided and chips are valid or alert type is error', () => {
     const event = {
       key: 'Enter',
-      keyCode: KeyCodes.ENTER,
       preventDefault: jest.fn(),
     };
     const text = 'test';

package/src/typeahead/Typeahead.story.js

@@ -1,9 +1,9 @@
 import { select, boolean } from '@storybook/addon-knobs';
+import { userEvent, within } from '@storybook/test';
 import { Search as SearchIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import { Sentiment } from '../common';
-import { within, userEvent } from '../test-utils';
 
 import Typeahead from './Typeahead';
 
@@ -45,7 +45,7 @@ export const createable = () => {
 
 createable.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  userEvent.type(canvas.getByRole('combobox'), 'chip{enter}chip2{enter}');
+  await userEvent.type(canvas.getByRole('combobox'), 'chip{Enter}chip2{Enter}');
 };
 
 export const Basic = () => {
@@ -117,6 +117,5 @@ export const Basic = () => {
 
 Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  userEvent.type(canvas.getByRole('combobox'), 'abc');
-  userEvent.type(canvas.getByRole('combobox'), '{arrowDown}');
+  await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
 };

package/build/types/common/key.d.ts

@@ -1,9 +0,0 @@
-export namespace Key {
-    const ENTER: string;
-    const ESCAPE: string;
-    const SPACE: string[];
-    const TAB: string;
-    const PERIOD: string;
-    const COMMA: string;
-}
-//# sourceMappingURL=key.d.ts.map

package/build/types/common/key.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"key.d.ts","sourceRoot":"","sources":["../../../src/common/key.js"],"names":[],"mappings":""}

package/build/types/common/keyCodes.d.ts

@@ -1,16 +0,0 @@
-declare namespace _default {
-    const DOWN: number;
-    const UP: number;
-    const LEFT: number;
-    const RIGHT: number;
-    const ENTER: number;
-    const ESCAPE: number;
-    const TAB: number;
-    const SPACE: number;
-    const BACKSPACE: number;
-    const DELETE: number;
-    const COMMA: number;
-    const PERIOD: number;
-}
-export default _default;
-//# sourceMappingURL=keyCodes.d.ts.map

package/build/types/common/keyCodes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyCodes.d.ts","sourceRoot":"","sources":["../../../src/common/keyCodes.js"],"names":[],"mappings":""}

package/src/common/key.js

@@ -1,8 +0,0 @@
-export const Key = {
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-  SPACE: [' ', 'Spacebar'],
-  TAB: 'Tab',
-  PERIOD: '.',
-  COMMA: ',',
-};

package/src/common/keyCodes.js

@@ -1,19 +0,0 @@
-/**
- * TODO: mention what to use instead or consider to delete this object
- *
- * @deprecated
- */
-export default {
-  DOWN: 40,
-  UP: 38,
-  LEFT: 37,
-  RIGHT: 39,
-  ENTER: 13,
-  ESCAPE: 27,
-  TAB: 9,
-  SPACE: 32,
-  BACKSPACE: 8,
-  DELETE: 46,
-  COMMA: 188,
-  PERIOD: 190,
-};