@transferwise/components 46.97.4 → 46.98.0

package/src/upload/Upload.tsx

@@ -12,11 +12,6 @@ import { postData, asyncFileRead, isSizeValid, isTypeValid, getFileType } from '
 import { PostDataFetcher, PostDataHTTPOptions, ResponseError } from './utils/postData/postData';
 import { ProcessIndicatorStatus } from '../processIndicator';
 
-/*
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
- * rendered first and then updated with the right status.
- */
-const ANIMATION_FIX = 10;
 export const MAX_SIZE_DEFAULT = 5000000;
 
 export enum UploadStep {
@@ -85,7 +80,7 @@ export class Upload extends Component<UploadProps, UploadState> {
   declare props: UploadProps & Required<Pick<UploadProps, keyof typeof Upload.defaultProps>>;
 
   static defaultProps = {
-    animationDelay: 700,
+    animationDelay: 300,
     maxSize: MAX_SIZE_DEFAULT,
     psButtonDisabled: false,
     size: 'md',
@@ -160,41 +155,6 @@ export class Upload extends Component<UploadProps, UploadState> {
     }
   }
 
-  onAnimationCompleted = async (status: ProcessIndicatorStatus) => {
-    const { response, isProcessing, fileName } = this.state;
-    const { animationDelay } = this.props;
-
-    if (isProcessing && status === 'succeeded') {
-      const { onSuccess } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onSuccess
-            ? () => {
-                onSuccess(response as string | Response, fileName);
-              }
-            : undefined,
-        );
-      }, animationDelay);
-    }
-
-    if (isProcessing && status === 'failed') {
-      const { onFailure } = this.props;
-      this.timeouts = window.setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          onFailure ? () => onFailure(response) : undefined,
-        );
-      }, animationDelay);
-    }
-  };
-
   asyncPost = async (file: File) => {
     const { httpOptions, fetcher } = this.props;
     if (httpOptions == null) {
@@ -209,15 +169,37 @@ export class Upload extends Component<UploadProps, UploadState> {
     return postData(httpOptions, formData, fetcher);
   };
 
-  asyncResponse = (response: unknown, type: 'success' | 'error') => {
-    // Gives time to the animation callback to fire.
+  handleUploadComplete = (type: 'success' | 'error', response: unknown) => {
+    const { animationDelay, onSuccess, onFailure } = this.props;
+    const { fileName } = this.state;
+
+    window.clearTimeout(this.timeouts);
     this.timeouts = window.setTimeout(() => {
-      this.setState({
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => {
+          if (type === 'success') {
+            onSuccess?.(response as string | Response, fileName);
+          } else {
+            onFailure?.(response);
+          }
+        },
+      );
+    }, animationDelay);
+  };
+
+  asyncResponse = (response: unknown, type: 'success' | 'error') => {
+    this.setState(
+      {
         response,
         isError: type === 'error',
         isSuccess: type === 'success',
-      });
-    }, ANIMATION_FIX);
+      },
+      () => this.handleUploadComplete(type, response),
+    );
   };
 
   handleOnClear: React.MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -395,8 +377,6 @@ export class Upload extends Component<UploadProps, UploadState> {
           />
         )}
 
-        {/* Starts render the step when isSuccess is true so markup is there when css transition kicks in
-      css transition to work properly */}
         {(isSuccess || isComplete) && !isError && (
           <CompleteStep
             fileName={fileName}
@@ -443,7 +423,6 @@ export class Upload extends Component<UploadProps, UploadState> {
             psButtonText={psButtonText || intl.formatMessage(messages.psButtonText)}
             psProcessingText={psProcessingText || intl.formatMessage(messages.psProcessingText)}
             psButtonDisabled={psButtonDisabled}
-            onAnimationCompleted={async (status) => this.onAnimationCompleted(status)}
             onClear={(event) => this.handleOnClear(event)}
           />
         )}

package/src/upload/steps/processingStep/processingStep.tsx

@@ -1,13 +1,12 @@
 import Button from '../../../button';
 import { Status, Typography } from '../../../common';
-import ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';
+import ProcessIndicator from '../../../processIndicator';
 import Title from '../../../title';
 
 export interface ProcessingStepProps {
   isComplete: boolean;
   isError: boolean;
   isSuccess: boolean;
-  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
   onClear: React.MouseEventHandler<HTMLButtonElement>;
   psButtonText: string;
   psProcessingText: string;
@@ -18,7 +17,6 @@ export default function ProcessingStep({
   isComplete,
   isError,
   isSuccess,
-  onAnimationCompleted,
   onClear,
   psButtonText,
   psProcessingText,
@@ -35,10 +33,7 @@ export default function ProcessingStep({
   return (
     <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
       <div className="droppable-card-content">
-        <ProcessIndicator
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
+        <ProcessIndicator status={processStatus} />
         <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
           {psProcessingText}
         </Title>

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -76,4 +76,19 @@ describe('uploadImageStep', () => {
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   });
+
+  test('focuses on the upload input when label is clicked', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    expect(input).toHaveFocus();
+  });
+
+  test('triggers file selection on Enter key press', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    input.dispatchEvent(event);
+    expect(input).toHaveFocus();
+    expect(input).toHaveAttribute('type', 'file');
+  });
 });

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -28,6 +28,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     }
   };
 
+  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.uploadInputRef.current?.click();
+    }
+  };
+
   getImage = () => {
     const { usHelpImage, usLabel } = this.props;
     const { errorMessage } = this.props;
@@ -78,6 +85,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
             role="button"
             aria-disabled={usDisabled}
             tabIndex={0}
+            onKeyDown={this.onKeyDown}
           >
             {usButtonText ? (
               <span>{usButtonText}</span>

package/src/uploadInput/UploadInput.tsx

@@ -161,6 +161,7 @@ const UploadInput = ({
 }: UploadInputProps) => {
   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 { formatMessage } = useIntl();
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -321,7 +322,13 @@ const UploadInput = ({
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(
+  type NextFocusable =
+    | HTMLDivElement
+    | UploadItemRef
+    | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
+    | null;
+
+  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(
     uploadInputRef.current,
   );
 
@@ -331,7 +338,15 @@ const UploadInput = ({
     });
 
     const filesCount = fileRefs.length;
-    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;
+    let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;
+    let focusTarget: 'button' | 'link' = 'button';
+
+    // If there will be no files left after deletion, focus the upload button
+    if (filesCount === 1) {
+      next = uploadInputRef.current;
+      setNextFocusable(next);
+      return;
+    }
 
     if (filesCount > 1) {
       const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
@@ -344,15 +359,68 @@ const UploadInput = ({
       } else {
         next = fileRefs[currentFileIndex + 1];
       }
+
+      // If next is an UploadItemRef, check if it has a URL (succeeded)
+      if (next && 'status' in next) {
+        // Find the file object for this ref
+        const fileObj = uploadedFiles.find(f => f.id === next?.id);
+        if (
+          fileObj &&
+          (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&
+          fileObj.url
+        ) {
+          focusTarget = 'link';
+        }
+      }
+      setNextFocusable(() => {
+        if (next && typeof (next as UploadItemRef).focus === 'function') {
+          return { ref: next, target: focusTarget };
+        }
+        return next;
+      });
     }
-    setNextFocusable(next);
   };
 
   const handleRefocus = () => {
-    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
-      setTimeout(() => {
-        nextFocusable.focus();
-      }, 0);
+    const focusTarget = nextFocusable;
+    if (lastAttemptedDeleteId) {
+      setLastAttemptedDeleteId(null);
+      return;
+    }
+    if (focusTarget) {
+      // If there are no files left, focus the upload button
+      if (
+        uploadedFiles.length === 0 &&
+        uploadInputRef.current &&
+        typeof uploadInputRef.current.focus === 'function'
+      ) {
+        setTimeout(() => {
+          uploadInputRef.current!.focus();
+        }, 0);
+      } else if (
+        typeof focusTarget === 'object' &&
+        'ref' in focusTarget &&
+        focusTarget.ref &&
+        typeof focusTarget.ref.focus === 'function'
+      ) {
+        setTimeout(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          if (
+            focusTarget.ref &&
+            typeof (focusTarget.ref as UploadItemRef).focus === 'function'
+          ) {
+            // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
+            (focusTarget.ref as UploadItemRef).focus(focusTarget.target);
+          }
+        }, 0);
+      } else if (
+        focusTarget &&
+        typeof (focusTarget as UploadItemRef).focus === 'function'
+      ) {
+        setTimeout(() => {
+          (focusTarget as UploadItemRef).focus();
+        }, 0);
+      }
     }
   };
 
@@ -391,10 +459,14 @@ const UploadInput = ({
               onDelete={
                 file.status === Status.FAILED
                   ? async () => {
+                      setLastAttemptedDeleteId(file.id);
                       await removeFile(file);
                       handleRefocus();
                     }
-                  : () => setMarkedFileForDelete(file)
+                  : () => {
+                      setLastAttemptedDeleteId(file.id);
+                      setMarkedFileForDelete(file);
+                    }
               }
               onDownload={onDownload}
               onFocus={() => handleFocus(file.id)}
@@ -451,6 +523,7 @@ const UploadInput = ({
                   void removeFile(markedFileForDelete);
                 }
                 setMarkedFileForDelete(null);
+                setLastAttemptedDeleteId(null);
               }}
             >
               {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}

package/src/uploadInput/uploadItem/UploadItem.css

@@ -152,7 +152,8 @@
   padding-left: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+  content: '•' ;
+  content: '•' / '';
   position: absolute;
   display: block;
   left: 0;

package/src/uploadInput/uploadItem/UploadItem.less

@@ -158,7 +158,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: '•';
+        content: '•' / '';
         position: absolute;
         display: block;
         left: 0;

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -19,7 +19,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   singleFileUpload: boolean;
   canDelete: boolean;
   onDelete: () => void;
-  onFocus: () => void;
+  onFocus: (target?: 'button' | 'link') => void;
 
   /**
    * Callback to be called when the file link is clicked.
@@ -63,11 +63,15 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
-      focus: (): void => {
-        if (url) {
-          linkRef.current?.focus();
-        } else {
-          buttonRef.current?.focus();
+      focus: (target?: 'button' | 'link'): void => {
+        if (target === 'button' && buttonRef.current) {
+          buttonRef.current.focus();
+        } else if (target === 'link' && linkRef.current) {
+          linkRef.current.focus();
+        } else if (buttonRef.current) {
+          buttonRef.current.focus();
+        } else if (linkRef.current) {
+          linkRef.current.focus();
         }
       },
       id: file.id,
@@ -199,6 +203,7 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               tabIndex={0}
               data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
+              // @ts-expect-error: handleFocus is not a standard FocusEventHandler, but required for parent logic
               onFocus={handleFocus}
             >
               <Bin size={16} />