@transferwise/components 39.1.1-beta-ef97353377.4 → 39.2.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [39.2.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.1.2...@transferwise/components@39.2.0) (2021-12-16)
+
+
+### Features
+
+* **UploadInput:** Accept an optional description for the upload button ([#1255](https://github.com/transferwise/neptune-web/issues/1255)) ([4ac43c4](https://github.com/transferwise/neptune-web/commit/4ac43c4026dd09d3aa9e0c4b2767cf2a38021caa))
+
+
+
+
+
+## [39.1.2](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.1.1...@transferwise/components@39.1.2) (2021-12-16)
+
+**Note:** Version bump only for package @transferwise/components
+
+
+
+
+
+## [39.1.1](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.1.0...@transferwise/components@39.1.1) (2021-12-15)
+
+
+### Bug Fixes
+
+* RTL layout bugs (Select, grid) ([#1256](https://github.com/transferwise/neptune-web/issues/1256)) ([a975006](https://github.com/transferwise/neptune-web/commit/a9750067ebabe8830e5ca8231dff8fe3e5c317bb))
+
+
+
+
+
 # [39.1.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.0.1...@transferwise/components@39.1.0) (2021-12-08)
 
 

package/build/es/no-polyfill/select/option/Option.js

@@ -1 +1 @@
-import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null,k=e?"".concat(i(["d-flex align-items-start","".concat(e?"flex-column":"")])):"d-flex align-items-start";return/*#__PURE__*/_jsxs("span",{className:k,children:[f?/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon","".concat(h&&b?"hidden-xs":"")]))}):b&&/*#__PURE__*/_jsx("i",{className:j}),c,d&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:d}),e&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;
+import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null,k=d?"".concat(i(["d-flex align-items-center"])):void 0;return/*#__PURE__*/_jsxs(_Fragment,{children:[f?/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon","".concat(h&&b?"hidden-xs":"")]))}):b&&/*#__PURE__*/_jsx("i",{className:j}),/*#__PURE__*/_jsxs("span",{className:k,children:[c,d&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:d})]}),e&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;

package/build/es/no-polyfill/uploadInput/UploadInput.js

@@ -1,7 +1,7 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{useEffect,useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.onUploadFile,p=a.onDeleteFile,q=a.onValidationError,r=a.onFilesChange,s=a.onDownload,t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(!1),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useIntl(),C=B.formatMessage,D=new Set([Status.PENDING,Status.PROCESSING]),E=useState(j||0===c.length?c:[c[0]]),F=_slicedToArray(E,2),G=F[0],H=F[1],I=function(a){H(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},J=function(a,b){H(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},K=function(a){var b=a.id,c=a.status;c===Status.FAILED?I(a):p&&b&&(J(a,{status:Status.PROCESSING,error:void 0}),p(b).then(function(){return I(a)}).catch(function(b){J(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
-return useEffect(function(){A(!0)},[]),useEffect(function(){r&&z&&r(G)},[r,G]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[G.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!p||a.status===Status.FAILED)&&(!a.status||!D.has(a.status)),onDelete:a.status===Status.FAILED?function(){return K(a)}:function(){return w(a)},onDownload:s},a.id)}),(j||!j&&!G.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{useEffect,useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.description,p=a.onUploadFile,q=a.onDeleteFile,r=a.onValidationError,s=a.onFilesChange,t=a.onDownload,u=useState(null),v=_slicedToArray(u,2),w=v[0],x=v[1],y=useState(!1),z=_slicedToArray(y,2),A=z[0],B=z[1],C=useIntl(),D=C.formatMessage,E=new Set([Status.PENDING,Status.PROCESSING]),F=useState(j||0===c.length?c:[c[0]]),G=_slicedToArray(F,2),H=G[0],I=G[1],J=function(a){I(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},K=function(a,b){I(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},L=function(a){var b=a.id,c=a.status;c===Status.FAILED?J(a):q&&b&&(K(a,{status:Status.PROCESSING,error:void 0}),q(b).then(function(){return J(a)}).catch(function(b){K(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
+return useEffect(function(){B(!0)},[]),useEffect(function(){s&&A&&s(H)},[s,H]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[H.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!q||a.status===Status.FAILED)&&(!a.status||!E.has(a.status)),onDelete:a.status===Status.FAILED?function(){return L(a)}:function(){return x(a)},onDownload:t},a.id)}),(j||!j&&!H.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,description:o,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
 if(b){var d=function(){var a=b.name,d=b.size,f="".concat(a,"_").concat(d),g=Array.isArray(l)?l.join(","):l;// Check if file type is valid
-if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileTypeNotSupported)};return H(function(a){return[].concat(_toConsumableArray(a),[i])}),q&&q(i),"continue"}// Check if the filesize is valid
+if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:D(MESSAGES.fileTypeNotSupported)};return I(function(a){return[].concat(_toConsumableArray(a),[i])}),r&&r(i),"continue"}// Check if the filesize is valid
 // Convert to rough bytes
-if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileIsTooLarge)};return H(function(a){return[].concat(_toConsumableArray(a),[k])}),q&&q(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(H(function(a){return[].concat(_toConsumableArray(a),[h])}),o(c).then(function(a){var b=a.id,c=a.url,d=a.error;J(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){J(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
-return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===g||void 0===g?void 0:g.title)?C(MESSAGES.deleteModalTitle):g.title,body:void 0===(null===g||void 0===g?void 0:g.body)?C(MESSAGES.deleteModalBody):g.body,open:!!v,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){w(null)},children:(null===g||void 0===g?void 0:g.cancelText)||C(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){v&&K(v),w(null)},children:(null===g||void 0===g?void 0:g.confirmText)||C(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){w(null)}})]})};export default UploadInput;
+if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:D(MESSAGES.fileIsTooLarge)};return I(function(a){return[].concat(_toConsumableArray(a),[k])}),r&&r(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(I(function(a){return[].concat(_toConsumableArray(a),[h])}),p(c).then(function(a){var b=a.id,c=a.url,d=a.error;K(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){K(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
+return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===g||void 0===g?void 0:g.title)?D(MESSAGES.deleteModalTitle):g.title,body:void 0===(null===g||void 0===g?void 0:g.body)?D(MESSAGES.deleteModalBody):g.body,open:!!w,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){x(null)},children:(null===g||void 0===g?void 0:g.cancelText)||D(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){w&&L(w),x(null)},children:(null===g||void 0===g?void 0:g.confirmText)||D(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){x(null)}})]})};export default UploadInput;

package/build/es/no-polyfill/uploadInput/UploadInput.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:action("Manual download handler")});export var withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onFilesChange:action("Files change handler")});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var UploadInputWithDescriptionFromOutside=Template.bind({});UploadInputWithDescriptionFromOutside.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,description:"Custom file description from prop"});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:action("Manual download handler")});export var withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onFilesChange:action("Files change handler")});

package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.fileTypes,e=void 0===d?imageFileTypes:d,f=a.sizeLimit,g=void 0===f?DEFAULT_SIZE_LIMIT:f,h=a.onChange,i=useDirection(),j=i.isRTL,k=useIntl(),l=k.formatMessage,m=useRef(null),n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(0),s=function(){r.current=0,q(!1)},t=function getFileTypesDescription(){return Array.isArray(e)?getAllowedFileTypes(e).join(", "):"*"===e?e:getAllowedFileTypes([e]).join(", ")}(),u="*"===t,v=u?l(MESSAGES.allFileTypes):t,w=Array.isArray(e)?e.join(","):e;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":p})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),r.current+=1,1===r.current&&q(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),r.current-=1,0===r.current&&q(!1)},onDrop:function onDrop(a){a.preventDefault(),s(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&h(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:m,id:"np-upload-button",type:"file"},!u&&{accept:w}),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(h(b),m.current&&(m.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:l(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:l(MESSAGES.instructions,{fileTypes:v,size:Math.round(g/1e3)})})]})]})}),p&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:l(MESSAGES.dropFile)})]})]}))};export default UploadButton;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.description,e=a.fileTypes,f=void 0===e?imageFileTypes:e,g=a.sizeLimit,h=void 0===g?DEFAULT_SIZE_LIMIT:g,i=a.onChange,j=useDirection(),k=j.isRTL,l=useIntl(),m=l.formatMessage,n=useRef(null),o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(0),t=function(){s.current=0,r(!1)},u=function(){return"*"===f?f:Array.isArray(f)?getAllowedFileTypes(f).join(", "):getAllowedFileTypes([f]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":q})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),s.current+=1,1===s.current&&r(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),s.current-=1,0===s.current&&r(!1)},onDrop:function onDrop(a){a.preventDefault(),t(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&i(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:n,id:"np-upload-button",type:"file"},function(){var a="*"===u();return a?null:Array.isArray(f)?{accept:f.join(",")}:{accept:f}}()),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(i(b),n.current&&(n.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:m(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:function(){if(d)return d;var a=u(),b="*"===a?m(MESSAGES.allFileTypes):a;return m(MESSAGES.instructions,{fileTypes:b,size:Math.round(h/1e3)})}()})]})]})}),q&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:m(MESSAGES.dropFile)})]})]}))};export default UploadButton;

package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.spec.js

@@ -1,3 +1,3 @@
 import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,screen,userEvent}from"../../test-utils";import UploadButton,{TEST_IDS}from"./UploadButton";import{imageFileTypes}from"./defaults";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadButton",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpg"}),c={onChange:jest.fn()},d=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:c;return render(/*#__PURE__*/_jsx(UploadButton,_objectSpread({},a)))};describe("single file upload",function(){beforeEach(function(){d()}),it("should render the file input form",function(){expect(screen.getByText("Upload file")).toBeInTheDocument()}),it("should set accept to imageTypes",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("accept",imageFileTypes.join(","))}),it("trigger onChange callback with a FileList",function(){var d=screen.getByTestId(TEST_IDS.uploadInput);// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(1)})}),describe("multiple file upload",function(){beforeEach(function(){c.onChange.mockClear(),d(_objectSpread(_objectSpread({},c),{},{multiple:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("multiple")}),it("trigger onChange callback with a FileList",function(){var d=screen.getByTestId(TEST_IDS.uploadInput);// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(2)})}),describe("disabled state",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{disabled:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toBeDisabled()})}),describe("accept all file types",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]}))}),it("should not add accept attribute to file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).not.toHaveAttribute("accept")})})});
+userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(2)})}),describe("disabled state",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{disabled:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toBeDisabled()})}),describe("accept all file types",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]}))}),it("should not add accept attribute to file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).not.toHaveAttribute("accept")})}),describe("description for the button",function(){it("should show default description based on the default file types provided",function(){d(_objectSpread({},c)),expect(screen.getByText("PDF, JPG, JPEG, PNG, less than 5MB")).toBeInTheDocument()}),it("should show default all files allowed description if all files are accepted",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]})),expect(screen.getByText("All file types, less than 5MB")).toBeInTheDocument()}),it("should show custom description if provided",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"],description:"Test description"})),expect(screen.getByText("Test description")).toBeInTheDocument()})})});

package/build/es/polyfill/select/option/Option.js

@@ -1 +1 @@
-import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null,k=e?"".concat(i(["d-flex align-items-start","".concat(e?"flex-column":"")])):"d-flex align-items-start";return/*#__PURE__*/_jsxs("span",{className:k,children:[f?/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon","".concat(h&&b?"hidden-xs":"")]))}):b&&/*#__PURE__*/_jsx("i",{className:j}),c,d&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:d}),e&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;
+import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null,k=d?"".concat(i(["d-flex align-items-center"])):void 0;return/*#__PURE__*/_jsxs(_Fragment,{children:[f?/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon","".concat(h&&b?"hidden-xs":"")]))}):b&&/*#__PURE__*/_jsx("i",{className:j}),/*#__PURE__*/_jsxs("span",{className:k,children:[c,d&&/*#__PURE__*/_jsx("span",{className:"body-2 m-l-1",children:d})]}),e&&/*#__PURE__*/_jsx("span",{className:"body-2 text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;

package/build/es/polyfill/uploadInput/UploadInput.js

@@ -1,7 +1,7 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.join.js";import classNames from"classnames";import{useEffect,useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.onUploadFile,p=a.onDeleteFile,q=a.onValidationError,r=a.onFilesChange,s=a.onDownload,t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(!1),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useIntl(),C=B.formatMessage,D=new Set([Status.PENDING,Status.PROCESSING]),E=useState(j||0===c.length?c:[c[0]]),F=_slicedToArray(E,2),G=F[0],H=F[1],I=function(a){H(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},J=function(a,b){H(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},K=function(a){var b=a.id,c=a.status;c===Status.FAILED?I(a):p&&b&&(J(a,{status:Status.PROCESSING,error:void 0}),p(b).then(function(){return I(a)}).catch(function(b){J(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
-return useEffect(function(){A(!0)},[]),useEffect(function(){r&&z&&r(G)},[r,G]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[G.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!p||a.status===Status.FAILED)&&(!a.status||!D.has(a.status)),onDelete:a.status===Status.FAILED?function(){return K(a)}:function(){return w(a)},onDownload:s},a.id)}),(j||!j&&!G.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.join.js";import classNames from"classnames";import{useEffect,useState}from"react";import{useIntl}from"react-intl";import Button from"../button";import{ControlType,Priority,Status}from"../common";import Modal from"../modal";import{isSizeValid}from"../upload/utils/isSizeValid";import{isTypeValid}from"../upload/utils/isTypeValid";import MESSAGES from"./UploadInput.messages";import UploadButton from"./uploadButton/UploadButton";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./uploadButton/defaults";import UploadItem from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var UploadInput=function(a){var b=a.files,c=void 0===b?[]:b,d=a.fileInputName,e=void 0===d?"file":d,f=a.className,g=a.deleteConfirm,h=a.disabled,i=a.multiple,j=void 0!==i&&i,k=a.fileTypes,l=void 0===k?imageFileTypes:k,m=a.sizeLimit,n=void 0===m?DEFAULT_SIZE_LIMIT:m,o=a.description,p=a.onUploadFile,q=a.onDeleteFile,r=a.onValidationError,s=a.onFilesChange,t=a.onDownload,u=useState(null),v=_slicedToArray(u,2),w=v[0],x=v[1],y=useState(!1),z=_slicedToArray(y,2),A=z[0],B=z[1],C=useIntl(),D=C.formatMessage,E=new Set([Status.PENDING,Status.PROCESSING]),F=useState(j||0===c.length?c:[c[0]]),G=_slicedToArray(F,2),H=G[0],I=G[1],J=function(a){I(function(b){return b.filter(function(b){return a!==b&&a.id!==b.id})})},K=function(a,b){I(function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})})},L=function(a){var b=a.id,c=a.status;c===Status.FAILED?J(a):q&&b&&(K(a,{status:Status.PROCESSING,error:void 0}),q(b).then(function(){return J(a)}).catch(function(b){K(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
+return useEffect(function(){B(!0)},[]),useEffect(function(){s&&A&&s(H)},[s,H]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",f),children:[H.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!q||a.status===Status.FAILED)&&(!a.status||!E.has(a.status)),onDelete:a.status===Status.FAILED?function(){return L(a)}:function(){return x(a)},onDownload:t},a.id)}),(j||!j&&!H.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:h,multiple:j,fileTypes:l,sizeLimit:n,description:o,onChange:function addFiles(a){for(var f=0;f<a.length;f+=1){var b=a.item(f),c=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
 if(b){var d=function(){var a=b.name,d=b.size,f="".concat(a,"_").concat(d),g=Array.isArray(l)?l.join(","):l;// Check if file type is valid
-if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileTypeNotSupported)};return H(function(a){return[].concat(_toConsumableArray(a),[i])}),q&&q(i),"continue"}// Check if the filesize is valid
+if(!isTypeValid(b,g)){var i={id:f,filename:a,status:Status.FAILED,error:D(MESSAGES.fileTypeNotSupported)};return I(function(a){return[].concat(_toConsumableArray(a),[i])}),r&&r(i),"continue"}// Check if the filesize is valid
 // Convert to rough bytes
-if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:C(MESSAGES.fileIsTooLarge)};return H(function(a){return[].concat(_toConsumableArray(a),[k])}),q&&q(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(H(function(a){return[].concat(_toConsumableArray(a),[h])}),o(c).then(function(a){var b=a.id,c=a.url,d=a.error;J(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){J(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
-return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===g||void 0===g?void 0:g.title)?C(MESSAGES.deleteModalTitle):g.title,body:void 0===(null===g||void 0===g?void 0:g.body)?C(MESSAGES.deleteModalBody):g.body,open:!!v,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){w(null)},children:(null===g||void 0===g?void 0:g.cancelText)||C(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){v&&K(v),w(null)},children:(null===g||void 0===g?void 0:g.confirmText)||C(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){w(null)}})]})};export default UploadInput;
+if(!isSizeValid(b,1e3*n)){var k={id:f,filename:a,status:Status.FAILED,error:D(MESSAGES.fileIsTooLarge)};return I(function(a){return[].concat(_toConsumableArray(a),[k])}),r&&r(k),"continue"}c.append(e,b);var h={id:f,filename:a,status:Status.PENDING};if(I(function(a){return[].concat(_toConsumableArray(a),[h])}),p(c).then(function(a){var b=a.id,c=a.url,d=a.error;K(h,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){K(h,{error:a,status:Status.FAILED})}),!j)// Only upload a single file
+return"break"}();if("continue"===d)continue;if("break"===d)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===g||void 0===g?void 0:g.title)?D(MESSAGES.deleteModalTitle):g.title,body:void 0===(null===g||void 0===g?void 0:g.body)?D(MESSAGES.deleteModalBody):g.body,open:!!w,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){x(null)},children:(null===g||void 0===g?void 0:g.cancelText)||D(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){w&&L(w),x(null)},children:(null===g||void 0===g?void 0:g.confirmText)||D(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){x(null)}})]})};export default UploadInput;

package/build/es/polyfill/uploadInput/UploadInput.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.array.slice.js";import{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:action("Manual download handler")});export var withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onFilesChange:action("Files change handler")});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import"core-js/modules/es.array.slice.js";import{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";export default{title:"UploadInput",component:UploadInput};var files=[{id:1,filename:"purchase-receipt.pdf",url:"https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"},{id:2,filename:"receipt failed.png",status:Status.FAILED},{id:3,filename:"receipt failed with error string.png",status:Status.FAILED,error:"File is too large"},{id:4,filename:"receipt failed with error object.png",status:Status.FAILED,error:{message:"Filetype not supported"}}],createDelayedPromise=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.successful,c=a.delaySeconds,d=void 0===c?3:c,e=a.response,f=void 0===e?{id:Math.round(1e4*Math.random()),url:"#"}:e;return new Promise(function(a,c){setTimeout(function(){return!(void 0!==b)||b?a(f):c(new Error("Unexpected error"))},1e3*d)})},props={onUploadFile:function onUploadFile(){return createDelayedPromise()},onDeleteFile:function onDeleteFile(){return createDelayedPromise()}},Template=function(a){return/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a))};export var SingleFile=Template.bind({});SingleFile.args=_objectSpread({},props);export var MultipleFiles=Template.bind({});MultipleFiles.args=_objectSpread(_objectSpread({},props),{},{multiple:!0});export var UploadInputWithDescriptionFromOutside=Template.bind({});UploadInputWithDescriptionFromOutside.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,description:"Custom file description from prop"});export var Disabled=Template.bind({});Disabled.args=_objectSpread(_objectSpread({},props),{},{disabled:!0});export var WithAnyFileType=Template.bind({});WithAnyFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:"*"});export var WithSingleFileType=Template.bind({});WithSingleFileType.args=_objectSpread(_objectSpread({},props),{},{fileTypes:".zip,application/zip"});export var WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args=_objectSpread(_objectSpread({},props),{},{files:files,multiple:!0});export var WithoutDelete=Template.bind({});WithoutDelete.args=_objectSpread(_objectSpread({},props),{},{files:files,onDeleteFile:void 0,multiple:!0});export var WithUploadFailed=Template.bind({});WithUploadFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onUploadFile:function onUploadFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var WithDeleteFailed=Template.bind({});WithDeleteFailed.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),onDeleteFile:function onDeleteFile(){return createDelayedPromise({successful:!1})},multiple:!0});export var CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args=_objectSpread(_objectSpread({},props),{},{files:files.slice(0),deleteConfirm:{title:"Sure you want to remove this invoice?",body:/*#__PURE__*/_jsx("img",{alt:"brand logo",src:"https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"})}});export var withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onDownload:action("Manual download handler")});export var withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args=_objectSpread(_objectSpread({},props),{},{files:files,onFilesChange:action("Files change handler")});

package/build/es/polyfill/uploadInput/uploadButton/UploadButton.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.join.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.fileTypes,e=void 0===d?imageFileTypes:d,f=a.sizeLimit,g=void 0===f?DEFAULT_SIZE_LIMIT:f,h=a.onChange,i=useDirection(),j=i.isRTL,k=useIntl(),l=k.formatMessage,m=useRef(null),n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(0),s=function(){r.current=0,q(!1)},t=function getFileTypesDescription(){return Array.isArray(e)?getAllowedFileTypes(e).join(", "):"*"===e?e:getAllowedFileTypes([e]).join(", ")}(),u="*"===t,v=u?l(MESSAGES.allFileTypes):t,w=Array.isArray(e)?e.join(","):e;return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":p})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),r.current+=1,1===r.current&&q(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),r.current-=1,0===r.current&&q(!1)},onDrop:function onDrop(a){a.preventDefault(),s(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&h(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:m,id:"np-upload-button",type:"file"},!u&&{accept:w}),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(h(b),m.current&&(m.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:l(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:l(MESSAGES.instructions,{fileTypes:v,size:Math.round(g/1e3)})})]})]})}),p&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:l(MESSAGES.dropFile)})]})]}))};export default UploadButton;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{Upload as UploadIcon,PlusCircle as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import{useState,useRef}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{imageFileTypes,DEFAULT_SIZE_LIMIT}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS;(function(a){a.uploadInput="uploadInput",a.mediaBody="mediaBody"})(TEST_IDS||(TEST_IDS={}));var onDragOver=function(a){a.preventDefault()},UploadButton=function(a){var b=a.disabled,c=a.multiple,d=a.description,e=a.fileTypes,f=void 0===e?imageFileTypes:e,g=a.sizeLimit,h=void 0===g?DEFAULT_SIZE_LIMIT:g,i=a.onChange,j=useDirection(),k=j.isRTL,l=useIntl(),m=l.formatMessage,n=useRef(null),o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(0),t=function(){s.current=0,r(!1)},u=function(){return"*"===f?f:Array.isArray(f)?getAllowedFileTypes(f).join(", "):getAllowedFileTypes([f]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":q})},!b&&{onDragEnter:function onDragEnter(a){a.preventDefault(),s.current+=1,1===s.current&&r(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),s.current-=1,0===s.current&&r(!1)},onDrop:function onDrop(a){a.preventDefault(),t(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&i(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:n,id:"np-upload-button",type:"file"},function(){var a="*"===u();return a?null:Array.isArray(f)?{accept:f.join(",")}:{accept:f}}()),c&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:b,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(i(b),n.current&&(n.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:b}),children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"text-link"})}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx("div",{children:m(c?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),/*#__PURE__*/_jsx("small",{className:classNames("np-upload-description",{"text-primary":!b}),children:function(){if(d)return d;var a=u(),b="*"===a?m(MESSAGES.allFileTypes):a;return m(MESSAGES.instructions,{fileTypes:b,size:Math.round(h/1e3)})}()})]})]})}),q&&/*#__PURE__*/_jsxs("div",{className:"droppable-card droppable-dropping-card droppable-card-content",children:[/*#__PURE__*/_jsx(PlusIcon,{filled:!0,size:24,className:"text-info m-x-1"}),/*#__PURE__*/_jsx("div",{className:"text-info",children:m(MESSAGES.dropFile)})]})]}))};export default UploadButton;

package/build/es/polyfill/uploadInput/uploadButton/UploadButton.spec.js

@@ -1,3 +1,3 @@
 import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import"core-js/modules/es.array.join.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,screen,userEvent}from"../../test-utils";import UploadButton,{TEST_IDS}from"./UploadButton";import{imageFileTypes}from"./defaults";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadButton",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpg"}),c={onChange:jest.fn()},d=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:c;return render(/*#__PURE__*/_jsx(UploadButton,_objectSpread({},a)))};describe("single file upload",function(){beforeEach(function(){d()}),it("should render the file input form",function(){expect(screen.getByText("Upload file")).toBeInTheDocument()}),it("should set accept to imageTypes",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("accept",imageFileTypes.join(","))}),it("trigger onChange callback with a FileList",function(){var d=screen.getByTestId(TEST_IDS.uploadInput);// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(1)})}),describe("multiple file upload",function(){beforeEach(function(){c.onChange.mockClear(),d(_objectSpread(_objectSpread({},c),{},{multiple:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("multiple")}),it("trigger onChange callback with a FileList",function(){var d=screen.getByTestId(TEST_IDS.uploadInput);// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(2)})}),describe("disabled state",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{disabled:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toBeDisabled()})}),describe("accept all file types",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]}))}),it("should not add accept attribute to file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).not.toHaveAttribute("accept")})})});
+userEvent.upload(d,[a,b]),expect(c.onChange).toHaveBeenCalledTimes(1),expect(c.onChange.mock.calls[0][0]).toHaveLength(2)})}),describe("disabled state",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{disabled:!0}))}),it("should disable the file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).toBeDisabled()})}),describe("accept all file types",function(){beforeEach(function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]}))}),it("should not add accept attribute to file input",function(){expect(screen.getByTestId(TEST_IDS.uploadInput)).not.toHaveAttribute("accept")})}),describe("description for the button",function(){it("should show default description based on the default file types provided",function(){d(_objectSpread({},c)),expect(screen.getByText("PDF, JPG, JPEG, PNG, less than 5MB")).toBeInTheDocument()}),it("should show default all files allowed description if all files are accepted",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"]})),expect(screen.getByText("All file types, less than 5MB")).toBeInTheDocument()}),it("should show custom description if provided",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"],description:"Test description"})),expect(screen.getByText("Test description")).toBeInTheDocument()})})});