@transferwise/components 46.74.0 → 46.74.1

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { useEffect, 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;
+
+  /**
+   * Required id of the UploadItem component.
+   */
+  id: string | number;
+
+  /**
+   * Optional status of the UploadItem component.
+   */
+  status?: string;
 }
 
+/**
+ * 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,13 +160,11 @@ const UploadInput = ({
   uploadButtonTitle,
 }: UploadInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
-
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
-  const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
-  const itemRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
@@ -147,69 +174,57 @@ 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);
-  };
-
-  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 addFileToList(recentUploadedFile: UploadedFile) {
+    updateFileList((list) => [...list, recentUploadedFile]);
+  }
 
-    setUploadedFiles(updateListItem);
-    uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
-  };
+  function removeFileFromList(file: UploadedFile) {
+    updateFileList((list) =>
+      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),
+    );
+    fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);
+  }
 
-  const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);
+  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {
+    updateFileList((list) =>
+      list.map((fileInList) =>
+        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,
+      ),
+    );
+  }
 
-  const removeFile = (file: UploadedFile) => {
+  const removeFile = async (file: UploadedFile) => {
     const { id, status } = file;
-    const index = uploadedFiles.findIndex((f) => f.id === file.id);
-    setFileToRemoveIndex(index);
+    fileRefs = fileRefs.filter((item) => item && item.id !== file.id);
 
     if (status === Status.FAILED) {
       removeFileFromList(file);
-      setFileToRemove(file);
-    } else if (onDeleteFile && id) {
+      return Promise.resolve();
+    }
+
+    if (onDeleteFile && id) {
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      onDeleteFile(id)
+      return onDeleteFile(id)
         .then(() => {
           removeFileFromList(file);
         })
         .catch((error) => {
           modifyFileInList(file, { error: error as UploadError });
-        })
-        .finally(() => {
-          setFileToRemove(file);
         });
     }
   };
 
   function handleFileUploadFailure(file: File, failureMessage: string) {
     const { name } = file;
-    const id = generateFileId(file);
+
     const failedUpload = {
-      id,
+      id: generateFileId(file),
       filename: name,
       status: Status.FAILED,
       error: failureMessage,
@@ -239,28 +254,20 @@ 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) {
-        const { name } = file;
-        const id = generateFileId(file);
-
         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 +282,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 +296,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,29 +305,12 @@ const UploadInput = ({
           });
 
         if (!multiple) {
-          // Only upload a single file
           break;
         }
       }
     }
   };
 
-  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
-    }
-  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
-
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -336,6 +321,41 @@ const UploadInput = ({
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(
+    uploadInputRef.current,
+  );
+
+  const handleFocus = (fileId: string | number) => {
+    fileRefs = fileRefs.filter((ref) => {
+      return ref && ref.id !== markedFileForDelete?.id;
+    });
+
+    const filesCount = fileRefs.length;
+    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;
+
+    if (filesCount > 1) {
+      const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
+      const currentFileId = fileRefs?.[currentFileIndex]?.id;
+      const lastFileId = fileRefs?.[filesCount - 1]?.id;
+
+      // if last file, select a previous one
+      if (currentFileId === lastFileId) {
+        next = fileRefs[filesCount - 2];
+      } else {
+        next = fileRefs[currentFileIndex + 1];
+      }
+    }
+    setNextFocusable(next);
+  };
+
+  const handleRefocus = () => {
+    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
+      setTimeout(() => {
+        nextFocusable.focus();
+      }, 0);
+    }
+  };
+
   return (
     <>
       <div
@@ -353,7 +373,14 @@ const UploadInput = ({
             <UploadItem
               key={file.id}
               ref={(el: UploadItemRef | null) => {
-                itemRefs.current[index] = el;
+                if (
+                  el &&
+                  el.id !== markedFileForDelete?.id &&
+                  !fileRefs.some((ref) => ref && ref.id === el.id) &&
+                  el.status !== 'processing'
+                ) {
+                  fileRefs.push(el);
+                }
               }}
               file={file}
               singleFileUpload={!multiple}
@@ -363,10 +390,14 @@ const UploadInput = ({
               }
               onDelete={
                 file.status === Status.FAILED
-                  ? () => removeFile(file)
+                  ? async () => {
+                      await removeFile(file);
+                      handleRefocus();
+                    }
                   : () => setMarkedFileForDelete(file)
               }
               onDownload={onDownload}
+              onFocus={() => handleFocus(file.id)}
             />
           ))}
         </div>
@@ -414,9 +445,10 @@ const UploadInput = ({
               block
               priority={Priority.SECONDARY}
               type={ControlType.NEGATIVE}
+              tabIndex={markedFileForDelete ? 0 : -1}
               onClick={() => {
                 if (markedFileForDelete) {
-                  removeFile(markedFileForDelete);
+                  void removeFile(markedFileForDelete);
                 }
                 setMarkedFileForDelete(null);
               }}
@@ -425,6 +457,7 @@ const UploadInput = ({
             </Button>
           </>
         }
+        onUnmount={handleRefocus}
         onClose={() => {
           setMarkedFileForDelete(null);
         }}

package/src/uploadInput/uploadItem/UploadItem.spec.tsx

@@ -16,6 +16,7 @@ describe('UploadItem', () => {
     canDelete: true,
     onDelete: jest.fn(),
     singleFileUpload: true,
+    onFocus: jest.fn(),
   };
 
   const renderComponent = (customProps = props) => render(<UploadItem {...customProps} />);

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -4,9 +4,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
-import { Size, Status, Typography, Sentiment } from '../../common';
+import { Size, Status, Typography } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
-import StatusIcon from '../../statusIcon/StatusIcon';
 import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
@@ -20,6 +19,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   singleFileUpload: boolean;
   canDelete: boolean;
   onDelete: () => void;
+  onFocus: () => void;
 
   /**
    * Callback to be called when the file link is clicked.
@@ -30,18 +30,33 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   onDownload?: (file: UploadedFile) => void;
   ref?: React.Ref<UploadItemRef>;
 };
-
 interface UploadItemRef {
+  /**
+   * A method to set focus on the upload item.
+   * @returns {void}
+   */
   focus: () => void;
+
+  /**
+   * A required unique identifier for the upload item.
+   */
+  id: string | number;
+
+  /**
+   * An optional status of the upload item.
+   */
+  status?: string;
 }
 
 export enum TEST_IDS {
   uploadItem = 'uploadItem',
   mediaBody = 'mediaBody',
+  link = 'link',
+  action = 'action',
 }
 
 const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
-  ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {
+  ({ file, canDelete, onDelete, onDownload, singleFileUpload, onFocus: handleFocus }, ref) => {
     const { formatMessage } = useIntl();
     const { status, filename, error, errors, url } = file;
     const linkRef = useRef<HTMLAnchorElement>(null);
@@ -55,6 +70,8 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
           buttonRef.current?.focus();
         }
       },
+      id: file.id,
+      status: file.status,
     }));
 
     const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
@@ -152,16 +169,20 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     return (
       <div
         className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
-        data-testid={TEST_IDS.uploadItem}
+        data-testid={`${file.id}-${TEST_IDS.uploadItem}`}
       >
         <UploadItemLink
           ref={linkRef}
           url={isSucceeded ? url : undefined}
           singleFileUpload={singleFileUpload}
+          data-testid={`${file.id}-${TEST_IDS.link}`}
           onDownload={onDownloadFile}
         >
           <span className="np-upload-input__icon">{getIcon()}</span>
-          <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
+          <div
+            className="np-upload-input__item-content"
+            data-testid={`${file.id}-${TEST_IDS.mediaBody}`}
+          >
             <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
               {getTitle()}
             </Body>
@@ -175,7 +196,10 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               aria-label={formatMessage(MESSAGES.removeFile, { filename })}
               className="np-upload-input__item-button"
               type="button"
+              tabIndex={0}
+              data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
+              onFocus={handleFocus}
             >
               <Bin size={16} />
             </button>

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -10,7 +10,14 @@ type UploadItemLinkProps = PropsWithChildren<{
 export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
   ({ children, url, onDownload, singleFileUpload }, ref) => {
     if (!url) {
-      return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
+      return (
+        <div
+          ref={ref as React.RefObject<HTMLDivElement>}
+          className={clsx('np-upload-input__item-container')}
+        >
+          {children}
+        </div>
+      );
     }
 
     return (
@@ -23,6 +30,7 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
           'np-upload-input__item-link',
           singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
         )}
+        tabIndex={0}
         onClick={onDownload}
       >
         {children}