@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-3118bd2

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

@@ -1,7 +1,7 @@
 import { PureComponent, KeyboardEvent } from 'react';
 import { Size, MonthFormat, SizeSmall, SizeMedium, SizeLarge } from '../common';
 import { WithInputAttributesProps } from '../inputs/contexts';
-export interface DateLookupProps extends Partial<WithInputAttributesProps> {
+export interface DateLookupProps {
     id?: string;
     value: Date | null;
     min?: Date | null;
@@ -17,6 +17,7 @@ export interface DateLookupProps extends Partial<WithInputAttributesProps> {
     onFocus?: () => void;
     onBlur?: () => void;
 }
+type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
 interface DateLookupState {
     selectedDate: Date | null;
     originalDate: Date | null;
@@ -28,8 +29,8 @@ interface DateLookupState {
     mode: 'day' | 'month' | 'year';
     isMobile: boolean;
 }
-declare class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
-    props: DateLookupProps & Required<Pick<DateLookupProps, keyof typeof DateLookup.defaultProps>>;
+declare class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
+    props: DateLookupPropsWithInputAttributes & Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;
     static defaultProps: {
         value: null;
         min: null;
@@ -51,7 +52,7 @@ declare class DateLookup extends PureComponent<DateLookupProps, DateLookupState>
         viewMonth: number;
         viewYear: number;
     } | null;
-    componentDidUpdate(previousProps: DateLookupProps): void;
+    componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes): void;
     componentWillUnmount(): void;
     open: () => void;
     discard: () => void;
@@ -74,7 +75,7 @@ declare class DateLookup extends PureComponent<DateLookupProps, DateLookupState>
 }
 export declare const DateLookupWithoutInputAttributes: typeof DateLookup;
 declare const _default: {
-    (props: DateLookupProps): import("react").JSX.Element;
+    (props: Omit<DateLookupPropsWithInputAttributes, "inputAttributes">): import("react").JSX.Element;
     displayName: string;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,wBAAwB,EAAuB,MAAM,oBAAoB,CAAC;AAOnF,MAAM,WAAW,eAAgB,SAAQ,OAAO,CAAC,wBAAwB,CAAC;IACxE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC;IAC9D,KAAK,EAAE,eAAe,GAC5B,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAExE,MAAM,CAAC,YAAY;;;;;;;;;;MAUkB;IAErC,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAetC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,eAAe;IAQjD,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAqBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CAiDP;AAED,eAAO,MAAM,gCAAgC,mBAAa,CAAC;;;;;AAE3D,wBAEG"}
+{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,wBAAwB,EAAuB,MAAM,oBAAoB,CAAC;AAOnF,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;AAE9F,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,kCAAkC,EAAE,eAAe,CAAC;IACjF,KAAK,EAAE,kCAAkC,GAC/C,QAAQ,CAAC,IAAI,CAAC,kCAAkC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAE3F,MAAM,CAAC,YAAY;;;;;;;;;;MAUqC;IAExD,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAetC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,kCAAkC;IAQpE,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAqBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CAiDP;AAED,eAAO,MAAM,gCAAgC,mBAAa,CAAC;;;;;AAE3D,wBAKE"}

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

@@ -16,8 +16,8 @@ export declare function useInputAttributes({ nonLabelable }?: UseInputAttributes
 export interface WithInputAttributesProps {
     inputAttributes: ReturnType<typeof useInputAttributes>;
 }
-export declare function withInputAttributes<T>(Component: React.ComponentType<T & Partial<WithInputAttributesProps>>, args?: UseInputAttributesArgs): {
-    (props: T): import("react").JSX.Element;
+export declare function withInputAttributes<T extends Partial<WithInputAttributesProps>>(Component: React.ComponentType<T>, args?: UseInputAttributesArgs): {
+    (props: Omit<T, keyof WithInputAttributesProps>): import("react").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EACnC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC,EACrE,IAAI,CAAC,EAAE,sBAAsB;YAEgB,CAAC;;EAO/C"}
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,KAAK,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-47ae02a",
+  "version": "0.0.0-experimental-3118bd2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateLookup/DateLookup.tsx

@@ -19,7 +19,7 @@ import { getStartOfDay } from './getStartOfDay';
 import MonthCalendar from './monthCalendar';
 import YearCalendar from './yearCalendar';
 
-export interface DateLookupProps extends Partial<WithInputAttributesProps> {
+export interface DateLookupProps {
   id?: string;
   value: Date | null;
   min?: Date | null;
@@ -36,6 +36,8 @@ export interface DateLookupProps extends Partial<WithInputAttributesProps> {
   onBlur?: () => void;
 }
 
+type DateLookupPropsWithInputAttributes = DateLookupProps & Partial<WithInputAttributesProps>;
+
 interface DateLookupState {
   selectedDate: Date | null;
   originalDate: Date | null;
@@ -48,9 +50,9 @@ interface DateLookupState {
   isMobile: boolean;
 }
 
-class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
-  declare props: DateLookupProps &
-    Required<Pick<DateLookupProps, keyof typeof DateLookup.defaultProps>>;
+class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateLookupState> {
+  declare props: DateLookupPropsWithInputAttributes &
+    Required<Pick<DateLookupPropsWithInputAttributes, keyof typeof DateLookup.defaultProps>>;
 
   static defaultProps = {
     value: null,
@@ -62,7 +64,7 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     monthFormat: MonthFormat.LONG,
     disabled: false,
     clearable: false,
-  } satisfies Partial<DateLookupProps>;
+  } satisfies Partial<DateLookupPropsWithInputAttributes>;
 
   element = createRef<HTMLDivElement>();
   dropdown = createRef<HTMLDivElement>();
@@ -106,7 +108,7 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
     return null;
   }
 
-  componentDidUpdate(previousProps: DateLookupProps) {
+  componentDidUpdate(previousProps: DateLookupPropsWithInputAttributes) {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
@@ -350,6 +352,9 @@ class DateLookup extends PureComponent<DateLookupProps, DateLookupState> {
 
 export const DateLookupWithoutInputAttributes = DateLookup;
 
-export default withInputAttributes(DateLookup as React.ComponentType<DateLookupProps>, {
-  nonLabelable: true,
-});
+export default withInputAttributes(
+  DateLookup as React.ComponentType<DateLookupPropsWithInputAttributes>,
+  {
+    nonLabelable: true,
+  },
+);

package/src/inputs/SelectInput.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, type Mock, screen, userEvent, within } from '@storybook/test';
+import { expect, fn, type Mock, screen, userEvent, waitFor, within } from '@storybook/test';
 import { Calendar, ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
@@ -197,7 +197,7 @@ export const Currencies: Story<Currency> = {
 
       const input = screen.getByRole('searchbox');
 
-      await userEvent.click(input);
+      await userEvent.click(input); // TODO: Remove
       await userEvent.type(input, 'huf');
       await expect(
         within(screen.getByRole('listbox')).queryByRole('option'),

package/src/inputs/contexts.tsx

@@ -31,12 +31,12 @@ export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }
 
-export function withInputAttributes<T>(
-  Component: React.ComponentType<T & Partial<WithInputAttributesProps>>,
+export function withInputAttributes<T extends Partial<WithInputAttributesProps>>(
+  Component: React.ComponentType<T>,
   args?: UseInputAttributesArgs,
 ) {
-  function ComponentWithInputAttributes(props: T) {
-    return <Component inputAttributes={useInputAttributes(args)} {...props} />;
+  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {
+    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;
   }
 
   ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;

package/src/snackbar/Snackbar.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
 import { StoryContext } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { userEvent, waitFor, within } from '@storybook/test';
 import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
 
 import Button from '../button';
@@ -123,5 +123,7 @@ export const basic = () => {
 
 basic.play = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
+  await waitFor(async () => {
+    await userEvent.click(canvas.getByRole('button'));
+  });
 };