@transferwise/components 0.0.0-experimental-35ce2be → 0.0.0-experimental-10c3d0b

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-35ce2be",
+  "version": "0.0.0-experimental-10c3d0b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -28,10 +28,10 @@
     "@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",
+    "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",

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/dateLookup/DateLookup.story.js

@@ -50,7 +50,7 @@ Basic.play = async ({ canvasElement }) => {
   // testing focus state on keyboard nav
   const canvas = within(canvasElement);
   await userEvent.tab(canvas.getByRole('button'));
-  await userEvent.keyboard('{space}');
+  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/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -85,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}`);
-    i++;
-  }
+  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
 };

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/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -26,6 +26,8 @@ export const Basic: Story = {
   // to trigger event handlers in the component
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByRole('textbox'), '111122223333');
+    await userEvent.type(canvas.getByRole('textbox'), '111122223333', {
+      initialSelectionStart: Number.MAX_SAFE_INTEGER,
+    });
   },
 };

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

@@ -45,7 +45,7 @@ export const createable = () => {
 
 createable.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await 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);
-  await userEvent.type(canvas.getByRole('combobox'), 'abc');
-  await userEvent.type(canvas.getByRole('combobox'), '{arrowDown}');
+  await userEvent.type(canvas.getByRole('combobox'), 'abc{ArrowDown}');
 };