@transferwise/components 46.63.0 → 46.64.0

package/src/uploadInput/UploadInput.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import Button from '../button';
@@ -101,6 +101,10 @@ export type UploadInputProps = {
   Pick<UploadItemProps, 'onDownload'> &
   CommonProps;
 
+interface UploadItemRef {
+  focus: () => void;
+}
+
 function generateFileId(file: File) {
   const { name, size } = file;
   const uploadTimeStamp = new Date().getTime();
@@ -131,8 +135,11 @@ const UploadInput = ({
   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);
 
   const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
 
@@ -174,21 +181,28 @@ const UploadInput = ({
     uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
   };
 
+  const [fileToRemove, setFileToRemove] = useState<UploadedFile | null>(null);
+
   const removeFile = (file: UploadedFile) => {
     const { id, status } = file;
+    const index = uploadedFiles.findIndex((f) => f.id === file.id);
+    setFileToRemoveIndex(index);
 
     if (status === Status.FAILED) {
-      // If removing a failed upload, we're just updating the view
       removeFileFromList(file);
+      setFileToRemove(file);
     } else if (onDeleteFile && id) {
-      // Set status to PROCESSING
       modifyFileInList(file, { status: Status.PROCESSING, error: undefined });
 
-      // Notify host app about deletion
       onDeleteFile(id)
-        .then(() => removeFileFromList(file))
+        .then(() => {
+          removeFileFromList(file);
+        })
         .catch((error) => {
           modifyFileInList(file, { error: error as UploadError });
+        })
+        .finally(() => {
+          setFileToRemove(file);
         });
     }
   };
@@ -263,10 +277,18 @@ 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,
-          filename: name,
+          id: generateFileId(file),
+          filename: file.name,
           status: Status.PENDING,
         };
 
@@ -290,6 +312,22 @@ 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
+    }
+  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
+
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -307,9 +345,12 @@ const UploadInput = ({
         className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
-        {uploadedFiles.map((file) => (
+        {uploadedFiles.map((file, index) => (
           <UploadItem
             key={file.id}
+            ref={(el: UploadItemRef | null) => {
+              itemRefs.current[index] = el;
+            }}
             file={file}
             singleFileUpload={!multiple}
             canDelete={
@@ -326,6 +367,7 @@ const UploadInput = ({
         ))}
         {(multiple || (!multiple && !uploadedFiles.length)) && (
           <UploadButton
+            ref={uploadInputRef}
             id={id}
             uploadButtonTitle={uploadButtonTitle}
             disabled={areMaximumFilesUploadedAlready() || disabled}

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -1,6 +1,14 @@
 import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { ChangeEvent, DragEvent, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  DragEvent,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  ForwardedRef,
+} from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -70,169 +78,183 @@ const onDragOver = (event: DragEvent): void => {
 };
 
 const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
-const UploadButton = ({
-  disabled,
-  multiple,
-  description,
-  fileTypes = imageFileTypes,
-  sizeLimit = DEFAULT_SIZE_LIMIT,
-  maxFiles,
-  onChange,
-  id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle,
-}: UploadButtonProps) => {
-  const { formatMessage } = useIntl();
-  const inputReference = useRef<HTMLInputElement>(null);
-
-  const [isDropping, setIsDropping] = useState(false);
-
-  const dragCounter = useRef(0);
-
-  const reset = (): void => {
-    dragCounter.current = 0;
-    setIsDropping(false);
-  };
-
-  const onDragLeave = (event: DragEvent): void => {
-    event.preventDefault();
-    dragCounter.current -= 1;
-    if (dragCounter.current === 0) {
+const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
+  (
+    {
+      disabled,
+      multiple,
+      description,
+      fileTypes = imageFileTypes,
+      sizeLimit = DEFAULT_SIZE_LIMIT,
+      maxFiles,
+      onChange,
+      id = DEFAULT_FILE_INPUT_ID,
+      uploadButtonTitle,
+    },
+    ref: ForwardedRef<HTMLInputElement | null>,
+  ) => {
+    const { formatMessage } = useIntl();
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    useImperativeHandle(ref, () => {
+      if (!inputRef.current) {
+        throw new Error('inputRef.current is null');
+      }
+      return inputRef.current;
+    }, []);
+
+    const [isDropping, setIsDropping] = useState(false);
+
+    const dragCounter = useRef(0);
+
+    const reset = (): void => {
+      dragCounter.current = 0;
       setIsDropping(false);
-    }
-  };
+    };
 
-  const onDragEnter = (event: DragEvent): void => {
-    event.preventDefault();
-    dragCounter.current += 1;
-    if (dragCounter.current === 1) {
-      setIsDropping(true);
-    }
-  };
+    const onDragLeave = (event: DragEvent): void => {
+      event.preventDefault();
+      dragCounter.current -= 1;
+      if (dragCounter.current === 0) {
+        setIsDropping(false);
+      }
+    };
 
-  const onDrop = (event: DragEvent): void => {
-    event.preventDefault();
-    reset();
-    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-      onChange(event.dataTransfer.files);
-    }
-  };
+    const onDragEnter = (event: DragEvent): void => {
+      event.preventDefault();
+      dragCounter.current += 1;
+      if (dragCounter.current === 1) {
+        setIsDropping(true);
+      }
+    };
+
+    const onDrop = (event: DragEvent): void => {
+      event.preventDefault();
+      reset();
+      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+        onChange(event.dataTransfer.files);
+      }
+    };
 
-  const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {
-    const { files } = event.target;
+    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {
+      const { files } = event.target;
 
-    if (files) {
-      onChange(files);
+      if (files) {
+        onChange(files);
 
-      if (inputReference.current) {
-        inputReference.current.value = '';
+        if (inputRef.current) {
+          inputRef.current.value = '';
+        }
       }
-    }
-  };
+    };
 
-  const getFileTypesDescription = (): string => {
-    if (fileTypes === '*') {
-      return fileTypes;
-    }
+    const getFileTypesDescription = (): string => {
+      if (fileTypes === '*') {
+        return fileTypes;
+      }
 
-    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
-  };
+      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
+    };
 
-  function getDescription() {
-    if (description) {
-      return description;
-    }
+    function getDescription() {
+      if (description) {
+        return description;
+      }
+
+      const fileTypesDescription = getFileTypesDescription();
 
-    const fileTypesDescription = getFileTypesDescription();
+      const derivedFileDescription =
+        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
 
-    const derivedFileDescription =
-      fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
+      return formatMessage(MESSAGES.instructions, {
+        fileTypes: derivedFileDescription,
+        size: Math.round(sizeLimit / 1000),
+      });
+    }
 
-    return formatMessage(MESSAGES.instructions, {
-      fileTypes: derivedFileDescription,
-      size: Math.round(sizeLimit / 1000),
-    });
-  }
+    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
+      const areAllFilesAllowed = getFileTypesDescription() === '*';
 
-  function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
-    const areAllFilesAllowed = getFileTypesDescription() === '*';
+      if (areAllFilesAllowed) {
+        return {}; // file input by default allows all files
+      }
 
-    if (areAllFilesAllowed) {
-      return {}; // file input by default allows all files
+      if (Array.isArray(fileTypes)) {
+        return { accept: fileTypes.join(',') };
+      }
+
+      return { accept: fileTypes as string };
     }
 
-    if (Array.isArray(fileTypes)) {
-      return { accept: fileTypes.join(',') };
+    function renderDescription() {
+      return (
+        <Body className={clsx({ 'text-primary': !disabled })}>
+          {getDescription()}
+          {maxFiles && (
+            <>
+              <br />
+              {`Maximum ${maxFiles} files.`}
+            </>
+          )}
+        </Body>
+      );
     }
 
-    return { accept: fileTypes as string };
-  }
+    function renderButtonTitle() {
+      if (uploadButtonTitle) {
+        return uploadButtonTitle;
+      }
+      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+    }
 
-  function renderDescription() {
     return (
-      <Body className={clsx({ 'text-primary': !disabled })}>
-        {getDescription()}
-        {maxFiles && (
-          <>
-            <br />
-            {`Maximum ${maxFiles} files.`}
-          </>
+      <div
+        className={clsx('np-upload-button-container', 'droppable', {
+          'droppable-dropping': isDropping,
+        })}
+        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
+      >
+        <input
+          ref={inputRef}
+          id={id}
+          type="file"
+          {...getAcceptedTypes()}
+          {...(multiple && { multiple: true })}
+          className="tw-droppable-input"
+          disabled={disabled}
+          name="file-upload"
+          data-testid={TEST_IDS.uploadInput}
+          onChange={filesSelected}
+        />
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>
+          <div className="media">
+            <div className="np-upload-icon media-middle media-left">
+              <UploadIcon size={24} className="text-link" />
+            </div>
+            <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
+              <Body type={Typography.BODY_LARGE_BOLD} className="d-block">
+                {renderButtonTitle()}
+              </Body>
+              {renderDescription()}
+            </div>
+          </div>
+        </label>
+
+        {/* Drop area overlay */}
+        {isDropping && (
+          <div
+            className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}
+          >
+            <PlusIcon className="m-x-1" size={24} />
+            <div>{formatMessage(MESSAGES.dropFile)}</div>
+          </div>
         )}
-      </Body>
+      </div>
     );
-  }
+  },
+);
 
-  function renderButtonTitle() {
-    if (uploadButtonTitle) {
-      return uploadButtonTitle;
-    }
-    return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
-  }
-
-  return (
-    <div
-      className={clsx('np-upload-button-container', 'droppable', {
-        'droppable-dropping': isDropping,
-      })}
-      {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
-    >
-      <input
-        ref={inputReference}
-        id={id}
-        type="file"
-        {...getAcceptedTypes()}
-        {...(multiple && { multiple: true })}
-        className="tw-droppable-input"
-        disabled={disabled}
-        name="file-upload"
-        data-testid={TEST_IDS.uploadInput}
-        onChange={filesSelected}
-      />
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>
-        <div className="media">
-          <div className="np-upload-icon media-middle media-left">
-            <UploadIcon size={24} className="text-link" />
-          </div>
-          <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
-            <Body type={Typography.BODY_LARGE_BOLD} className="d-block">
-              {renderButtonTitle()}
-            </Body>
-            {renderDescription()}
-          </div>
-        </div>
-      </label>
-
-      {/* Drop area overlay */}
-      {isDropping && (
-        <div
-          className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}
-        >
-          <PlusIcon className="m-x-1" size={24} />
-          <div>{formatMessage(MESSAGES.dropFile)}</div>
-        </div>
-      )}
-    </div>
-  );
-};
+UploadButton.displayName = 'UploadButton';
 
 export default UploadButton;