@transferwise/components 39.13.0 → 40.1.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [40.1.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@40.0.0...@transferwise/components@40.1.0) (2022-03-09)
+
+
+### Features
+
+* integrate ActionButton side ActionOption instead of link ([#1351](https://github.com/transferwise/neptune-web/issues/1351)) ([b2e0e01](https://github.com/transferwise/neptune-web/commit/b2e0e010c7695f3225fbfb3d3fb7b91faae4401a))
+
+
+
+
+
+# [40.0.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.14.0...@transferwise/components@40.0.0) (2022-03-09)
+
+
+* feat!: TypeScript setup and types generation for `@transferwise/dynamic-flows` (#1346) ([23496bf](https://github.com/transferwise/neptune-web/commit/23496bfb68c3381ee0a70f49198ec851c71b25ff)), closes [#1346](https://github.com/transferwise/neptune-web/issues/1346)
+
+
+### BREAKING CHANGES
+
+* fix import of translations (`import { translations } from '@transferwise/dynamic-flows';`)
+remove custom types or mock from `global.d.ts` / `declarations.d.ts` files
+
+
+
+
+
+# [39.14.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.13.0...@transferwise/components@39.14.0) (2022-03-07)
+
+
+### Features
+
+* **UploadInput:** Add additional props make it customisable with DF / other clients ([#1338](https://github.com/transferwise/neptune-web/issues/1338)) ([8da56dd](https://github.com/transferwise/neptune-web/commit/8da56dd7260d1c662e89f89c951a7e7d3302b885))
+
+
+
+
+
 # [39.13.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@39.12.0...@transferwise/components@39.13.0) (2022-03-07)
 
 

package/build/es/no-polyfill/actionOption/ActionOption.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 classNames from"classnames";import Button from"../button";import{ControlType,Priority,Size}from"../common";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},k),{},{button:/*#__PURE__*/_jsx(Button,{className:"p-x-0","aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),type:ControlType.ACCENT,priority:Priority.TERTIARY,size:Size.SMALL,disabled:c,onClick:d,children:b})}))};export default ActionOption;
+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 classNames from"classnames";import ActionButton from"../actionButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},k),{},{button:/*#__PURE__*/_jsx(ActionButton,{disabled:c,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),text:b,onClick:d})}))};export default ActionOption;

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

@@ -1,8 +1,8 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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,useRef,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";function generateFileId(a){var b=a.name,c=a.size,d=new Date().getTime();return"".concat(b,"_").concat(c,"_").concat(d)}var UploadInput=function(a){function b(a){function b(b){return[].concat(_toConsumableArray(b),[a])}O(b),P.current=b(P.current)}function c(a,c){var d=a.name,e=generateFileId(a),f={id:e,filename:d,status:Status.FAILED,error:c};b(f),v&&v(f)}function d(){var a=new Set([Status.SUCCEEDED,Status.PENDING]),b=P.current.filter(function(b){return b.status&&a.has(b.status)});return b.length}function e(){if(!y)return!1;var a=d();return a>=y}// One or more files selected, create entries for them
-var f=a.files,g=void 0===f?[]:f,h=a.fileInputName,i=void 0===h?"file":h,j=a.className,k=a.deleteConfirm,l=a.disabled,m=a.multiple,n=void 0!==m&&m,o=a.fileTypes,p=void 0===o?imageFileTypes:o,q=a.sizeLimit,r=void 0===q?DEFAULT_SIZE_LIMIT:q,s=a.description,t=a.onUploadFile,u=a.onDeleteFile,v=a.onValidationError,w=a.onFilesChange,x=a.onDownload,y=a.maxFiles,z=a.maxFilesErrorMessage,A=useState(null),B=_slicedToArray(A,2),C=B[0],D=B[1],E=useState(!1),F=_slicedToArray(E,2),G=F[0],H=F[1],I=useIntl(),J=I.formatMessage,K=new Set([Status.PENDING,Status.PROCESSING]),L=useState(n||0===g.length?g:[g[0]]),M=_slicedToArray(L,2),N=M[0],O=M[1],P=useRef(n||0===g.length?g:[g[0]]),Q=function(a){function b(b){return b.filter(function(b){return a!==b&&a.id!==b.id})}O(b),P.current=b(P.current)},R=function(a,b){var c=function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})};O(c),P.current=c(P.current)},S=function(a){var b=a.id,c=a.status;c===Status.FAILED?Q(a):u&&b&&(R(a,{status:Status.PROCESSING,error:void 0}),u(b).then(function(){return Q(a)}).catch(function(b){R(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
-return useEffect(function(){H(!0)},[]),useEffect(function(){w&&G&&w(N)},[w,N]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",j),children:[N.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!u||a.status===Status.FAILED)&&(!a.status||!K.has(a.status)),onDelete:a.status===Status.FAILED?function(){return S(a)}:function(){return D(a)},onDownload:x},a.id)}),(n||!n&&!N.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:e()||l,multiple:n,fileTypes:p,sizeLimit:r,description:s,maxFiles:y,onChange:function addFiles(a){for(var h=0;h<a.length;h+=1){var d=a.item(h),f=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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,useRef,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";function generateFileId(a){var b=a.name,c=a.size,d=new Date().getTime();return"".concat(b,"_").concat(c,"_").concat(d)}var UploadInput=function(a){function b(a){function b(b){return[].concat(_toConsumableArray(b),[a])}R(b),S.current=b(S.current)}function c(a,c){var d=a.name,e=generateFileId(a),f={id:e,filename:d,status:Status.FAILED,error:c};b(f),v&&v(f)}function d(){var a=new Set([Status.SUCCEEDED,Status.PENDING]),b=S.current.filter(function(b){return b.status&&a.has(b.status)});return b.length}function e(){if(!y)return!1;var a=d();return a>=y}// One or more files selected, create entries for them
+var f=a.files,g=void 0===f?[]:f,h=a.fileInputName,i=void 0===h?"file":h,j=a.className,k=a.deleteConfirm,l=a.disabled,m=a.multiple,n=void 0!==m&&m,o=a.fileTypes,p=void 0===o?imageFileTypes:o,q=a.sizeLimit,r=void 0===q?DEFAULT_SIZE_LIMIT:q,s=a.description,t=a.onUploadFile,u=a.onDeleteFile,v=a.onValidationError,w=a.onFilesChange,x=a.onDownload,y=a.maxFiles,z=a.maxFilesErrorMessage,A=a.id,B=a.sizeLimitErrorMessage,C=a.uploadButtonTitle,D=useState(null),E=_slicedToArray(D,2),F=E[0],G=E[1],H=useState(!1),I=_slicedToArray(H,2),J=I[0],K=I[1],L=useIntl(),M=L.formatMessage,N=new Set([Status.PENDING,Status.PROCESSING]),O=useState(n||0===g.length?g:[g[0]]),P=_slicedToArray(O,2),Q=P[0],R=P[1],S=useRef(n||0===g.length?g:[g[0]]),T=function(a){function b(b){return b.filter(function(b){return a!==b&&a.id!==b.id})}R(b),S.current=b(S.current)},U=function(a,b){var c=function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})};R(c),S.current=c(S.current)},V=function(a){var b=a.id,c=a.status;c===Status.FAILED?T(a):u&&b&&(U(a,{status:Status.PROCESSING,error:void 0}),u(b).then(function(){return T(a)}).catch(function(b){U(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
+return useEffect(function(){K(!0)},[]),useEffect(function(){w&&J&&w(Q)},[w,Q]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",j),children:[Q.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!u||a.status===Status.FAILED)&&(!a.status||!N.has(a.status)),onDelete:a.status===Status.FAILED?function(){return V(a)}:function(){return G(a)},onDownload:x},a.id)}),(n||!n&&!Q.length)&&/*#__PURE__*/_jsx(UploadButton,{id:A,uploadButtonTitle:C,disabled:e()||l,multiple:n,fileTypes:p,sizeLimit:r,description:s,maxFiles:y,onChange:function addFiles(a){for(var h=0;h<a.length;h+=1){var d=a.item(h),f=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
 if(d){var g=function(){var a=d.name,g=generateFileId(d),h=Array.isArray(p)?p.join(","):p;// Check if file type is valid
-if(!isTypeValid(d,h))return c(d,J(MESSAGES.fileTypeNotSupported)),"continue";// Check if the filesize is valid
+if(!isTypeValid(d,h))return c(d,M(MESSAGES.fileTypeNotSupported)),"continue";// Check if the filesize is valid
 // Convert to rough bytes
-if(!isSizeValid(d,1e3*r))return c(d,J(MESSAGES.fileIsTooLarge)),"continue";if(e()){var k=z||J(MESSAGES.maximumFilesAlreadyUploaded,{maxFilesAllowed:y});return c(d,k),"continue"}f.append(i,d);var j={id:g,filename:a,status:Status.PENDING};if(b(j),t(f).then(function(a){var b=a.id,c=a.url,d=a.error;R(j,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){R(j,{error:a,status:Status.FAILED})}),!n)// Only upload a single file
-return"break"}();if("continue"===g)continue;if("break"===g)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===k||void 0===k?void 0:k.title)?J(MESSAGES.deleteModalTitle):k.title,body:void 0===(null===k||void 0===k?void 0:k.body)?J(MESSAGES.deleteModalBody):k.body,open:!!C,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){D(null)},children:(null===k||void 0===k?void 0:k.cancelText)||J(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){C&&S(C),D(null)},children:(null===k||void 0===k?void 0:k.confirmText)||J(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){D(null)}})]})};export default UploadInput;
+if(!isSizeValid(d,1e3*r)){var k=B||M(MESSAGES.fileIsTooLarge);return c(d,k),"continue"}if(e()){var l=z||M(MESSAGES.maximumFilesAlreadyUploaded,{maxFilesAllowed:y});return c(d,l),"continue"}f.append(i,d);var j={id:g,filename:a,status:Status.PENDING};if(b(j),t(f).then(function(a){var b=a.id,c=a.url,d=a.error;U(j,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){U(j,{error:a,status:Status.FAILED})}),!n)// Only upload a single file
+return"break"}();if("continue"===g)continue;if("break"===g)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===k||void 0===k?void 0:k.title)?M(MESSAGES.deleteModalTitle):k.title,body:void 0===(null===k||void 0===k?void 0:k.body)?M(MESSAGES.deleteModalBody):k.body,open:!!F,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){G(null)},children:(null===k||void 0===k?void 0:k.cancelText)||M(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){F&&V(F),G(null)},children:(null===k||void 0===k?void 0:k.confirmText)||M(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){G(null)}})]})};export default UploadInput;

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

@@ -1 +1 @@
-import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";var spiedDateObject=jest.spyOn(global,"Date");describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};beforeEach(function(){spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValue(Math.random())}})}),afterAll(function(){spiedDateObject.mockRestore()}),describe("single file upload",function(){it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="11111111",g="22222222",spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValueOnce(f).mockReturnValueOnce(g)}}),h=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{onFilesChange:h})),i=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(i,[a,b]),c.next=9,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 9:expect(h).toHaveBeenCalledTimes(2),expect(h).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:"foo.png_3_".concat(f),status:"pending",url:void 0}]),expect(h).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}]);case 12:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){var a=jest.fn();beforeEach(function(){a.mockClear()}),it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onFilesChange:a})),f=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(f).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),b.next=6,waitForElementToBeRemoved(f);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id),expect(a).toHaveBeenCalledTimes(2),expect(a).toHaveBeenNthCalledWith(1,[{error:void 0,filename:"purchase-receipt.pdf",id:1,status:"processing"},{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]),expect(a).toHaveBeenLastCalledWith([{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]);case 10:case"end":return b.stop();}},b)}))),it("should delete file with failed state without modal confirmation",function(){var b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:b,multiple:!0,onFilesChange:a}));var c=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(c).getByLabelText("Remove file",{exact:!1}).click(),expect(c).not.toBeInTheDocument(),expect(a).toHaveBeenCalledTimes(1),expect(a).toHaveBeenCalledWith([])}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("Max File Upload limit",function(){it("should show max file number in the description next to the upload button",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2})),a.next=3,waitFor(function(){expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument()});case 3:case"end":return a.stop();}},a)}))),it("should show given error when maxFiles limit is applied and more files are uploaded",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i,j;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Maximum files message from prop",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:3,maxFilesErrorMessage:f,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(h,[a,b]),i=new File(["foo2"],"foo2.png",{type:"image/png"}),j=new File(["foo2"],"foo2.jpg",{type:"image/jpeg"}),userEvent.upload(h,[i,j]),c.next=11,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 11:case"end":return c.stop();}},c)}))),it("should show default error when maxFiles limit exceeds and no error message provided",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Sorry, this upload failed because we can only accept 2 files at once.",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),i=new File(["foo2"],"foo2.png",{type:"image/png"}),userEvent.upload(h,[a,b,i]),c.next=9,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 9:case"end":return c.stop();}},c)})))})});
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var spiedDateObject=jest.spyOn(global,"Date");describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};beforeEach(function(){spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValue(Math.random())}})}),afterAll(function(){spiedDateObject.mockRestore()}),describe("single file upload",function(){it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="11111111",g="22222222",spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValueOnce(f).mockReturnValueOnce(g)}}),h=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{onFilesChange:h})),i=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(i,[a,b]),c.next=9,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 9:expect(h).toHaveBeenCalledTimes(2),expect(h).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:"foo.png_3_".concat(f),status:"pending",url:void 0}]),expect(h).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}]);case 12:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){var a=jest.fn();beforeEach(function(){a.mockClear()}),it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onFilesChange:a})),f=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(f).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),b.next=6,waitForElementToBeRemoved(f);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id),expect(a).toHaveBeenCalledTimes(2),expect(a).toHaveBeenNthCalledWith(1,[{error:void 0,filename:"purchase-receipt.pdf",id:1,status:"processing"},{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]),expect(a).toHaveBeenLastCalledWith([{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]);case 10:case"end":return b.stop();}},b)}))),it("should delete file with failed state without modal confirmation",function(){var b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:b,multiple:!0,onFilesChange:a}));var c=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(c).getByLabelText("Remove file",{exact:!1}).click(),expect(c).not.toBeInTheDocument(),expect(a).toHaveBeenCalledTimes(1),expect(a).toHaveBeenCalledWith([])}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("Max File Upload limit",function(){it("should show max file number in the description next to the upload button",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2})),a.next=3,waitFor(function(){expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument()});case 3:case"end":return a.stop();}},a)}))),it("should show given error when maxFiles limit is applied and more files are uploaded",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i,j;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Maximum files message from prop",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:3,maxFilesErrorMessage:f,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(h,[a,b]),i=new File(["foo2"],"foo2.png",{type:"image/png"}),j=new File(["foo2"],"foo2.jpg",{type:"image/jpeg"}),userEvent.upload(h,[i,j]),c.next=11,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 11:case"end":return c.stop();}},c)}))),it("should show default error when maxFiles limit exceeds and no error message provided",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Sorry, this upload failed because we can only accept 2 files at once.",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),i=new File(["foo2"],"foo2.png",{type:"image/png"}),userEvent.upload(h,[a,b,i]),c.next=9,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 9:case"end":return c.stop();}},c)})))}),describe("Misc",function(){it("should attach the input id accepted from props to the input components",function(){var a="LabelText";render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("label",{htmlFor:"testInputId",children:a}),/*#__PURE__*/_jsx(UploadInput,_objectSpread(_objectSpread({},d),{},{id:"testInputId"}))]})),expect(screen.getByLabelText(a)).toHaveAttribute("id","testInputId")}),it("should show the file size error when provided in props",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,f,g,h;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return b=1024,c=2*b,f="file oversized",e(_objectSpread(_objectSpread({},d),{},{sizeLimit:1,sizeLimitErrorMessage:f})),g=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),h=new File([""],"testFile.png",{type:"image/png"}),Object.defineProperty(h,"size",{value:c}),userEvent.upload(g,[h]),a.next=10,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 10:case"end":return a.stop();}},a)})))})});

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.SUCCEEDED},{id:4,filename:"receipt failed with error object.png",status:Status.SUCCEEDED}],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 UploadInputWithDescriptionFromProps=Template.bind({});UploadInputWithDescriptionFromProps.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")});export var withMaxFilesToUploadLimit=Template.bind({});withMaxFilesToUploadLimit.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,maxFiles:5,maxFilesErrorMessage:"Can't upload as maximum number of files allowed are already uploaded"});
+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.SUCCEEDED},{id:4,filename:"receipt failed with error object.png",status:Status.SUCCEEDED}],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 UploadInputWithDescriptionFromProps=Template.bind({});UploadInputWithDescriptionFromProps.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")});export var withMaxFilesToUploadLimit=Template.bind({});withMaxFilesToUploadLimit.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,maxFiles:5,maxFilesErrorMessage:"Can't upload as maximum number of files allowed are already uploaded"});export var withFileSizeErrorMessage=Template.bind({});withFileSizeErrorMessage.args=_objectSpread(_objectSpread({},props),{},{sizeLimit:1,sizeLimitErrorMessage:"The file is oversized"});export var withCustomUploadButtonTitle=Template.bind({});withCustomUploadButtonTitle.args=_objectSpread(_objectSpread({},props),{},{uploadButtonTitle:"Upload the VAT receipts for FY 2022-23"});

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{PlusCircle as PlusIcon,Upload as UploadIcon}from"@transferwise/icons";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}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){function b(){if(e)return e;var a=w(),b="*"===a?o(MESSAGES.allFileTypes):a;return o(MESSAGES.instructions,{fileTypes:b,size:Math.round(i/1e3)})}var c=a.disabled,d=a.multiple,e=a.description,f=a.fileTypes,g=void 0===f?imageFileTypes:f,h=a.sizeLimit,i=void 0===h?DEFAULT_SIZE_LIMIT:h,j=a.maxFiles,k=a.onChange,l=useDirection(),m=l.isRTL,n=useIntl(),o=n.formatMessage,p=useRef(null),q=useState(!1),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useRef(0),v=function(){u.current=0,t(!1)},w=function(){return"*"===g?g:Array.isArray(g)?getAllowedFileTypes(g).join(", "):getAllowedFileTypes([g]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":s})},!c&&{onDragEnter:function onDragEnter(a){a.preventDefault(),u.current+=1,1===u.current&&t(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),u.current-=1,0===u.current&&t(!1)},onDrop:function onDrop(a){a.preventDefault(),v(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&k(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:p,id:"np-upload-button",type:"file"},function(){var a="*"===w();return a?null:Array.isArray(g)?{accept:g.join(",")}:{accept:g}}()),d&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:c,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(k(b),p.current&&(p.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c}),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:o(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs("small",{className:classNames("np-upload-description",{"text-primary":!c}),children:[b(),j&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),"Maximum ".concat(j," files.")]})]})})}()]})]})}),s&&/*#__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:o(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{PlusCircle as PlusIcon,Upload as UploadIcon}from"@transferwise/icons";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}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()},DEFAULT_FILE_INPUT_ID="np-upload-button",UploadButton=function(a){function b(){if(e)return e;var a=z(),b="*"===a?r(MESSAGES.allFileTypes):a;return r(MESSAGES.instructions,{fileTypes:b,size:Math.round(i/1e3)})}var c=a.disabled,d=a.multiple,e=a.description,f=a.fileTypes,g=void 0===f?imageFileTypes:f,h=a.sizeLimit,i=void 0===h?DEFAULT_SIZE_LIMIT:h,j=a.maxFiles,k=a.onChange,l=a.id,m=void 0===l?DEFAULT_FILE_INPUT_ID:l,n=a.uploadButtonTitle,o=useDirection(),p=o.isRTL,q=useIntl(),r=q.formatMessage,s=useRef(null),t=useState(!1),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useRef(0),y=function(){x.current=0,w(!1)},z=function(){return"*"===g?g:Array.isArray(g)?getAllowedFileTypes(g).join(", "):getAllowedFileTypes([g]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":v})},!c&&{onDragEnter:function onDragEnter(a){a.preventDefault(),x.current+=1,1===x.current&&w(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),x.current-=1,0===x.current&&w(!1)},onDrop:function onDrop(a){a.preventDefault(),y(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&k(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:s,id:m,type:"file"},function(){var a="*"===z();return a?null:Array.isArray(g)?{accept:g.join(",")}:{accept:g}}()),d&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:c,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(k(b),s.current&&(s.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c}),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:function(){return n?n:r(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}()}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs("small",{className:classNames("np-upload-description",{"text-primary":!c}),children:[b(),j&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),"Maximum ".concat(j," files.")]})]})})}()]})]})}),v&&/*#__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:r(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
+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 render the file input button with title, if provided",function(){d(_objectSpread(_objectSpread({},c),{},{uploadButtonTitle:"Upload your id"})),expect(screen.getByText("Upload your id")).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")})}),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()}),it("should show maxFiles next to the description, if provided",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"],maxFiles:5})),expect(screen.getByText(/Maximum 5 files\./)).toBeInTheDocument()})})});

package/build/es/polyfill/actionOption/ActionOption.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.array.join.js";import classNames from"classnames";import Button from"../button";import{ControlType,Priority,Size}from"../common";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},k),{},{button:/*#__PURE__*/_jsx(Button,{className:"p-x-0","aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),type:ControlType.ACCENT,priority:Priority.TERTIARY,size:Size.SMALL,disabled:c,onClick:d,children:b})}))};export default ActionOption;
+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.array.join.js";import classNames from"classnames";import ActionButton from"../actionButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},k),{},{button:/*#__PURE__*/_jsx(ActionButton,{disabled:c,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),text:b,onClick:d})}))};export default ActionOption;

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

@@ -1,8 +1,8 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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.function.name.js";import"core-js/modules/es.array.concat.js";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.array.join.js";import classNames from"classnames";import{useEffect,useRef,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";function generateFileId(a){var b=a.name,c=a.size,d=new Date().getTime();return"".concat(b,"_").concat(c,"_").concat(d)}var UploadInput=function(a){function b(a){function b(b){return[].concat(_toConsumableArray(b),[a])}O(b),P.current=b(P.current)}function c(a,c){var d=a.name,e=generateFileId(a),f={id:e,filename:d,status:Status.FAILED,error:c};b(f),v&&v(f)}function d(){var a=new Set([Status.SUCCEEDED,Status.PENDING]),b=P.current.filter(function(b){return b.status&&a.has(b.status)});return b.length}function e(){if(!y)return!1;var a=d();return a>=y}// One or more files selected, create entries for them
-var f=a.files,g=void 0===f?[]:f,h=a.fileInputName,i=void 0===h?"file":h,j=a.className,k=a.deleteConfirm,l=a.disabled,m=a.multiple,n=void 0!==m&&m,o=a.fileTypes,p=void 0===o?imageFileTypes:o,q=a.sizeLimit,r=void 0===q?DEFAULT_SIZE_LIMIT:q,s=a.description,t=a.onUploadFile,u=a.onDeleteFile,v=a.onValidationError,w=a.onFilesChange,x=a.onDownload,y=a.maxFiles,z=a.maxFilesErrorMessage,A=useState(null),B=_slicedToArray(A,2),C=B[0],D=B[1],E=useState(!1),F=_slicedToArray(E,2),G=F[0],H=F[1],I=useIntl(),J=I.formatMessage,K=new Set([Status.PENDING,Status.PROCESSING]),L=useState(n||0===g.length?g:[g[0]]),M=_slicedToArray(L,2),N=M[0],O=M[1],P=useRef(n||0===g.length?g:[g[0]]),Q=function(a){function b(b){return b.filter(function(b){return a!==b&&a.id!==b.id})}O(b),P.current=b(P.current)},R=function(a,b){var c=function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})};O(c),P.current=c(P.current)},S=function(a){var b=a.id,c=a.status;c===Status.FAILED?Q(a):u&&b&&(R(a,{status:Status.PROCESSING,error:void 0}),u(b).then(function(){return Q(a)}).catch(function(b){R(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
-return useEffect(function(){H(!0)},[]),useEffect(function(){w&&G&&w(N)},[w,N]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",j),children:[N.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!u||a.status===Status.FAILED)&&(!a.status||!K.has(a.status)),onDelete:a.status===Status.FAILED?function(){return S(a)}:function(){return D(a)},onDownload:x},a.id)}),(n||!n&&!N.length)&&/*#__PURE__*/_jsx(UploadButton,{disabled:e()||l,multiple:n,fileTypes:p,sizeLimit:r,description:s,maxFiles:y,onChange:function addFiles(a){for(var h=0;h<a.length;h+=1){var d=a.item(h),f=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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.function.name.js";import"core-js/modules/es.array.concat.js";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.array.join.js";import classNames from"classnames";import{useEffect,useRef,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";function generateFileId(a){var b=a.name,c=a.size,d=new Date().getTime();return"".concat(b,"_").concat(c,"_").concat(d)}var UploadInput=function(a){function b(a){function b(b){return[].concat(_toConsumableArray(b),[a])}R(b),S.current=b(S.current)}function c(a,c){var d=a.name,e=generateFileId(a),f={id:e,filename:d,status:Status.FAILED,error:c};b(f),v&&v(f)}function d(){var a=new Set([Status.SUCCEEDED,Status.PENDING]),b=S.current.filter(function(b){return b.status&&a.has(b.status)});return b.length}function e(){if(!y)return!1;var a=d();return a>=y}// One or more files selected, create entries for them
+var f=a.files,g=void 0===f?[]:f,h=a.fileInputName,i=void 0===h?"file":h,j=a.className,k=a.deleteConfirm,l=a.disabled,m=a.multiple,n=void 0!==m&&m,o=a.fileTypes,p=void 0===o?imageFileTypes:o,q=a.sizeLimit,r=void 0===q?DEFAULT_SIZE_LIMIT:q,s=a.description,t=a.onUploadFile,u=a.onDeleteFile,v=a.onValidationError,w=a.onFilesChange,x=a.onDownload,y=a.maxFiles,z=a.maxFilesErrorMessage,A=a.id,B=a.sizeLimitErrorMessage,C=a.uploadButtonTitle,D=useState(null),E=_slicedToArray(D,2),F=E[0],G=E[1],H=useState(!1),I=_slicedToArray(H,2),J=I[0],K=I[1],L=useIntl(),M=L.formatMessage,N=new Set([Status.PENDING,Status.PROCESSING]),O=useState(n||0===g.length?g:[g[0]]),P=_slicedToArray(O,2),Q=P[0],R=P[1],S=useRef(n||0===g.length?g:[g[0]]),T=function(a){function b(b){return b.filter(function(b){return a!==b&&a.id!==b.id})}R(b),S.current=b(S.current)},U=function(a,b){var c=function(c){return c.map(function(c){return c===a||c.id===a.id?_objectSpread(_objectSpread({},a),b):c})};R(c),S.current=c(S.current)},V=function(a){var b=a.id,c=a.status;c===Status.FAILED?T(a):u&&b&&(U(a,{status:Status.PROCESSING,error:void 0}),u(b).then(function(){return T(a)}).catch(function(b){U(a,{error:b})}))};// eslint-disable-line react-hooks/exhaustive-deps
+return useEffect(function(){K(!0)},[]),useEffect(function(){w&&J&&w(Q)},[w,Q]),/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-input",j),children:[Q.map(function(a){return/*#__PURE__*/_jsx(UploadItem,{file:a,canDelete:(!!u||a.status===Status.FAILED)&&(!a.status||!N.has(a.status)),onDelete:a.status===Status.FAILED?function(){return V(a)}:function(){return G(a)},onDownload:x},a.id)}),(n||!n&&!Q.length)&&/*#__PURE__*/_jsx(UploadButton,{id:A,uploadButtonTitle:C,disabled:e()||l,multiple:n,fileTypes:p,sizeLimit:r,description:s,maxFiles:y,onChange:function addFiles(a){for(var h=0;h<a.length;h+=1){var d=a.item(h),f=new FormData;// Returning a FormData[] array instead of FileList so we can filter out incorrect files
 if(d){var g=function(){var a=d.name,g=generateFileId(d),h=Array.isArray(p)?p.join(","):p;// Check if file type is valid
-if(!isTypeValid(d,h))return c(d,J(MESSAGES.fileTypeNotSupported)),"continue";// Check if the filesize is valid
+if(!isTypeValid(d,h))return c(d,M(MESSAGES.fileTypeNotSupported)),"continue";// Check if the filesize is valid
 // Convert to rough bytes
-if(!isSizeValid(d,1e3*r))return c(d,J(MESSAGES.fileIsTooLarge)),"continue";if(e()){var k=z||J(MESSAGES.maximumFilesAlreadyUploaded,{maxFilesAllowed:y});return c(d,k),"continue"}f.append(i,d);var j={id:g,filename:a,status:Status.PENDING};if(b(j),t(f).then(function(a){var b=a.id,c=a.url,d=a.error;R(j,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){R(j,{error:a,status:Status.FAILED})}),!n)// Only upload a single file
-return"break"}();if("continue"===g)continue;if("break"===g)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===k||void 0===k?void 0:k.title)?J(MESSAGES.deleteModalTitle):k.title,body:void 0===(null===k||void 0===k?void 0:k.body)?J(MESSAGES.deleteModalBody):k.body,open:!!C,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){D(null)},children:(null===k||void 0===k?void 0:k.cancelText)||J(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){C&&S(C),D(null)},children:(null===k||void 0===k?void 0:k.confirmText)||J(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){D(null)}})]})};export default UploadInput;
+if(!isSizeValid(d,1e3*r)){var k=B||M(MESSAGES.fileIsTooLarge);return c(d,k),"continue"}if(e()){var l=z||M(MESSAGES.maximumFilesAlreadyUploaded,{maxFilesAllowed:y});return c(d,l),"continue"}f.append(i,d);var j={id:g,filename:a,status:Status.PENDING};if(b(j),t(f).then(function(a){var b=a.id,c=a.url,d=a.error;U(j,{id:b,url:c,error:d,status:Status.SUCCEEDED})}).catch(function(a){U(j,{error:a,status:Status.FAILED})}),!n)// Only upload a single file
+return"break"}();if("continue"===g)continue;if("break"===g)break}}}})]}),/*#__PURE__*/_jsx(Modal,{title:void 0===(null===k||void 0===k?void 0:k.title)?M(MESSAGES.deleteModalTitle):k.title,body:void 0===(null===k||void 0===k?void 0:k.body)?M(MESSAGES.deleteModalBody):k.body,open:!!F,footer:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){G(null)},children:(null===k||void 0===k?void 0:k.cancelText)||M(MESSAGES.deleteModalCancelButtonText)}),/*#__PURE__*/_jsx(Button,{block:!0,priority:Priority.SECONDARY,type:ControlType.NEGATIVE,onClick:function onClick(){F&&V(F),G(null)},children:(null===k||void 0===k?void 0:k.confirmText)||M(MESSAGES.deleteModalConfirmButtonText)})]}),onClose:function onClose(){G(null)}})]})};export default UploadInput;

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

@@ -1 +1 @@
-import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";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/es.object.get-own-property-descriptors.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";var spiedDateObject=jest.spyOn(global,"Date");describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};beforeEach(function(){spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValue(Math.random())}})}),afterAll(function(){spiedDateObject.mockRestore()}),describe("single file upload",function(){it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="11111111",g="22222222",spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValueOnce(f).mockReturnValueOnce(g)}}),h=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{onFilesChange:h})),i=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(i,[a,b]),c.next=9,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 9:expect(h).toHaveBeenCalledTimes(2),expect(h).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:"foo.png_3_".concat(f),status:"pending",url:void 0}]),expect(h).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}]);case 12:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){var a=jest.fn();beforeEach(function(){a.mockClear()}),it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onFilesChange:a})),f=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(f).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),b.next=6,waitForElementToBeRemoved(f);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id),expect(a).toHaveBeenCalledTimes(2),expect(a).toHaveBeenNthCalledWith(1,[{error:void 0,filename:"purchase-receipt.pdf",id:1,status:"processing"},{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]),expect(a).toHaveBeenLastCalledWith([{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]);case 10:case"end":return b.stop();}},b)}))),it("should delete file with failed state without modal confirmation",function(){var b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:b,multiple:!0,onFilesChange:a}));var c=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(c).getByLabelText("Remove file",{exact:!1}).click(),expect(c).not.toBeInTheDocument(),expect(a).toHaveBeenCalledTimes(1),expect(a).toHaveBeenCalledWith([])}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("Max File Upload limit",function(){it("should show max file number in the description next to the upload button",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2})),a.next=3,waitFor(function(){expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument()});case 3:case"end":return a.stop();}},a)}))),it("should show given error when maxFiles limit is applied and more files are uploaded",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i,j;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Maximum files message from prop",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:3,maxFilesErrorMessage:f,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(h,[a,b]),i=new File(["foo2"],"foo2.png",{type:"image/png"}),j=new File(["foo2"],"foo2.jpg",{type:"image/jpeg"}),userEvent.upload(h,[i,j]),c.next=11,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 11:case"end":return c.stop();}},c)}))),it("should show default error when maxFiles limit exceeds and no error message provided",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Sorry, this upload failed because we can only accept 2 files at once.",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),i=new File(["foo2"],"foo2.png",{type:"image/png"}),userEvent.upload(h,[a,b,i]),c.next=9,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 9:case"end":return c.stop();}},c)})))})});
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";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/es.object.get-own-property-descriptors.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.promise.js";import _regeneratorRuntime from"@babel/runtime/regenerator";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{within}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{Status}from"../common";import{render,screen,waitFor,waitForElementToBeRemoved}from"../test-utils";import UploadInput from"./UploadInput";import{TEST_IDS as UPLOAD_BUTTON_TEST_IDS}from"./uploadButton/UploadButton";import{TEST_IDS as UPLOAD_ITEM_TEST_IDS}from"./uploadItem/UploadItem";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var spiedDateObject=jest.spyOn(global,"Date");describe("UploadInput",function(){var a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpeg"}),c=[{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED},{id:2,filename:"CoWork-0317-invoice.pdf",status:Status.PROCESSING}],d={onUploadFile:jest.fn().mockResolvedValue({id:1}).mockResolvedValueOnce({id:2}).mockResolvedValueOnce({id:3}),onDeleteFile:jest.fn().mockResolvedValue({})},e=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,_objectSpread({},a)))};beforeEach(function(){spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValue(Math.random())}})}),afterAll(function(){spiedDateObject.mockRestore()}),describe("single file upload",function(){it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="11111111",g="22222222",spiedDateObject.mockImplementation(function(){return{getTime:jest.fn().mockReturnValueOnce(f).mockReturnValueOnce(g)}}),h=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{onFilesChange:h})),i=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(i,[a,b]),c.next=9,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(1)});case 9:expect(h).toHaveBeenCalledTimes(2),expect(h).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:"foo.png_3_".concat(f),status:"pending",url:void 0}]),expect(h).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}]);case 12:case"end":return c.stop();}},c)}))),it("should render only one file even if multiple ones were supplied",function(){e(_objectSpread(_objectSpread({},d),{},{files:c})),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(function(a){expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",function(){it("should render all files",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),c.forEach(function(a){expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0})),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0})),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple"),f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(f,[a,b]),c.next=7,waitFor(function(){expect(d.onUploadFile).toHaveBeenCalledTimes(2)});case 7:case"end":return c.stop();}},c)})))}),describe("file deletion",function(){var a=jest.fn();beforeEach(function(){a.mockClear()}),it("should delete file with modal confirmation",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onFilesChange:a})),f=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0],within(f).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),b.next=6,waitForElementToBeRemoved(f);case 6:expect(d.onDeleteFile).toHaveBeenCalledWith(c[0].id),expect(a).toHaveBeenCalledTimes(2),expect(a).toHaveBeenNthCalledWith(1,[{error:void 0,filename:"purchase-receipt.pdf",id:1,status:"processing"},{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]),expect(a).toHaveBeenLastCalledWith([{filename:"CoWork-0317-invoice.pdf",id:2,status:"processing"}]);case 10:case"end":return b.stop();}},b)}))),it("should delete file with failed state without modal confirmation",function(){var b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e(_objectSpread(_objectSpread({},d),{},{files:b,multiple:!0,onFilesChange:a}));var c=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(c).getByLabelText("Remove file",{exact:!1}).click(),expect(c).not.toBeInTheDocument(),expect(a).toHaveBeenCalledTimes(1),expect(a).toHaveBeenCalledWith([])}),it("should not render delete button when no delete callback is provided",function(){e(_objectSpread(_objectSpread({},d),{},{files:c,multiple:!0,onDeleteFile:void 0})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("Max File Upload limit",function(){it("should show max file number in the description next to the upload button",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2})),a.next=3,waitFor(function(){expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument()});case 3:case"end":return a.stop();}},a)}))),it("should show given error when maxFiles limit is applied and more files are uploaded",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i,j;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Maximum files message from prop",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:3,maxFilesErrorMessage:f,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),userEvent.upload(h,[a,b]),i=new File(["foo2"],"foo2.png",{type:"image/png"}),j=new File(["foo2"],"foo2.jpg",{type:"image/jpeg"}),userEvent.upload(h,[i,j]),c.next=11,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 11:case"end":return c.stop();}},c)}))),it("should show default error when maxFiles limit exceeds and no error message provided",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(){var f,g,h,i;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return f="Sorry, this upload failed because we can only accept 2 files at once.",g=jest.fn(),e(_objectSpread(_objectSpread({},d),{},{multiple:!0,maxFiles:2,onUploadFile:g})),g.mockImplementation(function(a){var b=a.get("file");return Promise.resolve({file:b,id:Math.random()})}),h=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),i=new File(["foo2"],"foo2.png",{type:"image/png"}),userEvent.upload(h,[a,b,i]),c.next=9,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 9:case"end":return c.stop();}},c)})))}),describe("Misc",function(){it("should attach the input id accepted from props to the input components",function(){var a="LabelText";render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("label",{htmlFor:"testInputId",children:a}),/*#__PURE__*/_jsx(UploadInput,_objectSpread(_objectSpread({},d),{},{id:"testInputId"}))]})),expect(screen.getByLabelText(a)).toHaveAttribute("id","testInputId")}),it("should show the file size error when provided in props",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,f,g,h;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return b=1024,c=2*b,f="file oversized",e(_objectSpread(_objectSpread({},d),{},{sizeLimit:1,sizeLimitErrorMessage:f})),g=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),h=new File([""],"testFile.png",{type:"image/png"}),Object.defineProperty(h,"size",{value:c}),userEvent.upload(g,[h]),a.next=10,waitFor(function(){expect(screen.getByText(f)).toBeInTheDocument()});case 10:case"end":return a.stop();}},a)})))})});

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.SUCCEEDED},{id:4,filename:"receipt failed with error object.png",status:Status.SUCCEEDED}],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 UploadInputWithDescriptionFromProps=Template.bind({});UploadInputWithDescriptionFromProps.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")});export var withMaxFilesToUploadLimit=Template.bind({});withMaxFilesToUploadLimit.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,maxFiles:5,maxFilesErrorMessage:"Can't upload as maximum number of files allowed are already uploaded"});
+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.SUCCEEDED},{id:4,filename:"receipt failed with error object.png",status:Status.SUCCEEDED}],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 UploadInputWithDescriptionFromProps=Template.bind({});UploadInputWithDescriptionFromProps.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")});export var withMaxFilesToUploadLimit=Template.bind({});withMaxFilesToUploadLimit.args=_objectSpread(_objectSpread({},props),{},{multiple:!0,maxFiles:5,maxFilesErrorMessage:"Can't upload as maximum number of files allowed are already uploaded"});export var withFileSizeErrorMessage=Template.bind({});withFileSizeErrorMessage.args=_objectSpread(_objectSpread({},props),{},{sizeLimit:1,sizeLimitErrorMessage:"The file is oversized"});export var withCustomUploadButtonTitle=Template.bind({});withCustomUploadButtonTitle.args=_objectSpread(_objectSpread({},props),{},{uploadButtonTitle:"Upload the VAT receipts for FY 2022-23"});

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.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{PlusCircle as PlusIcon,Upload as UploadIcon}from"@transferwise/icons";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}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){function b(){if(e)return e;var a=w(),b="*"===a?o(MESSAGES.allFileTypes):a;return o(MESSAGES.instructions,{fileTypes:b,size:Math.round(i/1e3)})}var c=a.disabled,d=a.multiple,e=a.description,f=a.fileTypes,g=void 0===f?imageFileTypes:f,h=a.sizeLimit,i=void 0===h?DEFAULT_SIZE_LIMIT:h,j=a.maxFiles,k=a.onChange,l=useDirection(),m=l.isRTL,n=useIntl(),o=n.formatMessage,p=useRef(null),q=useState(!1),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useRef(0),v=function(){u.current=0,t(!1)},w=function(){return"*"===g?g:Array.isArray(g)?getAllowedFileTypes(g).join(", "):getAllowedFileTypes([g]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":s})},!c&&{onDragEnter:function onDragEnter(a){a.preventDefault(),u.current+=1,1===u.current&&t(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),u.current-=1,0===u.current&&t(!1)},onDrop:function onDrop(a){a.preventDefault(),v(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&k(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:p,id:"np-upload-button",type:"file"},function(){var a="*"===w();return a?null:Array.isArray(g)?{accept:g.join(",")}:{accept:g}}()),d&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:c,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(k(b),p.current&&(p.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c}),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:o(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs("small",{className:classNames("np-upload-description",{"text-primary":!c}),children:[b(),j&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),"Maximum ".concat(j," files.")]})]})})}()]})]})}),s&&/*#__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:o(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{PlusCircle as PlusIcon,Upload as UploadIcon}from"@transferwise/icons";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import{useDirection}from"../../common/hooks";import MESSAGES from"./UploadButton.messages";import{DEFAULT_SIZE_LIMIT,imageFileTypes}from"./defaults";import getAllowedFileTypes from"./getAllowedFileTypes";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}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()},DEFAULT_FILE_INPUT_ID="np-upload-button",UploadButton=function(a){function b(){if(e)return e;var a=z(),b="*"===a?r(MESSAGES.allFileTypes):a;return r(MESSAGES.instructions,{fileTypes:b,size:Math.round(i/1e3)})}var c=a.disabled,d=a.multiple,e=a.description,f=a.fileTypes,g=void 0===f?imageFileTypes:f,h=a.sizeLimit,i=void 0===h?DEFAULT_SIZE_LIMIT:h,j=a.maxFiles,k=a.onChange,l=a.id,m=void 0===l?DEFAULT_FILE_INPUT_ID:l,n=a.uploadButtonTitle,o=useDirection(),p=o.isRTL,q=useIntl(),r=q.formatMessage,s=useRef(null),t=useState(!1),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useRef(0),y=function(){x.current=0,w(!1)},z=function(){return"*"===g?g:Array.isArray(g)?getAllowedFileTypes(g).join(", "):getAllowedFileTypes([g]).join(", ")};return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-upload-button-container","droppable",{"droppable-dropping":v})},!c&&{onDragEnter:function onDragEnter(a){a.preventDefault(),x.current+=1,1===x.current&&w(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),x.current-=1,0===x.current&&w(!1)},onDrop:function onDrop(a){a.preventDefault(),y(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&k(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:s,id:m,type:"file"},function(){var a="*"===z();return a?null:Array.isArray(g)?{accept:g.join(",")}:{accept:g}}()),d&&{multiple:!0}),{},{className:"tw-droppable-input",disabled:c,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:function filesSelected(a){var b=a.target.files;b&&(k(b),s.current&&(s.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:"np-upload-button",className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c}),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:function(){return n?n:r(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}()}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs("small",{className:classNames("np-upload-description",{"text-primary":!c}),children:[b(),j&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),"Maximum ".concat(j," files.")]})]})})}()]})]})}),v&&/*#__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:r(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
+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 render the file input button with title, if provided",function(){d(_objectSpread(_objectSpread({},c),{},{uploadButtonTitle:"Upload your id"})),expect(screen.getByText("Upload your id")).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")})}),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()}),it("should show maxFiles next to the description, if provided",function(){d(_objectSpread(_objectSpread({},c),{},{fileTypes:["*"],maxFiles:5})),expect(screen.getByText(/Maximum 5 files\./)).toBeInTheDocument()})})});

package/build/types/uploadInput/UploadInput.d.ts

@@ -66,6 +66,10 @@ export declare type UploadInputProps = {
      * Error message to show when the maximum number of files are uploaded already
      */
     maxFilesErrorMessage?: string;
-} & Pick<UploadButtonProps, 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description'> & Pick<UploadItemProps, 'onDownload'> & CommonProps;
-declare const UploadInput: ({ files, fileInputName, className, deleteConfirm, disabled, multiple, fileTypes, sizeLimit, description, onUploadFile, onDeleteFile, onValidationError, onFilesChange, onDownload, maxFiles, maxFilesErrorMessage, }: UploadInputProps) => ReactElement;
+    /**
+     * Error message to show when files over a allowed size limit are uploaded
+     */
+    sizeLimitErrorMessage?: string;
+} & Pick<UploadButtonProps, 'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'> & Pick<UploadItemProps, 'onDownload'> & CommonProps;
+declare const UploadInput: ({ files, fileInputName, className, deleteConfirm, disabled, multiple, fileTypes, sizeLimit, description, onUploadFile, onDeleteFile, onValidationError, onFilesChange, onDownload, maxFiles, maxFilesErrorMessage, id, sizeLimitErrorMessage, uploadButtonTitle, }: UploadInputProps) => ReactElement;
 export default UploadInput;

package/build/types/uploadInput/UploadInput.story.d.ts

@@ -16,3 +16,5 @@ export declare const CustomConfirmMessage: Story<UploadInputProps>;
 export declare const withManualDownloadHandler: Story<UploadInputProps>;
 export declare const withFilesChangeHandler: Story<UploadInputProps>;
 export declare const withMaxFilesToUploadLimit: Story<UploadInputProps>;
+export declare const withFileSizeErrorMessage: Story<UploadInputProps>;
+export declare const withCustomUploadButtonTitle: Story<UploadInputProps>;

package/build/types/uploadInput/uploadButton/UploadButton.d.ts

@@ -32,10 +32,18 @@ export declare type UploadButtonProps = {
      * @param files
      */
     onChange: (files: FileList) => void;
+    /**
+     * Id for the upload input
+     */
+    id?: string;
+    /**
+     * Title for the upload button
+     */
+    uploadButtonTitle?: string;
 };
 export declare enum TEST_IDS {
     uploadInput = "uploadInput",
     mediaBody = "mediaBody"
 }
-declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, }: UploadButtonProps) => JSX.Element;
+declare const UploadButton: ({ disabled, multiple, description, fileTypes, sizeLimit, maxFiles, onChange, id, uploadButtonTitle, }: UploadButtonProps) => JSX.Element;
 export default UploadButton;