@transferwise/components 46.8.0 → 46.10.0

package/src/snackbar/SnackbarProvider.tsx

@@ -0,0 +1,39 @@
+import { useMemo, useState } from 'react';
+
+import SnackbarPortal, { SnackbarProps } from './Snackbar';
+import { SnackbarContext } from './SnackbarContext';
+
+export interface SnackbarProviderProps {
+  timeout?: number;
+  children?: React.ReactNode;
+}
+
+export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
+  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
+    text: '',
+    timestamp: 0,
+  });
+  const { action, text, theme, timestamp } = state;
+
+  return (
+    <SnackbarContext.Provider
+      value={useMemo(
+        () => ({
+          createSnackbar: ({ action, text, theme }) => {
+            setState({ action, text, theme, timestamp: Date.now() });
+          },
+        }),
+        [],
+      )}
+    >
+      <SnackbarPortal
+        action={action}
+        text={text}
+        timestamp={timestamp}
+        timeout={timeout}
+        theme={theme}
+      />
+      {children}
+    </SnackbarContext.Provider>
+  );
+}

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/src/withNextPortal/withNextPortal.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
 export default function withNextPortalWrapper<T extends Record<string, any>>(
-  Component: React.FunctionComponent<T>,
+  Component: React.ComponentType<T>,
 ) {
   return function (props: T) {
     const [mounted, setMounted] = useState(false);

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,
-};

package/src/snackbar/SnackbarContext.js

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-
-export const SnackbarContext = createContext();
-export const SnackbarConsumer = SnackbarContext.Consumer;

package/src/snackbar/SnackbarProvider.js

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import SnackbarPortal from './Snackbar';
-import { SnackbarContext } from './SnackbarContext';
-
-class SnackbarProvider extends Component {
-  constructor() {
-    super();
-    this.state = {
-      text: '',
-      timestamp: 0,
-    };
-  }
-
-  create = ({ action, text, theme }) => {
-    this.setState({ action, text, theme, timestamp: Date.now() });
-  };
-
-  render() {
-    const { action, text, theme, timestamp } = this.state;
-
-    return (
-      <SnackbarContext.Provider
-        value={{
-          createSnackbar: this.create,
-        }}
-      >
-        <SnackbarPortal
-          action={action}
-          text={text}
-          timestamp={timestamp}
-          timeout={this.props.timeout}
-          theme={theme}
-        />
-        {this.props.children}
-      </SnackbarContext.Provider>
-    );
-  }
-}
-
-SnackbarProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  timeout: PropTypes.number,
-};
-
-SnackbarProvider.defaultProps = {
-  timeout: 4500,
-};
-
-export default SnackbarProvider;