@transferwise/components 46.45.0 → 46.46.0

package/build/uploadInput/UploadInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInput.mjs","sources":["../../src/uploadInput/UploadInput.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useEffect, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Button from '../button';\nimport { CommonProps, ControlType, Priority, Status } from '../common';\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 [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 className={classNames('np-upload-input', className, { disabled })}>\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","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","classNames","_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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"}

package/build/uploadInput/uploadButton/UploadButton.js

@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var icons = require('@transferwise/icons');
+var classNames = require('classnames');
+var React = require('react');
+var reactIntl = require('react-intl');
+var Body = require('../../body/Body.js');
+var UploadButton_messages = require('./UploadButton.messages.js');
+var defaults = require('./defaults.js');
+var getAllowedFileTypes = require('./getAllowedFileTypes.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+exports.TEST_IDS = void 0;
+(function (TEST_IDS) {
+  TEST_IDS["uploadInput"] = "uploadInput";
+  TEST_IDS["mediaBody"] = "mediaBody";
+})(exports.TEST_IDS || (exports.TEST_IDS = {}));
+const onDragOver = event => {
+  event.preventDefault();
+};
+const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
+const UploadButton = ({
+  disabled,
+  multiple,
+  description,
+  fileTypes = defaults.imageFileTypes,
+  sizeLimit = defaults.DEFAULT_SIZE_LIMIT,
+  maxFiles,
+  onChange,
+  id = DEFAULT_FILE_INPUT_ID,
+  uploadButtonTitle
+}) => {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
+  const inputReference = React.useRef(null);
+  const [isDropping, setIsDropping] = React.useState(false);
+  const dragCounter = React.useRef(0);
+  const reset = () => {
+    dragCounter.current = 0;
+    setIsDropping(false);
+  };
+  const onDragLeave = event => {
+    event.preventDefault();
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) {
+      setIsDropping(false);
+    }
+  };
+  const onDragEnter = event => {
+    event.preventDefault();
+    dragCounter.current += 1;
+    if (dragCounter.current === 1) {
+      setIsDropping(true);
+    }
+  };
+  const onDrop = event => {
+    event.preventDefault();
+    reset();
+    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      onChange(event.dataTransfer.files);
+    }
+  };
+  const filesSelected = event => {
+    const {
+      files
+    } = event.target;
+    if (files) {
+      onChange(files);
+      if (inputReference.current) {
+        inputReference.current.value = '';
+      }
+    }
+  };
+  const getFileTypesDescription = () => {
+    if (fileTypes === '*') {
+      return fileTypes;
+    }
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
+  };
+  function getDescription() {
+    if (description) {
+      return description;
+    }
+    const fileTypesDescription = getFileTypesDescription();
+    const derivedFileDescription = fileTypesDescription === '*' ? formatMessage(UploadButton_messages.allFileTypes) : fileTypesDescription;
+    return formatMessage(UploadButton_messages.instructions, {
+      fileTypes: derivedFileDescription,
+      size: Math.round(sizeLimit / 1000)
+    });
+  }
+  function getAcceptedTypes() {
+    const areAllFilesAllowed = getFileTypesDescription() === '*';
+    if (areAllFilesAllowed) {
+      return {}; // file input by default allows all files
+    }
+    if (Array.isArray(fileTypes)) {
+      return {
+        accept: fileTypes.join(',')
+      };
+    }
+    return {
+      accept: fileTypes
+    };
+  }
+  function renderDescription() {
+    return /*#__PURE__*/jsxRuntime.jsxs(Body, {
+      className: classNames__default.default({
+        'text-primary': !disabled
+      }),
+      children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
+      })]
+    });
+  }
+  function renderButtonTitle() {
+    if (uploadButtonTitle) {
+      return uploadButtonTitle;
+    }
+    return formatMessage(multiple ? UploadButton_messages.uploadFiles : UploadButton_messages.uploadFile);
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('np-upload-button-container', 'droppable', {
+      'droppable-dropping': isDropping
+    }),
+    ...(!disabled && {
+      onDragEnter,
+      onDragLeave,
+      onDrop,
+      onDragOver
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      ref: inputReference,
+      id: id,
+      type: "file",
+      ...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: classNames__default.default('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: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
+        className: "m-x-1",
+        size: 24
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: formatMessage(UploadButton_messages.dropFile)
+      })]
+    })]
+  });
+};
+
+exports.default = UploadButton;
+//# sourceMappingURL=UploadButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\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={classNames({ '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={classNames('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={classNames('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={classNames(\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    </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","classNames","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","ref","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var MESSAGES = reactIntl.defineMessages({
+  uploadFile: {
+    id: "neptune.UploadButton.uploadFile"
+  },
+  uploadFiles: {
+    id: "neptune.UploadButton.uploadFiles"
+  },
+  instructions: {
+    id: "neptune.UploadButton.instructions"
+  },
+  allFileTypes: {
+    id: "neptune.UploadButton.allFileTypes"
+  },
+  dropFile: {
+    id: "neptune.UploadButton.dropFiles"
+  }
+});
+
+module.exports = MESSAGES;
+//# sourceMappingURL=UploadButton.messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.messages.js","sources":["../../../src/uploadInput/uploadButton/UploadButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  uploadFile: {\n    id: 'neptune.UploadButton.uploadFile',\n    defaultMessage: 'Upload file',\n    description: 'Main CTA copy in the upload button when only a single file is allowed',\n  },\n\n  uploadFiles: {\n    id: 'neptune.UploadButton.uploadFiles',\n    defaultMessage: 'Upload files',\n    description: 'Main CTA copy in the upload button when multiple files are allowed',\n  },\n\n  instructions: {\n    id: 'neptune.UploadButton.instructions',\n    defaultMessage: '{fileTypes}, less than {size}MB',\n    description: 'Description about filetypes and size limit for uploading files',\n  },\n\n  allFileTypes: {\n    id: 'neptune.UploadButton.allFileTypes',\n    defaultMessage: 'All file types',\n    description: 'Copy to show when all filetypes are allowed to be uploaded',\n  },\n\n  dropFile: {\n    id: 'neptune.UploadButton.dropFiles',\n    defaultMessage: 'Drop file to start upload',\n    description: 'Copy to show when dragging files over the upload component',\n  },\n});\n"],"names":["defineMessages","uploadFile","id","uploadFiles","instructions","allFileTypes","dropFile"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,UAAU,EAAE;IACVC,EAAE,EAAA,iCAAA;GAGH;AAEDC,EAAAA,WAAW,EAAE;IACXD,EAAE,EAAA,kCAAA;GAGH;AAEDE,EAAAA,YAAY,EAAE;IACZF,EAAE,EAAA,mCAAA;GAGH;AAEDG,EAAAA,YAAY,EAAE;IACZH,EAAE,EAAA,mCAAA;GAGH;AAEDI,EAAAA,QAAQ,EAAE;IACRJ,EAAE,EAAA,gCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl';
+
+var MESSAGES = defineMessages({
+  uploadFile: {
+    id: "neptune.UploadButton.uploadFile"
+  },
+  uploadFiles: {
+    id: "neptune.UploadButton.uploadFiles"
+  },
+  instructions: {
+    id: "neptune.UploadButton.instructions"
+  },
+  allFileTypes: {
+    id: "neptune.UploadButton.allFileTypes"
+  },
+  dropFile: {
+    id: "neptune.UploadButton.dropFiles"
+  }
+});
+
+export { MESSAGES as default };
+//# sourceMappingURL=UploadButton.messages.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.messages.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  uploadFile: {\n    id: 'neptune.UploadButton.uploadFile',\n    defaultMessage: 'Upload file',\n    description: 'Main CTA copy in the upload button when only a single file is allowed',\n  },\n\n  uploadFiles: {\n    id: 'neptune.UploadButton.uploadFiles',\n    defaultMessage: 'Upload files',\n    description: 'Main CTA copy in the upload button when multiple files are allowed',\n  },\n\n  instructions: {\n    id: 'neptune.UploadButton.instructions',\n    defaultMessage: '{fileTypes}, less than {size}MB',\n    description: 'Description about filetypes and size limit for uploading files',\n  },\n\n  allFileTypes: {\n    id: 'neptune.UploadButton.allFileTypes',\n    defaultMessage: 'All file types',\n    description: 'Copy to show when all filetypes are allowed to be uploaded',\n  },\n\n  dropFile: {\n    id: 'neptune.UploadButton.dropFiles',\n    defaultMessage: 'Drop file to start upload',\n    description: 'Copy to show when dragging files over the upload component',\n  },\n});\n"],"names":["defineMessages","uploadFile","id","uploadFiles","instructions","allFileTypes","dropFile"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,UAAU,EAAE;IACVC,EAAE,EAAA,iCAAA;GAGH;AAEDC,EAAAA,WAAW,EAAE;IACXD,EAAE,EAAA,kCAAA;GAGH;AAEDE,EAAAA,YAAY,EAAE;IACZF,EAAE,EAAA,mCAAA;GAGH;AAEDG,EAAAA,YAAY,EAAE;IACZH,EAAE,EAAA,mCAAA;GAGH;AAEDI,EAAAA,QAAQ,EAAE;IACRJ,EAAE,EAAA,gCAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/uploadInput/uploadButton/UploadButton.mjs

@@ -0,0 +1,178 @@
+import { Upload, PlusCircle } from '@transferwise/icons';
+import classNames from 'classnames';
+import { useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Body from '../../body/Body.mjs';
+import MESSAGES from './UploadButton.messages.mjs';
+import { imageFileTypes, DEFAULT_SIZE_LIMIT } from './defaults.mjs';
+import getAllowedFileTypes from './getAllowedFileTypes.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../common/propsValues/typography.mjs';
+
+var TEST_IDS;
+(function (TEST_IDS) {
+  TEST_IDS["uploadInput"] = "uploadInput";
+  TEST_IDS["mediaBody"] = "mediaBody";
+})(TEST_IDS || (TEST_IDS = {}));
+const onDragOver = event => {
+  event.preventDefault();
+};
+const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
+const UploadButton = ({
+  disabled,
+  multiple,
+  description,
+  fileTypes = imageFileTypes,
+  sizeLimit = DEFAULT_SIZE_LIMIT,
+  maxFiles,
+  onChange,
+  id = DEFAULT_FILE_INPUT_ID,
+  uploadButtonTitle
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const inputReference = useRef(null);
+  const [isDropping, setIsDropping] = useState(false);
+  const dragCounter = useRef(0);
+  const reset = () => {
+    dragCounter.current = 0;
+    setIsDropping(false);
+  };
+  const onDragLeave = event => {
+    event.preventDefault();
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) {
+      setIsDropping(false);
+    }
+  };
+  const onDragEnter = event => {
+    event.preventDefault();
+    dragCounter.current += 1;
+    if (dragCounter.current === 1) {
+      setIsDropping(true);
+    }
+  };
+  const onDrop = event => {
+    event.preventDefault();
+    reset();
+    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      onChange(event.dataTransfer.files);
+    }
+  };
+  const filesSelected = event => {
+    const {
+      files
+    } = event.target;
+    if (files) {
+      onChange(files);
+      if (inputReference.current) {
+        inputReference.current.value = '';
+      }
+    }
+  };
+  const getFileTypesDescription = () => {
+    if (fileTypes === '*') {
+      return fileTypes;
+    }
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
+  };
+  function getDescription() {
+    if (description) {
+      return description;
+    }
+    const fileTypesDescription = getFileTypesDescription();
+    const derivedFileDescription = fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
+    return formatMessage(MESSAGES.instructions, {
+      fileTypes: derivedFileDescription,
+      size: Math.round(sizeLimit / 1000)
+    });
+  }
+  function getAcceptedTypes() {
+    const areAllFilesAllowed = getFileTypesDescription() === '*';
+    if (areAllFilesAllowed) {
+      return {}; // file input by default allows all files
+    }
+    if (Array.isArray(fileTypes)) {
+      return {
+        accept: fileTypes.join(',')
+      };
+    }
+    return {
+      accept: fileTypes
+    };
+  }
+  function renderDescription() {
+    return /*#__PURE__*/jsxs(Body, {
+      className: classNames({
+        'text-primary': !disabled
+      }),
+      children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
+      })]
+    });
+  }
+  function renderButtonTitle() {
+    if (uploadButtonTitle) {
+      return uploadButtonTitle;
+    }
+    return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('np-upload-button-container', 'droppable', {
+      'droppable-dropping': isDropping
+    }),
+    ...(!disabled && {
+      onDragEnter,
+      onDragLeave,
+      onDrop,
+      onDragOver
+    }),
+    children: [/*#__PURE__*/jsx("input", {
+      ref: inputReference,
+      id: id,
+      type: "file",
+      ...getAcceptedTypes(),
+      ...(multiple && {
+        multiple: true
+      }),
+      className: "tw-droppable-input",
+      disabled: disabled,
+      name: "file-upload",
+      "data-testid": TEST_IDS.uploadInput,
+      onChange: filesSelected
+    }), /*#__PURE__*/jsx("label", {
+      htmlFor: id,
+      className: classNames('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: classNames('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      children: [/*#__PURE__*/jsx(PlusCircle, {
+        className: "m-x-1",
+        size: 24
+      }), /*#__PURE__*/jsx("div", {
+        children: formatMessage(MESSAGES.dropFile)
+      })]
+    })]
+  });
+};
+
+export { TEST_IDS, UploadButton as default };
+//# sourceMappingURL=UploadButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadButton.mjs","sources":["../../../src/uploadInput/uploadButton/UploadButton.tsx"],"sourcesContent":["import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';\nimport classNames from 'classnames';\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={classNames({ '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={classNames('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={classNames('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={classNames(\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    </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","classNames","children","_Fragment","_jsx","renderButtonTitle","uploadFiles","uploadFile","ref","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile"],"mappings":"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"}

package/build/uploadInput/uploadButton/defaults.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var fileType = require('../../common/fileType.js');
+
+const DEFAULT_SIZE_LIMIT = 5000;
+const imageFileTypes = [fileType.FileType.PDF, fileType.FileType.JPG, fileType.FileType.PNG];
+
+exports.DEFAULT_SIZE_LIMIT = DEFAULT_SIZE_LIMIT;
+exports.imageFileTypes = imageFileTypes;
+//# sourceMappingURL=defaults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sources":["../../../src/uploadInput/uploadButton/defaults.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nexport const DEFAULT_SIZE_LIMIT = 5000;\n\nexport const imageFileTypes = [FileType.PDF, FileType.JPG, FileType.PNG];\n"],"names":["DEFAULT_SIZE_LIMIT","imageFileTypes","FileType","PDF","JPG","PNG"],"mappings":";;;;AAEO,MAAMA,kBAAkB,GAAG,KAAI;AAEzBC,MAAAA,cAAc,GAAG,CAACC,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,GAAG,EAAEF,iBAAQ,CAACG,GAAG;;;;;"}

package/build/uploadInput/uploadButton/defaults.mjs

@@ -0,0 +1,7 @@
+import { FileType } from '../../common/fileType.mjs';
+
+const DEFAULT_SIZE_LIMIT = 5000;
+const imageFileTypes = [FileType.PDF, FileType.JPG, FileType.PNG];
+
+export { DEFAULT_SIZE_LIMIT, imageFileTypes };
+//# sourceMappingURL=defaults.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.mjs","sources":["../../../src/uploadInput/uploadButton/defaults.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nexport const DEFAULT_SIZE_LIMIT = 5000;\n\nexport const imageFileTypes = [FileType.PDF, FileType.JPG, FileType.PNG];\n"],"names":["DEFAULT_SIZE_LIMIT","imageFileTypes","FileType","PDF","JPG","PNG"],"mappings":";;AAEO,MAAMA,kBAAkB,GAAG,KAAI;AAEzBC,MAAAA,cAAc,GAAG,CAACC,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,GAAG,EAAEF,QAAQ,CAACG,GAAG;;;;"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
+.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(', '));
+
+module.exports = getAllowedFileTypes;
+//# sourceMappingURL=getAllowedFileTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":";;AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs

@@ -0,0 +1,6 @@
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
+.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(', '));
+
+export { getAllowedFileTypes as default };
+//# sourceMappingURL=getAllowedFileTypes.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}