@transferwise/components 0.0.0-experimental-83c2313 → 0.0.0-experimental-c29cd95

package/build/UploadInput/UploadInput.mjs

@@ -0,0 +1,377 @@
+import { clsx } from 'clsx';
+import { useState, useRef, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import Button from '../Button/Button.resolver.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import { ControlType, Priority } from '../common/PropsValues/control.mjs';
+import '../common/PropsValues/size.mjs';
+import '../common/PropsValues/typography.mjs';
+import '../common/PropsValues/width.mjs';
+import '../common/PropsValues/type.mjs';
+import '../common/PropsValues/dateMode.mjs';
+import '../common/PropsValues/monthFormat.mjs';
+import '../common/PropsValues/position.mjs';
+import '../common/PropsValues/layouts.mjs';
+import { Status } from '../common/PropsValues/status.mjs';
+import '../common/PropsValues/sentiment.mjs';
+import '../common/PropsValues/profileType.mjs';
+import '../common/PropsValues/variant.mjs';
+import '../common/PropsValues/scroll.mjs';
+import '../common/PropsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/formatting';
+import '@transferwise/icons';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useInputAttributes } from '../Inputs/contexts.mjs';
+import Modal from '../Modal/Modal.mjs';
+import { isSizeValid } from '../Upload/utils/isSizeValid/isSizeValid.mjs';
+import { isTypeValid } from '../Upload/utils/isTypeValid/isTypeValid.mjs';
+import MESSAGES from './UploadInput.messages.mjs';
+import UploadButton from './UploadButton/UploadButton.mjs';
+import { DEFAULT_SIZE_LIMIT, imageFileTypes } from './UploadButton/defaults.mjs';
+import UploadItem from './UploadItem/UploadItem.mjs';
+
+function generateFileId(file) {
+  const {
+    name,
+    size
+  } = file;
+  const uploadTimeStamp = new Date().getTime();
+  return `${name}_${size}_${uploadTimeStamp}`;
+}
+/**
+ * The component allows users to upload files, manage the list of uploaded files,
+ * and handle file validation and deletion.
+ *
+ * @param {UploadInputProps} props - The properties for the UploadInput component.
+ *
+ * @see {@link UploadInput} for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}
+ */
+const UploadInput = ({
+  files = [],
+  fileInputName = 'file',
+  className,
+  deleteConfirm,
+  disabled,
+  multiple = false,
+  fileTypes = imageFileTypes,
+  sizeLimit = DEFAULT_SIZE_LIMIT,
+  description,
+  onUploadFile,
+  onDeleteFile,
+  onValidationError,
+  onFilesChange,
+  onDownload,
+  maxFiles,
+  maxFilesErrorMessage,
+  id,
+  sizeLimitErrorMessage,
+  uploadButtonTitle
+}) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
+  const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState(null);
+  const mountedRef = useRef(false);
+  const {
+    formatMessage
+  } = useIntl();
+  const uploadInputRef = useRef(null);
+  const fileRefs = useRef([]);
+  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);
+  const [uploadedFiles, setUploadedFiles] = useState(multiple || files.length === 0 ? files : [files[0]]);
+  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);
+  function updateFileList(updateFn) {
+    setUploadedFiles(updateFn);
+    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);
+  }
+  function addFileToList(recentUploadedFile) {
+    updateFileList(list => [...list, recentUploadedFile]);
+  }
+  function removeFileFromList(file) {
+    updateFileList(list => list.filter(fileInList => file !== fileInList && file.id !== fileInList.id));
+    fileRefs.current = fileRefs.current.filter(ref => ref && ref.id !== file.id);
+  }
+  function modifyFileInList(file, updates) {
+    updateFileList(list => list.map(fileInList => fileInList === file || fileInList.id === file.id ? {
+      ...file,
+      ...updates
+    } : fileInList));
+  }
+  const removeFile = async file => {
+    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 && fileId) {
+      modifyFileInList(file, {
+        status: Status.PROCESSING,
+        error: undefined
+      });
+      return onDeleteFile(fileId).then(() => {
+        removeFileFromList(file);
+      }).catch(error => {
+        modifyFileInList(file, {
+          error: error
+        });
+      });
+    }
+  };
+  function handleFileUploadFailure(file, failureMessage) {
+    const {
+      name
+    } = file;
+    const failedUpload = {
+      id: generateFileId(file),
+      filename: name,
+      status: Status.FAILED,
+      error: failureMessage
+    };
+    addFileToList(failedUpload);
+    if (onValidationError) {
+      onValidationError(failedUpload);
+    }
+  }
+  function getNumberOfFilesUploaded() {
+    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);
+    const validFiles = uploadedFilesListReference.current.filter(file => file.status && uploadInitiatedStatus.has(file.status));
+    return validFiles.length;
+  }
+  function areMaximumFilesUploadedAlready() {
+    if (!maxFiles) {
+      return false;
+    }
+    const numberOfValidFiles = getNumberOfFilesUploaded();
+    return numberOfValidFiles >= maxFiles;
+  }
+  const addFiles = selectedFiles => {
+    for (let i = 0; i < selectedFiles.length; i += 1) {
+      const file = selectedFiles.item(i);
+      const formData = new FormData();
+      if (file) {
+        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
+        if (!isTypeValid(file, allowedFileTypes)) {
+          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));
+          continue;
+        }
+        if (typeof sizeLimit === 'number' && !isSizeValid(file, sizeLimit * 1000)) {
+          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);
+          handleFileUploadFailure(file, failureMessage);
+          continue;
+        }
+        if (areMaximumFilesUploadedAlready()) {
+          const failureMessage = maxFilesErrorMessage || formatMessage(MESSAGES.maximumFilesAlreadyUploaded, {
+            maxFilesAllowed: maxFiles
+          });
+          handleFileUploadFailure(file, failureMessage);
+          continue;
+        }
+        const existingFile = uploadedFiles.find(f => f.filename === file.name);
+        if (existingFile) {
+          removeFileFromList(existingFile);
+        }
+        formData.append(fileInputName, file);
+        const pendingFile = {
+          id: generateFileId(file),
+          filename: file.name,
+          status: Status.PENDING
+        };
+        addFileToList(pendingFile);
+        onUploadFile(formData).then(({
+          id,
+          url,
+          error
+        }) => {
+          modifyFileInList(pendingFile, {
+            id,
+            url,
+            error,
+            status: Status.SUCCEEDED
+          });
+        }).catch(error => {
+          modifyFileInList(pendingFile, {
+            error: error,
+            status: Status.FAILED
+          });
+        });
+        if (!multiple) {
+          break;
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    // Skip onFilesChange call on initial mount, only call on updates
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (onFilesChange) {
+      onFilesChange([...uploadedFiles]);
+    }
+  }, [onFilesChange, uploadedFiles]);
+  const [nextFocusable, setNextFocusable] = useState(null);
+  const handleFocus = fileId => {
+    fileRefs.current = fileRefs.current.filter(ref => {
+      return ref && ref.id !== markedFileForDelete?.id;
+    });
+    const filesCount = fileRefs.current.length;
+    let next = uploadInputRef.current;
+    let focusTarget = '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.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.current[filesCount - 2];
+      } else {
+        next = fileRefs.current[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.focus === 'function') {
+          return {
+            ref: next,
+            target: focusTarget
+          };
+        }
+        return next;
+      });
+    }
+  };
+  const handleRefocus = () => {
+    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(() => {
+          if (focusTarget.ref && typeof focusTarget.ref.focus === 'function') {
+            // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
+            focusTarget.ref.focus(focusTarget.target);
+          }
+        }, 0);
+      } else if (focusTarget && typeof focusTarget.focus === 'function') {
+        setTimeout(() => {
+          focusTarget.focus();
+        }, 0);
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      role: "group",
+      className: clsx('np-upload-input', className, {
+        disabled
+      }),
+      ...inputAttributes,
+      children: [/*#__PURE__*/jsx("div", {
+        className: "np-upload-input__section",
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        role: "region",
+        children: uploadedFiles.map(file => /*#__PURE__*/jsx(UploadItem, {
+          ref: el => {
+            if (el && el.id !== markedFileForDelete?.id && !fileRefs.current.some(ref => ref?.id === el.id) && el.status !== 'processing') {
+              fileRefs.current.push(el);
+            }
+          },
+          file: file,
+          singleFileUpload: !multiple,
+          canDelete: (!!onDeleteFile || file.status === Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
+          onDelete: file.status === Status.FAILED ? async () => {
+            setLastAttemptedDeleteId(file.id);
+            await removeFile(file);
+            handleRefocus();
+          } : () => {
+            setLastAttemptedDeleteId(file.id);
+            setMarkedFileForDelete(file);
+          },
+          onDownload: onDownload,
+          onFocus: () => handleFocus(file.id)
+        }, file.id))
+      }), (multiple || !multiple && !uploadedFiles.length) && /*#__PURE__*/jsx("div", {
+        className: "np-upload-input__section np-upload-input__section--uploader",
+        children: /*#__PURE__*/jsx(UploadButton, {
+          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,
+          sizeLimit: sizeLimit,
+          description: description,
+          maxFiles: maxFiles,
+          withEntries: Boolean(uploadedFiles.length),
+          onChange: addFiles
+        })
+      })]
+    }), /*#__PURE__*/jsx(Modal, {
+      title: deleteConfirm?.title !== undefined ? deleteConfirm.title : formatMessage(MESSAGES.deleteModalTitle),
+      body: deleteConfirm?.body !== undefined ? deleteConfirm.body : formatMessage(MESSAGES.deleteModalBody),
+      open: !!markedFileForDelete,
+      footer: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Button, {
+          block: true,
+          onClick: () => {
+            setMarkedFileForDelete(null);
+          },
+          children: deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)
+        }), /*#__PURE__*/jsx(Button, {
+          block: true,
+          priority: Priority.SECONDARY,
+          type: ControlType.NEGATIVE,
+          tabIndex: markedFileForDelete ? 0 : -1,
+          onClick: () => {
+            if (markedFileForDelete) {
+              void removeFile(markedFileForDelete);
+            }
+            setMarkedFileForDelete(null);
+            setLastAttemptedDeleteId(null);
+          },
+          children: deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)
+        })]
+      }),
+      onUnmount: handleRefocus,
+      onClose: () => {
+        setMarkedFileForDelete(null);
+      }
+    })]
+  });
+};
+
+export { UploadInput as default };
+//# sourceMappingURL=UploadInput.mjs.map

package/build/UploadInput/UploadInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInput.mjs","sources":["../../src/UploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../Button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\nimport { useInputAttributes } from '../Inputs/contexts';\nimport Modal from '../Modal';\nimport { isSizeValid } from '../Upload/utils/isSizeValid';\nimport { isTypeValid } from '../Upload/utils/isTypeValid';\n\nimport MESSAGES from './UploadInput.messages';\nimport { UploadedFile, UploadError, UploadResponse } from './types';\nimport UploadButton, { UploadButtonProps } from './UploadButton/UploadButton';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './UploadButton/defaults';\nimport UploadItem, { UploadItemProps } from './UploadItem/UploadItem';\n\nexport type UploadInputProps = {\n  /**\n   * List of already existing, failed or in progress files\n   * @default []\n   */\n  files?: readonly UploadedFile[];\n\n  /**\n   * The key of the file in the returned FormData object (default: file)\n   * @default 'file'\n   */\n  fileInputName?: string;\n\n  /**\n   * Callback that handles form submission\n   *\n   * @param formData\n   */\n  onUploadFile: (formData: FormData) => Promise<UploadResponse>;\n\n  /**\n   * Provide a callback if the file can be removed/deleted from the server\n   * Your app is responsible for reloading the uploaded files list and updating the component to ensure that the file has in fact been deleted successfully\n   *\n   * @param id\n   */\n  onDeleteFile?: (id: string | number) => Promise<any>;\n\n  /**\n   * Provide a callback to trigger on validation error\n   *\n   * @param file\n   */\n  onValidationError?: (file: UploadedFile) => void;\n\n  /**\n   * Provide a callback to trigger on change whenever the files are updated\n   *\n   * @param files\n   */\n  onFilesChange?: (files: UploadedFile[]) => void;\n\n  /**\n   * Confirmation modal displayed on delete\n   */\n  deleteConfirm?: {\n    /**\n     * The title of the confirmation modal on delete\n     */\n    title?: string;\n\n    /**\n     * The body of the confirmation modal on delete\n     */\n    body?: React.ReactNode;\n\n    /**\n     * The confirm button text of the confirmation modal on delete\n     */\n    confirmText?: string;\n\n    /**\n     * The cancel button text of the confirmation modal on delete\n     */\n    cancelText?: string;\n  };\n\n  /**\n   * Maximum number of files allowed, if provided, shows error below file item\n   */\n  maxFiles?: number;\n\n  /**\n   * Error message to show when the maximum number of files are uploaded already\n   */\n  maxFilesErrorMessage?: string;\n\n  /**\n   * Error message to show when files over allowed size limit are uploaded\n   */\n  sizeLimitErrorMessage?: string;\n} & {\n  /** @default false */\n  multiple?: UploadButtonProps['multiple'];\n  /** @default ['.pdf,application/pdf', '.jpg,.jpeg,image/jpeg', '.png,image/png'] */\n  fileTypes?: UploadButtonProps['fileTypes'];\n  /** @default 5000 */\n  sizeLimit?: UploadButtonProps['sizeLimit'];\n} & Pick<UploadButtonProps, 'disabled' | 'description' | 'id' | 'uploadButtonTitle'> & {\n    onDownload?: UploadItemProps['onDownload'];\n  } & CommonProps;\n\n/**\n * Interface representing a reference to an UploadItem component.\n * Provides a method to focus the UploadItem.\n */\ninterface UploadItemRef {\n  /**\n   * Focuses the UploadItem component.\n   */\n  focus: () => void;\n\n  /**\n   * Required id of the UploadItem component.\n   */\n  id: string | number;\n\n  /**\n   * Optional status of the UploadItem component.\n   */\n  status?: string;\n}\n\n/**\n * Generates a unique ID for a file based on its name, size, and the current timestamp\n */\nfunction generateFileId(file: File) {\n  const { name, size } = file;\n  const uploadTimeStamp = new Date().getTime();\n  return `${name}_${size}_${uploadTimeStamp}`;\n}\n\n/**\n * The component allows users to upload files, manage the list of uploaded files,\n * and handle file validation and deletion.\n *\n * @param {UploadInputProps} props - The properties for the UploadInput component.\n *\n * @see {@link UploadInput} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/forms-uploadinput--docs|Storybook Wise Design}\n */\nconst UploadInput = ({\n  files = [],\n  fileInputName = 'file',\n  className,\n  deleteConfirm,\n  disabled,\n  multiple = false,\n  fileTypes = imageFileTypes,\n  sizeLimit = DEFAULT_SIZE_LIMIT,\n  description,\n  onUploadFile,\n  onDeleteFile,\n  onValidationError,\n  onFilesChange,\n  onDownload,\n  maxFiles,\n  maxFilesErrorMessage,\n  id,\n  sizeLimitErrorMessage,\n  uploadButtonTitle,\n}: UploadInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);\n  const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);\n  const mountedRef = useRef(false);\n  const { formatMessage } = useIntl();\n  const uploadInputRef = useRef<HTMLInputElement | null>(null);\n  const fileRefs = useRef<(HTMLDivElement | UploadItemRef | null)[]>([]);\n\n  const PROGRESS_STATUSES = new Set([Status.PENDING, Status.PROCESSING]);\n\n  const [uploadedFiles, setUploadedFiles] = useState<readonly UploadedFile[]>(\n    multiple || files.length === 0 ? files : [files[0]],\n  );\n\n  const uploadedFilesListReference = useRef(multiple || files.length === 0 ? files : [files[0]]);\n\n  function updateFileList(updateFn: (list: readonly UploadedFile[]) => readonly UploadedFile[]) {\n    setUploadedFiles(updateFn);\n    uploadedFilesListReference.current = updateFn(uploadedFilesListReference.current);\n  }\n\n  function addFileToList(recentUploadedFile: UploadedFile) {\n    updateFileList((list) => [...list, recentUploadedFile]);\n  }\n\n  function removeFileFromList(file: UploadedFile) {\n    updateFileList((list) =>\n      list.filter((fileInList) => file !== fileInList && file.id !== fileInList.id),\n    );\n    fileRefs.current = fileRefs.current.filter((ref) => ref && ref.id !== file.id);\n  }\n\n  function modifyFileInList(file: UploadedFile, updates: Partial<UploadedFile>) {\n    updateFileList((list) =>\n      list.map((fileInList) =>\n        fileInList === file || fileInList.id === file.id ? { ...file, ...updates } : fileInList,\n      ),\n    );\n  }\n\n  const removeFile = async (file: UploadedFile) => {\n    const { id: fileId, status } = file;\n    fileRefs.current = fileRefs.current.filter((item) => item && item.id !== file.id);\n\n    if (status === Status.FAILED) {\n      removeFileFromList(file);\n      return Promise.resolve();\n    }\n\n    if (onDeleteFile && fileId) {\n      modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n      return onDeleteFile(fileId)\n        .then(() => {\n          removeFileFromList(file);\n        })\n        .catch((error) => {\n          modifyFileInList(file, { error: error as UploadError });\n        });\n    }\n  };\n\n  function handleFileUploadFailure(file: File, failureMessage: string) {\n    const { name } = file;\n\n    const failedUpload = {\n      id: generateFileId(file),\n      filename: name,\n      status: Status.FAILED,\n      error: failureMessage,\n    };\n\n    addFileToList(failedUpload);\n\n    if (onValidationError) {\n      onValidationError(failedUpload);\n    }\n  }\n\n  function getNumberOfFilesUploaded() {\n    const uploadInitiatedStatus = new Set([Status.SUCCEEDED, Status.PENDING]);\n\n    const validFiles = uploadedFilesListReference.current.filter(\n      (file) => file.status && uploadInitiatedStatus.has(file.status),\n    );\n    return validFiles.length;\n  }\n\n  function areMaximumFilesUploadedAlready() {\n    if (!maxFiles) {\n      return false;\n    }\n\n    const numberOfValidFiles = getNumberOfFilesUploaded();\n    return numberOfValidFiles >= maxFiles;\n  }\n\n  const addFiles = (selectedFiles: FileList) => {\n    for (let i = 0; i < selectedFiles.length; i += 1) {\n      const file = selectedFiles.item(i);\n\n      const formData = new FormData();\n\n      if (file) {\n        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n        if (!isTypeValid(file, allowedFileTypes)) {\n          handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n          continue;\n        }\n\n        if (typeof sizeLimit === 'number' && !isSizeValid(file, sizeLimit * 1000)) {\n          const failureMessage = sizeLimitErrorMessage || formatMessage(MESSAGES.fileIsTooLarge);\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        if (areMaximumFilesUploadedAlready()) {\n          const failureMessage =\n            maxFilesErrorMessage ||\n            formatMessage(MESSAGES.maximumFilesAlreadyUploaded, { maxFilesAllowed: maxFiles });\n          handleFileUploadFailure(file, failureMessage);\n          continue;\n        }\n\n        const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n        if (existingFile) {\n          removeFileFromList(existingFile);\n        }\n\n        formData.append(fileInputName, file);\n        const pendingFile = {\n          id: generateFileId(file),\n          filename: file.name,\n          status: Status.PENDING,\n        };\n\n        addFileToList(pendingFile);\n\n        onUploadFile(formData)\n          .then(({ id, url, error }: UploadResponse) => {\n            modifyFileInList(pendingFile, { id, url, error, status: Status.SUCCEEDED });\n          })\n          .catch((error) => {\n            modifyFileInList(pendingFile, { error: error as UploadError, status: Status.FAILED });\n          });\n\n        if (!multiple) {\n          break;\n        }\n      }\n    }\n  };\n\n  useEffect(() => {\n    // Skip onFilesChange call on initial mount, only call on updates\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n\n    if (onFilesChange) {\n      onFilesChange([...uploadedFiles]);\n    }\n  }, [onFilesChange, uploadedFiles]);\n\n  type NextFocusable =\n    | HTMLDivElement\n    | UploadItemRef\n    | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }\n    | null;\n\n  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(null);\n\n  const handleFocus = (fileId: string | number) => {\n    fileRefs.current = fileRefs.current.filter((ref) => {\n      return ref && ref.id !== markedFileForDelete?.id;\n    });\n\n    const filesCount = fileRefs.current.length;\n    let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;\n    let focusTarget: 'button' | 'link' = 'button';\n\n    // If there will be no files left after deletion, focus the upload button\n    if (filesCount === 1) {\n      next = uploadInputRef.current;\n      setNextFocusable(next);\n      return;\n    }\n\n    if (filesCount > 1) {\n      const currentFileIndex = fileRefs.current.findIndex((file) => file?.id === fileId);\n      const currentFileId = fileRefs.current?.[currentFileIndex]?.id;\n      const lastFileId = fileRefs.current?.[filesCount - 1]?.id;\n\n      // if last file, select a previous one\n      if (currentFileId === lastFileId) {\n        next = fileRefs.current[filesCount - 2];\n      } else {\n        next = fileRefs.current[currentFileIndex + 1];\n      }\n\n      // If next is an UploadItemRef, check if it has a URL (succeeded)\n      if (next && 'status' in next) {\n        // Find the file object for this ref\n        const fileObj = uploadedFiles.find((f) => f.id === next?.id);\n        if (\n          fileObj &&\n          (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&\n          fileObj.url\n        ) {\n          focusTarget = 'link';\n        }\n      }\n      setNextFocusable(() => {\n        if (next && typeof (next as UploadItemRef).focus === 'function') {\n          return { ref: next, target: focusTarget };\n        }\n        return next;\n      });\n    }\n  };\n\n  const handleRefocus = () => {\n    const focusTarget = nextFocusable;\n    if (lastAttemptedDeleteId) {\n      setLastAttemptedDeleteId(null);\n      return;\n    }\n    if (focusTarget) {\n      // If there are no files left, focus the upload button\n      if (\n        uploadedFiles.length === 0 &&\n        uploadInputRef.current &&\n        typeof uploadInputRef.current.focus === 'function'\n      ) {\n        setTimeout(() => {\n          uploadInputRef.current?.focus();\n        }, 0);\n      } else if (\n        typeof focusTarget === 'object' &&\n        'ref' in focusTarget &&\n        focusTarget.ref &&\n        typeof focusTarget.ref.focus === 'function'\n      ) {\n        setTimeout(() => {\n          if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {\n            // @ts-expect-error: focus may not exist on all possible ref types, but is safe here\n            (focusTarget.ref as UploadItemRef).focus(focusTarget.target);\n          }\n        }, 0);\n      } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {\n        setTimeout(() => {\n          (focusTarget as UploadItemRef).focus();\n        }, 0);\n      }\n    }\n  };\n\n  return (\n    <>\n      <div\n        role=\"group\"\n        className={clsx('np-upload-input', className, { disabled })}\n        {...inputAttributes}\n      >\n        <div\n          className=\"np-upload-input__section\"\n          aria-live=\"polite\"\n          aria-relevant=\"all\"\n          role=\"region\"\n        >\n          {uploadedFiles.map((file) => (\n            <UploadItem\n              key={file.id}\n              ref={(el: UploadItemRef | null) => {\n                if (\n                  el &&\n                  el.id !== markedFileForDelete?.id &&\n                  !fileRefs.current.some((ref) => ref?.id === el.id) &&\n                  el.status !== 'processing'\n                ) {\n                  fileRefs.current.push(el);\n                }\n              }}\n              file={file}\n              singleFileUpload={!multiple}\n              canDelete={\n                (!!onDeleteFile || file.status === Status.FAILED) &&\n                (!file.status || !PROGRESS_STATUSES.has(file.status))\n              }\n              onDelete={\n                file.status === Status.FAILED\n                  ? async () => {\n                      setLastAttemptedDeleteId(file.id);\n                      await removeFile(file);\n                      handleRefocus();\n                    }\n                  : () => {\n                      setLastAttemptedDeleteId(file.id);\n                      setMarkedFileForDelete(file);\n                    }\n              }\n              onDownload={onDownload}\n              onFocus={() => handleFocus(file.id)}\n            />\n          ))}\n        </div>\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <div className=\"np-upload-input__section np-upload-input__section--uploader\">\n            <UploadButton\n              ref={uploadInputRef}\n              id={id}\n              uploadButtonTitle={uploadButtonTitle}\n              // eslint-disable-next-line react-hooks/refs -- Function reads ref for file count check\n              disabled={areMaximumFilesUploadedAlready() || disabled}\n              multiple={multiple}\n              fileTypes={fileTypes}\n              sizeLimit={sizeLimit}\n              description={description}\n              maxFiles={maxFiles}\n              withEntries={Boolean(uploadedFiles.length)}\n              onChange={addFiles}\n            />\n          </div>\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              tabIndex={markedFileForDelete ? 0 : -1}\n              onClick={() => {\n                if (markedFileForDelete) {\n                  void removeFile(markedFileForDelete);\n                }\n                setMarkedFileForDelete(null);\n                setLastAttemptedDeleteId(null);\n              }}\n            >\n              {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n            </Button>\n          </>\n        }\n        onUnmount={handleRefocus}\n        onClose={() => {\n          setMarkedFileForDelete(null);\n        }}\n      />\n    </>\n  );\n};\n\nexport default UploadInput;\n"],"names":["generateFileId","file","name","size","uploadTimeStamp","Date","getTime","UploadInput","files","fileInputName","className","deleteConfirm","disabled","multiple","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","description","onUploadFile","onDeleteFile","onValidationError","onFilesChange","onDownload","maxFiles","maxFilesErrorMessage","id","sizeLimitErrorMessage","uploadButtonTitle","inputAttributes","useInputAttributes","nonLabelable","markedFileForDelete","setMarkedFileForDelete","useState","lastAttemptedDeleteId","setLastAttemptedDeleteId","mountedRef","useRef","formatMessage","useIntl","uploadInputRef","fileRefs","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","updateFileList","updateFn","current","addFileToList","recentUploadedFile","list","removeFileFromList","filter","fileInList","ref","modifyFileInList","updates","map","removeFile","fileId","status","item","FAILED","Promise","resolve","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","f","append","pendingFile","url","useEffect","nextFocusable","setNextFocusable","handleFocus","filesCount","next","focusTarget","currentFileIndex","findIndex","currentFileId","lastFileId","fileObj","DONE","focus","target","handleRefocus","setTimeout","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","el","some","push","singleFileUpload","canDelete","onDelete","onFocus","UploadButton","withEntries","Boolean","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","tabIndex","confirmText","deleteModalConfirmButtonText","onUnmount","onClose"],"mappings":"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"}

package/build/UploadInput/UploadItem/UploadItem.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+var React = require('react');
+var reactIntl = require('react-intl');
+var Body = require('../../Body/Body.js');
+require('../../common/theme.js');
+require('../../common/direction.js');
+require('@transferwise/neptune-tokens');
+require('../../common/PropsValues/control.js');
+var size = require('../../common/PropsValues/size.js');
+var typography = require('../../common/PropsValues/typography.js');
+require('../../common/PropsValues/width.js');
+require('../../common/PropsValues/type.js');
+require('../../common/PropsValues/dateMode.js');
+require('../../common/PropsValues/monthFormat.js');
+require('../../common/PropsValues/position.js');
+require('../../common/PropsValues/layouts.js');
+var status = require('../../common/PropsValues/status.js');
+require('../../common/PropsValues/sentiment.js');
+require('../../common/PropsValues/profileType.js');
+require('../../common/PropsValues/variant.js');
+require('../../common/PropsValues/scroll.js');
+require('../../common/PropsValues/markdownNodeType.js');
+require('../../common/fileType.js');
+require('@transferwise/formatting');
+require('../../common/CloseButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var ProcessIndicator = require('../../ProcessIndicator/ProcessIndicator.js');
+var UploadItem_messages = require('./UploadItem.messages.js');
+var UploadItemLink = require('./UploadItemLink.js');
+
+exports.TEST_IDS = void 0;
+(function (TEST_IDS) {
+  TEST_IDS["uploadItem"] = "uploadItem";
+  TEST_IDS["mediaBody"] = "mediaBody";
+  TEST_IDS["link"] = "link";
+  TEST_IDS["action"] = "action";
+})(exports.TEST_IDS || (exports.TEST_IDS = {}));
+const UploadItem = /*#__PURE__*/React.forwardRef(({
+  file,
+  canDelete,
+  onDelete,
+  onDownload,
+  singleFileUpload,
+  onFocus: handleFocus
+}, ref) => {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
+  const {
+    status: status$1,
+    filename,
+    error,
+    errors,
+    url
+  } = file;
+  const linkRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    focus: target => {
+      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,
+    status: file.status
+  }));
+  const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!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$1 === status.Status.FAILED) {
+      return /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
+        size: 24,
+        className: "emphasis--negative"
+      });
+    }
+    let processIndicator;
+    switch (status$1) {
+      case status.Status.PROCESSING:
+      case status.Status.PENDING:
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
+          size: size.Size.EXTRA_SMALL,
+          status: status.Status.PROCESSING
+        });
+        break;
+      case status.Status.SUCCEEDED:
+      case status.Status.DONE:
+      default:
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
+          size: 24,
+          className: "emphasis--positive"
+        });
+    }
+    return processIndicator;
+  };
+  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(UploadItem_messages.default.uploadingFailed);
+  const getMultipleErrors = errors => {
+    if (!errors?.length) {
+      return null;
+    }
+    if (errors?.length === 1) {
+      return getErrorMessage(errors[0]);
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("ul", {
+      className: "np-upload-input-errors m-b-0",
+      children: errors.map((error, index) => {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/jsxRuntime.jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
+    });
+  };
+  const getDescription = () => {
+    if (error || errors?.length || status$1 === status.Status.FAILED) {
+      return /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        type: typography.Typography.BODY_DEFAULT_BOLD,
+        className: "np-upload-input__text text-negative",
+        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
+      });
+    }
+    switch (status$1) {
+      case status.Status.PENDING:
+        return /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          type: typography.Typography.BODY_DEFAULT,
+          className: "np-upload-input__text",
+          children: formatMessage(UploadItem_messages.default.uploading)
+        });
+      case status.Status.PROCESSING:
+        return /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          className: "np-upload-input__text",
+          children: formatMessage(UploadItem_messages.default.deleting)
+        });
+      case status.Status.SUCCEEDED:
+      case status.Status.DONE:
+      default:
+        return /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          type: typography.Typography.BODY_DEFAULT_BOLD,
+          className: "np-upload-input__text",
+          children: formatMessage(UploadItem_messages.default.uploaded)
+        });
+    }
+  };
+  const getTitle = () => {
+    return filename || formatMessage(UploadItem_messages.default.uploadedFile);
+  };
+  const onDownloadFile = event => {
+    if (onDownload) {
+      event.preventDefault();
+      onDownload(file);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: clsx.clsx('np-upload-input__item', {
+      'is-interactive': isSucceeded && url
+    }),
+    "data-testid": `${file.id}-${exports.TEST_IDS.uploadItem}`,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(UploadItemLink.UploadItemLink, {
+      ref: linkRef,
+      url: isSucceeded ? url : undefined,
+      singleFileUpload: singleFileUpload,
+      "data-testid": `${file.id}-${exports.TEST_IDS.link}`,
+      onDownload: onDownloadFile,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-upload-input__icon",
+        children: getIcon()
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "np-upload-input__item-content",
+        "data-testid": `${file.id}-${exports.TEST_IDS.mediaBody}`,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          type: typography.Typography.BODY_LARGE,
+          className: "np-upload-input__title text-word-break",
+          children: getTitle()
+        }), getDescription()]
+      })]
+    }), canDelete && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-upload-input__item-action",
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        ref: buttonRef,
+        "aria-label": formatMessage(UploadItem_messages.default.removeFile, {
+          filename
+        }),
+        className: "np-upload-input__item-button",
+        type: "button",
+        tabIndex: 0,
+        "data-testid": `${file.id}-${exports.TEST_IDS.action}`,
+        onClick: () => onDelete()
+        // @ts-expect-error: handleFocus is not a standard FocusEventHandler, but required for parent logic
+        ,
+        onFocus: handleFocus,
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
+          size: 16
+        })
+      })
+    })]
+  });
+});
+UploadItem.displayName = 'UploadItem';
+
+exports.default = UploadItem;
+//# sourceMappingURL=UploadItem.js.map