@transferwise/components 46.63.0 → 46.64.0

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,5 +1,6 @@
 import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -27,145 +28,166 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
    * @param file
    */
   onDownload?: (file: UploadedFile) => void;
+  ref?: React.Ref<UploadItemRef>;
 };
 
+interface UploadItemRef {
+  focus: () => void;
+}
+
 export enum TEST_IDS {
   uploadItem = 'uploadItem',
   mediaBody = 'mediaBody',
 }
 
-const UploadItem = ({
-  file,
-  canDelete,
-  onDelete,
-  onDownload,
-  singleFileUpload,
-}: UploadItemProps) => {
-  const { formatMessage } = useIntl();
-  const { status, filename, error, errors, url } = file;
-
-  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
-
-  /**
-   * We're temporarily reverting to the regular icon components,
-   * until the StatusIcon receives 24px sizing. Some misalignment
-   * to be expected.
-   */
-  const getIcon = () => {
-    if (error || errors?.length || status === Status.FAILED) {
-      return <CrossCircleFill size={24} className="emphasis--negative" />;
-    }
-
-    let processIndicator: React.ReactNode;
-
-    switch (status) {
-      case Status.PROCESSING:
-      case Status.PENDING:
-        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;
-        break;
-      case Status.SUCCEEDED:
-      case Status.DONE:
-      default:
-        processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
-    }
-
-    return processIndicator;
-  };
-
-  const getErrorMessage = (error?: UploadError) =>
-    typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
-
-  const getMultipleErrors = (errors?: UploadError[]) => {
-    if (!errors?.length) {
-      return null;
-    }
-
-    if (errors?.length === 1) {
-      return getErrorMessage(errors[0]);
-    }
-
-    return (
-      <ul className="np-upload-input-errors m-b-0">
-        {errors.map((error, index) => {
-          // eslint-disable-next-line react/no-array-index-key
-          return <li key={index}>{getErrorMessage(error)}</li>;
-        })}
-      </ul>
-    );
-  };
+const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
+  ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {
+    const { formatMessage } = useIntl();
+    const { status, filename, error, errors, url } = file;
+    const linkRef = useRef<HTMLAnchorElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
+      focus: (): void => {
+        if (url) {
+          linkRef.current?.focus();
+        } else {
+          buttonRef.current?.focus();
+        }
+      },
+    }));
+
+    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+
+    /**
+     * We're temporarily reverting to the regular icon components,
+     * until the StatusIcon receives 24px sizing. Some misalignment
+     * to be expected.
+     */
+    const getIcon = () => {
+      if (error || errors?.length || status === Status.FAILED) {
+        return <CrossCircleFill size={24} className="emphasis--negative" />;
+      }
+
+      let processIndicator: React.ReactNode;
+
+      switch (status) {
+        case Status.PROCESSING:
+        case Status.PENDING:
+          processIndicator = (
+            <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />
+          );
+          break;
+        case Status.SUCCEEDED:
+        case Status.DONE:
+        default:
+          processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
+      }
+
+      return processIndicator;
+    };
+
+    const getErrorMessage = (error?: UploadError) =>
+      typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
+
+    const getMultipleErrors = (errors?: UploadError[]) => {
+      if (!errors?.length) {
+        return null;
+      }
+
+      if (errors?.length === 1) {
+        return getErrorMessage(errors[0]);
+      }
 
-  const getDescription = () => {
-    if (error || errors?.length || status === Status.FAILED) {
       return (
-        <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
-        </Body>
+        <ul className="np-upload-input-errors m-b-0">
+          {errors.map((error, index) => {
+            // eslint-disable-next-line react/no-array-index-key
+            return <li key={index}>{getErrorMessage(error)}</li>;
+          })}
+        </ul>
       );
-    }
-
-    switch (status) {
-      case Status.PENDING:
-        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;
-      case Status.PROCESSING:
-        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
-      case Status.SUCCEEDED:
-      case Status.DONE:
-      default:
+    };
+
+    const getDescription = () => {
+      if (error || errors?.length || status === Status.FAILED) {
         return (
-          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
-            {formatMessage(MESSAGES.uploaded)}
+          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
+            {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
           </Body>
         );
-    }
-  };
-
-  const getTitle = () => {
-    return filename || formatMessage(MESSAGES.uploadedFile);
-  };
-
-  const onDownloadFile = (event: React.MouseEvent): void => {
-    if (onDownload) {
-      event.preventDefault();
-      onDownload(file);
-    }
-  };
-
-  return (
-    <div
-      className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
-      data-testid={TEST_IDS.uploadItem}
-    >
-      <div className="np-upload-item__body">
-        <UploadItemLink
-          url={isSucceeded ? url : undefined}
-          singleFileUpload={singleFileUpload}
-          onDownload={onDownloadFile}
-        >
-          <div className="np-upload-button" aria-live="polite">
-            <div className="media">
-              <div className="np-upload-icon media-left">{getIcon()}</div>
-              <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
-                <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
-                {getDescription()}
+      }
+
+      switch (status) {
+        case Status.PENDING:
+          return (
+            <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>
+          );
+        case Status.PROCESSING:
+          return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
+        case Status.SUCCEEDED:
+        case Status.DONE:
+        default:
+          return (
+            <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
+              {formatMessage(MESSAGES.uploaded)}
+            </Body>
+          );
+      }
+    };
+
+    const getTitle = () => {
+      return filename || formatMessage(MESSAGES.uploadedFile);
+    };
+
+    const onDownloadFile = (event: React.MouseEvent): void => {
+      if (onDownload) {
+        event.preventDefault();
+        onDownload(file);
+      }
+    };
+
+    return (
+      <div
+        className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
+        data-testid={TEST_IDS.uploadItem}
+      >
+        <div className="np-upload-item__body">
+          <UploadItemLink
+            ref={linkRef}
+            url={isSucceeded ? url : undefined}
+            singleFileUpload={singleFileUpload}
+            onDownload={onDownloadFile}
+          >
+            <div className="np-upload-button" aria-live="polite">
+              <div className="media">
+                <div className="np-upload-icon media-left">{getIcon()}</div>
+                <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
+                  <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
+                  {getDescription()}
+                </div>
               </div>
             </div>
-          </div>
-        </UploadItemLink>
-        {canDelete && (
-          <button
-            aria-label={formatMessage(MESSAGES.removeFile, { filename })}
-            className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
-              'np-upload-item--single-file': singleFileUpload,
-            })}
-            type="button"
-            onClick={() => onDelete()}
-          >
-            <Bin size={16} />
-          </button>
-        )}
+          </UploadItemLink>
+          {canDelete && (
+            <button
+              ref={buttonRef}
+              aria-label={formatMessage(MESSAGES.removeFile, { filename })}
+              className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
+                'np-upload-item--single-file': singleFileUpload,
+              })}
+              type="button"
+              onClick={() => onDelete()}
+            >
+              <Bin size={16} />
+            </button>
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+UploadItem.displayName = 'UploadItem';
 
 export default UploadItem;

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, MouseEvent } from 'react';
+import { PropsWithChildren, MouseEvent, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
 type UploadItemLinkProps = PropsWithChildren<{
@@ -7,28 +7,26 @@ type UploadItemLinkProps = PropsWithChildren<{
   singleFileUpload: boolean;
 }>;
 
-export const UploadItemLink = ({
-  children,
-  url,
-  onDownload,
-  singleFileUpload,
-}: UploadItemLinkProps) => {
-  if (!url) {
-    return <div>{children}</div>;
-  }
+export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
+  ({ children, url, onDownload, singleFileUpload }, ref) => {
+    if (!url) {
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;
+    }
 
-  return (
-    <a
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={clsx(
-        'np-upload-item__link',
-        singleFileUpload ? 'np-upload-item--single-file' : '',
-      )}
-      onClick={onDownload}
-    >
-      {children}
-    </a>
-  );
-};
+    return (
+      <a
+        ref={ref as React.RefObject<HTMLAnchorElement>}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={clsx(
+          'np-upload-item__link',
+          singleFileUpload ? 'np-upload-item--single-file' : '',
+        )}
+        onClick={onDownload}
+      >
+        {children}
+      </a>
+    );
+  },
+);