@transferwise/components 46.9.0 → 46.10.1

package/src/modal/Modal.less

@@ -95,6 +95,10 @@
         padding-bottom: 4px !important;
       }
     }
+
+    .np-theme-personal {
+      background-color: transparent;
+    }
   }
 
   table, .table {

package/src/modal/Modal.story.tsx

@@ -1,10 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { ScreenMode, ThemeProvider } from '@wise/components-theming';
 import { useState } from 'react';
 
-import { Button, Modal } from '..';
-import { Scroll } from '../common';
-import { lorem10, lorem1000, storyConfig } from '../test-utils';
+import { Button, Modal, ModalProps } from '..';
+import { CommonProps, Scroll } from '../common';
+import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 
 export default {
   component: Modal,
@@ -23,6 +24,39 @@ export default {
 
 type Story = StoryObj<typeof Modal>;
 
+export interface StoryContentProps {
+  args: CommonProps & ModalProps;
+  screenMode?: ScreenMode;
+}
+
+const StoryContent = ({ args, screenMode }: StoryContentProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [open, setOpen] = useState(args.open);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal
+        {...args}
+        body={
+          !screenMode ? (
+            args.body
+          ) : (
+            <ThemeProvider theme="personal" screenMode={screenMode}>
+              {lorem100}
+            </ThemeProvider>
+          )
+        }
+        open={open}
+        disableDimmerClickToClose={args.disableDimmerClickToClose}
+        onClose={() => {
+          setOpen(false);
+          action('Modal closed')();
+        }}
+      />
+    </>
+  );
+};
+
 export const Basic: Story = {
   args: {
     title: 'Title',
@@ -30,24 +64,7 @@ export const Basic: Story = {
     scroll: Scroll.VIEWPORT,
     footer: <Button block>Action</Button>,
   },
-  render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <Button onClick={() => setOpen(true)}>Open Modal</Button>
-        <Modal
-          {...args}
-          open={open}
-          disableDimmerClickToClose={args.disableDimmerClickToClose}
-          onClose={() => {
-            setOpen(false);
-            action('Modal closed')();
-          }}
-        />
-      </>
-    );
-  },
+  render: (args) => <StoryContent args={args} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -80,3 +97,20 @@ export const WithoutTitle: Story = {
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
+
+export const WithThemeProviderInContent: Story = {
+  args: {
+    title: lorem10,
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+    footer: <Button block>Action</Button>,
+  },
+  render: (args, { globals: { screenMode } }) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <StoryContent args={args} screenMode={screenMode} />
+  ),
+};
+
+export const WithThemeProviderInContentMobile: Story = storyConfig(WithThemeProviderInContent, {
+  variants: ['mobile'],
+});

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/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  selectInputPlaceholder: {
+    id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
+    defaultMessage: 'Select an option...',
+  },
+});

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -5,7 +5,12 @@ import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import PhoneNumberInput from '.';
 
-jest.mock('react-intl');
+const locale = 'en-GB';
+const formatMessage = (message) => message.defaultMessage;
+jest.mock('react-intl', () => ({
+  ...jest.requireActual('react-intl'),
+  useIntl: jest.fn(() => ({ locale, formatMessage })),
+}));
 
 mockMatchMedia();
 mockResizeObserver();
@@ -22,7 +27,7 @@ describe('Given a telephone number component', () => {
   const NUMBER_SELECTOR = 'input[name="phoneNumber"]';
 
   beforeEach(() => {
-    useIntl.mockReturnValue({ locale: 'en-GB' });
+    useIntl.mockReturnValue({ locale, formatMessage });
   });
 
   afterEach(() => {
@@ -210,7 +215,7 @@ describe('Given a telephone number component', () => {
 
   describe('when supplied with a placeholder', () => {
     beforeEach(() => {
-      useIntl.mockReturnValue({ locale: 'es-ES' });
+      useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
       component = shallow(
         <PhoneNumberInput {...props} initialValue="+12345678" placeholder="placeholder" />,
       );
@@ -224,7 +229,7 @@ describe('Given a telephone number component', () => {
 
   describe('when supplied with a search placeholder', () => {
     beforeEach(() => {
-      useIntl.mockReturnValue({ locale: 'es-ES' });
+      useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
       component = shallow(
         <PhoneNumberInput
           {...props}
@@ -243,7 +248,7 @@ describe('Given a telephone number component', () => {
   describe('when supplied with a locale', () => {
     describe('and a value', () => {
       beforeEach(() => {
-        useIntl.mockReturnValue({ locale: 'es-ES' });
+        useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
         component = shallow(<PhoneNumberInput {...props} initialValue="+12345678" />);
         select = component.find(PREFIX_SELECT_SELECTOR);
         input = component.find(NUMBER_SELECTOR);
@@ -257,7 +262,7 @@ describe('Given a telephone number component', () => {
     describe('and no value', () => {
       describe('and no country code', () => {
         beforeEach(() => {
-          useIntl.mockReturnValue({ locale: 'es' });
+          useIntl.mockReturnValue({ locale: 'es', formatMessage });
           component = shallow(<PhoneNumberInput {...props} />);
           select = component.find(PREFIX_SELECT_SELECTOR);
           input = component.find(NUMBER_SELECTOR);
@@ -270,7 +275,7 @@ describe('Given a telephone number component', () => {
 
       describe('and country code', () => {
         beforeEach(() => {
-          useIntl.mockReturnValue({ locale: 'es-ES' });
+          useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
           component = shallow(<PhoneNumberInput {...props} countryCode="US" />);
           select = component.find(PREFIX_SELECT_SELECTOR);
           input = component.find(NUMBER_SELECTOR);

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 
+import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
 import {
   explodeNumberModel,
@@ -54,7 +55,7 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
-  const { locale } = useIntl();
+  const { locale, formatMessage } = useIntl();
 
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
@@ -132,7 +133,7 @@ const PhoneNumberInput = ({
     <div className="tw-telephone">
       <div className="tw-telephone__country-select">
         <SelectInput
-          placeholder="Select an option…"
+          placeholder={formatMessage(messages.selectInputPlaceholder)}
           items={[...countriesByPrefix].map(([prefix, countries]) => ({
             type: 'option',
             value: prefix,

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