@transferwise/components 46.140.1 → 46.142.0

package/src/uploadInput/UploadInput.tsx

@@ -170,10 +170,10 @@ const UploadInput = ({
   const inputAttributes = useInputAttributes({ nonLabelable: true });
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);
-  const [mounted, setMounted] = useState(false);
+  const mountedRef = useRef(false);
   const { formatMessage } = useIntl();
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
-  let fileRefs: (HTMLDivElement | UploadItemRef | null)[] = [];
+  const fileRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
@@ -196,7 +196,7 @@ const UploadInput = ({
     updateFileList((list) =>
       list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),
     );
-    fileRefs = fileRefs.filter((ref) => ref && ref.id !== file.id);
+    fileRefs.current = fileRefs.current.filter((ref) => ref && ref.id !== file.id);
   }
 
   function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {
@@ -208,18 +208,18 @@ const UploadInput = ({
   }
 
   const removeFile = async (file: UploadedFile) => {
-    const { id, status } = file;
-    fileRefs = fileRefs.filter((item) => item && item.id !== file.id);
+    const { id: fileId, status } = file;
+    fileRefs.current = fileRefs.current.filter((item) => item && item.id !== file.id);
 
     if (status === Status.FAILED) {
       removeFileFromList(file);
       return Promise.resolve();
     }
 
-    if (onDeleteFile && id) {
+    if (onDeleteFile && fileId) {
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      return onDeleteFile(id)
+      return onDeleteFile(fileId)
         .then(() => {
           removeFileFromList(file);
         })
@@ -248,6 +248,7 @@ const UploadInput = ({
 
   function getNumberOfFilesUploaded() {
     const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);
+
     const validFiles = uploadedFilesListReference.current.filter(
       (file) => file.status && uploadInitiatedStatus.has(file.status),
     );
@@ -321,14 +322,16 @@ const UploadInput = ({
   };
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    // Skip onFilesChange call on initial mount, only call on updates
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
 
-  useEffect(() => {
-    if (onFilesChange && mounted) {
+    if (onFilesChange) {
       onFilesChange([...uploadedFiles]);
     }
-  }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [onFilesChange, uploadedFiles]);
 
   type NextFocusable =
     | HTMLDivElement
@@ -336,14 +339,14 @@ const UploadInput = ({
     | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
     | null;
 
-  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);
+  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(null);
 
   const handleFocus = (fileId: string | number) => {
-    fileRefs = fileRefs.filter((ref) => {
+    fileRefs.current = fileRefs.current.filter((ref) => {
       return ref && ref.id !== markedFileForDelete?.id;
     });
 
-    const filesCount = fileRefs.length;
+    const filesCount = fileRefs.current.length;
     let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;
     let focusTarget: 'button' | 'link' = 'button';
 
@@ -355,15 +358,15 @@ const UploadInput = ({
     }
 
     if (filesCount > 1) {
-      const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
-      const currentFileId = fileRefs?.[currentFileIndex]?.id;
-      const lastFileId = fileRefs?.[filesCount - 1]?.id;
+      const currentFileIndex = fileRefs.current.findIndex((file) => file?.id === fileId);
+      const currentFileId = fileRefs.current?.[currentFileIndex]?.id;
+      const lastFileId = fileRefs.current?.[filesCount - 1]?.id;
 
       // if last file, select a previous one
       if (currentFileId === lastFileId) {
-        next = fileRefs[filesCount - 2];
+        next = fileRefs.current[filesCount - 2];
       } else {
-        next = fileRefs[currentFileIndex + 1];
+        next = fileRefs.current[currentFileIndex + 1];
       }
 
       // If next is an UploadItemRef, check if it has a URL (succeeded)
@@ -401,7 +404,7 @@ const UploadInput = ({
         typeof uploadInputRef.current.focus === 'function'
       ) {
         setTimeout(() => {
-          uploadInputRef.current!.focus();
+          uploadInputRef.current?.focus();
         }, 0);
       } else if (
         typeof focusTarget === 'object' &&
@@ -436,17 +439,17 @@ const UploadInput = ({
           aria-relevant="all"
           role="region"
         >
-          {uploadedFiles.map((file, index) => (
+          {uploadedFiles.map((file) => (
             <UploadItem
               key={file.id}
               ref={(el: UploadItemRef | null) => {
                 if (
                   el &&
                   el.id !== markedFileForDelete?.id &&
-                  !fileRefs.some((ref) => ref && ref.id === el.id) &&
+                  !fileRefs.current.some((ref) => ref?.id === el.id) &&
                   el.status !== 'processing'
                 ) {
-                  fileRefs.push(el);
+                  fileRefs.current.push(el);
                 }
               }}
               file={file}
@@ -478,6 +481,7 @@ const UploadInput = ({
               ref={uploadInputRef}
               id={id}
               uploadButtonTitle={uploadButtonTitle}
+              // eslint-disable-next-line react-hooks/refs -- Function reads ref for file count check
               disabled={areMaximumFilesUploadedAlready() || disabled}
               multiple={multiple}
               fileTypes={fileTypes}