@transferwise/components 0.0.0-experimental-91bc693 → 0.0.0-experimental-c023984

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 classNames from 'classnames';\nimport { ChangeEvent, DragEvent, forwardRef, 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 = forwardRef<HTMLInputElement, 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,\n  ) => {\n    const { formatMessage } = useIntl();\n    const buttonRef = useRef<HTMLLabelElement>(null);\n\n    const inputReference = useRef<HTMLInputElement>(null);\n    const [isDropping, setIsDropping] = useState(false);\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      if (files) {\n        onChange(files);\n        if (inputReference.current) {\n          inputReference.current.value = '';\n        }\n      }\n    };\n\n    const getFileTypesDescription = (): string => {\n      if (fileTypes === '*') {\n        return fileTypes;\n      }\n      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');\n    };\n\n    function getDescription() {\n      if (description) {\n        return description;\n      }\n      const fileTypesDescription = getFileTypesDescription();\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      if (areAllFilesAllowed) {\n        return {};\n      }\n      if (Array.isArray(fileTypes)) {\n        return { accept: fileTypes.join(',') };\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 ref={buttonRef} 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        {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);\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","buttonRef","useRef","inputReference","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","type","name","uploadInput","htmlFor","UploadIcon","mediaBody","Typography","BODY_LARGE_BOLD","PlusIcon","dropFile"],"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 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/uploadItem/UploadItem.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var icons = require('@transferwise/icons');
 var classNames = require('classnames');
 var reactIntl = require('react-intl');
@@ -7,7 +9,6 @@ var Body = require('../../body/Body.js');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
 var UploadItem_messages = require('./UploadItem.messages.js');
 var UploadItemLink = require('./UploadItemLink.js');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var status = require('../../common/propsValues/status.js');
 var size = require('../../common/propsValues/size.js');
@@ -17,14 +18,18 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
-const UploadItem = /*#__PURE__*/React.forwardRef(({
+exports.TEST_IDS = void 0;
+(function (TEST_IDS) {
+  TEST_IDS["uploadItem"] = "uploadItem";
+  TEST_IDS["mediaBody"] = "mediaBody";
+})(exports.TEST_IDS || (exports.TEST_IDS = {}));
+const UploadItem = ({
   file,
   canDelete,
   onDelete,
   onDownload,
-  singleFileUpload,
-  testid
-}, ref) => {
+  singleFileUpload
+}) => {
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -36,6 +41,11 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
     url
   } = file;
   const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
   const getIcon = () => {
     if (error || errors?.length || status$1 === status.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
@@ -59,8 +69,8 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
           size: 24,
           className: "emphasis--positive"
         });
-        return processIndicator;
     }
+    return processIndicator;
   };
   const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(UploadItem_messages.uploadingFailed);
   const getMultipleErrors = errors => {
@@ -72,9 +82,12 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
     }
     return /*#__PURE__*/jsxRuntime.jsx("ul", {
       className: "np-upload-input-errors m-b-0",
-      children: errors.map((error, index) => /*#__PURE__*/jsxRuntime.jsx("li", {
-        children: getErrorMessage(error)
-      }, index))
+      children: errors.map((error, index) => {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/jsxRuntime.jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
     });
   };
   const getDescription = () => {
@@ -105,27 +118,23 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
         });
     }
   };
-  const getTitle = () => filename || formatMessage(UploadItem_messages.uploadedFile);
+  const getTitle = () => {
+    return filename || formatMessage(UploadItem_messages.uploadedFile);
+  };
   const onDownloadFile = event => {
     if (onDownload) {
       event.preventDefault();
       onDownload(file);
     }
   };
-  const handleDelete = () => {
-    onDelete();
-    const uploadButtonElement = document.querySelector('.np-upload-button');
-    uploadButtonElement?.focus();
-  };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames__default.default('np-upload-item', {
       'np-upload-item--link': isSucceeded
     }),
-    "data-testid": `upload-item-${testid}`,
+    "data-testid": exports.TEST_IDS.uploadItem,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-upload-item__body",
       children: [/*#__PURE__*/jsxRuntime.jsx(UploadItemLink.UploadItemLink, {
-        ref: isSucceeded ? ref : undefined,
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,
@@ -139,7 +148,7 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
               children: getIcon()
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "media-body text-xs-left",
-              "data-testid": "mediaBody",
+              "data-testid": exports.TEST_IDS.mediaBody,
               children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
                 className: "text-word-break d-block text-primary",
                 children: getTitle()
@@ -148,7 +157,6 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
           })
         })
       }), canDelete && /*#__PURE__*/jsxRuntime.jsx("button", {
-        ref: isSucceeded ? undefined : ref,
         "aria-label": formatMessage(UploadItem_messages.removeFile, {
           filename
         }),
@@ -156,14 +164,14 @@ const UploadItem = /*#__PURE__*/React.forwardRef(({
           'np-upload-item--single-file': singleFileUpload
         }),
         type: "button",
-        onClick: handleDelete,
+        onClick: () => onDelete(),
         children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
           size: 16
         })
       })]
     })
   });
-});
+};
 
-module.exports = UploadItem;
+exports.default = UploadItem;
 //# sourceMappingURL=UploadItem.js.map

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

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

package/build/uploadInput/uploadItem/UploadItem.mjs

@@ -5,20 +5,23 @@ import Body from '../../body/Body.mjs';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
 import MESSAGES from './UploadItem.messages.mjs';
 import { UploadItemLink } from './UploadItemLink.mjs';
-import { forwardRef } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Status } from '../../common/propsValues/status.mjs';
 import { Size } from '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 
-const UploadItem = /*#__PURE__*/forwardRef(({
+var TEST_IDS;
+(function (TEST_IDS) {
+  TEST_IDS["uploadItem"] = "uploadItem";
+  TEST_IDS["mediaBody"] = "mediaBody";
+})(TEST_IDS || (TEST_IDS = {}));
+const UploadItem = ({
   file,
   canDelete,
   onDelete,
   onDownload,
-  singleFileUpload,
-  testid
-}, ref) => {
+  singleFileUpload
+}) => {
   const {
     formatMessage
   } = useIntl();
@@ -30,6 +33,11 @@ const UploadItem = /*#__PURE__*/forwardRef(({
     url
   } = file;
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
   const getIcon = () => {
     if (error || errors?.length || status === Status.FAILED) {
       return /*#__PURE__*/jsx(CrossCircleFill, {
@@ -53,8 +61,8 @@ const UploadItem = /*#__PURE__*/forwardRef(({
           size: 24,
           className: "emphasis--positive"
         });
-        return processIndicator;
     }
+    return processIndicator;
   };
   const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getMultipleErrors = errors => {
@@ -66,9 +74,12 @@ const UploadItem = /*#__PURE__*/forwardRef(({
     }
     return /*#__PURE__*/jsx("ul", {
       className: "np-upload-input-errors m-b-0",
-      children: errors.map((error, index) => /*#__PURE__*/jsx("li", {
-        children: getErrorMessage(error)
-      }, index))
+      children: errors.map((error, index) => {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
     });
   };
   const getDescription = () => {
@@ -99,27 +110,23 @@ const UploadItem = /*#__PURE__*/forwardRef(({
         });
     }
   };
-  const getTitle = () => filename || formatMessage(MESSAGES.uploadedFile);
+  const getTitle = () => {
+    return filename || formatMessage(MESSAGES.uploadedFile);
+  };
   const onDownloadFile = event => {
     if (onDownload) {
       event.preventDefault();
       onDownload(file);
     }
   };
-  const handleDelete = () => {
-    onDelete();
-    const uploadButtonElement = document.querySelector('.np-upload-button');
-    uploadButtonElement?.focus();
-  };
   return /*#__PURE__*/jsx("div", {
     className: classNames('np-upload-item', {
       'np-upload-item--link': isSucceeded
     }),
-    "data-testid": `upload-item-${testid}`,
+    "data-testid": TEST_IDS.uploadItem,
     children: /*#__PURE__*/jsxs("div", {
       className: "np-upload-item__body",
       children: [/*#__PURE__*/jsx(UploadItemLink, {
-        ref: isSucceeded ? ref : undefined,
         url: isSucceeded ? url : undefined,
         singleFileUpload: singleFileUpload,
         onDownload: onDownloadFile,
@@ -133,7 +140,7 @@ const UploadItem = /*#__PURE__*/forwardRef(({
               children: getIcon()
             }), /*#__PURE__*/jsxs("div", {
               className: "media-body text-xs-left",
-              "data-testid": "mediaBody",
+              "data-testid": TEST_IDS.mediaBody,
               children: [/*#__PURE__*/jsx(Body, {
                 className: "text-word-break d-block text-primary",
                 children: getTitle()
@@ -142,7 +149,6 @@ const UploadItem = /*#__PURE__*/forwardRef(({
           })
         })
       }), canDelete && /*#__PURE__*/jsx("button", {
-        ref: isSucceeded ? undefined : ref,
         "aria-label": formatMessage(MESSAGES.removeFile, {
           filename
         }),
@@ -150,14 +156,14 @@ const UploadItem = /*#__PURE__*/forwardRef(({
           'np-upload-item--single-file': singleFileUpload
         }),
         type: "button",
-        onClick: handleDelete,
+        onClick: () => onDelete(),
         children: /*#__PURE__*/jsx(Bin, {
           size: 16
         })
       })]
     })
   });
-});
+};
 
-export { UploadItem as default };
+export { TEST_IDS, UploadItem as default };
 //# sourceMappingURL=UploadItem.mjs.map

package/build/uploadInput/uploadItem/UploadItem.mjs.map

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

package/build/uploadInput/uploadItem/UploadItemLink.js

@@ -1,26 +1,24 @@
 'use strict';
 
 var classNames = require('classnames');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
-const UploadItemLink = /*#__PURE__*/React.forwardRef(({
+const UploadItemLink = ({
   children,
   url,
   onDownload,
   singleFileUpload
-}, ref) => {
+}) => {
   if (!url) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       children: children
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx("a", {
-    ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
@@ -28,7 +26,7 @@ const UploadItemLink = /*#__PURE__*/React.forwardRef(({
     onClick: onDownload,
     children: children
   });
-});
+};
 
 exports.UploadItemLink = UploadItemLink;
 //# sourceMappingURL=UploadItemLink.js.map

package/build/uploadInput/uploadItem/UploadItemLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { PropsWithChildren, MouseEvent, forwardRef } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLDivElement | HTMLAnchorElement, UploadItemLinkProps>(\n  ({ children, url, onDownload, singleFileUpload }, ref) => {\n    if (!url) {\n      return <div>{children}</div>;\n    }\n\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={classnames(\n          'np-upload-item__link',\n          singleFileUpload ? 'np-upload-item--single-file' : '',\n        )}\n        onClick={onDownload}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;;;;;;;AASaA,MAAAA,cAAc,gBAAGC,gBAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,cAAA,CAAA,KAAA,EAAA;AAAAL,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEK,cAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAoC;AACzCE,IAAAA,IAAI,EAAEL,GAAI;AACVM,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,2BAAU,CACnB,sBAAsB,EACtBP,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}
+{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classnames(\n        'np-upload-item__link',\n        singleFileUpload ? 'np-upload-item--single-file' : '',\n      )}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;;;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,2BAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}

package/build/uploadInput/uploadItem/UploadItemLink.mjs

@@ -1,20 +1,18 @@
 import classNames from 'classnames';
-import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const UploadItemLink = /*#__PURE__*/forwardRef(({
+const UploadItemLink = ({
   children,
   url,
   onDownload,
   singleFileUpload
-}, ref) => {
+}) => {
   if (!url) {
     return /*#__PURE__*/jsx("div", {
       children: children
     });
   }
   return /*#__PURE__*/jsx("a", {
-    ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
@@ -22,7 +20,7 @@ const UploadItemLink = /*#__PURE__*/forwardRef(({
     onClick: onDownload,
     children: children
   });
-});
+};
 
 export { UploadItemLink };
 //# sourceMappingURL=UploadItemLink.mjs.map

package/build/uploadInput/uploadItem/UploadItemLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { PropsWithChildren, MouseEvent, forwardRef } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = forwardRef<HTMLDivElement | HTMLAnchorElement, UploadItemLinkProps>(\n  ({ children, url, onDownload, singleFileUpload }, ref) => {\n    if (!url) {\n      return <div>{children}</div>;\n    }\n\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={classnames(\n          'np-upload-item__link',\n          singleFileUpload ? 'np-upload-item--single-file' : '',\n        )}\n        onClick={onDownload}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["UploadItemLink","forwardRef","children","url","onDownload","singleFileUpload","ref","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;AASaA,MAAAA,cAAc,gBAAGC,UAAU,CACtC,CAAC;EAAEC,QAAQ;EAAEC,GAAG;EAAEC,UAAU;AAAEC,EAAAA,gBAAAA;CAAkB,EAAEC,GAAG,KAAI;EACvD,IAAI,CAACH,GAAG,EAAE;AACR,IAAA,oBAAOI,GAAA,CAAA,KAAA,EAAA;AAAAL,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEK,GAAA,CAAA,GAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAoC;AACzCE,IAAAA,IAAI,EAAEL,GAAI;AACVM,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,UAAU,CACnB,sBAAsB,EACtBP,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFQ,IAAAA,OAAO,EAAET,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER,CAAC;;;;"}
+{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n  url?: string;\n  onDownload?: (event: MouseEvent) => void;\n  singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n  children,\n  url,\n  onDownload,\n  singleFileUpload,\n}: UploadItemLinkProps) => {\n  if (!url) {\n    return <div>{children}</div>;\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classnames(\n        'np-upload-item__link',\n        singleFileUpload ? 'np-upload-item--single-file' : '',\n      )}\n      onClick={onDownload}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,UAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-91bc693",
+  "version": "0.0.0-experimental-c023984",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@wise/components-theming": "1.4.0",
     "@transferwise/neptune-css": "14.12.1",
+    "@wise/components-theming": "1.4.0",
     "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
@@ -125,7 +125,8 @@
     "merge-props": "^6.0.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "virtua": "^0.33.3"
   },
   "publishConfig": {
     "access": "public"

package/src/inputs/SelectInput.css

@@ -206,6 +206,10 @@
     height: auto;
   }
 }
+.np-select-input-listbox-container--virtualized {
+  /* The wrapping element shrinks this as needed */
+  height: 100vh;
+}
 .np-select-input-listbox-container--has-group {
   scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
@@ -224,6 +228,12 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-listbox-container--virtualized .np-select-input-listbox {
+  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+  overflow-y: auto;
+  contain: strict;
+  height: 100%;
+}
 .np-select-input-separator-item {
   margin: 8px;
   margin: var(--size-8);

package/src/inputs/SelectInput.less

@@ -60,6 +60,11 @@
     }
   }
 
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
   &--has-group {
     scroll-padding-top: var(--size-32);
   }
@@ -71,6 +76,13 @@
 
   .focus-ring();
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+
+  .np-select-input-listbox-container--virtualized & {
+    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+    overflow-y: auto;
+    contain: strict;
+    height: 100%;
+  }
 }
 
 .np-select-input-separator-item {