npm - @transferwise/components - Versions diffs - 46.63.0 → 46.65.0 - Mend

@transferwise/components 46.63.0 → 46.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/build/uploadInput/UploadInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
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 /\n files?: readonly UploadedFile[];\n\n /\n The key of the file in the returned FormData object (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 a allowed size limit are uploaded\n /\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' \| 'multiple' \| 'fileTypes' \| 'sizeLimit' \| 'description' \| 'id' \| 'uploadButtonTitle'\n> &\n Pick<UploadItemProps, 'onDownload'> &\n CommonProps;\n\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\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\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile \| null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\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 addFileToList(recentUploadedFile: UploadedFile) {\n function addToList(listToAddTo: readonly UploadedFile[]) {\n return [...listToAddTo, recentUploadedFile];\n }\n\n setUploadedFiles(addToList);\n uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n }\n\n const removeFileFromList = (file: UploadedFile) => {\n function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n return listToFilterFrom.filter(\n (fileInList) => file !== fileInList && file.id !== fileInList.id,\n );\n }\n\n setUploadedFiles(filterOutFrom);\n uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n };\n\n const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n listToUpdate.map((fileInList) => {\n return fileInList === file \|\| fileInList.id === file.id\n ? { ...file, ...updates }\n : fileInList;\n });\n\n setUploadedFiles(updateListItem);\n uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n };\n\n const removeFile = (file: UploadedFile) => {\n const { id, status } = file;\n\n if (status === Status.FAILED) {\n // If removing a failed upload, we're just updating the view\n removeFileFromList(file);\n } else if (onDeleteFile && id) {\n // Set status to PROCESSING\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n // Notify host app about deletion\n onDeleteFile(id)\n .then(() => removeFileFromList(file))\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 const id = generateFileId(file);\n const failedUpload = {\n id,\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 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 // One or more files selected, create entries for them\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n const formData = new FormData();\n\n if (file) {\n const { name } = file;\n const id = generateFileId(file);\n\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n // Check if file type is valid\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n // Check if the filesize is valid\n // Convert to rough bytes\n if (!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 formData.append(fileInputName, file);\n const pendingFile = {\n id,\n filename: name,\n status: Status.PENDING,\n };\n\n addFileToList(pendingFile);\n\n // Start uploading the file\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n // Replace the temporary id with the final one received from the API, and also set any errors\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 // Only upload a single file\n break;\n }\n }\n }\n };\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n {uploadedFiles.map((file) => (\n <UploadItem\n key={file.id}\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 ? () => removeFile(file)\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n />\n ))}\n {(multiple \|\| (!multiple && !uploadedFiles.length)) && (\n <UploadButton\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() \|\| disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n onChange={addFiles}\n />\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 onClick={() => {\n if (markedFileForDelete) {\n removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText \|\| formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\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","mounted","setMounted","formatMessage","useIntl","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","useRef","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","removeFile","status","FAILED","error","undefined","then","catch","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","append","pendingFile","url","useEffect","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}
1	+ {"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState, useLayoutEffect } 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 /\n files?: readonly UploadedFile[];\n\n /\n The key of the file in the returned FormData object (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 a allowed size limit are uploaded\n /\n sizeLimitErrorMessage?: string;\n} & Pick<\n UploadButtonProps,\n 'disabled' \| 'multiple' \| 'fileTypes' \| 'sizeLimit' \| 'description' \| 'id' \| 'uploadButtonTitle'\n> &\n Pick<UploadItemProps, 'onDownload'> &\n CommonProps;\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nfunction generateFileId(file: File) {\n const { name, size } = file;\n const uploadTimeStamp = new Date().getTime();\n return `${name}_${size}_${uploadTimeStamp}`;\n}\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\n const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile \| null>(null);\n const [fileToRemoveIndex, setFileToRemoveIndex] = useState<number \| null>(null);\n const [mounted, setMounted] = useState(false);\n const { formatMessage } = useIntl();\n const itemRefs = useRef<(HTMLDivElement \| UploadItemRef \| null)[]>([]);\n const uploadInputRef = useRef<HTMLInputElement \| null>(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 addFileToList(recentUploadedFile: UploadedFile) {\n function addToList(listToAddTo: readonly UploadedFile[]) {\n return [...listToAddTo, recentUploadedFile];\n }\n\n setUploadedFiles(addToList);\n uploadedFilesListReference.current = addToList(uploadedFilesListReference.current);\n }\n\n const removeFileFromList = (file: UploadedFile) => {\n function filterOutFrom(listToFilterFrom: readonly UploadedFile[]) {\n return listToFilterFrom.filter(\n (fileInList) => file !== fileInList && file.id !== fileInList.id,\n );\n }\n\n setUploadedFiles(filterOutFrom);\n uploadedFilesListReference.current = filterOutFrom(uploadedFilesListReference.current);\n };\n\n const modifyFileInList = (file: UploadedFile, updates: Partial<UploadedFile>) => {\n const updateListItem = (listToUpdate: readonly UploadedFile[]) =>\n listToUpdate.map((fileInList) => {\n return fileInList === file \|\| fileInList.id === file.id\n ? { ...file, ...updates }\n : fileInList;\n });\n\n setUploadedFiles(updateListItem);\n uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);\n };\n\n const [fileToRemove, setFileToRemove] = useState<UploadedFile \| null>(null);\n\n const removeFile = (file: UploadedFile) => {\n const { id, status } = file;\n const index = uploadedFiles.findIndex((f) => f.id === file.id);\n setFileToRemoveIndex(index);\n\n if (status === Status.FAILED) {\n removeFileFromList(file);\n setFileToRemove(file);\n } else if (onDeleteFile && id) {\n modifyFileInList(file, { status: Status.PROCESSING, error: undefined });\n\n onDeleteFile(id)\n .then(() => {\n removeFileFromList(file);\n })\n .catch((error) => {\n modifyFileInList(file, { error: error as UploadError });\n })\n .finally(() => {\n setFileToRemove(file);\n });\n }\n };\n\n function handleFileUploadFailure(file: File, failureMessage: string) {\n const { name } = file;\n const id = generateFileId(file);\n const failedUpload = {\n id,\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 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 // One or more files selected, create entries for them\n const addFiles = (selectedFiles: FileList) => {\n for (let i = 0; i < selectedFiles.length; i += 1) {\n const file = selectedFiles.item(i);\n\n // Returning a FormData[] array instead of FileList so we can filter out incorrect files\n const formData = new FormData();\n\n if (file) {\n const { name } = file;\n const id = generateFileId(file);\n\n const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');\n\n // Check if file type is valid\n if (!isTypeValid(file, allowedFileTypes)) {\n handleFileUploadFailure(file, formatMessage(MESSAGES.fileTypeNotSupported));\n continue;\n }\n\n // Check if the filesize is valid\n // Convert to rough bytes\n if (!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 // Check if the file is already in the list\n const existingFile = uploadedFiles.find((f) => f.filename === file.name);\n if (existingFile) {\n // Remove the file from the list before adding it again\n removeFileFromList(existingFile);\n }\n\n // Add the file to the list\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 // Start uploading the file\n onUploadFile(formData)\n .then(({ id, url, error }: UploadResponse) => {\n // Replace the temporary id with the final one received from the API, and also set any errors\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 // Only upload a single file\n break;\n }\n }\n }\n };\n\n useLayoutEffect(() => {\n if (fileToRemove && fileToRemoveIndex !== null) {\n requestAnimationFrame(() => {\n const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);\n if (itemRefs.current[nextFocusIndex]) {\n itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem\n } else {\n // If there's only one item left, focus the UploadButton\n uploadInputRef.current?.focus();\n }\n });\n setFileToRemove(null); // Reset the state\n setFileToRemoveIndex(null); // Reset the index\n }\n }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (onFilesChange && mounted) {\n onFilesChange([...uploadedFiles]);\n }\n }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <>\n <div\n role=\"group\"\n className={clsx('np-upload-input', className, { disabled })}\n {...inputAttributes}\n >\n {uploadedFiles.map((file, index) => (\n <UploadItem\n key={file.id}\n ref={(el: UploadItemRef \| null) => {\n itemRefs.current[index] = el;\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 ? () => removeFile(file)\n : () => setMarkedFileForDelete(file)\n }\n onDownload={onDownload}\n />\n ))}\n {(multiple \|\| (!multiple && !uploadedFiles.length)) && (\n <UploadButton\n ref={uploadInputRef}\n id={id}\n uploadButtonTitle={uploadButtonTitle}\n disabled={areMaximumFilesUploadedAlready() \|\| disabled}\n multiple={multiple}\n fileTypes={fileTypes}\n sizeLimit={sizeLimit}\n description={description}\n maxFiles={maxFiles}\n onChange={addFiles}\n />\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 onClick={() => {\n if (markedFileForDelete) {\n removeFile(markedFileForDelete);\n }\n setMarkedFileForDelete(null);\n }}\n >\n {deleteConfirm?.confirmText \|\| formatMessage(MESSAGES.deleteModalConfirmButtonText)}\n </Button>\n </>\n }\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","fileToRemoveIndex","setFileToRemoveIndex","mounted","setMounted","formatMessage","useIntl","itemRefs","useRef","uploadInputRef","PROGRESS_STATUSES","Set","Status","PENDING","PROCESSING","uploadedFiles","setUploadedFiles","length","uploadedFilesListReference","addFileToList","recentUploadedFile","addToList","listToAddTo","current","removeFileFromList","filterOutFrom","listToFilterFrom","filter","fileInList","modifyFileInList","updates","updateListItem","listToUpdate","map","fileToRemove","setFileToRemove","removeFile","status","index","findIndex","f","FAILED","error","undefined","then","catch","finally","handleFileUploadFailure","failureMessage","failedUpload","filename","getNumberOfFilesUploaded","uploadInitiatedStatus","SUCCEEDED","validFiles","has","areMaximumFilesUploadedAlready","numberOfValidFiles","addFiles","selectedFiles","i","item","formData","FormData","allowedFileTypes","join","isTypeValid","MESSAGES","fileTypeNotSupported","isSizeValid","fileIsTooLarge","maximumFilesAlreadyUploaded","maxFilesAllowed","existingFile","find","append","pendingFile","url","useLayoutEffect","requestAnimationFrame","nextFocusIndex","Math","min","focus","useEffect","_jsxs","_Fragment","children","role","clsx","_jsx","UploadItem","ref","el","singleFileUpload","canDelete","onDelete","UploadButton","onChange","Modal","title","deleteModalTitle","body","deleteModalBody","open","footer","Button","block","onClick","cancelText","deleteModalCancelButtonText","priority","Priority","SECONDARY","type","ControlType","NEGATIVE","confirmText","deleteModalConfirmButtonText","onClose"],"mappings":"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"}

package/build/uploadInput/uploadButton/UploadButton.js CHANGED Viewed

@@ -22,7 +22,7 @@ const onDragOver = event => {
   event.preventDefault();
 };
 const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
-const UploadButton = ({
+const UploadButton = /*#__PURE__*/React.forwardRef(({
   disabled,
   multiple,
   description,
@@ -32,11 +32,17 @@ const UploadButton = ({
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
   uploadButtonTitle
-}) => {
+}, ref) => {
   const {
     formatMessage
   } = reactIntl.useIntl();
-  const inputReference = React.useRef(null);
+  const inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => {
+    if (!inputRef.current) {
+      throw new Error('inputRef.current is null');
+    }
+    return inputRef.current;
+  }, []);
   const [isDropping, setIsDropping] = React.useState(false);
   const dragCounter = React.useRef(0);
   const reset = () => {
@@ -70,8 +76,8 @@ const UploadButton = ({
     } = event.target;
     if (files) {
       onChange(files);
-      if (inputReference.current) {
-        inputReference.current.value = '';
+      if (inputRef.current) {
+        inputRef.current.value = '';
       }
     }
   };
@@ -133,7 +139,7 @@ const UploadButton = ({
       onDragOver
     }),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-      ref: inputReference,
+      ref: inputRef,
       id: id,
       type: "file",
       ...getAcceptedTypes(),
@@ -176,7 +182,8 @@ const UploadButton = ({
       })]
     })]
   });
-};
+});
+UploadButton.displayName = 'UploadButton';
 exports.default = UploadButton;
 //# sourceMappingURL=UploadButton.js.map

package/build/uploadInput/uploadButton/UploadButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadButton.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ChangeEvent, DragEvent, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string \| readonly string[] \| readonly FileType[];\nexport type UploadButtonProps = {\n /*\n Disable the upload button if your app is not yet ready to accept uploads\n /\n disabled?: boolean;\n\n /\n Allow multiple file uploads\n /\n multiple?: boolean;\n\n /\n List of allowed filetypes, eg. '' \| '.zip,application/zip' \| ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n /\n fileTypes?: AllowedFileTypes;\n\n /*\n Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n /\n sizeLimit?: number;\n\n /\n Description for the upload button\n /\n description?: string \| undefined;\n\n /\n Maximum number of files allowed, if provided, shows error below file item\n /\n maxFiles?: number;\n\n /\n Called when some files were successfully selected\n \n @param files\n /\n onChange: (files: FileList) => void;\n\n /\n Id for the upload input\n /\n id?: string;\n\n /\n Title for the upload button\n /\n uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n uploadInput = 'uploadInput',\n mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = ({\n disabled,\n multiple,\n description,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n maxFiles,\n onChange,\n id = DEFAULT_FILE_INPUT_ID,\n uploadButtonTitle,\n}: UploadButtonProps) => {\n const { formatMessage } = useIntl();\n const inputReference = useRef<HTMLInputElement>(null);\n\n const [isDropping, setIsDropping] = useState(false);\n\n const dragCounter = useRef(0);\n\n const reset = (): void => {\n dragCounter.current = 0;\n setIsDropping(false);\n };\n\n const onDragLeave = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDropping(false);\n }\n };\n\n const onDragEnter = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current += 1;\n if (dragCounter.current === 1) {\n setIsDropping(true);\n }\n };\n\n const onDrop = (event: DragEvent): void => {\n event.preventDefault();\n reset();\n if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n onChange(event.dataTransfer.files);\n }\n };\n\n const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n const { files } = event.target;\n\n if (files) {\n onChange(files);\n\n if (inputReference.current) {\n inputReference.current.value = '';\n }\n }\n };\n\n const getFileTypesDescription = (): string => {\n if (fileTypes === '') {\n return fileTypes;\n }\n\n return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n };\n\n function getDescription() {\n if (description) {\n return description;\n }\n\n const fileTypesDescription = getFileTypesDescription();\n\n const derivedFileDescription =\n fileTypesDescription === '' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n return formatMessage(MESSAGES.instructions, {\n fileTypes: derivedFileDescription,\n size: Math.round(sizeLimit / 1000),\n });\n }\n\n function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n const areAllFilesAllowed = getFileTypesDescription() === '';\n\n if (areAllFilesAllowed) {\n return {}; // file input by default allows all files\n }\n\n if (Array.isArray(fileTypes)) {\n return { accept: fileTypes.join(',') };\n }\n\n return { accept: fileTypes as string };\n }\n\n function renderDescription() {\n return (\n <Body className={clsx({ 'text-primary': !disabled })}>\n {getDescription()}\n {maxFiles && (\n <>\n <br />\n {`Maximum ${maxFiles} files.`}\n </>\n )}\n </Body>\n );\n }\n\n function renderButtonTitle() {\n if (uploadButtonTitle) {\n return uploadButtonTitle;\n }\n return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n }\n\n return (\n <div\n className={clsx('np-upload-button-container', 'droppable', {\n 'droppable-dropping': isDropping,\n })}\n {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n >\n <input\n ref={inputReference}\n id={id}\n type=\"file\"\n {...getAcceptedTypes()}\n {...(multiple && { multiple: true })}\n className=\"tw-droppable-input\"\n disabled={disabled}\n name=\"file-upload\"\n data-testid={TEST_IDS.uploadInput}\n onChange={filesSelected}\n />\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control /}\n <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>\n <div className=\"media\">\n <div className=\"np-upload-icon media-middle media-left\">\n <UploadIcon size={24} className=\"text-link\" />\n </div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE_BOLD} className=\"d-block\">\n {renderButtonTitle()}\n </Body>\n {renderDescription()}\n </div>\n </div>\n </label>\n\n {/ Drop area overlay */}\n {isDropping && (\n <div\n className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}\n >\n <PlusIcon className=\"m-x-1\" size={24} />\n <div>{formatMessage(MESSAGES.dropFile)}</div>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","disabled","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","formatMessage","useIntl","inputReference","useRef","isDropping","setIsDropping","useState","dragCounter","reset","current","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","clsx","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","ref","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile"],"mappings":"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"}
1	+ {"version":3,"file":"UploadButton.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n ChangeEvent,\n DragEvent,\n useRef,\n useState,\n forwardRef,\n useImperativeHandle,\n ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string \| readonly string[] \| readonly FileType[];\nexport type UploadButtonProps = {\n /*\n Disable the upload button if your app is not yet ready to accept uploads\n /\n disabled?: boolean;\n\n /\n Allow multiple file uploads\n /\n multiple?: boolean;\n\n /\n List of allowed filetypes, eg. '' \| '.zip,application/zip' \| ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n /\n fileTypes?: AllowedFileTypes;\n\n /*\n Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n /\n sizeLimit?: number;\n\n /\n Description for the upload button\n /\n description?: string \| undefined;\n\n /\n Maximum number of files allowed, if provided, shows error below file item\n /\n maxFiles?: number;\n\n /\n Called when some files were successfully selected\n \n @param files\n /\n onChange: (files: FileList) => void;\n\n /\n Id for the upload input\n /\n id?: string;\n\n /\n Title for the upload button\n /\n uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n uploadInput = 'uploadInput',\n mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement \| null, UploadButtonProps>(\n (\n {\n disabled,\n multiple,\n description,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n maxFiles,\n onChange,\n id = DEFAULT_FILE_INPUT_ID,\n uploadButtonTitle,\n },\n ref: ForwardedRef<HTMLInputElement \| null>,\n ) => {\n const { formatMessage } = useIntl();\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n useImperativeHandle(ref, () => {\n if (!inputRef.current) {\n throw new Error('inputRef.current is null');\n }\n return inputRef.current;\n }, []);\n\n const [isDropping, setIsDropping] = useState(false);\n\n const dragCounter = useRef(0);\n\n const reset = (): void => {\n dragCounter.current = 0;\n setIsDropping(false);\n };\n\n const onDragLeave = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDropping(false);\n }\n };\n\n const onDragEnter = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current += 1;\n if (dragCounter.current === 1) {\n setIsDropping(true);\n }\n };\n\n const onDrop = (event: DragEvent): void => {\n event.preventDefault();\n reset();\n if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n onChange(event.dataTransfer.files);\n }\n };\n\n const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n const { files } = event.target;\n\n if (files) {\n onChange(files);\n\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n }\n };\n\n const getFileTypesDescription = (): string => {\n if (fileTypes === '') {\n return fileTypes;\n }\n\n return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n };\n\n function getDescription() {\n if (description) {\n return description;\n }\n\n const fileTypesDescription = getFileTypesDescription();\n\n const derivedFileDescription =\n fileTypesDescription === '' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n return formatMessage(MESSAGES.instructions, {\n fileTypes: derivedFileDescription,\n size: Math.round(sizeLimit / 1000),\n });\n }\n\n function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n const areAllFilesAllowed = getFileTypesDescription() === '';\n\n if (areAllFilesAllowed) {\n return {}; // file input by default allows all files\n }\n\n if (Array.isArray(fileTypes)) {\n return { accept: fileTypes.join(',') };\n }\n\n return { accept: fileTypes as string };\n }\n\n function renderDescription() {\n return (\n <Body className={clsx({ 'text-primary': !disabled })}>\n {getDescription()}\n {maxFiles && (\n <>\n <br />\n {`Maximum ${maxFiles} files.`}\n </>\n )}\n </Body>\n );\n }\n\n function renderButtonTitle() {\n if (uploadButtonTitle) {\n return uploadButtonTitle;\n }\n return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n }\n\n return (\n <div\n className={clsx('np-upload-button-container', 'droppable', {\n 'droppable-dropping': isDropping,\n })}\n {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n >\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n {...getAcceptedTypes()}\n {...(multiple && { multiple: true })}\n className=\"tw-droppable-input\"\n disabled={disabled}\n name=\"file-upload\"\n data-testid={TEST_IDS.uploadInput}\n onChange={filesSelected}\n />\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control /}\n <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>\n <div className=\"media\">\n <div className=\"np-upload-icon media-middle media-left\">\n <UploadIcon size={24} className=\"text-link\" />\n </div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE_BOLD} className=\"d-block\">\n {renderButtonTitle()}\n </Body>\n {renderDescription()}\n </div>\n </div>\n </label>\n\n {/ Drop area overlay */}\n {isDropping && (\n <div\n className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}\n >\n <PlusIcon className=\"m-x-1\" size={24} />\n <div>{formatMessage(MESSAGES.dropFile)}</div>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","clsx","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile","displayName"],"mappings":";;;;;;;;;;;;;;;AAsEYA,0BAGX;AAHD,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC3BA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACzB,CAAC,EAHWA,gBAAQ,KAARA,gBAAQ,GAGnB,EAAA,CAAA,CAAA,CAAA;AAED,MAAMC,UAAU,GAAIC,KAAgB,IAAU;EAC5CA,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,CAAC,CAAA;AAED,MAAMC,qBAAqB,GAAG,kBAAkB,CAAA;AAChD,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;EACEC,QAAQ;EACRC,QAAQ;EACRC,WAAW;AACXC,EAAAA,SAAS,GAAGC,uBAAc;AAC1BC,EAAAA,SAAS,GAAGC,2BAAkB;EAC9BC,QAAQ;EACRC,QAAQ;AACRC,EAAAA,EAAE,GAAGZ,qBAAqB;AAC1Ba,EAAAA,iBAAAA;AAAiB,CAClB,EACDC,GAA0C,KACxC;EACF,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,QAAQ,GAAGC,YAAM,CAA0B,IAAI,CAAC,CAAA;EAEtDC,yBAAmB,CAACL,GAAG,EAAE,MAAK;AAC5B,IAAA,IAAI,CAACG,QAAQ,CAACG,OAAO,EAAE;AACrB,MAAA,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC,CAAA;AAC7C,KAAA;IACA,OAAOJ,QAAQ,CAACG,OAAO,CAAA;GACxB,EAAE,EAAE,CAAC,CAAA;EAEN,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAEnD,EAAA,MAAMC,WAAW,GAAGP,YAAM,CAAC,CAAC,CAAC,CAAA;EAE7B,MAAMQ,KAAK,GAAGA,MAAW;IACvBD,WAAW,CAACL,OAAO,GAAG,CAAC,CAAA;IACvBG,aAAa,CAAC,KAAK,CAAC,CAAA;GACrB,CAAA;EAED,MAAMI,WAAW,GAAI7B,KAAgB,IAAU;IAC7CA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB0B,WAAW,CAACL,OAAO,IAAI,CAAC,CAAA;AACxB,IAAA,IAAIK,WAAW,CAACL,OAAO,KAAK,CAAC,EAAE;MAC7BG,aAAa,CAAC,KAAK,CAAC,CAAA;AACtB,KAAA;GACD,CAAA;EAED,MAAMK,WAAW,GAAI9B,KAAgB,IAAU;IAC7CA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB0B,WAAW,CAACL,OAAO,IAAI,CAAC,CAAA;AACxB,IAAA,IAAIK,WAAW,CAACL,OAAO,KAAK,CAAC,EAAE;MAC7BG,aAAa,CAAC,IAAI,CAAC,CAAA;AACrB,KAAA;GACD,CAAA;EAED,MAAMM,MAAM,GAAI/B,KAAgB,IAAU;IACxCA,KAAK,CAACC,cAAc,EAAE,CAAA;AACtB2B,IAAAA,KAAK,EAAE,CAAA;AACP,IAAA,IAAI5B,KAAK,CAACgC,YAAY,IAAIhC,KAAK,CAACgC,YAAY,CAACC,KAAK,IAAIjC,KAAK,CAACgC,YAAY,CAACC,KAAK,CAAC,CAAC,CAAC,EAAE;AACjFpB,MAAAA,QAAQ,CAACb,KAAK,CAACgC,YAAY,CAACC,KAAK,CAAC,CAAA;AACpC,KAAA;GACD,CAAA;EAED,MAAMC,aAAa,GAAIlC,KAAoC,IAAU;IACnE,MAAM;AAAEiC,MAAAA,KAAAA;KAAO,GAAGjC,KAAK,CAACmC,MAAM,CAAA;AAE9B,IAAA,IAAIF,KAAK,EAAE;MACTpB,QAAQ,CAACoB,KAAK,CAAC,CAAA;MAEf,IAAId,QAAQ,CAACG,OAAO,EAAE;AACpBH,QAAAA,QAAQ,CAACG,OAAO,CAACc,KAAK,GAAG,EAAE,CAAA;AAC7B,OAAA;AACF,KAAA;GACD,CAAA;EAED,MAAMC,uBAAuB,GAAGA,MAAa;IAC3C,IAAI7B,SAAS,KAAK,GAAG,EAAE;AACrB,MAAA,OAAOA,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,OAAO8B,mBAAmB,CAACC,KAAK,CAACC,OAAO,CAAChC,SAAS,CAAC,GAAGA,SAAS,GAAG,CAACA,SAAS,CAAC,CAAC,CAACiC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC1F,CAAA;EAED,SAASC,cAAcA,GAAA;AACrB,IAAA,IAAInC,WAAW,EAAE;AACf,MAAA,OAAOA,WAAW,CAAA;AACpB,KAAA;AAEA,IAAA,MAAMoC,oBAAoB,GAAGN,uBAAuB,EAAE,CAAA;AAEtD,IAAA,MAAMO,sBAAsB,GAC1BD,oBAAoB,KAAK,GAAG,GAAG1B,aAAa,CAAC4B,qBAAQ,CAACC,YAAY,CAAC,GAAGH,oBAAoB,CAAA;AAE5F,IAAA,OAAO1B,aAAa,CAAC4B,qBAAQ,CAACE,YAAY,EAAE;AAC1CvC,MAAAA,SAAS,EAAEoC,sBAAsB;AACjCI,MAAAA,IAAI,EAAEC,IAAI,CAACC,KAAK,CAACxC,SAAS,GAAG,IAAI,CAAA;AAClC,KAAA,CAAC,CAAA;AACJ,GAAA;EAEA,SAASyC,gBAAgBA,GAAA;AACvB,IAAA,MAAMC,kBAAkB,GAAGf,uBAAuB,EAAE,KAAK,GAAG,CAAA;AAE5D,IAAA,IAAIe,kBAAkB,EAAE;MACtB,OAAO,EAAE,CAAC;AACZ,KAAA;AAEA,IAAA,IAAIb,KAAK,CAACC,OAAO,CAAChC,SAAS,CAAC,EAAE;MAC5B,OAAO;AAAE6C,QAAAA,MAAM,EAAE7C,SAAS,CAACiC,IAAI,CAAC,GAAG,CAAA;OAAG,CAAA;AACxC,KAAA;IAEA,OAAO;AAAEY,MAAAA,MAAM,EAAE7C,SAAAA;KAAqB,CAAA;AACxC,GAAA;EAEA,SAAS8C,iBAAiBA,GAAA;IACxB,oBACEC,eAAA,CAACC,IAAI,EAAA;MAACC,SAAS,EAAEC,SAAI,CAAC;AAAE,QAAA,cAAc,EAAE,CAACrD,QAAAA;AAAU,OAAA,CAAE;MAAAsD,QAAA,EAAA,CAClDjB,cAAc,EAAE,EAChB9B,QAAQ,iBACP2C,eAAA,CAAAK,mBAAA,EAAA;AAAAD,QAAAA,QAAA,gBACEE,cAAA,CAAA,IAAA,EAAA,EACA,CAAA,EAAC,CAAA,QAAA,EAAWjD,QAAQ,CAAS,OAAA,CAAA,CAAA;AAAA,OAC/B,CACD,CAAA;AAAA,KACG,CAAC,CAAA;AAEX,GAAA;EAEA,SAASkD,iBAAiBA,GAAA;AACxB,IAAA,IAAI/C,iBAAiB,EAAE;AACrB,MAAA,OAAOA,iBAAiB,CAAA;AAC1B,KAAA;IACA,OAAOE,aAAa,CAACX,QAAQ,GAAGuC,qBAAQ,CAACkB,WAAW,GAAGlB,qBAAQ,CAACmB,UAAU,CAAC,CAAA;AAC7E,GAAA;AAEA,EAAA,oBACET,eAAA,CAAA,KAAA,EAAA;AACEE,IAAAA,SAAS,EAAEC,SAAI,CAAC,4BAA4B,EAAE,WAAW,EAAE;AACzD,MAAA,oBAAoB,EAAElC,UAAAA;AACvB,KAAA,CAAE;IAAA,IACE,CAACnB,QAAQ,IAAI;MAAEyB,WAAW;MAAED,WAAW;MAAEE,MAAM;AAAEhC,MAAAA,UAAAA;KAAY,CAAA;AAAA4D,IAAAA,QAAA,gBAElEE,cAAA,CAAA,OAAA,EAAA;AACE7C,MAAAA,GAAG,EAAEG,QAAS;AACdL,MAAAA,EAAE,EAAEA,EAAG;AACPmD,MAAAA,IAAI,EAAC,MAAM;MAAA,GACPd,gBAAgB,EAAE;AAAA,MAAA,IACjB7C,QAAQ,IAAI;AAAEA,QAAAA,QAAQ,EAAE,IAAA;OAAM,CAAA;AACnCmD,MAAAA,SAAS,EAAC,oBAAoB;AAC9BpD,MAAAA,QAAQ,EAAEA,QAAS;AACnB6D,MAAAA,IAAI,EAAC,aAAa;MAClB,aAAapE,EAAAA,gBAAQ,CAACqE,WAAY;AAClCtD,MAAAA,QAAQ,EAAEqB,aAAAA;KAEZ,CAAA,eACA2B,cAAA,CAAA,OAAA,EAAA;AAAOO,MAAAA,OAAO,EAAEtD,EAAG;AAAC2C,MAAAA,SAAS,EAAEC,SAAI,CAAC,KAAK,EAAE,kBAAkB,CAAE;AAAAC,MAAAA,QAAA,eAC7DJ,eAAA,CAAA,KAAA,EAAA;AAAKE,QAAAA,SAAS,EAAC,OAAO;AAAAE,QAAAA,QAAA,gBACpBE,cAAA,CAAA,KAAA,EAAA;AAAKJ,UAAAA,SAAS,EAAC,wCAAwC;UAAAE,QAAA,eACrDE,cAAA,CAACQ,YAAU,EAAA;AAACrB,YAAAA,IAAI,EAAE,EAAG;AAACS,YAAAA,SAAS,EAAC,WAAA;WAClC,CAAA;SAAK,CACL,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKE,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAa3D,EAAAA,gBAAQ,CAACwE,SAAU;UAAAX,QAAA,EAAA,cACvEE,cAAA,CAACL,IAAI,EAAA;YAACS,IAAI,EAAEM,qBAAU,CAACC,eAAgB;AAACf,YAAAA,SAAS,EAAC,SAAS;YAAAE,QAAA,EACxDG,iBAAiB;AAAE,WAChB,CACN,EAACR,iBAAiB,EAAE,CAAA;AAAA,SACjB,CACP,CAAA;OAAK,CAAA;AACP,KAAO,CAEP,EACC9B,UAAU,iBACT+B,eAAA,CAAA,KAAA,EAAA;MACEE,SAAS,EAAEC,SAAI,CAAC,gBAAgB,EAAE,yBAAyB,EAAE,wBAAwB,CAAE;MAAAC,QAAA,EAAA,cAEvFE,cAAA,CAACY,gBAAQ,EAAA;AAAChB,QAAAA,SAAS,EAAC,OAAO;AAACT,QAAAA,IAAI,EAAE,EAAA;OAClC,CAAA,eAAAa,cAAA,CAAA,KAAA,EAAA;AAAAF,QAAAA,QAAA,EAAM1C,aAAa,CAAC4B,qBAAQ,CAAC6B,QAAQ,CAAA;AAAC,OAAM,CAC9C,CAAA;AAAA,KAAK,CACN,CAAA;AAAA,GACE,CAAC,CAAA;AAEV,CAAC,EACF;AAEDvE,YAAY,CAACwE,WAAW,GAAG,cAAc;;;;"}

package/build/uploadInput/uploadButton/UploadButton.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Upload, PlusCircle } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { useRef, useState } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Body from '../../body/Body.mjs';
 import MESSAGES from './UploadButton.messages.mjs';
@@ -18,7 +18,7 @@ const onDragOver = event => {
   event.preventDefault();
 };
 const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
-const UploadButton = ({
+const UploadButton = /*#__PURE__*/forwardRef(({
   disabled,
   multiple,
   description,
@@ -28,11 +28,17 @@ const UploadButton = ({
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
   uploadButtonTitle
-}) => {
+}, ref) => {
   const {
     formatMessage
   } = useIntl();
-  const inputReference = useRef(null);
+  const inputRef = useRef(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 = () => {
@@ -66,8 +72,8 @@ const UploadButton = ({
     } = event.target;
     if (files) {
       onChange(files);
-      if (inputReference.current) {
-        inputReference.current.value = '';
+      if (inputRef.current) {
+        inputRef.current.value = '';
       }
     }
   };
@@ -129,7 +135,7 @@ const UploadButton = ({
       onDragOver
     }),
     children: [/*#__PURE__*/jsx("input", {
-      ref: inputReference,
+      ref: inputRef,
       id: id,
       type: "file",
       ...getAcceptedTypes(),
@@ -172,7 +178,8 @@ const UploadButton = ({
       })]
     })]
   });
-};
+});
+UploadButton.displayName = 'UploadButton';
 export { TEST_IDS, UploadButton as default };
 //# sourceMappingURL=UploadButton.mjs.map

package/build/uploadInput/uploadButton/UploadButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadButton.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ChangeEvent, DragEvent, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string \| readonly string[] \| readonly FileType[];\nexport type UploadButtonProps = {\n /*\n Disable the upload button if your app is not yet ready to accept uploads\n /\n disabled?: boolean;\n\n /\n Allow multiple file uploads\n /\n multiple?: boolean;\n\n /\n List of allowed filetypes, eg. '' \| '.zip,application/zip' \| ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n /\n fileTypes?: AllowedFileTypes;\n\n /*\n Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n /\n sizeLimit?: number;\n\n /\n Description for the upload button\n /\n description?: string \| undefined;\n\n /\n Maximum number of files allowed, if provided, shows error below file item\n /\n maxFiles?: number;\n\n /\n Called when some files were successfully selected\n \n @param files\n /\n onChange: (files: FileList) => void;\n\n /\n Id for the upload input\n /\n id?: string;\n\n /\n Title for the upload button\n /\n uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n uploadInput = 'uploadInput',\n mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = ({\n disabled,\n multiple,\n description,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n maxFiles,\n onChange,\n id = DEFAULT_FILE_INPUT_ID,\n uploadButtonTitle,\n}: UploadButtonProps) => {\n const { formatMessage } = useIntl();\n const inputReference = useRef<HTMLInputElement>(null);\n\n const [isDropping, setIsDropping] = useState(false);\n\n const dragCounter = useRef(0);\n\n const reset = (): void => {\n dragCounter.current = 0;\n setIsDropping(false);\n };\n\n const onDragLeave = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDropping(false);\n }\n };\n\n const onDragEnter = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current += 1;\n if (dragCounter.current === 1) {\n setIsDropping(true);\n }\n };\n\n const onDrop = (event: DragEvent): void => {\n event.preventDefault();\n reset();\n if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n onChange(event.dataTransfer.files);\n }\n };\n\n const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n const { files } = event.target;\n\n if (files) {\n onChange(files);\n\n if (inputReference.current) {\n inputReference.current.value = '';\n }\n }\n };\n\n const getFileTypesDescription = (): string => {\n if (fileTypes === '') {\n return fileTypes;\n }\n\n return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n };\n\n function getDescription() {\n if (description) {\n return description;\n }\n\n const fileTypesDescription = getFileTypesDescription();\n\n const derivedFileDescription =\n fileTypesDescription === '' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n return formatMessage(MESSAGES.instructions, {\n fileTypes: derivedFileDescription,\n size: Math.round(sizeLimit / 1000),\n });\n }\n\n function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n const areAllFilesAllowed = getFileTypesDescription() === '';\n\n if (areAllFilesAllowed) {\n return {}; // file input by default allows all files\n }\n\n if (Array.isArray(fileTypes)) {\n return { accept: fileTypes.join(',') };\n }\n\n return { accept: fileTypes as string };\n }\n\n function renderDescription() {\n return (\n <Body className={clsx({ 'text-primary': !disabled })}>\n {getDescription()}\n {maxFiles && (\n <>\n <br />\n {`Maximum ${maxFiles} files.`}\n </>\n )}\n </Body>\n );\n }\n\n function renderButtonTitle() {\n if (uploadButtonTitle) {\n return uploadButtonTitle;\n }\n return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n }\n\n return (\n <div\n className={clsx('np-upload-button-container', 'droppable', {\n 'droppable-dropping': isDropping,\n })}\n {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n >\n <input\n ref={inputReference}\n id={id}\n type=\"file\"\n {...getAcceptedTypes()}\n {...(multiple && { multiple: true })}\n className=\"tw-droppable-input\"\n disabled={disabled}\n name=\"file-upload\"\n data-testid={TEST_IDS.uploadInput}\n onChange={filesSelected}\n />\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control /}\n <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>\n <div className=\"media\">\n <div className=\"np-upload-icon media-middle media-left\">\n <UploadIcon size={24} className=\"text-link\" />\n </div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE_BOLD} className=\"d-block\">\n {renderButtonTitle()}\n </Body>\n {renderDescription()}\n </div>\n </div>\n </label>\n\n {/ Drop area overlay */}\n {isDropping && (\n <div\n className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}\n >\n <PlusIcon className=\"m-x-1\" size={24} />\n <div>{formatMessage(MESSAGES.dropFile)}</div>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","disabled","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","formatMessage","useIntl","inputReference","useRef","isDropping","setIsDropping","useState","dragCounter","reset","current","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","clsx","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","ref","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile"],"mappings":"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"}
1	+ {"version":3,"file":"UploadButton.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport {\n ChangeEvent,\n DragEvent,\n useRef,\n useState,\n forwardRef,\n useImperativeHandle,\n ForwardedRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { FileType, Typography } from '../../common';\n\nimport MESSAGES from './UploadButton.messages';\nimport { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';\nimport getAllowedFileTypes from './getAllowedFileTypes';\n\ntype AllowedFileTypes = string \| readonly string[] \| readonly FileType[];\nexport type UploadButtonProps = {\n /*\n Disable the upload button if your app is not yet ready to accept uploads\n /\n disabled?: boolean;\n\n /\n Allow multiple file uploads\n /\n multiple?: boolean;\n\n /\n List of allowed filetypes, eg. '' \| '.zip,application/zip' \| ['.jpg,.jpeg,image/jpeg', '.png,image/png'] (default: image files + PDF)\n /\n fileTypes?: AllowedFileTypes;\n\n /*\n Size limit in KBs 1000 KB = 1 MB (default: 5000 KB)\n /\n sizeLimit?: number;\n\n /\n Description for the upload button\n /\n description?: string \| undefined;\n\n /\n Maximum number of files allowed, if provided, shows error below file item\n /\n maxFiles?: number;\n\n /\n Called when some files were successfully selected\n \n @param files\n /\n onChange: (files: FileList) => void;\n\n /\n Id for the upload input\n /\n id?: string;\n\n /\n Title for the upload button\n /\n uploadButtonTitle?: string;\n};\n\nexport enum TEST_IDS {\n uploadInput = 'uploadInput',\n mediaBody = 'mediaBody',\n}\n\nconst onDragOver = (event: DragEvent): void => {\n event.preventDefault();\n};\n\nconst DEFAULT_FILE_INPUT_ID = 'np-upload-button';\nconst UploadButton = forwardRef<HTMLInputElement \| null, UploadButtonProps>(\n (\n {\n disabled,\n multiple,\n description,\n fileTypes = imageFileTypes,\n sizeLimit = DEFAULT_SIZE_LIMIT,\n maxFiles,\n onChange,\n id = DEFAULT_FILE_INPUT_ID,\n uploadButtonTitle,\n },\n ref: ForwardedRef<HTMLInputElement \| null>,\n ) => {\n const { formatMessage } = useIntl();\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n useImperativeHandle(ref, () => {\n if (!inputRef.current) {\n throw new Error('inputRef.current is null');\n }\n return inputRef.current;\n }, []);\n\n const [isDropping, setIsDropping] = useState(false);\n\n const dragCounter = useRef(0);\n\n const reset = (): void => {\n dragCounter.current = 0;\n setIsDropping(false);\n };\n\n const onDragLeave = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDropping(false);\n }\n };\n\n const onDragEnter = (event: DragEvent): void => {\n event.preventDefault();\n dragCounter.current += 1;\n if (dragCounter.current === 1) {\n setIsDropping(true);\n }\n };\n\n const onDrop = (event: DragEvent): void => {\n event.preventDefault();\n reset();\n if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {\n onChange(event.dataTransfer.files);\n }\n };\n\n const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {\n const { files } = event.target;\n\n if (files) {\n onChange(files);\n\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n }\n };\n\n const getFileTypesDescription = (): string => {\n if (fileTypes === '') {\n return fileTypes;\n }\n\n return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n };\n\n function getDescription() {\n if (description) {\n return description;\n }\n\n const fileTypesDescription = getFileTypesDescription();\n\n const derivedFileDescription =\n fileTypesDescription === '' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;\n\n return formatMessage(MESSAGES.instructions, {\n fileTypes: derivedFileDescription,\n size: Math.round(sizeLimit / 1000),\n });\n }\n\n function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {\n const areAllFilesAllowed = getFileTypesDescription() === '';\n\n if (areAllFilesAllowed) {\n return {}; // file input by default allows all files\n }\n\n if (Array.isArray(fileTypes)) {\n return { accept: fileTypes.join(',') };\n }\n\n return { accept: fileTypes as string };\n }\n\n function renderDescription() {\n return (\n <Body className={clsx({ 'text-primary': !disabled })}>\n {getDescription()}\n {maxFiles && (\n <>\n <br />\n {`Maximum ${maxFiles} files.`}\n </>\n )}\n </Body>\n );\n }\n\n function renderButtonTitle() {\n if (uploadButtonTitle) {\n return uploadButtonTitle;\n }\n return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);\n }\n\n return (\n <div\n className={clsx('np-upload-button-container', 'droppable', {\n 'droppable-dropping': isDropping,\n })}\n {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n >\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n {...getAcceptedTypes()}\n {...(multiple && { multiple: true })}\n className=\"tw-droppable-input\"\n disabled={disabled}\n name=\"file-upload\"\n data-testid={TEST_IDS.uploadInput}\n onChange={filesSelected}\n />\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control /}\n <label htmlFor={id} className={clsx('btn', 'np-upload-button')}>\n <div className=\"media\">\n <div className=\"np-upload-icon media-middle media-left\">\n <UploadIcon size={24} className=\"text-link\" />\n </div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body type={Typography.BODY_LARGE_BOLD} className=\"d-block\">\n {renderButtonTitle()}\n </Body>\n {renderDescription()}\n </div>\n </div>\n </label>\n\n {/ Drop area overlay */}\n {isDropping && (\n <div\n className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}\n >\n <PlusIcon className=\"m-x-1\" size={24} />\n <div>{formatMessage(MESSAGES.dropFile)}</div>\n </div>\n )}\n </div>\n );\n },\n);\n\nUploadButton.displayName = 'UploadButton';\n\nexport default UploadButton;\n"],"names":["TEST_IDS","onDragOver","event","preventDefault","DEFAULT_FILE_INPUT_ID","UploadButton","forwardRef","disabled","multiple","description","fileTypes","imageFileTypes","sizeLimit","DEFAULT_SIZE_LIMIT","maxFiles","onChange","id","uploadButtonTitle","ref","formatMessage","useIntl","inputRef","useRef","useImperativeHandle","current","Error","isDropping","setIsDropping","useState","dragCounter","reset","onDragLeave","onDragEnter","onDrop","dataTransfer","files","filesSelected","target","value","getFileTypesDescription","getAllowedFileTypes","Array","isArray","join","getDescription","fileTypesDescription","derivedFileDescription","MESSAGES","allFileTypes","instructions","size","Math","round","getAcceptedTypes","areAllFilesAllowed","accept","renderDescription","_jsxs","Body","className","clsx","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile","displayName"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItem.js CHANGED Viewed

@@ -4,6 +4,7 @@ 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');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
@@ -19,13 +20,13 @@ exports.TEST_IDS = void 0;
   TEST_IDS["uploadItem"] = "uploadItem";
   TEST_IDS["mediaBody"] = "mediaBody";
 })(exports.TEST_IDS || (exports.TEST_IDS = {}));
-const UploadItem = ({
+const UploadItem = /*#__PURE__*/React.forwardRef(({
   file,
   canDelete,
   onDelete,
   onDownload,
   singleFileUpload
-}) => {
+}, ref) => {
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -36,6 +37,17 @@ const UploadItem = ({
     errors,
     url
   } = file;
+  const linkRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (url) {
+        linkRef.current?.focus();
+      } else {
+        buttonRef.current?.focus();
+      }
+    }
+  }));
   const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
   /**
    * We're temporarily reverting to the regular icon components,
@@ -131,6 +143,7 @@ const UploadItem = ({
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-upload-item__body",
       children: [/*#__PURE__*/jsxRuntime.jsx(UploadItemLink.UploadItemLink, {
+        ref: linkRef,
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,
@@ -153,6 +166,7 @@ const UploadItem = ({
           })
         })
       }), canDelete && /*#__PURE__*/jsxRuntime.jsx("button", {
+        ref: buttonRef,
         "aria-label": formatMessage(UploadItem_messages.removeFile, {
           filename
         }),
@@ -167,7 +181,8 @@ const UploadItem = ({
       })]
     })
   });
-};
+});
+UploadItem.displayName = 'UploadItem';
 exports.default = UploadItem;
 //# sourceMappingURL=UploadItem.js.map

package/build/uploadInput/uploadItem/UploadItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /*\n Is this Item part of a multiple- or single-file UploadInput\n /\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /\n Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n \n @param file\n /\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error \|\| formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename \|\| formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","clsx","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
1	+ {"version":3,"file":"UploadItem.js","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /*\n Is this Item part of a multiple- or single-file UploadInput\n /\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /\n Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n \n @param file\n /\n onDownload?: (file: UploadedFile) => void;\n ref?: React.Ref<UploadItemRef>;\n};\n\ninterface UploadItemRef {\n focus: () => void;\n}\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = forwardRef<UploadItemRef, UploadItemProps>(\n ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n const linkRef = useRef<HTMLAnchorElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({\n focus: (): void => {\n if (url) {\n linkRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n },\n }));\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /\n We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = (\n <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />\n );\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error \|\| formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error \|\| errors?.length \|\| status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>\n );\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename \|\| formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n ref={linkRef}\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n ref={buttonRef}\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n },\n);\n\nUploadItem.displayName = 'UploadItem';\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","forwardRef","file","canDelete","onDelete","onDownload","singleFileUpload","ref","formatMessage","useIntl","status","filename","error","errors","url","linkRef","useRef","buttonRef","useImperativeHandle","focus","current","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","clsx","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin","displayName"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItem.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Bin, CrossCircleFill, CheckCircleFill } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useIntl } from 'react-intl';
 import Body from '../../body/Body.mjs';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
@@ -15,13 +16,13 @@ var TEST_IDS;
   TEST_IDS["uploadItem"] = "uploadItem";
   TEST_IDS["mediaBody"] = "mediaBody";
 })(TEST_IDS || (TEST_IDS = {}));
-const UploadItem = ({
+const UploadItem = /*#__PURE__*/forwardRef(({
   file,
   canDelete,
   onDelete,
   onDownload,
   singleFileUpload
-}) => {
+}, ref) => {
   const {
     formatMessage
   } = useIntl();
@@ -32,6 +33,17 @@ const UploadItem = ({
     errors,
     url
   } = file;
+  const linkRef = useRef(null);
+  const buttonRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      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,
@@ -127,6 +139,7 @@ const UploadItem = ({
     children: /*#__PURE__*/jsxs("div", {
       className: "np-upload-item__body",
       children: [/*#__PURE__*/jsx(UploadItemLink, {
+        ref: linkRef,
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,
@@ -149,6 +162,7 @@ const UploadItem = ({
           })
         })
       }), canDelete && /*#__PURE__*/jsx("button", {
+        ref: buttonRef,
         "aria-label": formatMessage(MESSAGES.removeFile, {
           filename
         }),
@@ -163,7 +177,8 @@ const UploadItem = ({
       })]
     })
   });
-};
+});
+UploadItem.displayName = 'UploadItem';
 export { TEST_IDS, UploadItem as default };
 //# sourceMappingURL=UploadItem.mjs.map