@transferwise/components 46.63.0 → 46.65.0

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;

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;