@transferwise/components 46.73.0 → 46.74.1

package/src/popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
+import { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';
 
 import { Position, Typography } from '../common';
 import ResponsivePanel from '../common/responsivePanel';
@@ -23,11 +23,13 @@ export type PopoverPreferredPlacement =
 
 export interface PopoverProps {
   children?: React.ReactNode;
-  className?: string;
-  content: React.ReactNode;
+  title?: React.ReactNode;
+  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
+  'aria-label'?: string;
   preferredPlacement?: PopoverPreferredPlacement;
+  content: React.ReactNode;
   onClose?: () => void;
-  title?: React.ReactNode;
+  className?: string;
 }
 
 function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
@@ -50,7 +52,10 @@ export default function Popover({
   preferredPlacement = Position.RIGHT,
   title,
   onClose,
+  'aria-label': ariaLabel,
 }: PopoverProps) {
+  const titleId = useId();
+
   const resolvedPlacement = resolvePlacement(preferredPlacement);
   useEffect(() => {
     if (resolvedPlacement !== preferredPlacement) {
@@ -81,6 +86,8 @@ export default function Popover({
           : children}
       </span>
       <ResponsivePanel
+        aria-label={ariaLabel}
+        aria-labelledby={title && !ariaLabel ? titleId : undefined}
         open={open}
         anchorRef={anchorReference}
         position={resolvedPlacement}
@@ -90,7 +97,7 @@ export default function Popover({
       >
         <div className="np-popover__content np-text-default-body">
           {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
+            <Title type={Typography.TITLE_BODY} id={titleId} className="m-b-1">
               {title}
             </Title>
           )}

package/src/popover/__snapshots__/Popover.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Popover on desktop renders when is open 1`] = `
 <div
+  aria-labelledby=":r0:"
   class="np-panel np-panel--open np-popover__container"
   data-popper-escaped="true"
   data-popper-placement="right"
@@ -17,6 +18,7 @@ exports[`Popover on desktop renders when is open 1`] = `
     >
       <h4
         class="np-text-title-body m-b-1"
+        id=":r0:"
       >
         title
       </h4>

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,17 +1,31 @@
-import { within } from '@testing-library/react';
+import { Matcher, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { act } from 'react';
 
 import { Status } from '../common';
 import { Field } from '../field/Field';
-import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
+import { mockMatchMedia, render, screen, waitFor } from '../test-utils';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
-import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
+const deleteFileAndWaitForFocus = async (fileToDeleteTestId: Matcher, nextFocusTestId: Matcher) => {
+  const fileToDelete = screen.getByTestId(fileToDeleteTestId);
+
+  await user.click(within(fileToDelete).getByLabelText('Remove file', { exact: false }));
+
+  const removeButton = screen.queryByText('Remove');
+  if (removeButton) {
+    await user.click(removeButton);
+  }
+
+  await waitFor(() => {
+    expect(screen.getByTestId(nextFocusTestId)).toHaveFocus();
+  });
+};
+
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -139,15 +153,21 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
-      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+      const fileToDelete = screen.getByTestId('1-uploadItem');
       await act(async () => {
+        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
-      screen.getByText('Remove').click();
+      await act(async () => {
+        screen.getByText('Remove').click();
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('1-uploadItem')).not.toBeInTheDocument();
+      });
 
-      await waitForElementToBeRemoved(fileToDelete);
       expect(props.onDeleteFile).toHaveBeenCalledWith(files[0].id);
 
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -190,9 +210,9 @@ describe('UploadInput', () => {
         onFilesChange,
       });
 
-      const fileToDelete = screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];
-      within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+      const fileToDelete = screen.getByTestId('1-uploadItem');
       await act(async () => {
+        within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
         await jest.runOnlyPendingTimersAsync();
       });
 
@@ -212,6 +232,98 @@ describe('UploadInput', () => {
 
       expect(screen.queryByLabelText('Remove file ', { exact: false })).not.toBeInTheDocument();
     });
+
+    it('should focus the next item after a file is deleted', async () => {
+      const files = [
+        { id: 1, filename: 'Sales-2024-invoice.pdf', status: Status.DONE },
+        { id: 2, filename: 'CoWork-0317-invoice.pdf', status: Status.DONE },
+        { id: 3, filename: 'purchase-receipt.pdf', status: Status.DONE },
+      ];
+
+      renderComponent({ ...props, files, multiple: true, onFilesChange });
+
+      // Delete the first file and expect focus to move to the next one
+      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
+    });
+
+    it('should focus the previous item after the last file is deleted', async () => {
+      const files = [
+        {
+          id: 1,
+          filename: 'Sales-2024-invoice.pdf',
+          status: Status.DONE,
+        },
+        {
+          id: 2,
+          filename: 'CoWork-0317-invoice.pdf',
+          status: Status.DONE,
+        },
+        {
+          id: 3,
+          filename: 'purchase-receipt.pdf',
+          status: Status.DONE,
+        },
+      ];
+
+      renderComponent({
+        ...props,
+        files,
+        multiple: true,
+        onFilesChange,
+      });
+
+      await deleteFileAndWaitForFocus('3-uploadItem', '2-action');
+    });
+
+    it('should focus the upload input after the only file is deleted', async () => {
+      const singleFile = [
+        {
+          id: 3,
+          filename: 'purchase-receipt.pdf',
+          status: Status.DONE,
+        },
+      ];
+
+      renderComponent({
+        ...props,
+        files: singleFile,
+        multiple: true,
+        onFilesChange,
+      });
+
+      await deleteFileAndWaitForFocus('3-uploadItem', 'uploadInput');
+    });
+
+    it('should focus on the next item or upload input after each file is deleted in sequence', async () => {
+      const filesWithFailed = [
+        {
+          id: 1,
+          filename: 'Sales-2024-invoice.pdf',
+          status: Status.DONE,
+        },
+        {
+          id: 2,
+          filename: 'CoWork-0317-invoice.pdf',
+          status: Status.FAILED,
+        },
+        {
+          id: 3,
+          filename: 'purchase-receipt.pdf',
+          status: Status.DONE,
+        },
+      ];
+
+      renderComponent({
+        ...props,
+        files: filesWithFailed,
+        multiple: true,
+        onFilesChange,
+      });
+
+      await deleteFileAndWaitForFocus('3-uploadItem', '2-action');
+      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
+      await deleteFileAndWaitForFocus('2-uploadItem', 'uploadInput');
+    });
   });
 
   describe('Max File Upload limit', () => {

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -1,52 +1,52 @@
 import { action } from '@storybook/addon-actions';
-import { StoryFn, Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Status } from '../common';
-
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
+import { userEvent, within } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
   component: UploadInput,
 };
-
 export default meta;
-type Story = StoryFn<UploadInputProps>;
 
-const files = [
+type Story = StoryObj<UploadInputProps>;
+
+const files: UploadedFile[] = [
   {
-    id: 1,
+    id: '0hd8hf8',
     filename: 'purchase-receipt-0.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 2,
+    id: '1r7hgc83',
     filename: 'purchase-receipt-1.pdf',
   },
   {
-    id: 3,
+    id: '2nhc7387hc8h',
     filename: 'purchase-receipt-2.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 4,
+    id: '39wd8uc',
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 5,
+    id: '437yyf8hf',
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 6,
+    id: '5biehveifh',
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },
   },
-] satisfies UploadedFile[];
+];
 
 const createDelayedPromise = async ({
   successful = true,
@@ -65,163 +65,230 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => {
-    return createDelayedPromise();
+  onUploadFile: async (formData: FormData) => createDelayedPromise(),
+  onDeleteFile: async (id: string | number) => createDelayedPromise(),
+};
+
+export const UploadInputWithDescriptionFromProps: Story = {
+  args: {
+    ...props,
+    multiple: true,
+    description: 'Custom file description from prop',
   },
-  onDeleteFile: async (id: string | number) => {
-    return createDelayedPromise();
+};
+
+export const Disabled: Story = {
+  args: {
+    ...props,
+    disabled: true,
   },
 };
 
-const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
+export const WithAnyFileType: Story = {
+  args: {
+    ...props,
+    fileTypes: '*',
+  },
+};
 
-export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
-UploadInputWithDescriptionFromProps.args = {
-  ...props,
-  multiple: true,
-  description: 'Custom file description from prop',
+export const WithSingleFileType: Story = {
+  args: {
+    ...props,
+    fileTypes: '.zip,application/zip',
+  },
 };
 
-export const Disabled: Story = Template.bind({});
-Disabled.args = { ...props, disabled: true };
+export const WithMultipleExistingFiles: Story = {
+  args: {
+    ...props,
+    files,
+    multiple: true,
+  },
+};
 
-export const WithAnyFileType: Story = Template.bind({});
-WithAnyFileType.args = { ...props, fileTypes: '*' };
+export const WithFileErrors: Story = {
+  args: {
+    ...props,
+    files: [
+      { id: 1, filename: 'Error with default message.png', status: Status.FAILED },
+      {
+        id: 2,
+        filename: 'Error with `string` error.png',
+        status: Status.FAILED,
+        error: 'Single string error',
+      },
+      {
+        id: 3,
+        filename: 'Error with `obj` error ({ message : `string` }).png',
+        status: Status.FAILED,
+        error: { message: 'Single obj error' },
+      },
+      {
+        id: 4,
+        filename: 'Error with single error passed in `array`.png',
+        status: Status.FAILED,
+        errors: ['Single error in array'],
+      },
+      {
+        id: 5,
+        filename: 'Error with multiple `string` errors passed in `array`.png',
+        status: Status.FAILED,
+        errors: [
+          'Error 1',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          'Error 3',
+        ],
+      },
+      {
+        id: 6,
+        filename: 'Error with multiple `obj` errors passed in `array`.png',
+        status: Status.FAILED,
+        errors: [
+          { message: 'Error 1' },
+          {
+            message:
+              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          },
+          { message: 'Error 3' },
+        ],
+      },
+    ],
+    multiple: true,
+  },
+};
 
-export const WithSingleFileType: Story = Template.bind({});
-WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
+export const WithoutDelete: Story = {
+  args: {
+    ...props,
+    files,
+    onDeleteFile: undefined,
+    multiple: true,
+  },
+};
 
-export const WithMultipleExistingFiles: Story = Template.bind({});
-WithMultipleExistingFiles.args = {
-  ...props,
-  files,
-  multiple: true,
+export const WithUploadFailed: Story = {
+  args: {
+    ...props,
+    files: files.slice(0),
+    onUploadFile: async () => createDelayedPromise({ successful: false }),
+    multiple: true,
+  },
 };
 
-export const WithFileErrors: Story = Template.bind({});
-WithFileErrors.args = {
-  ...props,
-  files: [
-    {
-      id: 1,
-      filename: 'Error with default message.png',
-      status: Status.FAILED,
-    },
-    {
-      id: 2,
-      filename: 'Error with `string` error.png',
-      status: Status.FAILED,
-      error: 'Single string error',
-    },
-    {
-      id: 3,
-      filename: 'Error with `obj` error ({ message : `string` }).png',
-      status: Status.FAILED,
-      error: { message: 'Single obj error' },
-    },
-    {
-      id: 4,
-      filename: 'Error with single error passed in `array`.png',
-      status: Status.FAILED,
-      errors: ['Single error in array'],
-    },
-    {
-      id: 5,
-      filename: 'Error with multiple `string` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: [
-        'Error 1',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        'Error 3',
-      ],
-    },
-    {
-      id: 6,
-      filename: 'Error with multiple `obj` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: [
-        { message: 'Error 1' },
-        {
-          message:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-        { message: 'Error 3' },
-      ],
-    },
-  ],
-  multiple: true,
+export const WithDeleteFailed: Story = {
+  args: {
+    ...props,
+    files: files.slice(0),
+    onDeleteFile: async () => createDelayedPromise({ successful: false }),
+    multiple: true,
+  },
 };
 
-export const WithoutDelete: Story = Template.bind({});
-WithoutDelete.args = {
-  ...props,
-  files,
-  onDeleteFile: undefined,
-  multiple: true,
+export const CustomConfirmMessage: Story = {
+  args: {
+    ...props,
+    files: files.slice(0),
+    deleteConfirm: {
+      title: 'Sure you want to remove this invoice?',
+      body: (
+        <img
+          alt="brand logo"
+          src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
+        />
+      ),
+    },
+  },
 };
 
-export const WithUploadFailed: Story = Template.bind({});
-WithUploadFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onUploadFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
+export const WithManualDownloadHandler: Story = {
+  args: {
+    ...props,
+    files,
+    onDownload: action('Manual download handler'),
+  },
 };
 
-export const WithDeleteFailed: Story = Template.bind({});
-WithDeleteFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onDeleteFile: async () => createDelayedPromise({ successful: false }),
-  multiple: true,
+export const WithFilesChangeHandler: Story = {
+  args: {
+    ...props,
+    files,
+    onFilesChange: action('Files change handler'),
+  },
 };
 
-export const CustomConfirmMessage: Story = Template.bind({});
-CustomConfirmMessage.args = {
-  ...props,
-  files: files.slice(0),
-  deleteConfirm: {
-    title: 'Sure you want to remove this invoice?',
-    body: (
-      <img
-        alt="brand logo"
-        src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
-      />
-    ),
+export const WithMaxFilesToUploadLimit: Story = {
+  args: {
+    ...props,
+    multiple: true,
+    maxFiles: 5,
+    maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
   },
 };
 
-export const WithManualDownloadHandler: Story = Template.bind({});
-WithManualDownloadHandler.args = {
-  ...props,
-  files,
-  onDownload: action('Manual download handler'),
+export const WithFileSizeErrorMessage: Story = {
+  args: {
+    ...props,
+    sizeLimit: 1,
+    sizeLimitErrorMessage: 'The file is oversized',
+  },
 };
 
-export const WithFilesChangeHandler: Story = Template.bind({});
-WithFilesChangeHandler.args = {
-  ...props,
-  files,
-  onFilesChange: action('Files change handler'),
+export const WithCustomUploadButtonTitle: Story = {
+  args: {
+    ...props,
+    uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+  },
 };
 
-export const WithMaxFilesToUploadLimit: Story = Template.bind({});
-WithMaxFilesToUploadLimit.args = {
-  ...props,
-  multiple: true,
-  maxFiles: 5,
-  maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
+const triggerModalAndConfirm = async ({ isLink = true } = {}) => {
+  if (isLink) {
+    await wait();
+    await userEvent.tab();
+  }
+  await wait();
+  await userEvent.keyboard('{Enter}');
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.tab();
+  await wait();
+  await userEvent.keyboard('{Enter}');
+  await wait();
 };
+const wait = async (time = 250) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
 
-export const WithFileSizeErrorMessage: Story = Template.bind({});
-WithFileSizeErrorMessage.args = {
-  ...props,
-  sizeLimit: 1,
-  sizeLimitErrorMessage: 'The file is oversized',
+export const DeletingTop: Story = {
+  args: {
+    ...props,
+    files: [files[0], files[1], files[2]],
+    multiple: true,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.tab();
+    await triggerModalAndConfirm();
+    await triggerModalAndConfirm({ isLink: false });
+    await triggerModalAndConfirm();
+  },
 };
 
-export const WithCustomUploadButtonTitle: Story = Template.bind({});
-WithCustomUploadButtonTitle.args = {
-  ...props,
-  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+export const DeletingBottom: Story = {
+  args: {
+    ...props,
+    files: [files[0], files[1], files[2]],
+    multiple: true,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await triggerModalAndConfirm();
+    await triggerModalAndConfirm({ isLink: false });
+    await triggerModalAndConfirm();
+  },
 };