@transferwise/components 46.9.0 → 46.10.0

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

@@ -22,6 +22,5 @@ export { Sentiment } from "./propsValues/sentiment";
 export { Variant } from "./propsValues/variant";
 export { MarkdownNodeType } from "./propsValues/markdownNodeType";
 export { FileType } from "./fileType";
-export { Key } from "./key";
 export { addNoScrollClass, removeNoScrollClass } from "./DOMOperations";
 //# sourceMappingURL=index.d.ts.map

package/build/types/dateLookup/DateLookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAqBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.js"],"names":[],"mappings":";AAoBA;IAoBE;;;;;;aAqBC;IApCD,wBAaC;IAjBD,wCAAsB;IAEtB,yCAAuB;IAIrB;;;;;;;;;;MAUC;IA0BH,6CAMC;IAFC,uCAAyE;IAI3E,6BAGC;IAED,iBAOE;IAEF,oBAME;IAEF,kBAME;IAEF,oCA6CE;IAEF,wEAmBE;IAEF,+DAOE;IAEF,gCAIE;IAEF,yBAA+C;IAE/C,2BAAmD;IAEnD,0BAAiD;IAEjD,sDAME;IAEF;;;eAEE;IAEF,+CA8BE;IAEF,wBAGE;IAEF,sCA0BC;CACF"}

package/build/types/inputs/SelectInput.d.ts

@@ -16,6 +16,7 @@ export interface SelectInputSeparatorItem {
 }
 export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
 export interface SelectInputProps<T = string, M extends boolean = false> {
+    id?: string;
     name?: string;
     multiple?: M;
     placeholder?: string;
@@ -48,7 +49,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onChange?: (value: M extends true ? T[] : T) => void;
     onClear?: () => void;
 }
-export declare function SelectInput<T = string, M extends boolean = false>({ name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
+export declare function SelectInput<T = string, M extends boolean = false>({ id, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAK/D,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AA0DnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;;;;AA2YD,wBAAsC"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAG/D,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAwDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;;;;AAqYD,wBAAsC"}

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA6EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}

package/build/types/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwB,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,KAAK,KAAG,YAgE9B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwB,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yGAAyG;IACzG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,KAAK,KAAG,YAgE9B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.js"],"names":[],"mappings":";AA6BA;IAIE,wBAcC;IAjBD,wCAAwC;IACxC,oBADW,UAAU,cAAc,CAAC,CACH;IAI/B;;;;;;;;;;;MAWC;IAGH,gBAAiB;IAEjB,uBAAmB;IAEnB,eAAa;IAEb,8BAEC;IAED,wBAEC;IAED,0BASC;IAED,iEAiCC;IAED,6BAIC;IAED,yBAME;IAEF,6CAGE;IAEF,uCAQE;IAEF,mCAIE;IAEF,2BAME;IAEF,yDAKE;IAEF,wBAeE;IAEF,8BAWE;IAMF,6DA4BE;IAEF,wDAAoF;IAEpF;;;;;yBAkBE;IAEF,gCAGE;IAEF,mDAEC;IAED,iDAIE;IAEF,kCAME;IAGF,sDAYE;IAEF,oCAME;IAEF,2CAEE;IAEF,gDAIE;IAEF,uCAYE;IAEF,sCAiDE;IAEF,qCAoCE;IAEF,sCAiKC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;;;;;EAAiD"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/Tabs.js"],"names":[],"mappings":";AA4BA;IAIE,wBAcC;IAjBD,wCAAwC;IACxC,oBADW,UAAU,cAAc,CAAC,CACH;IAI/B;;;;;;;;;;;MAWC;IAGH,gBAAiB;IAEjB,uBAAmB;IAEnB,eAAa;IAEb,8BAEC;IAED,wBAEC;IAED,0BASC;IAED,iEAiCC;IAED,6BAIC;IAED,yBAME;IAEF,6CAGE;IAEF,uCAQE;IAEF,mCAIE;IAEF,2BAME;IAEF,yDAKE;IAEF,wBAeE;IAEF,8BAWE;IAMF,6DA4BE;IAEF,wDAAoF;IAEpF;;;;;yBAkBE;IAEF,gCAGE;IAEF,mDAEC;IAED,iDAIE;IAEF,kCAME;IAGF,sDAYE;IAEF,oCAME;IAEF,2CAEE;IAEF,gDAIE;IAEF,uCAYE;IAEF,sCAiDE;IAEF,qCAoCE;IAEF,sCAiKC;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;;;;;EAAiD"}

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": "46.9.0",
+  "version": "46.10.0",
   "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,7 +71,7 @@
     "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": "1.0.0"

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

@@ -4,9 +4,9 @@ export const fakeEvent = () => ({
   preventDefault() {},
 });
 
-export const fakeKeyDownEventForKey = (keyCode) => ({
+export const fakeKeyDownEventForKey = (key) => ({
   ...fakeEvent(),
-  keyCode,
+  key,
 });
 
 export const fakeKeyDownEvent = (eventAttribute = {}) => ({

package/src/common/index.js

@@ -21,7 +21,6 @@ export { Variant } from './propsValues/variant';
 export * from './propsValues/scroll';
 export { MarkdownNodeType } from './propsValues/markdownNodeType';
 export { FileType } from './fileType';
-export { Key } from './key';
 export * from './locale';
 export * from './commonProps';
 export * from './randomId';

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

@@ -4,7 +4,6 @@ import { createRef, PureComponent } from 'react';
 
 import { Size, MonthFormat, Position, Breakpoint } from '../common';
 import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
-import KeyCodes from '../common/keyCodes';
 import ResponsivePanel from '../common/responsivePanel';
 
 import DateTrigger from './dateTrigger';
@@ -102,8 +101,8 @@ class DateLookup extends PureComponent {
 
   handleKeyDown = (event) => {
     const { open, originalDate } = this.state;
-    switch (event.keyCode) {
-      case KeyCodes.LEFT:
+    switch (event.key) {
+      case 'ArrowLeft':
         if (open) {
           this.adjustDate(-1, -1, -1);
         } else {
@@ -111,7 +110,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.UP:
+      case 'ArrowUp':
         if (open) {
           this.adjustDate(-7, -4, -4);
         } else {
@@ -119,7 +118,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.RIGHT:
+      case 'ArrowRight':
         if (open) {
           this.adjustDate(1, 1, 1);
         } else {
@@ -127,7 +126,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.DOWN:
+      case 'ArrowDown':
         if (open) {
           this.adjustDate(7, 4, 4);
         } else {
@@ -135,7 +134,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.ESCAPE:
+      case 'Escape':
         if (originalDate !== null) {
           this.props.onChange(originalDate);
         }

package/src/dateLookup/DateLookup.keyboardEvents.spec.js

@@ -2,7 +2,6 @@
 import { mount } from 'enzyme';
 
 import { fakeKeyDownEventForKey } from '../common/fakeEvents';
-import KEY_CODES from '../common/keyCodes';
 import { mockMatchMedia } from '../test-utils';
 
 import DateLookup from '.';
@@ -31,28 +30,28 @@ describe('DateLookup (keyboard events)', () => {
   });
 
   it('can be opened by LEFT arrow', () => {
-    pressKey(KEY_CODES.LEFT);
+    pressKey('ArrowLeft');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by UP arrow', () => {
-    pressKey(KEY_CODES.UP);
+    pressKey('ArrowUp');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by RIGHT arrow', () => {
-    pressKey(KEY_CODES.RIGHT);
+    pressKey('ArrowRight');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be opened by DOWN arrow', () => {
-    pressKey(KEY_CODES.DOWN);
+    pressKey('ArrowDown');
     expect(component.instance().state.open).toBe(true);
   });
 
   it('can be closed by pressing ESCAPE', () => {
     component.setState({ open: true });
-    pressKey(KEY_CODES.ESCAPE);
+    pressKey('Escape');
     expect(component.instance().state.open).toBe(false);
   });
 
@@ -62,33 +61,33 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 day back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
     });
 
     it('moves 7 days back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2018, 11, 20));
     });
 
     it('moves 1 day forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
     });
 
     it('moves 7 day forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2019, 0, 3));
     });
 
     it('resets to original date when escape key is pressed', () => {
-      pressKey(KEY_CODES.LEFT);
-      pressKey(KEY_CODES.ESCAPE);
+      pressKey('ArrowLeft');
+      pressKey('Escape');
       onChangeCalledWith(date);
     });
 
     it('resets to original date when clicking outside modal', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       component.find('.dimmer').simulate('click');
       onChangeCalledWith(date);
     });
@@ -100,22 +99,22 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 month back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 10, 27));
     });
 
     it('moves 4 months back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2018, 7, 27));
     });
 
     it('moves 1 month forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2019, 0, 27));
     });
 
     it('moves 4 months forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2019, 3, 27));
     });
   });
@@ -126,22 +125,22 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('moves 1 year back by pressing LEFT', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2017, 11, 27));
     });
 
     it('moves 4 years back by pressing UP', () => {
-      pressKey(KEY_CODES.UP);
+      pressKey('ArrowUp');
       onChangeCalledWith(new Date(2014, 11, 27));
     });
 
     it('moves 1 year forward by pressing RIGHT', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2019, 11, 27));
     });
 
     it('moves 4 year forward by pressing DOWN', () => {
-      pressKey(KEY_CODES.DOWN);
+      pressKey('ArrowDown');
       onChangeCalledWith(new Date(2022, 11, 27));
     });
   });
@@ -157,16 +156,16 @@ describe('DateLookup (keyboard events)', () => {
     });
 
     it('makes sure that date is >= min', () => {
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
-      pressKey(KEY_CODES.LEFT);
+      pressKey('ArrowLeft');
       onChangeCalledWith(new Date(2018, 11, 26));
     });
 
     it('makes sure that date is <= max', () => {
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
-      pressKey(KEY_CODES.RIGHT);
+      pressKey('ArrowRight');
       onChangeCalledWith(new Date(2018, 11, 28));
     });
   });

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

@@ -111,21 +111,21 @@ 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(' '));
     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('Enter'));
     expect(onClear).toHaveBeenCalledTimes(1);
   });
 
   it(`doesn't call onClear when user press a random key`, () => {
     const onClear = jest.fn();
     component.setProps({ onClear });
-    clearButton().simulate('keypress', fakeKeyDownEventForKey(6));
+    clearButton().simulate('keypress', fakeKeyDownEventForKey('r'));
     expect(onClear).not.toHaveBeenCalled();
   });
 

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

@@ -208,4 +208,11 @@ describe('SelectInput', () => {
 
     expect(trigger).toHaveTextContent('USD, EUR');
   });
+
+  it('supports custom `id` attribute', () => {
+    render(<SelectInput id="custom" items={[]} />);
+
+    const trigger = screen.getAllByRole('button')[0];
+    expect(trigger).toHaveAttribute('id', 'custom');
+  });
 });

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/inputs/SelectInput.tsx

@@ -41,6 +41,7 @@ function inferSearchableStrings(value: unknown) {
 
 const SelectInputTriggerButtonPropsContext = createContext<{
   ref?: React.ForwardedRef<HTMLButtonElement>;
+  id?: string;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   [key: string]: unknown;
@@ -125,6 +126,7 @@ function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle:
 }
 
 export interface SelectInputProps<T = string, M extends boolean = false> {
+  id?: string;
   name?: string;
   multiple?: M;
   placeholder?: string;
@@ -218,6 +220,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
+  id,
   name,
   multiple,
   placeholder,
@@ -288,6 +291,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                 // eslint-disable-next-line react/jsx-no-constructed-context-values
                 value={{
                   ref: mergeRefs([ref, triggerRef]),
+                  id,
                   ...mergeProps(
                     {
                       onClick: () => {

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