@transferwise/components 0.0.0-experimental-c8fc1dc → 0.0.0-experimental-10c3d0b

package/build/types/instructionsList/InstructionsList.d.ts

@@ -4,15 +4,13 @@ type InstructionNode = {
     content: ReactNode;
     ['aria-label']: string;
 };
-type Props = CommonProps & {
-    overrideCircleFillIcons?: boolean;
-} & ({
+type Props = CommonProps & ({
     dos?: ReactNode[];
     donts?: ReactNode[];
 } | {
     dos?: InstructionNode[];
     donts?: InstructionNode[];
 });
-declare const InstructionsList: ({ dos, donts, overrideCircleFillIcons }: Props) => import("react").JSX.Element;
+declare const InstructionsList: ({ dos, donts }: Props) => import("react").JSX.Element;
 export default InstructionsList;
 //# sourceMappingURL=InstructionsList.d.ts.map

package/build/types/instructionsList/InstructionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,CAC7D;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,4CAAqD,KAAK,gCAyB/E,CAAC;AAoCF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GACtB,CACI;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,mBAAoB,KAAK,gCAe9C,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}

package/build/types/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.js"],"names":[],"mappings":"AA0BA;IACE,wBAWC;IARC,2BAAqE;IAErE;;;;;MAKC;IAGH,uDAeC;IAED,6BAEC;IAED,0BAOE;IAEF,kDAGE;IAEF,qCAoBE;IAEF,oCAiBE;IAEF,sCAmCE;IAEF,qCAYC;IAED,gCAiBE;IAEF,sCAME;IAEF,mCASE;IAEF,gCAgBE;IAEF,qBAWE;IAEF,qBAWE;IAEF,6CAOE;IAEF,4BASE;IAEF,kCAME;IAEF,mEAcE;IAEF;;;;;;;;;sCA0CE;IAEF,sCAmGC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqEe,0CAAU;;;;;;;;;;AAle1B,gCAAyB;AADzB,0CAAmC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.js"],"names":[],"mappings":"AAyBA;IACE,wBAWC;IARC,2BAAqE;IAErE;;;;;MAKC;IAGH,uDAeC;IAED,6BAEC;IAED,0BAOE;IAEF,kDAGE;IAEF,qCAoBE;IAEF,oCAiBE;IAEF,sCAmCE;IAEF,qCAYC;IAED,gCAiBE;IAEF,sCAME;IAEF,mCASE;IAEF,gCAgBE;IAEF,qBAWE;IAEF,qBAWE;IAEF,6CAOE;IAEF,4BASE;IAEF,kCAME;IAEF,mEAcE;IAEF;;;;;;;;;sCA0CE;IAEF,sCAmGC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqEe,0CAAU;;;;;;;;;;AAle1B,gCAAyB;AADzB,0CAAmC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c8fc1dc",
+  "version": "0.0.0-experimental-10c3d0b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -28,25 +28,22 @@
     "@babel/preset-typescript": "^7.22.15",
     "@formatjs/cli": "^4.8.3",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-viewport": "^7.4.5",
-    "@storybook/addons": "^7.4.5",
-    "@storybook/api": "^7.4.5",
-    "@storybook/components": "^7.4.5",
-    "@storybook/core-events": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.4.5",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.4.5",
-    "@storybook/types": "^7.4.5",
+    "@storybook/addon-viewport": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/types": "^7.6.17",
     "@testing-library/dom": "^7.21.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
@@ -74,16 +71,16 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^5.10.0",
     "rollup": "^3.28.1",
-    "storybook": "^7.4.5",
+    "storybook": "^7.6.17",
     "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.9.5",
-    "@wise/components-theming": "0.0.0-experimental-c8fc1dc"
+    "@wise/components-theming": "1.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.9.5",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "0.0.0-experimental-c8fc1dc",
+    "@wise/components-theming": "^1.0.0",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"

package/src/button/Button.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 { ControlType, Priority } from '../common';
 import { storyConfig } from '../test-utils';
@@ -34,9 +34,9 @@ export const Focused = storyConfig<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/common/fakeEvents.js

@@ -1,12 +1,30 @@
+import keyCodes from './keyCodes';
+
 export const fakeEvent = () => ({
   nativeEvent: { stopImmediatePropagation() {} },
   stopPropagation() {},
   preventDefault() {},
 });
 
+const keyByKeyCode = {
+  [keyCodes.DOWN]: 'ArrowDown',
+  [keyCodes.UP]: 'ArrowUp',
+  [keyCodes.LEFT]: 'ArrowLeft',
+  [keyCodes.RIGHT]: 'ArrowRight',
+  [keyCodes.ENTER]: 'Enter',
+  [keyCodes.ESCAPE]: 'Escape',
+  [keyCodes.TAB]: 'Tab',
+  [keyCodes.SPACE]: ' ',
+  [keyCodes.BACKSPACE]: 'Backspace',
+  [keyCodes.DELETE]: 'Delete',
+  [keyCodes.COMMA]: ',',
+  [keyCodes.PERIOD]: '.',
+};
+
 export const fakeKeyDownEventForKey = (keyCode) => ({
   ...fakeEvent(),
   keyCode,
+  key: keyByKeyCode[keyCode],
 });
 
 export const fakeKeyDownEvent = (eventAttribute = {}) => ({

package/src/dateInput/DateInput.story.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
 
 import { DateInput, Info, InlineAlert, Title, Typography } from '..';
-import { lorem10, storyConfig, userEvent, within } from '../test-utils';
+import { lorem10, storyConfig } from '../test-utils';
 
 export default {
   component: DateInput,
@@ -25,9 +26,9 @@ type Story = StoryObj<typeof DateInput>;
 
 export const Basic: Story = {};
 
-Basic.play = ({ canvasElement }) => {
+Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  userEvent.click(canvas.getByRole('button'));
+  await userEvent.click(canvas.getByRole('button'));
 };
 
 export const WithLabel: Story = {

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import Chevron from '../../chevron';
 import { fakeKeyDownEventForKey } from '../../common/fakeEvents';
+import keyCodes from '../../common/keyCodes';
 
 import DateTrigger from '.';
 
@@ -111,14 +112,14 @@ 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(keyCodes.SPACE));
     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(keyCodes.ENTER));
     expect(onClear).toHaveBeenCalledTimes(1);
   });
 

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.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/instructionsList/InstructionList.story.tsx

@@ -33,7 +33,6 @@ export const Basic = () => {
           { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
           { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
         ]}
-        overrideCircleFillIcons
       />
     </>
   );

package/src/instructionsList/InstructionsList.tsx

@@ -1,10 +1,4 @@
-import { boolean } from '@storybook/addon-knobs';
-import {
-  CrossCircleFill as DontCheckCircleIcon,
-  CheckCircleFill as DoCheckCircleIcon,
-  Cross as DontCrossIcon,
-  Check as DoCheckIcon,
-} from '@transferwise/icons';
+import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
 import { ReactNode, isValidElement } from 'react';
 
 import Body from '../body/Body';
@@ -15,7 +9,8 @@ type InstructionNode = {
   ['aria-label']: string;
 };
 
-type Props = CommonProps & { overrideCircleFillIcons?: boolean } & (
+type Props = CommonProps &
+  (
     | {
         dos?: ReactNode[];
         donts?: ReactNode[];
@@ -26,42 +21,24 @@ type Props = CommonProps & { overrideCircleFillIcons?: boolean } & (
       }
   );
 
-const InstructionsList = ({ dos, donts, overrideCircleFillIcons = false }: Props) => {
+const InstructionsList = ({ dos, donts }: Props) => {
   return (
     <div className="tw-instructions">
       {dos &&
         dos.map((doThis, index) => (
-          <Instruction
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            item={doThis}
-            type="do"
-            overrideCircleFillIcons={overrideCircleFillIcons}
-          />
+          // eslint-disable-next-line react/no-array-index-key
+          <Instruction key={index} item={doThis} type="do" />
         ))}
       {donts &&
         donts.map((dont, index) => (
-          <Instruction
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            item={dont}
-            type="dont"
-            overrideCircleFillIcons={overrideCircleFillIcons}
-          />
+          // eslint-disable-next-line react/no-array-index-key
+          <Instruction key={index} item={dont} type="dont" />
         ))}
     </div>
   );
 };
 
-function Instruction({
-  item,
-  type,
-  overrideCircleFillIcons,
-}: {
-  item: ReactNode | InstructionNode;
-  type: 'do' | 'dont';
-  overrideCircleFillIcons: boolean;
-}) {
+function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
@@ -69,16 +46,10 @@ function Instruction({
       className="instruction"
       aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
     >
-      {overrideCircleFillIcons ? (
-        type === 'do' ? (
-          <DoCheckIcon size={24} className={type} />
-        ) : (
-          <DontCrossIcon size={24} className={type} />
-        )
-      ) : type === 'do' ? (
-        <DoCheckCircleIcon size={24} className={type} />
+      {type === 'do' ? (
+        <DoIcon size={24} className={type} />
       ) : (
-        <DontCheckCircleIcon size={24} className={type} />
+        <DontIcon size={24} className={type} />
       )}
       <Body className="text-primary" type={Typography.BODY_LARGE}>
         {isInstructionNode ? item.content : item}

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/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/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/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

@@ -94,7 +94,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 +115,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({

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