@transferwise/components 46.38.0 → 46.40.0

package/src/header/Header.spec.tsx

@@ -9,7 +9,7 @@ describe('Header', () => {
     expect(screen.getByText('Header title')).toBeInTheDocument();
   });
 
-  it('can trigger header action', () => {
+  it('can trigger header action', async () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -22,12 +22,12 @@ describe('Header', () => {
       />,
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
 
-  it('can set aria-label property for header action', () => {
+  it('can set aria-label property for header action', async () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -41,7 +41,7 @@ describe('Header', () => {
       />,
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Magic' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Magic' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
@@ -75,7 +75,7 @@ describe('Header', () => {
     expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
   });
 
-  it('runs onClick if specified even when it got href prop', () => {
+  it('runs onClick if specified even when it got href prop', async () => {
     const callback = jest.fn();
     render(
       <Header
@@ -88,7 +88,7 @@ describe('Header', () => {
     const button = screen.getByRole('link', { name: 'Click me' });
     expect(button).toBeInTheDocument();
 
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(callback).toHaveBeenCalledTimes(1);
   });

package/src/image/Image.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 

package/src/index.ts

@@ -55,9 +55,10 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
+export type { OverlayHeaderProps } from './overlayHeader';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
-export type { ProcessIndicatorProps } from './processIndicator';
+export type { ProcessIndicatorProps, ProcessIndicatorStatus } from './processIndicator';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
 export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
@@ -76,6 +77,7 @@ export type { SwitchOptionProps } from './switchOption';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { TooltipProps } from './tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './typeahead';
+export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 
 /**

package/src/info/Info.story.tsx

@@ -5,7 +5,7 @@ import { lorem10, storyConfig } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
 
-export default {
+const meta = {
   component: Info,
   title: 'Dialogs/Info',
   args: {
@@ -20,16 +20,18 @@ export default {
   ),
 } satisfies Meta<typeof Info>;
 
-type Story = StoryObj<typeof Info>;
+export default meta;
 
-export const Basic: Story = storyConfig(
+type Story = StoryObj<typeof meta>;
+
+export const Basic = storyConfig<typeof meta>(
   {},
   {
     variants: ['default', 'dark', 'rtl'],
   },
 );
 
-export const OpenedPopover: Story = {
+export const OpenedPopover = {
   parameters: {
     chromatic: {
       delay: 1000,
@@ -39,15 +41,19 @@ export const OpenedPopover: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
   },
-};
+} satisfies Story;
 
-export const OpenedPopoverMobile: Story = storyConfig(OpenedPopover, { variants: ['mobile'] });
+export const OpenedPopoverMobile = storyConfig(OpenedPopover, {
+  variants: ['mobile'],
+});
 
-export const OpenedModal: Story = {
+export const OpenedModal = {
   ...OpenedPopover,
   args: {
     presentation: InfoPresentation.MODAL,
   },
-};
+} satisfies Story;
 
-export const OpenedModalMobile: Story = storyConfig(OpenedModal, { variants: ['mobile'] });
+export const OpenedModalMobile = storyConfig(OpenedModal, {
+  variants: ['mobile'],
+});

package/src/info/Info.tsx

@@ -10,7 +10,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
 
-export interface Props {
+export interface InfoProps {
   'aria-label'?: string;
   /**
    * Extra classes applied to Info
@@ -48,7 +48,7 @@ const Info = ({
   title = undefined,
   'aria-label': ariaLabel,
   preferredPlacement = Position.BOTTOM,
-}: Props) => {
+}: InfoProps) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);

package/src/info/index.ts

@@ -1,3 +1,3 @@
 export { InfoPresentation } from './infoPresentations';
 export { default } from './Info';
-export type { Props as InfoProps } from './Info';
+export type { InfoProps } from './Info';

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import '@testing-library/jest-dom';
 import { Sentiment } from '../common';
 import { render, screen } from '../test-utils';
 

package/src/inputs/SelectInput.spec.tsx

@@ -1,5 +1,5 @@
-import { act, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, waitFor, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
@@ -42,25 +42,22 @@ describe('SelectInput', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     const footer = screen.getByText('All items shown');
     expect(footer).toBeInTheDocument();
 
-    userEvent.keyboard('u');
+    await userEvent.keyboard('u');
     expect(footer).toHaveTextContent(/‘u’$/);
 
-    userEvent.keyboard('r');
+    await userEvent.keyboard('r');
     expect(footer).toHaveTextContent(/‘ur’$/);
 
-    userEvent.keyboard('x');
+    await userEvent.keyboard('x');
     expect(footer).toHaveTextContent(/‘urx’$/);
 
-    userEvent.keyboard('{Backspace}');
+    await userEvent.keyboard('{Backspace}');
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
@@ -80,16 +77,13 @@ describe('SelectInput', () => {
     expect(screen.queryByText('EUR')).not.toBeInTheDocument();
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     const option = within(listbox).getByRole('option', { name: 'EUR' });
-    userEvent.click(option);
+    await userEvent.click(option);
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -117,34 +111,28 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(3);
 
-    userEvent.keyboard('u');
+    await userEvent.keyboard('u');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
 
-    userEvent.keyboard('r');
+    await userEvent.keyboard('r');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
-    userEvent.keyboard('x');
+    await userEvent.keyboard('x');
     expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
 
-    userEvent.keyboard('{Backspace}');
+    await userEvent.keyboard('{Backspace}');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(option);
-    });
+    await userEvent.click(option);
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -165,21 +153,18 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     expect(handleFilterChange).not.toHaveBeenCalled();
 
-    userEvent.keyboard(' x');
+    await userEvent.keyboard(' x');
     expect(handleFilterChange).toHaveBeenLastCalledWith({
       query: ' x',
       queryNormalized: 'x',
     });
 
-    userEvent.keyboard('{Escape}');
+    await userEvent.keyboard('{Escape}');
     await waitFor(() => {
       expect(handleFilterChange).toHaveBeenLastCalledWith({
         query: '',
@@ -187,10 +172,7 @@ describe('SelectInput', () => {
       });
     });
 
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
@@ -208,16 +190,13 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     const listbox = screen.getByRole('listbox');
     const options = within(listbox).getAllByRole('option');
-    options.forEach((option) => {
-      userEvent.click(option);
-    });
+    for (const option of options) {
+      await userEvent.click(option);
+    }
 
     expect(trigger).toHaveTextContent('USD, EUR');
   });

package/src/link/Link.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '../test-utils';
 
 import Link from '.';

package/src/listItem/ListItem.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import ActionButton from '../actionButton/ActionButton';
 import { render, screen, within } from '../test-utils';
 

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -62,11 +62,11 @@ describe('MoneyInput', () => {
     ['1±!@#$^*,_+?><2', '1,2'],
     ['12,3', '12,3'],
     ['12.3', '12.3'],
-  ])("ignores the letters when typed '%s' and shows '%s'", (testValue, expectedValue) => {
+  ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
     render(<MoneyInput {...props} amount={null} />);
 
     const input = screen.getByRole('textbox');
-    userEvent.type(input, testValue);
+    await userEvent.type(input, testValue);
     expect(input).toHaveValue(expectedValue);
   });
 

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,9 +1,7 @@
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { addons, useGlobals } from '@storybook/manager-api';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
 import Provider from '../provider/Provider';
@@ -107,7 +105,6 @@ export const SingleCurrency: Story = {
   args: {
     currencies: [],
     selectedCurrency: exampleCurrency.eur,
-    onCurrencyChange: undefined,
   },
 };
 

package/src/overlayHeader/{OverlayHeader.spec.js → OverlayHeader.spec.tsx}

@@ -24,7 +24,7 @@ describe('OverlayHeader', () => {
   });
 
   it("doesn't render separator if avatar or onClose are not provided", () => {
-    const { container, rerender } = render(<OverlayHeader {...props} onClose={null} />);
+    const { container, rerender } = render(<OverlayHeader {...props} onClose={undefined} />);
     expect(container.querySelector('.separator')).not.toBeInTheDocument();
     rerender(<OverlayHeader {...props} avatar={null} />);
     expect(container.querySelector('.separator')).not.toBeInTheDocument();

package/src/overlayHeader/{OverlayHeader.story.js → OverlayHeader.story.tsx}

@@ -21,7 +21,11 @@ const avatarProfiles = {
 };
 
 export const Basic = () => {
-  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
+  const showAvatar = select(
+    'avatar',
+    Object.keys(avatarProfiles) as (keyof typeof avatarProfiles)[],
+    'Profile',
+  );
   return (
     <OverlayHeader
       logo={<Logo />}
@@ -40,7 +44,11 @@ export const WithAvatarWrapper = () => {
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
   );
-  const profileType = select('profileType', Object.keys(ProfileType));
+  const profileType = select(
+    'profileType',
+    Object.keys(ProfileType) as `${ProfileType}`[],
+    undefined,
+  );
   return (
     <OverlayHeader
       logo={<Logo />}

package/src/overlayHeader/{OverlayHeader.js → OverlayHeader.tsx}

@@ -1,12 +1,21 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
-const OverlayHeader = ({ avatar, onClose, logo }) => {
+export interface OverlayHeaderProps {
+  /** An Avatar */
+  avatar?: React.ReactNode;
+  logo?: React.ReactNode;
+  /** Function called when the close is clicked */
+  onClose?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const defaultLogo = <Logo />;
+
+export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
   const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
   return (
     <div className="np-overlay-header d-flex justify-content-center">
@@ -23,20 +32,4 @@ const OverlayHeader = ({ avatar, onClose, logo }) => {
       />
     </div>
   );
-};
-
-OverlayHeader.defaultProps = {
-  avatar: null,
-  logo: <Logo />,
-  onClose: null,
-};
-
-OverlayHeader.propTypes = {
-  /** An Avatar */
-  avatar: PropTypes.element,
-  logo: PropTypes.node,
-  /** Function called when the close is clicked */
-  onClose: PropTypes.func,
-};
-
-export default OverlayHeader;
+}

package/src/overlayHeader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OverlayHeader';
+export type { OverlayHeaderProps } from './OverlayHeader';

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -19,5 +19,6 @@ export const Basic = {
     selectProps: {
       className: 'custom-class',
     },
+    onChange: () => {},
   },
 } satisfies Story;

package/src/popover/Popover.spec.tsx

@@ -29,7 +29,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       await waitForPanel();
       expect(getPanel()).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe('Popover', () => {
         </Popover>,
       ));
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getTitle()).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(getTitle()).not.toBeInTheDocument();
     });
@@ -67,7 +67,7 @@ describe('Popover', () => {
 
       expect(getPanel()).not.toBeInTheDocument();
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getPanel()).toBeInTheDocument();
@@ -79,19 +79,19 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', () => {
+    it('renders when is open', async () => {
       ({ container } = render(
         <Popover {...props}>
           <button type="button">Open</button>
         </Popover>,
       ));
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(container).toMatchSnapshot();
     });
 
-    it('renders BottomSheet onClick', () => {
+    it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>
           <button type="button">Open</button>
@@ -100,7 +100,7 @@ describe('Popover', () => {
 
       expect(getBottomSheet()).not.toBeInTheDocument();
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(getBottomSheet()).toBeInTheDocument();
     });
@@ -115,11 +115,11 @@ describe('Popover', () => {
     );
 
     expect(handleOnClose).not.toHaveBeenCalled();
-    userEvent.click(screen.getByText('Open'));
+    await userEvent.click(screen.getByText('Open'));
     await waitForPanel();
     const dimmer = getDimmer();
     if (dimmer != null) {
-      userEvent.click(dimmer);
+      await userEvent.click(dimmer);
     }
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });

package/src/processIndicator/ProcessIndicator.tsx

@@ -7,7 +7,7 @@ const radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };
 
 const ANIMATION_DURATION_IN_MS = 1500;
 
-type ProcessIndicatorStatus =
+export type ProcessIndicatorStatus =
   `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
 
 export interface ProcessIndicatorProps {

package/src/progress/Progress.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '../test-utils';
 
 import Progress from '.';

package/src/progressBar/ProgressBar.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '../test-utils';
 
 import ProgressBar from './ProgressBar';

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 
 import { render, screen, userEvent, waitFor } from '../test-utils';
@@ -60,30 +59,30 @@ describe('SegmentedControl', () => {
     expect(accountingTab).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('lets the user pick through the segments when it is set to input', () => {
+  it('lets the user pick through the segments when it is set to input', async () => {
     renderSegmentedControl();
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('radio', { name: 'Reporting' });
-    userEvent.click(reporting);
+    await userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
 
-  it('lets the user pick through the segments when it is set to view', () => {
+  it('lets the user pick through the segments when it is set to view', async () => {
     renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
 
     const payroll = screen.getByRole('tab', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('tab', { name: 'Reporting' });
-    userEvent.click(reporting);
+    await userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
@@ -134,11 +133,11 @@ describe('SegmentedControl', () => {
     });
   });
 
-  it('updates the selected segment when the selectedValue prop changes', () => {
+  it('updates the selected segment when the selectedValue prop changes', async () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
@@ -148,7 +147,7 @@ describe('SegmentedControl', () => {
     expect(reporting).toBeChecked();
   });
 
-  it('updates the options when the segments prop changes', () => {
+  it('updates the options when the segments prop changes', async () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const newSegments = [
@@ -167,7 +166,7 @@ describe('SegmentedControl', () => {
     rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
 
     const anotherOne = screen.getByRole('radio', { name: 'Another One' });
-    userEvent.click(anotherOne);
+    await userEvent.click(anotherOne);
 
     expect(onChange).toHaveBeenCalledWith('anotherOne');
   });