@transferwise/components 0.0.0-experimental-1ce161b → 0.0.0-experimental-1fdcf13

package/build/uploadInput/UploadInput.mjs

@@ -234,26 +234,34 @@ const UploadInput = ({
         disabled
       }),
       ...inputAttributes,
-      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,
-        multiple: multiple,
-        fileTypes: fileTypes,
-        sizeLimit: sizeLimit,
-        description: description,
-        maxFiles: maxFiles,
-        onChange: addFiles
+      children: [/*#__PURE__*/jsx("div", {
+        className: "np-upload-input__section",
+        "aria-live": "polite",
+        "aria-relevant": "all",
+        role: "region",
+        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("div", {
+        className: "np-upload-input__section np-upload-input__section--uploader",
+        children: /*#__PURE__*/jsx(UploadButton, {
+          id: id,
+          uploadButtonTitle: uploadButtonTitle,
+          disabled: areMaximumFilesUploadedAlready() || disabled,
+          multiple: multiple,
+          fileTypes: fileTypes,
+          sizeLimit: sizeLimit,
+          description: description,
+          maxFiles: maxFiles,
+          onChange: addFiles
+        })
       })]
     }), /*#__PURE__*/jsx(Modal, {
       title: deleteConfirm?.title !== undefined ? deleteConfirm.title : formatMessage(MESSAGES.deleteModalTitle),

package/build/uploadInput/UploadInput.mjs.map

@@ -1 +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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"}
+{"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        <div\n          className=\"np-upload-input__section\"\n          aria-live=\"polite\"\n          aria-relevant=\"all\"\n          role=\"region\"\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        </div>\n        {(multiple || (!multiple && !uploadedFiles.length)) && (\n          <div className=\"np-upload-input__section np-upload-input__section--uploader\">\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          </div>\n        )}\n      </div>\n      <Modal\n        title={\n          deleteConfirm?.title !== undefined\n            ? deleteConfirm.title\n            : formatMessage(MESSAGES.deleteModalTitle)\n        }\n        body={\n          deleteConfirm?.body !== undefined\n            ? deleteConfirm.body\n            : formatMessage(MESSAGES.deleteModalBody)\n        }\n        open={!!markedFileForDelete}\n        footer={\n          <>\n            <Button\n              block\n              onClick={() => {\n                setMarkedFileForDelete(null);\n              }}\n            >\n              {deleteConfirm?.cancelText || formatMessage(MESSAGES.deleteModalCancelButtonText)}\n            </Button>\n            <Button\n              block\n              priority={Priority.SECONDARY}\n              type={ControlType.NEGATIVE}\n              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":";;;;;;;;;;;;;;;;AA2GA,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,cAAc;AAC1BC,EAAAA,SAAS,GAAGC,kBAAkB;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,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGC,QAAQ,CAAsB,IAAI,CAAC,CAAA;EACzF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGF,QAAQ,CAAgB,IAAI,CAAC,CAAA;EAC/E,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC,CAAA;EAC7C,MAAM;AAAEK,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAA4C,EAAE,CAAC,CAAA;AACtE,EAAA,MAAMC,cAAc,GAAGD,MAAM,CAA0B,IAAI,CAAC,CAAA;AAE5D,EAAA,MAAME,iBAAiB,GAAG,IAAIC,GAAG,CAAC,CAACC,MAAM,CAACC,OAAO,EAAED,MAAM,CAACE,UAAU,CAAC,CAAC,CAAA;EAEtE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGhB,QAAQ,CAChDrB,QAAQ,IAAIL,KAAK,CAAC2C,MAAM,KAAK,CAAC,GAAG3C,KAAK,GAAG,CAACA,KAAK,CAAC,CAAC,CAAC,CAAC,CACpD,CAAA;EAED,MAAM4C,0BAA0B,GAAGV,MAAM,CAAC7B,QAAQ,IAAIL,KAAK,CAAC2C,MAAM,KAAK,CAAC,GAAG3C,KAAK,GAAG,CAACA,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;EAE9F,SAAS6C,aAAaA,CAACC,kBAAgC,EAAA;IACrD,SAASC,SAASA,CAACC,WAAoC,EAAA;AACrD,MAAA,OAAO,CAAC,GAAGA,WAAW,EAAEF,kBAAkB,CAAC,CAAA;AAC7C,KAAA;IAEAJ,gBAAgB,CAACK,SAAS,CAAC,CAAA;IAC3BH,0BAA0B,CAACK,OAAO,GAAGF,SAAS,CAACH,0BAA0B,CAACK,OAAO,CAAC,CAAA;AACpF,GAAA;EAEA,MAAMC,kBAAkB,GAAIzD,IAAkB,IAAI;IAChD,SAAS0D,aAAaA,CAACC,gBAAyC,EAAA;AAC9D,MAAA,OAAOA,gBAAgB,CAACC,MAAM,CAC3BC,UAAU,IAAK7D,IAAI,KAAK6D,UAAU,IAAI7D,IAAI,CAACyB,EAAE,KAAKoC,UAAU,CAACpC,EAAE,CACjE,CAAA;AACH,KAAA;IAEAwB,gBAAgB,CAACS,aAAa,CAAC,CAAA;IAC/BP,0BAA0B,CAACK,OAAO,GAAGE,aAAa,CAACP,0BAA0B,CAACK,OAAO,CAAC,CAAA;GACvF,CAAA;AAED,EAAA,MAAMM,gBAAgB,GAAGA,CAAC9D,IAAkB,EAAE+D,OAA8B,KAAI;IAC9E,MAAMC,cAAc,GAAIC,YAAqC,IAC3DA,YAAY,CAACC,GAAG,CAAEL,UAAU,IAAI;MAC9B,OAAOA,UAAU,KAAK7D,IAAI,IAAI6D,UAAU,CAACpC,EAAE,KAAKzB,IAAI,CAACyB,EAAE,GACnD;AAAE,QAAA,GAAGzB,IAAI;QAAE,GAAG+D,OAAAA;AAAS,OAAA,GACvBF,UAAU,CAAA;AAChB,KAAC,CAAC,CAAA;IAEJZ,gBAAgB,CAACe,cAAc,CAAC,CAAA;IAChCb,0BAA0B,CAACK,OAAO,GAAGQ,cAAc,CAACb,0BAA0B,CAACK,OAAO,CAAC,CAAA;GACxF,CAAA;EAED,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGnC,QAAQ,CAAsB,IAAI,CAAC,CAAA;EAE3E,MAAMoC,UAAU,GAAIrE,IAAkB,IAAI;IACxC,MAAM;MAAEyB,EAAE;AAAE6C,MAAAA,MAAAA;AAAQ,KAAA,GAAGtE,IAAI,CAAA;AAC3B,IAAA,MAAMuE,KAAK,GAAGvB,aAAa,CAACwB,SAAS,CAAEC,CAAC,IAAKA,CAAC,CAAChD,EAAE,KAAKzB,IAAI,CAACyB,EAAE,CAAC,CAAA;IAC9DU,oBAAoB,CAACoC,KAAK,CAAC,CAAA;AAE3B,IAAA,IAAID,MAAM,KAAKzB,MAAM,CAAC6B,MAAM,EAAE;MAC5BjB,kBAAkB,CAACzD,IAAI,CAAC,CAAA;MACxBoE,eAAe,CAACpE,IAAI,CAAC,CAAA;AACvB,KAAC,MAAM,IAAImB,YAAY,IAAIM,EAAE,EAAE;MAC7BqC,gBAAgB,CAAC9D,IAAI,EAAE;QAAEsE,MAAM,EAAEzB,MAAM,CAACE,UAAU;AAAE4B,QAAAA,KAAK,EAAEC,SAAAA;AAAS,OAAE,CAAC,CAAA;AAEvEzD,MAAAA,YAAY,CAACM,EAAE,CAAC,CACboD,IAAI,CAAC,MAAK;QACTpB,kBAAkB,CAACzD,IAAI,CAAC,CAAA;AAC1B,OAAC,CAAC,CACD8E,KAAK,CAAEH,KAAK,IAAI;QACfb,gBAAgB,CAAC9D,IAAI,EAAE;AAAE2E,UAAAA,KAAK,EAAEA,KAAAA;AAAsB,SAAA,CAAC,CAAA;AACzD,OAAC,CAAC,CACDI,OAAO,CAAC,MAAK;QACZX,eAAe,CAACpE,IAAI,CAAC,CAAA;AACvB,OAAC,CAAC,CAAA;AACN,KAAA;GACD,CAAA;AAED,EAAA,SAASgF,uBAAuBA,CAAChF,IAAU,EAAEiF,cAAsB,EAAA;IACjE,MAAM;AAAEhF,MAAAA,IAAAA;AAAM,KAAA,GAAGD,IAAI,CAAA;AACrB,IAAA,MAAMyB,EAAE,GAAG1B,cAAc,CAACC,IAAI,CAAC,CAAA;AAC/B,IAAA,MAAMkF,YAAY,GAAG;MACnBzD,EAAE;AACF0D,MAAAA,QAAQ,EAAElF,IAAI;MACdqE,MAAM,EAAEzB,MAAM,CAAC6B,MAAM;AACrBC,MAAAA,KAAK,EAAEM,cAAAA;KACR,CAAA;IAED7B,aAAa,CAAC8B,YAAY,CAAC,CAAA;AAE3B,IAAA,IAAI9D,iBAAiB,EAAE;MACrBA,iBAAiB,CAAC8D,YAAY,CAAC,CAAA;AACjC,KAAA;AACF,GAAA;EAEA,SAASE,wBAAwBA,GAAA;AAC/B,IAAA,MAAMC,qBAAqB,GAAG,IAAIzC,GAAG,CAAC,CAACC,MAAM,CAACyC,SAAS,EAAEzC,MAAM,CAACC,OAAO,CAAC,CAAC,CAAA;IACzE,MAAMyC,UAAU,GAAGpC,0BAA0B,CAACK,OAAO,CAACI,MAAM,CACzD5D,IAAI,IAAKA,IAAI,CAACsE,MAAM,IAAIe,qBAAqB,CAACG,GAAG,CAACxF,IAAI,CAACsE,MAAM,CAAC,CAChE,CAAA;IACD,OAAOiB,UAAU,CAACrC,MAAM,CAAA;AAC1B,GAAA;EAEA,SAASuC,8BAA8BA,GAAA;IACrC,IAAI,CAAClE,QAAQ,EAAE;AACb,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AAEA,IAAA,MAAMmE,kBAAkB,GAAGN,wBAAwB,EAAE,CAAA;IACrD,OAAOM,kBAAkB,IAAInE,QAAQ,CAAA;AACvC,GAAA;AAEA;EACA,MAAMoE,QAAQ,GAAIC,aAAuB,IAAI;AAC3C,IAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,aAAa,CAAC1C,MAAM,EAAE2C,CAAC,IAAI,CAAC,EAAE;AAChD,MAAA,MAAM7F,IAAI,GAAG4F,aAAa,CAACE,IAAI,CAACD,CAAC,CAAC,CAAA;AAElC;AACA,MAAA,MAAME,QAAQ,GAAG,IAAIC,QAAQ,EAAE,CAAA;AAE/B,MAAA,IAAIhG,IAAI,EAAE;AAER,QAAWD,cAAc,CAACC,IAAI,EAAC;AAE/B,QAAA,MAAMiG,gBAAgB,GAAG,OAAOpF,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAGA,SAAS,CAACqF,IAAI,CAAC,GAAG,CAAC,CAAA;AAExF;AACA,QAAA,IAAI,CAACC,WAAW,CAACnG,IAAI,EAAEiG,gBAAgB,CAAC,EAAE;UACxCjB,uBAAuB,CAAChF,IAAI,EAAEsC,aAAa,CAAC8D,QAAQ,CAACC,oBAAoB,CAAC,CAAC,CAAA;AAC3E,UAAA,SAAA;AACF,SAAA;AAEA;AACA;QACA,IAAI,CAACC,WAAW,CAACtG,IAAI,EAAEe,SAAS,GAAG,IAAI,CAAC,EAAE;UACxC,MAAMkE,cAAc,GAAGvD,qBAAqB,IAAIY,aAAa,CAAC8D,QAAQ,CAACG,cAAc,CAAC,CAAA;AACtFvB,UAAAA,uBAAuB,CAAChF,IAAI,EAAEiF,cAAc,CAAC,CAAA;AAC7C,UAAA,SAAA;AACF,SAAA;QAEA,IAAIQ,8BAA8B,EAAE,EAAE;UACpC,MAAMR,cAAc,GAClBzD,oBAAoB,IACpBc,aAAa,CAAC8D,QAAQ,CAACI,2BAA2B,EAAE;AAAEC,YAAAA,eAAe,EAAElF,QAAAA;AAAU,WAAA,CAAC,CAAA;AACpFyD,UAAAA,uBAAuB,CAAChF,IAAI,EAAEiF,cAAc,CAAC,CAAA;AAC7C,UAAA,SAAA;AACF,SAAA;AAEA;AACA,QAAA,MAAMyB,YAAY,GAAG1D,aAAa,CAAC2D,IAAI,CAAElC,CAAC,IAAKA,CAAC,CAACU,QAAQ,KAAKnF,IAAI,CAACC,IAAI,CAAC,CAAA;AACxE,QAAA,IAAIyG,YAAY,EAAE;AAChB;UACAjD,kBAAkB,CAACiD,YAAY,CAAC,CAAA;AAClC,SAAA;AAEA;AACAX,QAAAA,QAAQ,CAACa,MAAM,CAACpG,aAAa,EAAER,IAAI,CAAC,CAAA;AACpC,QAAA,MAAM6G,WAAW,GAAG;AAClBpF,UAAAA,EAAE,EAAE1B,cAAc,CAACC,IAAI,CAAC;UACxBmF,QAAQ,EAAEnF,IAAI,CAACC,IAAI;UACnBqE,MAAM,EAAEzB,MAAM,CAACC,OAAAA;SAChB,CAAA;QAEDM,aAAa,CAACyD,WAAW,CAAC,CAAA;AAE1B;AACA3F,QAAAA,YAAY,CAAC6E,QAAQ,CAAC,CACnBlB,IAAI,CAAC,CAAC;UAAEpD,EAAE;UAAEqF,GAAG;AAAEnC,UAAAA,KAAAA;AAAuB,SAAA,KAAI;AAC3C;UACAb,gBAAgB,CAAC+C,WAAW,EAAE;YAAEpF,EAAE;YAAEqF,GAAG;YAAEnC,KAAK;YAAEL,MAAM,EAAEzB,MAAM,CAACyC,SAAAA;AAAS,WAAE,CAAC,CAAA;AAC7E,SAAC,CAAC,CACDR,KAAK,CAAEH,KAAK,IAAI;UACfb,gBAAgB,CAAC+C,WAAW,EAAE;AAAElC,YAAAA,KAAK,EAAEA,KAAoB;YAAEL,MAAM,EAAEzB,MAAM,CAAC6B,MAAAA;AAAM,WAAE,CAAC,CAAA;AACvF,SAAC,CAAC,CAAA;QAEJ,IAAI,CAAC9D,QAAQ,EAAE;AACb;AACA,UAAA,MAAA;AACF,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAEDmG,EAAAA,eAAe,CAAC,MAAK;AACnB,IAAA,IAAI5C,YAAY,IAAIjC,iBAAiB,KAAK,IAAI,EAAE;AAC9C8E,MAAAA,qBAAqB,CAAC,MAAK;AACzB,QAAA,MAAMC,cAAc,GAAGC,IAAI,CAACC,GAAG,CAACjF,iBAAiB,EAAEc,aAAa,CAACE,MAAM,GAAG,CAAC,CAAC,CAAA;AAC5E,QAAA,IAAIV,QAAQ,CAACgB,OAAO,CAACyD,cAAc,CAAC,EAAE;UACpCzE,QAAQ,CAACgB,OAAO,CAACyD,cAAc,CAAC,CAACG,KAAK,EAAE,CAAC;AAC3C,SAAC,MAAM;AACL;AACA1E,UAAAA,cAAc,CAACc,OAAO,EAAE4D,KAAK,EAAE,CAAA;AACjC,SAAA;AACF,OAAC,CAAC,CAAA;AACFhD,MAAAA,eAAe,CAAC,IAAI,CAAC,CAAC;AACtBjC,MAAAA,oBAAoB,CAAC,IAAI,CAAC,CAAC;AAC7B,KAAA;AACF,GAAC,EAAE,CAACa,aAAa,EAAEmB,YAAY,EAAEjC,iBAAiB,EAAEM,QAAQ,EAAEE,cAAc,CAAC,CAAC,CAAA;AAE9E2E,EAAAA,SAAS,CAAC,MAAK;IACbhF,UAAU,CAAC,IAAI,CAAC,CAAA;GACjB,EAAE,EAAE,CAAC,CAAA;AAENgF,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIhG,aAAa,IAAIe,OAAO,EAAE;AAC5Bf,MAAAA,aAAa,CAAC,CAAC,GAAG2B,aAAa,CAAC,CAAC,CAAA;AACnC,KAAA;GACD,EAAE,CAAC3B,aAAa,EAAE2B,aAAa,CAAC,CAAC,CAAC;EAEnC,oBACEsE,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,KAAA,EAAA;AACEG,MAAAA,IAAI,EAAC,OAAO;AACZhH,MAAAA,SAAS,EAAEiH,IAAI,CAAC,iBAAiB,EAAEjH,SAAS,EAAE;AAAEE,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAAA,MAAA,GACxDiB,eAAe;AAAA4F,MAAAA,QAAA,gBAEnBG,GAAA,CAAA,KAAA,EAAA;AACElH,QAAAA,SAAS,EAAC,0BAA0B;AACpC,QAAA,WAAA,EAAU,QAAQ;AAClB,QAAA,eAAA,EAAc,KAAK;AACnBgH,QAAAA,IAAI,EAAC,QAAQ;AAAAD,QAAAA,QAAA,EAEZxE,aAAa,CAACkB,GAAG,CAAC,CAAClE,IAAI,EAAEuE,KAAK,kBAC7BoD,GAAA,CAACC,UAAU,EAAA;UAETC,GAAG,EAAGC,EAAwB,IAAI;AAChCtF,YAAAA,QAAQ,CAACgB,OAAO,CAACe,KAAK,CAAC,GAAGuD,EAAE,CAAA;WAC5B;AACF9H,UAAAA,IAAI,EAAEA,IAAK;UACX+H,gBAAgB,EAAE,CAACnH,QAAS;AAC5BoH,UAAAA,SAAS,EACP,CAAC,CAAC,CAAC7G,YAAY,IAAInB,IAAI,CAACsE,MAAM,KAAKzB,MAAM,CAAC6B,MAAM,MAC/C,CAAC1E,IAAI,CAACsE,MAAM,IAAI,CAAC3B,iBAAiB,CAAC6C,GAAG,CAACxF,IAAI,CAACsE,MAAM,CAAC,CACrD;AACD2D,UAAAA,QAAQ,EACNjI,IAAI,CAACsE,MAAM,KAAKzB,MAAM,CAAC6B,MAAM,GACzB,MAAML,UAAU,CAACrE,IAAI,CAAC,GACtB,MAAMgC,sBAAsB,CAAChC,IAAI,CACtC;AACDsB,UAAAA,UAAU,EAAEA,UAAAA;SAfPtB,EAAAA,IAAI,CAACyB,EAgBV,CACH,CAAA;AAAC,OACC,CACL,EAAC,CAACb,QAAQ,IAAK,CAACA,QAAQ,IAAI,CAACoC,aAAa,CAACE,MAAO,kBAChDyE,GAAA,CAAA,KAAA,EAAA;AAAKlH,QAAAA,SAAS,EAAC,6DAA6D;QAAA+G,QAAA,eAC1EG,GAAA,CAACO,YAAY,EAAA;AACXzG,UAAAA,EAAE,EAAEA,EAAG;AACPE,UAAAA,iBAAiB,EAAEA,iBAAkB;AACrChB,UAAAA,QAAQ,EAAE8E,8BAA8B,EAAE,IAAI9E,QAAS;AACvDC,UAAAA,QAAQ,EAAEA,QAAS;AACnBC,UAAAA,SAAS,EAAEA,SAAU;AACrBE,UAAAA,SAAS,EAAEA,SAAU;AACrBE,UAAAA,WAAW,EAAEA,WAAY;AACzBM,UAAAA,QAAQ,EAAEA,QAAS;AACnB4G,UAAAA,QAAQ,EAAExC,QAAAA;SAEd,CAAA;AAAA,OAAK,CACN,CAAA;AAAA,KACE,CACL,eAAAgC,GAAA,CAACS,KAAK,EAAA;AACJC,MAAAA,KAAK,EACH3H,aAAa,EAAE2H,KAAK,KAAKzD,SAAS,GAC9BlE,aAAa,CAAC2H,KAAK,GACnB/F,aAAa,CAAC8D,QAAQ,CAACkC,gBAAgB,CAC5C;AACDC,MAAAA,IAAI,EACF7H,aAAa,EAAE6H,IAAI,KAAK3D,SAAS,GAC7BlE,aAAa,CAAC6H,IAAI,GAClBjG,aAAa,CAAC8D,QAAQ,CAACoC,eAAe,CAC3C;MACDC,IAAI,EAAE,CAAC,CAAC1G,mBAAoB;MAC5B2G,MAAM,eACJpB,IAAA,CAAAC,QAAA,EAAA;QAAAC,QAAA,EAAA,cACEG,GAAA,CAACgB,MAAM,EAAA;UACLC,KAAK,EAAA,IAAA;UACLC,OAAO,EAAEA,MAAK;YACZ7G,sBAAsB,CAAC,IAAI,CAAC,CAAA;WAC5B;UAAAwF,QAAA,EAED9G,aAAa,EAAEoI,UAAU,IAAIxG,aAAa,CAAC8D,QAAQ,CAAC2C,2BAA2B,CAAA;AAAC,SAC3E,CACR,eAAApB,GAAA,CAACgB,MAAM,EAAA;UACLC,KAAK,EAAA,IAAA;UACLI,QAAQ,EAAEC,QAAQ,CAACC,SAAU;UAC7BC,IAAI,EAAEC,WAAW,CAACC,QAAS;UAC3BR,OAAO,EAAEA,MAAK;AACZ,YAAA,IAAI9G,mBAAmB,EAAE;cACvBsC,UAAU,CAACtC,mBAAmB,CAAC,CAAA;AACjC,aAAA;YACAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;WAC5B;UAAAwF,QAAA,EAED9G,aAAa,EAAE4I,WAAW,IAAIhH,aAAa,CAAC8D,QAAQ,CAACmD,4BAA4B,CAAA;AAAC,SAC7E,CACV,CAAA;AAAA,OAAA,CACD;MACDC,OAAO,EAAEA,MAAK;QACZxH,sBAAsB,CAAC,IAAI,CAAC,CAAA;AAC9B,OAAA;AAAE,KAEN,CAAA,CAAA;AAAA,GAAA,CAAG,CAAA;AAEP;;;;"}

package/build/uploadInput/uploadButton/UploadButton.js

@@ -114,9 +114,7 @@ const UploadButton = /*#__PURE__*/React.forwardRef(({
   }
   function renderDescription() {
     return /*#__PURE__*/jsxRuntime.jsxs(Body, {
-      className: clsx.clsx({
-        'text-primary': !disabled
-      }),
+      className: "np-upload-input__text",
       children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
       })]
@@ -128,52 +126,46 @@ const UploadButton = /*#__PURE__*/React.forwardRef(({
     }
     return formatMessage(multiple ? UploadButton_messages.uploadFiles : UploadButton_messages.uploadFile);
   }
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: clsx.clsx('np-upload-button-container', 'droppable', {
-      'droppable-dropping': isDropping
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: clsx.clsx('np-upload-input__upload-button', `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`, {
+      'is-dropping': isDropping
     }),
+    htmlFor: id,
     ...(!disabled && {
       onDragEnter,
       onDragLeave,
       onDrop,
       onDragOver
     }),
-    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "np-upload-input__icon",
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
+        size: 24,
+        className: "text-link"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-upload-input__item-content",
+      "data-testid": exports.TEST_IDS.mediaBody,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+        type: typography.Typography.BODY_LARGE_BOLD,
+        className: "np-upload-input__title",
+        children: renderButtonTitle()
+      }), renderDescription()]
+    }), /*#__PURE__*/jsxRuntime.jsx("input", {
       ref: inputRef,
-      id: id,
+      className: "np-upload-input__upload-button-input sr-only",
       type: "file",
+      id: id,
       ...getAcceptedTypes(),
       ...(multiple && {
         multiple: true
       }),
-      className: "tw-droppable-input",
       disabled: disabled,
       name: "file-upload",
       "data-testid": exports.TEST_IDS.uploadInput,
       onChange: filesSelected
-    }), /*#__PURE__*/jsxRuntime.jsx("label", {
-      htmlFor: id,
-      className: clsx.clsx('btn', 'np-upload-button'),
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "media",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-upload-icon media-middle media-left",
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
-            size: 24,
-            className: "text-link"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "media-body text-xs-left",
-          "data-testid": exports.TEST_IDS.mediaBody,
-          children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
-            type: typography.Typography.BODY_LARGE_BOLD,
-            className: "d-block",
-            children: renderButtonTitle()
-          }), renderDescription()]
-        })]
-      })
     }), isDropping && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: clsx.clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      className: clsx.clsx('np-upload-input__drop-file-overlay', 'droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
       children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
         className: "m-x-1",
         size: 24

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

@@ -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 {\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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"}
+{"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=\"np-upload-input__text\">\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      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          ref={inputRef}\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\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","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}

package/build/uploadInput/uploadButton/UploadButton.mjs

@@ -110,9 +110,7 @@ const UploadButton = /*#__PURE__*/forwardRef(({
   }
   function renderDescription() {
     return /*#__PURE__*/jsxs(Body, {
-      className: clsx({
-        'text-primary': !disabled
-      }),
+      className: "np-upload-input__text",
       children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
       })]
@@ -124,52 +122,46 @@ const UploadButton = /*#__PURE__*/forwardRef(({
     }
     return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
   }
-  return /*#__PURE__*/jsxs("div", {
-    className: clsx('np-upload-button-container', 'droppable', {
-      'droppable-dropping': isDropping
+  return /*#__PURE__*/jsxs("label", {
+    className: clsx('np-upload-input__upload-button', `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`, {
+      'is-dropping': isDropping
     }),
+    htmlFor: id,
     ...(!disabled && {
       onDragEnter,
       onDragLeave,
       onDrop,
       onDragOver
     }),
-    children: [/*#__PURE__*/jsx("input", {
+    children: [/*#__PURE__*/jsx("span", {
+      className: "np-upload-input__icon",
+      children: /*#__PURE__*/jsx(Upload, {
+        size: 24,
+        className: "text-link"
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "np-upload-input__item-content",
+      "data-testid": TEST_IDS.mediaBody,
+      children: [/*#__PURE__*/jsx(Body, {
+        type: Typography.BODY_LARGE_BOLD,
+        className: "np-upload-input__title",
+        children: renderButtonTitle()
+      }), renderDescription()]
+    }), /*#__PURE__*/jsx("input", {
       ref: inputRef,
-      id: id,
+      className: "np-upload-input__upload-button-input sr-only",
       type: "file",
+      id: id,
       ...getAcceptedTypes(),
       ...(multiple && {
         multiple: true
       }),
-      className: "tw-droppable-input",
       disabled: disabled,
       name: "file-upload",
       "data-testid": TEST_IDS.uploadInput,
       onChange: filesSelected
-    }), /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: clsx('btn', 'np-upload-button'),
-      children: /*#__PURE__*/jsxs("div", {
-        className: "media",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "np-upload-icon media-middle media-left",
-          children: /*#__PURE__*/jsx(Upload, {
-            size: 24,
-            className: "text-link"
-          })
-        }), /*#__PURE__*/jsxs("div", {
-          className: "media-body text-xs-left",
-          "data-testid": TEST_IDS.mediaBody,
-          children: [/*#__PURE__*/jsx(Body, {
-            type: Typography.BODY_LARGE_BOLD,
-            className: "d-block",
-            children: renderButtonTitle()
-          }), renderDescription()]
-        })]
-      })
     }), isDropping && /*#__PURE__*/jsxs("div", {
-      className: clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      className: clsx('np-upload-input__drop-file-overlay', 'droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
       children: [/*#__PURE__*/jsx(PlusCircle, {
         className: "m-x-1",
         size: 24

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

@@ -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 {\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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"}
+{"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=\"np-upload-input__text\">\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      <label\n        className={clsx(\n          'np-upload-input__upload-button',\n          `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,\n          {\n            'is-dropping': isDropping,\n          },\n        )}\n        htmlFor={id}\n        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}\n      >\n        <span className=\"np-upload-input__icon\">\n          <UploadIcon size={24} className=\"text-link\" />\n        </span>\n        <div className=\"np-upload-input__item-content\" data-testid={TEST_IDS.mediaBody}>\n          <Body type={Typography.BODY_LARGE_BOLD} className=\"np-upload-input__title\">\n            {renderButtonTitle()}\n          </Body>\n          {renderDescription()}\n        </div>\n        <input\n          ref={inputRef}\n          className=\"np-upload-input__upload-button-input sr-only\"\n          type=\"file\"\n          id={id}\n          {...getAcceptedTypes()}\n          {...(multiple && { multiple: true })}\n          disabled={disabled}\n          name=\"file-upload\"\n          data-testid={TEST_IDS.uploadInput}\n          onChange={filesSelected}\n        />\n        {isDropping && (\n          <div\n            className={clsx(\n              'np-upload-input__drop-file-overlay',\n              'droppable-card',\n              'droppable-dropping-card',\n              'droppable-card-content',\n            )}\n          >\n            <PlusIcon className=\"m-x-1\" size={24} />\n            <div>{formatMessage(MESSAGES.dropFile)}</div>\n          </div>\n        )}\n      </label>\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","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","clsx","htmlFor","UploadIcon","mediaBody","type","Typography","BODY_LARGE_BOLD","name","uploadInput","PlusIcon","dropFile","displayName"],"mappings":"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"}

package/build/uploadInput/uploadItem/UploadItem.js

@@ -12,8 +12,8 @@ var UploadItem_messages = require('./UploadItem.messages.js');
 var UploadItemLink = require('./UploadItemLink.js');
 var jsxRuntime = require('react/jsx-runtime');
 var status = require('../../common/propsValues/status.js');
-var size = require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
+var size = require('../../common/propsValues/size.js');
 
 exports.TEST_IDS = void 0;
 (function (TEST_IDS) {
@@ -102,18 +102,20 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
     if (error || errors?.length || status$1 === status.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
         type: typography.Typography.BODY_DEFAULT_BOLD,
-        className: "text-negative",
+        className: "np-upload-input__text text-negative",
         children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
       });
     }
     switch (status$1) {
       case status.Status.PENDING:
         return /*#__PURE__*/jsxRuntime.jsx(Body, {
-          type: typography.Typography.BODY_DEFAULT_BOLD,
+          type: typography.Typography.BODY_DEFAULT,
+          className: "np-upload-input__text",
           children: formatMessage(UploadItem_messages.uploading)
         });
       case status.Status.PROCESSING:
         return /*#__PURE__*/jsxRuntime.jsx(Body, {
+          className: "np-upload-input__text",
           children: formatMessage(UploadItem_messages.deleting)
         });
       case status.Status.SUCCEEDED:
@@ -121,7 +123,7 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
       default:
         return /*#__PURE__*/jsxRuntime.jsx(Body, {
           type: typography.Typography.BODY_DEFAULT_BOLD,
-          className: "text-positive",
+          className: "np-upload-input__text",
           children: formatMessage(UploadItem_messages.uploaded)
         });
     }
@@ -136,48 +138,43 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
     }
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: clsx.clsx('np-upload-item', {
-      'np-upload-item--link': isSucceeded
+    className: clsx.clsx('np-upload-input__item', {
+      'is-interactive': isSucceeded && url
     }),
     "data-testid": exports.TEST_IDS.uploadItem,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-upload-item__body",
-      children: [/*#__PURE__*/jsxRuntime.jsx(UploadItemLink.UploadItemLink, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(UploadItemLink.UploadItemLink, {
         ref: linkRef,
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-upload-button",
-          "aria-live": "polite",
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "media",
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "np-upload-icon media-left",
-              children: getIcon()
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "media-body text-xs-left",
-              "data-testid": exports.TEST_IDS.mediaBody,
-              children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
-                className: "text-word-break d-block text-primary",
-                children: getTitle()
-              }), getDescription()]
-            })]
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-upload-input__icon",
+          children: getIcon()
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "np-upload-input__item-content",
+          "data-testid": exports.TEST_IDS.mediaBody,
+          children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+            type: typography.Typography.BODY_LARGE,
+            className: "np-upload-input__title text-word-break",
+            children: getTitle()
+          }), getDescription()]
+        })]
+      }), canDelete && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-upload-input__item-action",
+        children: /*#__PURE__*/jsxRuntime.jsx("button", {
+          ref: buttonRef,
+          "aria-label": formatMessage(UploadItem_messages.removeFile, {
+            filename
+          }),
+          className: "np-upload-input__item-button",
+          type: "button",
+          onClick: () => onDelete(),
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
+            size: 16
           })
         })
-      }), canDelete && /*#__PURE__*/jsxRuntime.jsx("button", {
-        ref: buttonRef,
-        "aria-label": formatMessage(UploadItem_messages.removeFile, {
-          filename
-        }),
-        className: clsx.clsx('btn', 'np-upload-item__remove-button', 'media-left', {
-          'np-upload-item--single-file': singleFileUpload
-        }),
-        type: "button",
-        onClick: () => onDelete(),
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
-          size: 16
-        })
       })]
     })
   });