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

@transferwise/components 46.63.0 → 46.64.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 (49) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadInput.js","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":";;;;;;;;;;;;;;;;;;AAuGA,SAASA,cAAcA,CAACC,IAAU,EAAA;EAChC,MAAM;IAAEC,IAAI;AAAEC,IAAAA,IAAAA;AAAM,GAAA,GAAGF,IAAI,CAAA;EAC3B,MAAMG,eAAe,GAAG,IAAIC,IAAI,EAAE,CAACC,OAAO,EAAE,CAAA;AAC5C,EAAA,OAAO,GAAGJ,IAAI,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAA,EAAIC,eAAe,CAAE,CAAA,CAAA;AAC7C,CAAA;AAEMG,MAAAA,WAAW,GAAGA,CAAC;AACnBC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,aAAa,GAAG,MAAM;EACtBC,SAAS;EACTC,aAAa;EACbC,QAAQ;AACRC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,uBAAc;AAC1BC,EAAAA,SAAS,GAAGC,2BAAkB;EAC9BC,WAAW;EACXC,YAAY;EACZC,YAAY;EACZC,iBAAiB;EACjBC,aAAa;EACbC,UAAU;EACVC,QAAQ;EACRC,oBAAoB;EACpBC,EAAE;EACFC,qBAAqB;AACrBC,EAAAA,iBAAAA;AACiB,CAAA,KAAI;EACrB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGC,cAAQ,CAAsB,IAAI,CAAC,CAAA;EACzF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC,CAAA;EAC7C,MAAM;AAAEG,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,MAAMC,iBAAiB,GAAG,IAAIC,GAAG,CAAC,CAACC,aAAM,CAACC,OAAO,EAAED,aAAM,CAACE,UAAU,CAAC,CAAC,CAAA;EAEtE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGX,cAAQ,CAChDrB,QAAQ,IAAIL,KAAK,CAACsC,MAAM,KAAK,CAAC,GAAGtC,KAAK,GAAG,CAACA,KAAK,CAAC,CAAC,CAAC,CAAC,CACpD,CAAA;EAED,MAAMuC,0BAA0B,GAAGC,YAAM,CAACnC,QAAQ,IAAIL,KAAK,CAACsC,MAAM,KAAK,CAAC,GAAGtC,KAAK,GAAG,CAACA,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;EAE9F,SAASyC,aAAaA,CAACC,kBAAgC,EAAA;IACrD,SAASC,SAASA,CAACC,WAAoC,EAAA;AACrD,MAAA,OAAO,CAAC,GAAGA,WAAW,EAAEF,kBAAkB,CAAC,CAAA;AAC7C,KAAA;IAEAL,gBAAgB,CAACM,SAAS,CAAC,CAAA;IAC3BJ,0BAA0B,CAACM,OAAO,GAAGF,SAAS,CAACJ,0BAA0B,CAACM,OAAO,CAAC,CAAA;AACpF,GAAA;EAEA,MAAMC,kBAAkB,GAAIrD,IAAkB,IAAI;IAChD,SAASsD,aAAaA,CAACC,gBAAyC,EAAA;AAC9D,MAAA,OAAOA,gBAAgB,CAACC,MAAM,CAC3BC,UAAU,IAAKzD,IAAI,KAAKyD,UAAU,IAAIzD,IAAI,CAACyB,EAAE,KAAKgC,UAAU,CAAChC,EAAE,CACjE,CAAA;AACH,KAAA;IAEAmB,gBAAgB,CAACU,aAAa,CAAC,CAAA;IAC/BR,0BAA0B,CAACM,OAAO,GAAGE,aAAa,CAACR,0BAA0B,CAACM,OAAO,CAAC,CAAA;GACvF,CAAA;AAED,EAAA,MAAMM,gBAAgB,GAAGA,CAAC1D,IAAkB,EAAE2D,OAA8B,KAAI;IAC9E,MAAMC,cAAc,GAAIC,YAAqC,IAC3DA,YAAY,CAACC,GAAG,CAAEL,UAAU,IAAI;MAC9B,OAAOA,UAAU,KAAKzD,IAAI,IAAIyD,UAAU,CAAChC,EAAE,KAAKzB,IAAI,CAACyB,EAAE,GACnD;AAAE,QAAA,GAAGzB,IAAI;QAAE,GAAG2D,OAAAA;AAAS,OAAA,GACvBF,UAAU,CAAA;AAChB,KAAC,CAAC,CAAA;IAEJb,gBAAgB,CAACgB,cAAc,CAAC,CAAA;IAChCd,0BAA0B,CAACM,OAAO,GAAGQ,cAAc,CAACd,0BAA0B,CAACM,OAAO,CAAC,CAAA;GACxF,CAAA;EAED,MAAMW,UAAU,GAAI/D,IAAkB,IAAI;IACxC,MAAM;MAAEyB,EAAE;AAAEuC,cAAAA,QAAAA;AAAQ,KAAA,GAAGhE,IAAI,CAAA;AAE3B,IAAA,IAAIgE,QAAM,KAAKxB,aAAM,CAACyB,MAAM,EAAE;AAC5B;MACAZ,kBAAkB,CAACrD,IAAI,CAAC,CAAA;AAC1B,KAAC,MAAM,IAAImB,YAAY,IAAIM,EAAE,EAAE;AAC7B;MACAiC,gBAAgB,CAAC1D,IAAI,EAAE;QAAEgE,MAAM,EAAExB,aAAM,CAACE,UAAU;AAAEwB,QAAAA,KAAK,EAAEC,SAAAA;AAAS,OAAE,CAAC,CAAA;AAEvE;AACAhD,MAAAA,YAAY,CAACM,EAAE,CAAC,CACb2C,IAAI,CAAC,MAAMf,kBAAkB,CAACrD,IAAI,CAAC,CAAC,CACpCqE,KAAK,CAAEH,KAAK,IAAI;QACfR,gBAAgB,CAAC1D,IAAI,EAAE;AAAEkE,UAAAA,KAAK,EAAEA,KAAAA;AAAsB,SAAA,CAAC,CAAA;AACzD,OAAC,CAAC,CAAA;AACN,KAAA;GACD,CAAA;AAED,EAAA,SAASI,uBAAuBA,CAACtE,IAAU,EAAEuE,cAAsB,EAAA;IACjE,MAAM;AAAEtE,MAAAA,IAAAA;AAAM,KAAA,GAAGD,IAAI,CAAA;AACrB,IAAA,MAAMyB,EAAE,GAAG1B,cAAc,CAACC,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMwE,YAAY,GAAG;MACnB/C,EAAE;AACFgD,MAAAA,QAAQ,EAAExE,IAAI;MACd+D,MAAM,EAAExB,aAAM,CAACyB,MAAM;AACrBC,MAAAA,KAAK,EAAEK,cAAAA;KACR,CAAA;IAEDvB,aAAa,CAACwB,YAAY,CAAC,CAAA;AAE3B,IAAA,IAAIpD,iBAAiB,EAAE;MACrBA,iBAAiB,CAACoD,YAAY,CAAC,CAAA;AACjC,KAAA;AACF,GAAA;EAEA,SAASE,wBAAwBA,GAAA;AAC/B,IAAA,MAAMC,qBAAqB,GAAG,IAAIpC,GAAG,CAAC,CAACC,aAAM,CAACoC,SAAS,EAAEpC,aAAM,CAACC,OAAO,CAAC,CAAC,CAAA;IACzE,MAAMoC,UAAU,GAAG/B,0BAA0B,CAACM,OAAO,CAACI,MAAM,CACzDxD,IAAI,IAAKA,IAAI,CAACgE,MAAM,IAAIW,qBAAqB,CAACG,GAAG,CAAC9E,IAAI,CAACgE,MAAM,CAAC,CAChE,CAAA;IACD,OAAOa,UAAU,CAAChC,MAAM,CAAA;AAC1B,GAAA;EAEA,SAASkC,8BAA8BA,GAAA;IACrC,IAAI,CAACxD,QAAQ,EAAE;AACb,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AAEA,IAAA,MAAMyD,kBAAkB,GAAGN,wBAAwB,EAAE,CAAA;IACrD,OAAOM,kBAAkB,IAAIzD,QAAQ,CAAA;AACvC,GAAA;AAEA;EACA,MAAM0D,QAAQ,GAAIC,aAAuB,IAAI;AAC3C,IAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,aAAa,CAACrC,MAAM,EAAEsC,CAAC,IAAI,CAAC,EAAE;AAChD,MAAA,MAAMnF,IAAI,GAAGkF,aAAa,CAACE,IAAI,CAACD,CAAC,CAAC,CAAA;AAElC;AACA,MAAA,MAAME,QAAQ,GAAG,IAAIC,QAAQ,EAAE,CAAA;AAE/B,MAAA,IAAItF,IAAI,EAAE;QACR,MAAM;AAAEC,UAAAA,IAAAA;AAAM,SAAA,GAAGD,IAAI,CAAA;AACrB,QAAA,MAAMyB,EAAE,GAAG1B,cAAc,CAACC,IAAI,CAAC,CAAA;AAE/B,QAAA,MAAMuF,gBAAgB,GAAG,OAAO1E,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAGA,SAAS,CAAC2E,IAAI,CAAC,GAAG,CAAC,CAAA;AAExF;AACA,QAAA,IAAI,CAACC,uBAAW,CAACzF,IAAI,EAAEuF,gBAAgB,CAAC,EAAE;UACxCjB,uBAAuB,CAACtE,IAAI,EAAEoC,aAAa,CAACsD,oBAAQ,CAACC,oBAAoB,CAAC,CAAC,CAAA;AAC3E,UAAA,SAAA;AACF,SAAA;AAEA;AACA;QACA,IAAI,CAACC,uBAAW,CAAC5F,IAAI,EAAEe,SAAS,GAAG,IAAI,CAAC,EAAE;UACxC,MAAMwD,cAAc,GAAG7C,qBAAqB,IAAIU,aAAa,CAACsD,oBAAQ,CAACG,cAAc,CAAC,CAAA;AACtFvB,UAAAA,uBAAuB,CAACtE,IAAI,EAAEuE,cAAc,CAAC,CAAA;AAC7C,UAAA,SAAA;AACF,SAAA;QAEA,IAAIQ,8BAA8B,EAAE,EAAE;UACpC,MAAMR,cAAc,GAClB/C,oBAAoB,IACpBY,aAAa,CAACsD,oBAAQ,CAACI,2BAA2B,EAAE;AAAEC,YAAAA,eAAe,EAAExE,QAAAA;AAAU,WAAA,CAAC,CAAA;AACpF+C,UAAAA,uBAAuB,CAACtE,IAAI,EAAEuE,cAAc,CAAC,CAAA;AAC7C,UAAA,SAAA;AACF,SAAA;AAEAc,QAAAA,QAAQ,CAACW,MAAM,CAACxF,aAAa,EAAER,IAAI,CAAC,CAAA;AACpC,QAAA,MAAMiG,WAAW,GAAG;UAClBxE,EAAE;AACFgD,UAAAA,QAAQ,EAAExE,IAAI;UACd+D,MAAM,EAAExB,aAAM,CAACC,OAAAA;SAChB,CAAA;QAEDO,aAAa,CAACiD,WAAW,CAAC,CAAA;AAE1B;AACA/E,QAAAA,YAAY,CAACmE,QAAQ,CAAC,CACnBjB,IAAI,CAAC,CAAC;UAAE3C,EAAE;UAAEyE,GAAG;AAAEhC,UAAAA,KAAAA;AAAuB,SAAA,KAAI;AAC3C;UACAR,gBAAgB,CAACuC,WAAW,EAAE;YAAExE,EAAE;YAAEyE,GAAG;YAAEhC,KAAK;YAAEF,MAAM,EAAExB,aAAM,CAACoC,SAAAA;AAAS,WAAE,CAAC,CAAA;AAC7E,SAAC,CAAC,CACDP,KAAK,CAAEH,KAAK,IAAI;UACfR,gBAAgB,CAACuC,WAAW,EAAE;AAAE/B,YAAAA,KAAK,EAAEA,KAAoB;YAAEF,MAAM,EAAExB,aAAM,CAACyB,MAAAA;AAAM,WAAE,CAAC,CAAA;AACvF,SAAC,CAAC,CAAA;QAEJ,IAAI,CAACrD,QAAQ,EAAE;AACb;AACA,UAAA,MAAA;AACF,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAEDuF,EAAAA,eAAS,CAAC,MAAK;IACbhE,UAAU,CAAC,IAAI,CAAC,CAAA;GACjB,EAAE,EAAE,CAAC,CAAA;AAENgE,EAAAA,eAAS,CAAC,MAAK;IACb,IAAI9E,aAAa,IAAIa,OAAO,EAAE;AAC5Bb,MAAAA,aAAa,CAAC,CAAC,GAAGsB,aAAa,CAAC,CAAC,CAAA;AACnC,KAAA;GACD,EAAE,CAACtB,aAAa,EAAEsB,aAAa,CAAC,CAAC,CAAC;EAEnC,oBACEyD,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,KAAA,EAAA;AACEG,MAAAA,IAAI,EAAC,OAAO;AACZ9F,MAAAA,SAAS,EAAE+F,SAAI,CAAC,iBAAiB,EAAE/F,SAAS,EAAE;AAAEE,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAAA,MAAA,GACxDiB,eAAe;MAAA0E,QAAA,EAAA,CAElB3D,aAAa,CAACmB,GAAG,CAAE9D,IAAI,iBACtByG,cAAA,CAACC,kBAAU,EAAA;AAET1G,QAAAA,IAAI,EAAEA,IAAK;QACX2G,gBAAgB,EAAE,CAAC/F,QAAS;AAC5BgG,QAAAA,SAAS,EACP,CAAC,CAAC,CAACzF,YAAY,IAAInB,IAAI,CAACgE,MAAM,KAAKxB,aAAM,CAACyB,MAAM,MAC/C,CAACjE,IAAI,CAACgE,MAAM,IAAI,CAAC1B,iBAAiB,CAACwC,GAAG,CAAC9E,IAAI,CAACgE,MAAM,CAAC,CACrD;AACD6C,QAAAA,QAAQ,EACN7G,IAAI,CAACgE,MAAM,KAAKxB,aAAM,CAACyB,MAAM,GACzB,MAAMF,UAAU,CAAC/D,IAAI,CAAC,GACtB,MAAMgC,sBAAsB,CAAChC,IAAI,CACtC;AACDsB,QAAAA,UAAU,EAAEA,UAAAA;AAAW,OAAA,EAZlBtB,IAAI,CAACyB,EAaV,CACH,CAAC,EACD,CAACb,QAAQ,IAAK,CAACA,QAAQ,IAAI,CAAC+B,aAAa,CAACE,MAAO,kBAChD4D,cAAA,CAACK,oBAAY,EAAA;AACXrF,QAAAA,EAAE,EAAEA,EAAG;AACPE,QAAAA,iBAAiB,EAAEA,iBAAkB;AACrChB,QAAAA,QAAQ,EAAEoE,8BAA8B,EAAE,IAAIpE,QAAS;AACvDC,QAAAA,QAAQ,EAAEA,QAAS;AACnBC,QAAAA,SAAS,EAAEA,SAAU;AACrBE,QAAAA,SAAS,EAAEA,SAAU;AACrBE,QAAAA,WAAW,EAAEA,WAAY;AACzBM,QAAAA,QAAQ,EAAEA,QAAS;AACnBwF,QAAAA,QAAQ,EAAE9B,QAAAA;AAAS,OAAA,CAEtB,CAAA;AAAA,KACE,CACL,eAAAwB,cAAA,CAACO,KAAK,EAAA;AACJC,MAAAA,KAAK,EACHvG,aAAa,EAAEuG,KAAK,KAAK9C,SAAS,GAC9BzD,aAAa,CAACuG,KAAK,GACnB7E,aAAa,CAACsD,oBAAQ,CAACwB,gBAAgB,CAC5C;AACDC,MAAAA,IAAI,EACFzG,aAAa,EAAEyG,IAAI,KAAKhD,SAAS,GAC7BzD,aAAa,CAACyG,IAAI,GAClB/E,aAAa,CAACsD,oBAAQ,CAAC0B,eAAe,CAC3C;MACDC,IAAI,EAAE,CAAC,CAACtF,mBAAoB;MAC5BuF,MAAM,eACJlB,eAAA,CAAAC,mBAAA,EAAA;QAAAC,QAAA,EAAA,cACEG,cAAA,CAACc,MAAM,EAAA;UACLC,KAAK,EAAA,IAAA;UACLC,OAAO,EAAEA,MAAK;YACZzF,sBAAsB,CAAC,IAAI,CAAC,CAAA;WAC5B;UAAAsE,QAAA,EAED5F,aAAa,EAAEgH,UAAU,IAAItF,aAAa,CAACsD,oBAAQ,CAACiC,2BAA2B,CAAA;AAAC,SAC3E,CACR,eAAAlB,cAAA,CAACc,MAAM,EAAA;UACLC,KAAK,EAAA,IAAA;UACLI,QAAQ,EAAEC,gBAAQ,CAACC,SAAU;UAC7BC,IAAI,EAAEC,mBAAW,CAACC,QAAS;UAC3BR,OAAO,EAAEA,MAAK;AACZ,YAAA,IAAI1F,mBAAmB,EAAE;cACvBgC,UAAU,CAAChC,mBAAmB,CAAC,CAAA;AACjC,aAAA;YACAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;WAC5B;UAAAsE,QAAA,EAED5F,aAAa,EAAEwH,WAAW,IAAI9F,aAAa,CAACsD,oBAAQ,CAACyC,4BAA4B,CAAA;AAAC,SAC7E,CACV,CAAA;AAAA,OAAA,CACD;MACDC,OAAO,EAAEA,MAAK;QACZpG,sBAAsB,CAAC,IAAI,CAAC,CAAA;AAC9B,OAAA;AAAE,KAEN,CAAA,CAAA;AAAA,GAAA,CAAG,CAAA;AAEP;;;;"}
1	+ {"version":3,"file":"UploadInput.js","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/UploadInput.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useLayoutEffect, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '../button/Button.mjs';
 import { useInputAttributes } from '../inputs/contexts.mjs';
@@ -47,10 +47,13 @@ const UploadInput = ({
     nonLabelable: true
   });
   const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
+  const [fileToRemoveIndex, setFileToRemoveIndex] = useState(null);
   const [mounted, setMounted] = useState(false);
   const {
     formatMessage
   } = useIntl();
+  const itemRefs = useRef([]);
+  const uploadInputRef = useRef(null);
   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]]);
@@ -78,25 +81,30 @@ const UploadInput = ({
     setUploadedFiles(updateListItem);
     uploadedFilesListReference.current = updateListItem(uploadedFilesListReference.current);
   };
+  const [fileToRemove, setFileToRemove] = useState(null);
   const removeFile = file => {
     const {
       id,
       status
     } = file;
+    const index = uploadedFiles.findIndex(f => f.id === file.id);
+    setFileToRemoveIndex(index);
     if (status === Status.FAILED) {
-      // If removing a failed upload, we're just updating the view
       removeFileFromList(file);
+      setFileToRemove(file);
     } else if (onDeleteFile && id) {
-      // Set status to PROCESSING
       modifyFileInList(file, {
         status: Status.PROCESSING,
         error: undefined
       });
-      // Notify host app about deletion
-      onDeleteFile(id).then(() => removeFileFromList(file)).catch(error => {
+      onDeleteFile(id).then(() => {
+        removeFileFromList(file);
+      }).catch(error => {
         modifyFileInList(file, {
           error: error
         });
+      }).finally(() => {
+        setFileToRemove(file);
       });
     }
   };
@@ -135,10 +143,7 @@ const UploadInput = ({
       // Returning a FormData[] array instead of FileList so we can filter out incorrect files
       const formData = new FormData();
       if (file) {
-        const {
-          name
-        } = file;
-        const id = generateFileId(file);
+        generateFileId(file);
         const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
         // Check if file type is valid
         if (!isTypeValid(file, allowedFileTypes)) {
@@ -159,10 +164,17 @@ const UploadInput = ({
           handleFileUploadFailure(file, failureMessage);
           continue;
         }
+        // Check if the file is already in the list
+        const existingFile = uploadedFiles.find(f => f.filename === file.name);
+        if (existingFile) {
+          // Remove the file from the list before adding it again
+          removeFileFromList(existingFile);
+        }
+        // Add the file to the list
         formData.append(fileInputName, file);
         const pendingFile = {
-          id,
-          filename: name,
+          id: generateFileId(file),
+          filename: file.name,
           status: Status.PENDING
         };
         addFileToList(pendingFile);
@@ -192,6 +204,21 @@ const UploadInput = ({
       }
     }
   };
+  useLayoutEffect(() => {
+    if (fileToRemove && fileToRemoveIndex !== null) {
+      requestAnimationFrame(() => {
+        const nextFocusIndex = Math.min(fileToRemoveIndex, uploadedFiles.length - 1);
+        if (itemRefs.current[nextFocusIndex]) {
+          itemRefs.current[nextFocusIndex].focus(); // Focus the next UploadItem
+        } else {
+          // If there's only one item left, focus the UploadButton
+          uploadInputRef.current?.focus();
+        }
+      });
+      setFileToRemove(null); // Reset the state
+      setFileToRemoveIndex(null); // Reset the index
+    }
+  }, [uploadedFiles, fileToRemove, fileToRemoveIndex, itemRefs, uploadInputRef]);
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -207,13 +234,17 @@ const UploadInput = ({
         disabled
       }),
       ...inputAttributes,
-      children: [uploadedFiles.map(file => /*#__PURE__*/jsx(UploadItem, {
+      children: [uploadedFiles.map((file, index) => /*#__PURE__*/jsx(UploadItem, {
+        ref: el => {
+          itemRefs.current[index] = el;
+        },
         file: file,
         singleFileUpload: !multiple,
         canDelete: (!!onDeleteFile || file.status === Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
         onDelete: file.status === Status.FAILED ? () => removeFile(file) : () => setMarkedFileForDelete(file),
         onDownload: onDownload
       }, file.id)), (multiple || !multiple && !uploadedFiles.length) && /*#__PURE__*/jsx(UploadButton, {
+        ref: uploadInputRef,
         id: id,
         uploadButtonTitle: uploadButtonTitle,
         disabled: areMaximumFilesUploadedAlready() || disabled,

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":"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"}

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