@transferwise/components 0.0.0-experimental-68d1b00 → 0.0.0-experimental-40e4505

package/src/main.css

@@ -5025,221 +5025,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}
 .np-tile {
   min-width: 120px;
   border-radius: 10px;

package/src/main.less

@@ -60,7 +60,6 @@
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";
-@import "./table/Table.less";
 @import "./tile/Tile.less";
 @import "./tooltip/Tooltip.less";
 @import "./typeahead/Typeahead.less";

package/src/uploadInput/UploadInput.spec.tsx

@@ -12,6 +12,36 @@ import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
+const deleteFileAndWaitForFocus = async (fileToDeleteTestId: string, nextFocusTestId: string) => {
+  const fileToDelete = screen.getByTestId(fileToDeleteTestId);
+  const nextFocus = screen.getByTestId(nextFocusTestId);
+
+  await act(async () => {
+    within(fileToDelete).getByLabelText('Remove file', { exact: false }).click();
+    await jest.runOnlyPendingTimersAsync();
+  });
+
+  await act(async () => {
+    const removeButton = screen.queryByText('Remove');
+    if (removeButton) {
+      removeButton.click();
+      await jest.runOnlyPendingTimersAsync();
+    }
+  });
+
+  await waitFor(() => {
+    expect(screen.queryByTestId(fileToDeleteTestId)).not.toBeInTheDocument();
+  });
+
+  await act(async () => {
+    await jest.runOnlyPendingTimersAsync();
+  });
+
+  await waitFor(() => {
+    expect(nextFocus).toHaveFocus();
+  });
+};
+
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -139,15 +169,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 +226,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 +248,114 @@ 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,
+      });
+
+      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
+    });
+
+    it('should focus the upload input 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', 'uploadInput');
+    });
+
+    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 the third item, then the second and finally upload input', 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', 'uploadInput');
+      await deleteFileAndWaitForFocus('1-uploadItem', '2-action');
+      await deleteFileAndWaitForFocus('2-uploadItem', 'uploadInput');
+    });
   });
 
   describe('Max File Upload limit', () => {

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -99,16 +99,45 @@ export type UploadInputProps = {
   'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
 > & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
 
+/**
+ * Interface representing a reference to an UploadItem component.
+ * Provides a method to focus the UploadItem.
+ */
 interface UploadItemRef {
+  /**
+   * Focuses the UploadItem component.
+   */
   focus: () => void;
 }
 
+/**
+ * Represents the next item to focus on after an action is performed.
+ */
+type NextFocusItem = {
+  /** The ID of the next item to focus on. If null, no specific item is targeted. */
+  focusId: number | null;
+  /** Indicates if the next item to focus on is the last item in the list. */
+  isLastItem: boolean;
+};
+
+/**
+ * Generates a unique ID for a file based on its name, size, and the current timestamp
+ */
 function generateFileId(file: File) {
   const { name, size } = file;
   const uploadTimeStamp = new Date().getTime();
   return `${name}_${size}_${uploadTimeStamp}`;
 }
 
+/**
+ * The component allows users to upload files, manage the list of uploaded files,
+ * and handle file validation and deletion.
+ *
+ * @param {UploadInputProps} props - The properties for the UploadInput component.
+ *
+ * @see {@link UploadInput} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
+ */
 const UploadInput = ({
   files = [],
   fileInputName = 'file',
@@ -131,15 +160,15 @@ const UploadInput = ({
   uploadButtonTitle,
 }: UploadInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
-
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
-  const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);
+  const [nextFocusItem, setNextFocusItem] = useState<NextFocusItem | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
   const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
+  const REFOCUS_DELAY = 375; // Set to 400ms to allow animations and Modal to unmount
 
   const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(
     multiple || files.length === 0 ? files : [files[0]],
@@ -147,49 +176,65 @@ const UploadInput = ({
 
   const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
 
-  function addFileToList(recentUploadedFile: UploadedFile) {
-    function addToList(listToAddTo: readonly UploadedFile[]) {
-      return [...listToAddTo, recentUploadedFile];
-    }
-
-    setUploadedFiles(addToList);
-    uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);
+  function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {
+    setUploadedFiles(updateFn);
+    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);
   }
 
-  const removeFileFromList = (file: UploadedFile) => {
-    function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {
-      return listToFilterFrom.filter(
-        (fileInList) => file !== fileInList && file.id !== fileInList.id,
-      );
-    }
-
-    setUploadedFiles(filterOutFrom);
-    uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);
-  };
+  function addFileToList(recentUploadedFile: UploadedFile) {
+    updateFileList((list) => [...list, recentUploadedFile]);
+  }
 
-  const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {
-    const updateListItem = (listToUpdate: readonly UploadedFile[]) =>
-      listToUpdate.map((fileInList) => {
-        return fileInList === file || fileInList.id === file.id
-          ? { ...file, ...updates }
-          : fileInList;
-      });
+  function removeFileFromList(file: UploadedFile) {
+    updateFileList((list) =>
+      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),
+    );
+  }
 
-    setUploadedFiles(updateListItem);
-    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
-  };
+  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {
+    updateFileList((list) =>
+      list.map((fileInList) =>
+        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,
+      ),
+    );
+  }
 
-  const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);
+  function focusNextItem(
+    focusId: number | null = null,
+    isLastItem = false,
+    timeout: number = REFOCUS_DELAY,
+  ) {
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        const nextFocusIdIndex = focusId
+          ? uploadedFilesListReference.current.findIndex(
+              (item: UploadedFile) => item.id === focusId,
+            )
+          : -1;
+
+        if (isLastItem || nextFocusIdIndex === -1) {
+          // If it's the last item or no next item, focus on the upload input reference
+          uploadInputRef.current?.focus();
+        } else {
+          const nextFocusElement = itemRefs.current[nextFocusIdIndex];
+          nextFocusElement?.focus();
+        }
+      }, timeout);
+    });
+  }
 
   const removeFile = (file: UploadedFile) => {
     const { id, status } = file;
     const index = uploadedFiles.findIndex((f) => f.id === file.id);
-    setFileToRemoveIndex(index);
+    const isLastItem = index === uploadedFiles.length - 1;
+    const nextIndexId = uploadedFiles[index + 1]?.id as number;
+    const focusId = nextIndexId ?? null;
 
     if (status === Status.FAILED) {
+      setNextFocusItem({ focusId: focusId ?? null, isLastItem });
       removeFileFromList(file);
-      setFileToRemove(file);
     } else if (onDeleteFile && id) {
+      setNextFocusItem({ focusId, isLastItem });
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
       onDeleteFile(id)
@@ -197,10 +242,8 @@ const UploadInput = ({
           removeFileFromList(file);
         })
         .catch((error) => {
+          setNextFocusItem({ focusId, isLastItem });
           modifyFileInList(file, { error: error as UploadError });
-        })
-        .finally(() => {
-          setFileToRemove(file);
         });
     }
   };
@@ -239,12 +282,10 @@ const UploadInput = ({
     return numberOfValidFiles >= maxFiles;
   }
 
-  // One or more files selected, create entries for them
   const addFiles = (selectedFiles: FileList) => {
     for (let i = 0; i < selectedFiles.length; i += 1) {
       const file = selectedFiles.item(i);
 
-      // Returning a FormData[] array instead of FileList so we can filter out incorrect files
       const formData = new FormData();
 
       if (file) {
@@ -253,14 +294,11 @@ const UploadInput = ({
 
         const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
 
-        // Check if file type is valid
         if (!isTypeValid(file, allowedFileTypes)) {
           handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));
           continue;
         }
 
-        // Check if the filesize is valid
-        // Convert to rough bytes
         if (!isSizeValid(file, sizeLimit * 1000)) {
           const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
           handleFileUploadFailure(file, failureMessage);
@@ -275,14 +313,11 @@ const UploadInput = ({
           continue;
         }
 
-        // Check if the file is already in the list
         const existingFile = uploadedFiles.find((f) => f.filename === file.name);
         if (existingFile) {
-          // Remove the file from the list before adding it again
           removeFileFromList(existingFile);
         }
 
-        // Add the file to the list
         formData.append(fileInputName, file);
         const pendingFile = {
           id: generateFileId(file),
@@ -292,10 +327,8 @@ const UploadInput = ({
 
         addFileToList(pendingFile);
 
-        // Start uploading the file
         onUploadFile(formData)
           .then(({ id, url, error }: UploadResponse) => {
-            // Replace the temporary id with the final one received from the API, and also set any errors
             modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });
           })
           .catch((error) => {
@@ -303,7 +336,6 @@ const UploadInput = ({
           });
 
         if (!multiple) {
-          // Only upload a single file
           break;
         }
       }
@@ -311,20 +343,11 @@ const UploadInput = ({
   };
 
   useLayoutEffect(() => {
-    if (fileToRemove && fileToRemoveIndex !== null) {
-      requestAnimationFrame(() => {
-        const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
-        if (itemRefs.current[nextFocusIndex]) {
-          itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
-        } else {
-          // If there's only one item left, focus the UploadButton
-          uploadInputRef.current?.focus();
-        }
-      });
-      setFileToRemove(null); // Reset the state
-      setFileToRemoveIndex(null); // Reset the index
+    if (nextFocusItem) {
+      focusNextItem(nextFocusItem.focusId, nextFocusItem.isLastItem);
     }
-  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
+    setNextFocusItem(null);
+  }, [nextFocusItem]);
 
   useEffect(() => {
     setMounted(true);