@transferwise/components 0.0.0-experimental-5e2f01a → 0.0.0-experimental-d8ad171

package/build/es/no-polyfill/tooltip/Tooltip.spec.js

@@ -1 +1 @@
-import{render,screen,fireEvent,userEvent}from"../test-utils";import Tooltip from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Tooltip",()=>{const a=/*#__PURE__*/_jsx("span",{children:"Hover over me!"});it("wraps anchor as a children and renders it",()=>{render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.getByText("Hover over me!")).toBeInTheDocument()}),it("appears onMouseOver",()=>{render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onMouseOut",()=>{render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument(),userEvent.unhover(screen.getByText("Hover over me!"))}),it("appears onFocus",()=>{render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),fireEvent.focus(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onBlur",()=>{render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),fireEvent.blur(screen.getByText("Hover over me!")),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument()})});
+import{render,screen,fireEvent,userEvent}from"../test-utils";import Tooltip from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Tooltip",function(){var a=/*#__PURE__*/_jsx("span",{children:"Hover over me!"});it("wraps anchor as a children and renders it",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.getByText("Hover over me!")).toBeInTheDocument()}),it("appears onMouseOver",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onMouseOut",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),userEvent.hover(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument(),userEvent.unhover(screen.getByText("Hover over me!"))}),it("appears onFocus",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument(),fireEvent.focus(screen.getByText("Hover over me!")),expect(screen.getByText("Tooltip")).toBeInTheDocument()}),it("hides onBlur",function(){render(/*#__PURE__*/_jsx(Tooltip,{label:"Tooltip",children:a})),fireEvent.blur(screen.getByText("Hover over me!")),expect(screen.queryByText("Tooltip")).not.toBeInTheDocument()})});

package/build/es/no-polyfill/tooltip/Tooltip.story.js

@@ -1 +1 @@
-import{userEvent,within}from"@storybook/testing-library";import Button from"../button";import{storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/Tooltip",args:{label:"This is the content",position:"bottom"},render:a=>/*#__PURE__*/_jsx("div",{className:"text-xs-center",style:{flexBasis:"150px"},children:/*#__PURE__*/_jsx(Tooltip,{...a,children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})})}),tags:["autodocs"]};export const Basic={};export const OpenedTooltip={parameters:{chromatic:{delay:1e3}},play:a=>{let{canvasElement:b}=a;const c=within(b);userEvent.hover(c.getByRole("button"))}};export const OpenedTooltipDark=storyConfig(OpenedTooltip,{variants:["dark"]});
+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{userEvent,within}from"@storybook/testing-library";import Button from"../button";import{storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/Tooltip",args:{label:"This is the content",position:"bottom"},render:function render(a){return/*#__PURE__*/_jsx("div",{className:"text-xs-center",style:{flexBasis:"150px"},children:/*#__PURE__*/_jsx(Tooltip,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})}))})},tags:["autodocs"]};export var Basic={};export var OpenedTooltip={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.hover(c.getByRole("button"))}};export var OpenedTooltipDark=storyConfig(OpenedTooltip,{variants:["dark"]});

package/build/es/no-polyfill/typeahead/Typeahead.js

@@ -1 +1 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import{Cross as CrossIcon}from"@transferwise/icons";import classNames from"classnames";import clamp from"lodash.clamp";import debounce from"lodash.debounce";import PropTypes from"prop-types";import{Component}from"react";import Chip from"../chips/Chip";import{Size,Sentiment}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import InlineAlert from"../inlineAlert";import TypeaheadInput from"./typeaheadInput/TypeaheadInput";import TypeaheadOption from"./typeaheadOption/TypeaheadOption";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_MIN_QUERY_LENGTH=3,SEARCH_DELAY=200;export default class Typeahead extends Component{constructor(a){super(a);const{searchDelay:b,initialValue:c,multiple:d}=a;this.handleSearchDebounced=debounce(this.handleSearch,b);const e=!d&&0<c.length?c[0].label:"";this.state={selected:c,errorState:!1,query:e,keyboardFocusedOptionIndex:null}}UNSAFE_componentWillReceiveProps(a){a.multiple!==this.props.multiple&&this.setState(b=>{const{selected:c}=b;return!a.multiple&&0<c.length?{query:c[0].label,selected:[c[0]]}:{query:""}})}componentWillUnmount(){this.handleSearchDebounced.cancel()}handleOnFocus=()=>{const{onFocus:a}=this.props;this.showMenu(),a&&this.props.onFocus()};onOptionSelected=(a,b)=>{a.preventDefault(),this.selectItem(b)};handleOnChange=a=>{const{optionsShown:b,selected:c}=this.state,{multiple:d,onInputChange:e}=this.props;b||this.showMenu();const f=a.target.value;!d&&0<c.length&&this.updateSelectedValue([]),this.setState({query:f},()=>{this.handleSearchDebounced(f),e&&e(f)})};handleOnPaste=a=>{const{allowNew:b,multiple:c,chipSeparators:d}=this.props,{selected:e}=this.state;if(b&&c&&0<d.length){a.preventDefault();const b=a.clipboardData.getData("text");if(b){const a=new RegExp(d.join("|")),c=b.split(a).map(a=>({label:a.trim()})).filter(a=>a.label);this.updateSelectedValue([...e,...c])}}};handleOnKeyDown=a=>{const{showSuggestions:b,allowNew:c,multiple:d,chipSeparators:e,options:f}=this.props,{keyboardFocusedOptionIndex:g,query:h,selected:i}=this.state;if(!b&&c&&d&&["Enter","Tab",...e].includes(a.key)&&h.trim())a.preventDefault(),this.selectItem({label:h});else switch(a.keyCode){case KeyCodes.DOWN:a.preventDefault(),this.moveFocusedOption(1);break;case KeyCodes.UP:a.preventDefault(),this.moveFocusedOption(-1);break;case KeyCodes.ENTER:a.preventDefault(),f[g]?this.selectItem(f[g]):c&&h.trim()&&this.selectItem({label:h});break;case KeyCodes.BACKSPACE:d&&!h&&0<i.length&&this.updateSelectedValue(i.slice(0,-1));break;default:}};moveFocusedOption(a){this.setState(b=>{const{keyboardFocusedOptionIndex:c}=b,{options:d}=this.props;let e=0;return null!==c&&(e=clamp(c+a,0,d.length-1)),{keyboardFocusedOptionIndex:e}})}selectItem=a=>{const{multiple:b}=this.props;let c,d=[...this.state.selected];b?(d.push(a),c=""):(d=[a],c=a.label),this.updateSelectedValue(d),this.hideMenu(),this.setState({query:c})};stopPropagation=a=>{a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()};handleSearch=a=>{const{onSearch:b}=this.props;b&&b(a),this.setState(a=>({keyboardFocusedOptionIndex:null===a.keyboardFocusedOptionIndex?null:0}))};handleDocumentClick=()=>{if(this.state.optionsShown){this.hideMenu();const{allowNew:a,onBlur:b,autoFillOnBlur:c}=this.props,{query:d}=this.state;this.setState({isFocused:!1}),a&&c&&d.trim()&&this.selectItem({label:d}),b&&b()}};showMenu=()=>{this.setState({isFocused:!0,optionsShown:!0},()=>{addClickClassToDocumentOnIos(),document.addEventListener("click",this.handleDocumentClick,!1)})};hideMenu=()=>{this.setState({optionsShown:!1,keyboardFocusedOptionIndex:null},()=>{removeClickClassFromDocumentOnIos(),document.removeEventListener("click",this.handleDocumentClick,!1)})};updateSelectedValue=a=>{const{onChange:b,validateChip:c}=this.props,d=a.some(a=>!c(a));this.setState({selected:a,errorState:d},()=>{b(a)})};clear=a=>{a.preventDefault(),0<this.state.selected.length&&this.updateSelectedValue([]),this.setState({query:""})};removeChip=a=>{const{selected:b}=this.state;0<b.length&&this.updateSelectedValue([...b.filter(b=>b!==a)])};renderChip=(a,b)=>{const c=this.props.validateChip(a);return/*#__PURE__*/_jsx(Chip,{label:a.label,className:classNames("m-t-1",{"has-error":!c,"np-chip--valid":c}),onRemove:()=>this.removeChip(a)},b)};renderMenu=a=>{let{footer:b,options:c,id:d,keyboardFocusedOptionIndex:e,query:f,allowNew:g,showNewEntry:h,dropdownOpen:i}=a;const j=[...c];return g&&f.trim()&&c.every(a=>a.label.trim().toUpperCase()!==f.trim().toUpperCase())&&h&&j.push({label:f}),/*#__PURE__*/_jsx("div",{className:classNames("dropdown btn-group btn-block",{open:i}),id:`menu-${d}`,children:/*#__PURE__*/_jsxs("ul",{className:"dropdown-menu",role:"menu","aria-labelledby":"dropdownMenu1",children:[j.map((a,b)=>/*#__PURE__*/_jsx(TypeaheadOption,{query:f,option:a,selected:e===b,onClick:b=>{this.onOptionSelected(b,a)}},`${a.label}${b.toString()}`)),b]})})};render(){const{id:a,placeholder:b,multiple:c,size:d,addon:e,name:f,clearable:g,allowNew:h,footer:i,showSuggestions:j,showNewEntry:k,options:l,minQueryLength:m,autoFocus:n,maxHeight:o,alert:p,inputAutoComplete:q}=this.props,{errorState:r,query:s,selected:t,optionsShown:u,keyboardFocusedOptionIndex:v}=this.state,w=g&&(s||0<t.length),x=u&&j&&s.length>=m,y=this.renderMenu({footer:i,options:l,keyboardFocusedOptionIndex:v,query:s,allowNew:h,showNewEntry:k,dropdownOpen:x}),z=r||p&&p.type===Sentiment.ERROR,A=!r&&p||p&&p.type===Sentiment.ERROR,B=A&&p.type===Sentiment.WARNING,C=A&&p.type===Sentiment.NEUTRAL;return/*#__PURE__*/_jsx("div",{id:a,className:classNames("typeahead",`typeahead-${d}`,{"typeahead--has-value":0<t.length,"typeahead--empty":0===t.length,"typeahead--multiple":c,open:x}),onClick:this.stopPropagation,children:/*#__PURE__*/_jsxs("div",{className:classNames("form-group",{"has-error":z,"has-warning":B,"has-info":C}),children:[/*#__PURE__*/_jsxs("div",{className:classNames(`input-group input-group-${d}`,{"input-group--has-error":z}),children:[e&&/*#__PURE__*/_jsx("span",{className:"input-group-addon input-group-addon--search",children:e}),/*#__PURE__*/_jsx(TypeaheadInput,{autoFocus:n,multiple:c,optionsShown:u,placeholder:b,selected:t,maxHeight:o,name:f,value:s,typeaheadId:a,renderChip:this.renderChip,autoComplete:q,onChange:this.handleOnChange,onKeyDown:this.handleOnKeyDown,onFocus:this.handleOnFocus,onPaste:this.handleOnPaste}),w&&/*#__PURE__*/_jsx("div",{className:"input-group-addon",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled",onClick:this.clear,children:/*#__PURE__*/_jsx(CrossIcon,{})})})]}),A&&/*#__PURE__*/_jsx(InlineAlert,{type:p.type,children:p.message}),y]})})}}Typeahead.propTypes={id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string,value:PropTypes.object})).isRequired,initialValue:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})),onChange:PropTypes.func.isRequired,allowNew:PropTypes.bool,autoFocus:PropTypes.bool,clearable:PropTypes.bool,multiple:PropTypes.bool,showSuggestions:PropTypes.bool,showNewEntry:PropTypes.bool,searchDelay:PropTypes.number,maxHeight:PropTypes.number,minQueryLength:PropTypes.number,addon:PropTypes.node,placeholder:PropTypes.string,alert:PropTypes.shape({message:PropTypes.string.isRequired,type:PropTypes.oneOf(["error","warning","neutral"]).isRequired}),footer:PropTypes.node,validateChip:PropTypes.func,onSearch:PropTypes.func,onBlur:PropTypes.func,onInputChange:PropTypes.func,onFocus:PropTypes.func,chipSeparators:PropTypes.arrayOf(PropTypes.string),size:PropTypes.oneOf(["md","lg"]),inputAutoComplete:PropTypes.string,autoFillOnBlur:PropTypes.bool},Typeahead.defaultProps={allowNew:!1,autoFocus:!1,clearable:!0,multiple:!1,maxHeight:null,showSuggestions:!0,showNewEntry:!0,searchDelay:SEARCH_DELAY,minQueryLength:3,addon:null,placeholder:null,alert:null,footer:null,size:Size.MEDIUM,chipSeparators:[],initialValue:[],onSearch:null,onBlur:null,onInputChange:null,onFocus:null,validateChip:()=>!0,inputAutoComplete:"new-password",autoFillOnBlur:!0};
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import{Cross as CrossIcon}from"@transferwise/icons";import classNames from"classnames";import clamp from"lodash.clamp";import debounce from"lodash.debounce";import PropTypes from"prop-types";import{Component}from"react";import Chip from"../chips/Chip";import{Size,Sentiment}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import InlineAlert from"../inlineAlert";import TypeaheadInput from"./typeaheadInput/TypeaheadInput";import TypeaheadOption from"./typeaheadOption/TypeaheadOption";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_MIN_QUERY_LENGTH=3,SEARCH_DELAY=200,Typeahead=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(){var a=d.props.onFocus;d.showMenu(),a&&d.props.onFocus()}),_defineProperty(_assertThisInitialized(d),"onOptionSelected",function(a,b){a.preventDefault(),d.selectItem(b)}),_defineProperty(_assertThisInitialized(d),"handleOnChange",function(a){var b=d.state,c=b.optionsShown,e=b.selected,f=d.props,g=f.multiple,h=f.onInputChange;c||d.showMenu();var i=a.target.value;!g&&0<e.length&&d.updateSelectedValue([]),d.setState({query:i},function(){d.handleSearchDebounced(i),h&&h(i)})}),_defineProperty(_assertThisInitialized(d),"handleOnPaste",function(a){var b=d.props,c=b.allowNew,e=b.multiple,f=b.chipSeparators,g=d.state.selected;if(c&&e&&0<f.length){a.preventDefault();var h=a.clipboardData.getData("text");if(h){var i=new RegExp(f.join("|")),j=h.split(i).map(function(a){return{label:a.trim()}}).filter(function(a){return a.label});d.updateSelectedValue([].concat(_toConsumableArray(g),_toConsumableArray(j)))}}}),_defineProperty(_assertThisInitialized(d),"handleOnKeyDown",function(a){var b=d.props,c=b.showSuggestions,e=b.allowNew,f=b.multiple,g=b.chipSeparators,h=b.options,i=d.state,j=i.keyboardFocusedOptionIndex,k=i.query,l=i.selected;if(!c&&e&&f&&["Enter","Tab"].concat(_toConsumableArray(g)).includes(a.key)&&k.trim())a.preventDefault(),d.selectItem({label:k});else switch(a.keyCode){case KeyCodes.DOWN:a.preventDefault(),d.moveFocusedOption(1);break;case KeyCodes.UP:a.preventDefault(),d.moveFocusedOption(-1);break;case KeyCodes.ENTER:a.preventDefault(),h[j]?d.selectItem(h[j]):e&&k.trim()&&d.selectItem({label:k});break;case KeyCodes.BACKSPACE:f&&!k&&0<l.length&&d.updateSelectedValue(l.slice(0,-1));break;default:}}),_defineProperty(_assertThisInitialized(d),"selectItem",function(a){var b,c=d.props.multiple,e=_toConsumableArray(d.state.selected);c?(e.push(a),b=""):(e=[a],b=a.label),d.updateSelectedValue(e),d.hideMenu(),d.setState({query:b})}),_defineProperty(_assertThisInitialized(d),"stopPropagation",function(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}),_defineProperty(_assertThisInitialized(d),"handleSearch",function(a){var b=d.props.onSearch;b&&b(a),d.setState(function(a){return{keyboardFocusedOptionIndex:null===a.keyboardFocusedOptionIndex?null:0}})}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){if(d.state.optionsShown){d.hideMenu();var a=d.props,b=a.allowNew,c=a.onBlur,e=a.autoFillOnBlur,f=d.state.query;d.setState({isFocused:!1}),b&&e&&f.trim()&&d.selectItem({label:f}),c&&c()}}),_defineProperty(_assertThisInitialized(d),"showMenu",function(){d.setState({isFocused:!0,optionsShown:!0},function(){addClickClassToDocumentOnIos(),document.addEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"hideMenu",function(){d.setState({optionsShown:!1,keyboardFocusedOptionIndex:null},function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"updateSelectedValue",function(a){var b=d.props,c=b.onChange,e=b.validateChip,f=a.some(function(a){return!e(a)});d.setState({selected:a,errorState:f},function(){c(a)})}),_defineProperty(_assertThisInitialized(d),"clear",function(a){a.preventDefault(),0<d.state.selected.length&&d.updateSelectedValue([]),d.setState({query:""})}),_defineProperty(_assertThisInitialized(d),"removeChip",function(a){var b=d.state.selected;0<b.length&&d.updateSelectedValue(_toConsumableArray(b.filter(function(b){return b!==a})))}),_defineProperty(_assertThisInitialized(d),"renderChip",function(a,b){var c=d.props.validateChip(a);return/*#__PURE__*/_jsx(Chip,{label:a.label,className:classNames("m-t-1",{"has-error":!c,"np-chip--valid":c}),onRemove:function onRemove(){return d.removeChip(a)}},b)}),_defineProperty(_assertThisInitialized(d),"renderMenu",function(a){var b=a.footer,c=a.options,e=a.id,f=a.keyboardFocusedOptionIndex,g=a.query,h=a.allowNew,i=a.showNewEntry,j=a.dropdownOpen,k=_toConsumableArray(c);return h&&g.trim()&&c.every(function(a){return a.label.trim().toUpperCase()!==g.trim().toUpperCase()})&&i&&k.push({label:g}),/*#__PURE__*/_jsx("div",{className:classNames("dropdown btn-group btn-block",{open:j}),id:"menu-".concat(e),children:/*#__PURE__*/_jsxs("ul",{className:"dropdown-menu",role:"menu","aria-labelledby":"dropdownMenu1",children:[k.map(function(a,b){return/*#__PURE__*/_jsx(TypeaheadOption,{query:g,option:a,selected:f===b,onClick:function onClick(b){d.onOptionSelected(b,a)}},"".concat(a.label).concat(b.toString()))}),b]})})});var e=a.searchDelay,f=a.initialValue,g=a.multiple;d.handleSearchDebounced=debounce(d.handleSearch,e);var h=!g&&0<f.length?f[0].label:"";return d.state={selected:f,errorState:!1,query:h,keyboardFocusedOptionIndex:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){a.multiple!==this.props.multiple&&this.setState(function(b){var c=b.selected;return!a.multiple&&0<c.length?{query:c[0].label,selected:[c[0]]}:{query:""}})}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.handleSearchDebounced.cancel()}},{key:"moveFocusedOption",value:function moveFocusedOption(a){var b=this;this.setState(function(c){var d=c.keyboardFocusedOptionIndex,e=b.props.options,f=0;return null!==d&&(f=clamp(d+a,0,e.length-1)),{keyboardFocusedOptionIndex:f}})}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.placeholder,d=a.multiple,e=a.size,f=a.addon,g=a.name,h=a.clearable,i=a.allowNew,j=a.footer,k=a.showSuggestions,l=a.showNewEntry,m=a.options,n=a.minQueryLength,o=a.autoFocus,p=a.maxHeight,q=a.alert,r=a.inputAutoComplete,s=this.state,t=s.errorState,u=s.query,v=s.selected,w=s.optionsShown,x=s.keyboardFocusedOptionIndex,y=h&&(u||0<v.length),z=w&&k&&u.length>=n,A=this.renderMenu({footer:j,options:m,keyboardFocusedOptionIndex:x,query:u,allowNew:i,showNewEntry:l,dropdownOpen:z}),B=t||q&&q.type===Sentiment.ERROR,C=!t&&q||q&&q.type===Sentiment.ERROR,D=C&&q.type===Sentiment.WARNING,E=C&&q.type===Sentiment.NEUTRAL;return/*#__PURE__*/_jsx("div",{id:b,className:classNames("typeahead","typeahead-".concat(e),{"typeahead--has-value":0<v.length,"typeahead--empty":0===v.length,"typeahead--multiple":d,open:z}),onClick:this.stopPropagation,children:/*#__PURE__*/_jsxs("div",{className:classNames("form-group",{"has-error":B,"has-warning":D,"has-info":E}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("input-group input-group-".concat(e),{"input-group--has-error":B}),children:[f&&/*#__PURE__*/_jsx("span",{className:"input-group-addon input-group-addon--search",children:f}),/*#__PURE__*/_jsx(TypeaheadInput,{autoFocus:o,multiple:d,optionsShown:w,placeholder:c,selected:v,maxHeight:p,name:g,value:u,typeaheadId:b,renderChip:this.renderChip,autoComplete:r,onChange:this.handleOnChange,onKeyDown:this.handleOnKeyDown,onFocus:this.handleOnFocus,onPaste:this.handleOnPaste}),y&&/*#__PURE__*/_jsx("div",{className:"input-group-addon",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled",onClick:this.clear,children:/*#__PURE__*/_jsx(CrossIcon,{})})})]}),C&&/*#__PURE__*/_jsx(InlineAlert,{type:q.type,children:q.message}),A]})})}}]),b}(Component);export{Typeahead as default};Typeahead.propTypes={id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string,value:PropTypes.object})).isRequired,initialValue:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})),onChange:PropTypes.func.isRequired,allowNew:PropTypes.bool,autoFocus:PropTypes.bool,clearable:PropTypes.bool,multiple:PropTypes.bool,showSuggestions:PropTypes.bool,showNewEntry:PropTypes.bool,searchDelay:PropTypes.number,maxHeight:PropTypes.number,minQueryLength:PropTypes.number,addon:PropTypes.node,placeholder:PropTypes.string,alert:PropTypes.shape({message:PropTypes.string.isRequired,type:PropTypes.oneOf(["error","warning","neutral"]).isRequired}),footer:PropTypes.node,validateChip:PropTypes.func,onSearch:PropTypes.func,onBlur:PropTypes.func,onInputChange:PropTypes.func,onFocus:PropTypes.func,chipSeparators:PropTypes.arrayOf(PropTypes.string),size:PropTypes.oneOf(["md","lg"]),inputAutoComplete:PropTypes.string,autoFillOnBlur:PropTypes.bool},Typeahead.defaultProps={allowNew:!1,autoFocus:!1,clearable:!0,multiple:!1,maxHeight:null,showSuggestions:!0,showNewEntry:!0,searchDelay:SEARCH_DELAY,minQueryLength:3,addon:null,placeholder:null,alert:null,footer:null,size:Size.MEDIUM,chipSeparators:[],initialValue:[],onSearch:null,onBlur:null,onInputChange:null,onFocus:null,validateChip:function validateChip(){return!0},inputAutoComplete:"new-password",autoFillOnBlur:!0};

package/build/es/no-polyfill/typeahead/typeaheadInput/TypeaheadInput.js

@@ -1 +1 @@
-/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import classnames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{Input}from"../../inputs/Input";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_INPUT_MIN_WIDTH=10;export default class TypeaheadInput extends Component{constructor(){super(),this.state={inputWidth:DEFAULT_INPUT_MIN_WIDTH}}componentDidMount(){const{autoFocus:a}=this.props;a&&this.inputRef.focus()}componentDidUpdate(a){a.value!==this.props.value&&this.props.multiple&&this.recalculateWidth()}recalculateWidth=()=>{requestAnimationFrame(()=>{this.setState({inputWidth:Math.max(DEFAULT_INPUT_MIN_WIDTH,this.sizerRef.scrollWidth+10)})})};renderInput=()=>{const{typeaheadId:a,autoFocus:b,multiple:c,name:d,optionsShown:e,placeholder:f,selected:g,value:h,onChange:i,onKeyDown:j,onFocus:k,onPaste:l,autoComplete:m}=this.props,{inputWidth:n}=this.state,o=!c||0===g.length;return/*#__PURE__*/_jsx(Input,{ref:a=>{this.inputRef=a},className:classnames(c&&"typeahead__input"),name:d,id:`input-${a}`,autoFocus:b,placeholder:o?f:"","aria-autocomplete":"list","aria-expanded":e,"aria-haspopup":"listbox","aria-controls":`menu-${a}`,autoComplete:m,role:"combobox",value:h,style:c&&0<g.length?{width:n}:{},onChange:i,onKeyDown:j,onClick:k,onFocus:k,onPaste:l})};render(){const{multiple:a,selected:b,value:c,maxHeight:d,renderChip:e}=this.props;return a?/*#__PURE__*/_jsxs("div",{className:"form-control typeahead__input-container",style:d&&{maxHeight:d},onClick:()=>{this.inputRef.focus()},children:[/*#__PURE__*/_jsxs("div",{className:"typeahead__input-wrapper",children:[b&&b.map((a,b)=>e(a,b)),this.renderInput(),/*#__PURE__*/_jsx("div",{className:"typeahead__input-aligner"})]}),/*#__PURE__*/_jsx("div",{ref:a=>{this.sizerRef=a},className:"sizer form-control typeahead__input",children:c})]}):this.renderInput()}}TypeaheadInput.propTypes={typeaheadId:PropTypes.string.isRequired,name:PropTypes.string.isRequired,autoFocus:PropTypes.bool,multiple:PropTypes.bool.isRequired,value:PropTypes.string.isRequired,selected:PropTypes.arrayOf(PropTypes.object),placeholder:PropTypes.string,optionsShown:PropTypes.bool,maxHeight:PropTypes.number,autoComplete:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,renderChip:PropTypes.func.isRequired,onKeyDown:PropTypes.func.isRequired,onFocus:PropTypes.func.isRequired,onPaste:PropTypes.func.isRequired},TypeaheadInput.defaultProps={autoFocus:!1,maxHeight:null,placeholder:"",optionsShown:!1,selected:[]};
+import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import classnames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{Input}from"../../inputs/Input";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_INPUT_MIN_WIDTH=10,TypeaheadInput=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"recalculateWidth",function(){requestAnimationFrame(function(){a.setState({inputWidth:Math.max(DEFAULT_INPUT_MIN_WIDTH,a.sizerRef.scrollWidth+10)})})}),_defineProperty(_assertThisInitialized(a),"renderInput",function(){var b=a.props,c=b.typeaheadId,d=b.autoFocus,e=b.multiple,f=b.name,g=b.optionsShown,h=b.placeholder,i=b.selected,j=b.value,k=b.onChange,l=b.onKeyDown,m=b.onFocus,n=b.onPaste,o=b.autoComplete,p=a.state.inputWidth,q=!e||0===i.length;return/*#__PURE__*/_jsx(Input,{ref:function ref(b){a.inputRef=b},className:classnames(e&&"typeahead__input"),name:f,id:"input-".concat(c),autoFocus:d,placeholder:q?h:"","aria-autocomplete":"list","aria-expanded":g,"aria-haspopup":"listbox","aria-controls":"menu-".concat(c),autoComplete:o,role:"combobox",value:j,style:e&&0<i.length?{width:p}:{},onChange:k,onKeyDown:l,onClick:m,onFocus:m,onPaste:n})}),a.state={inputWidth:DEFAULT_INPUT_MIN_WIDTH},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){var a=this.props.autoFocus;a&&this.inputRef.focus()}},{key:"componentDidUpdate",value:function componentDidUpdate(a){a.value!==this.props.value&&this.props.multiple&&this.recalculateWidth()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.multiple,d=b.selected,e=b.value,f=b.maxHeight,g=b.renderChip;return c?/*#__PURE__*/_jsxs("div",{className:"form-control typeahead__input-container",style:f&&{maxHeight:f},onClick:function onClick(){a.inputRef.focus()},children:[/*#__PURE__*/_jsxs("div",{className:"typeahead__input-wrapper",children:[d&&d.map(function(a,b){return g(a,b)}),this.renderInput(),/*#__PURE__*/_jsx("div",{className:"typeahead__input-aligner"})]}),/*#__PURE__*/_jsx("div",{ref:function ref(b){a.sizerRef=b},className:"sizer form-control typeahead__input",children:e})]}):this.renderInput()}}]),b}(Component);export{TypeaheadInput as default};TypeaheadInput.propTypes={typeaheadId:PropTypes.string.isRequired,name:PropTypes.string.isRequired,autoFocus:PropTypes.bool,multiple:PropTypes.bool.isRequired,value:PropTypes.string.isRequired,selected:PropTypes.arrayOf(PropTypes.object),placeholder:PropTypes.string,optionsShown:PropTypes.bool,maxHeight:PropTypes.number,autoComplete:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,renderChip:PropTypes.func.isRequired,onKeyDown:PropTypes.func.isRequired,onFocus:PropTypes.func.isRequired,onPaste:PropTypes.func.isRequired},TypeaheadInput.defaultProps={autoFocus:!1,maxHeight:null,placeholder:"",optionsShown:!1,selected:[]};

package/build/es/no-polyfill/typeahead/typeaheadOption/TypeaheadOption.js

@@ -1 +1 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const Option=a=>{const{option:b,selected:c,onClick:d,query:e}=a,{label:f,note:g,secondary:h}=b;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"np-text-body-default m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"np-text-body-default text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:()=>{}};export default Option;
+/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"np-text-body-default m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"np-text-body-default text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:function onClick(){}};export default Option;

package/build/es/no-polyfill/typeahead/util/highlight.js

@@ -1 +1 @@
-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 default function hightlight(a,b){if(a&&b){const c=a.toUpperCase().indexOf(b.trim().toUpperCase()),d=c+b.trim().length;if(-1!==c)return/*#__PURE__*/_jsxs(_Fragment,{children:[a.slice(0,Math.max(0,c)),/*#__PURE__*/_jsx("strong",{children:a.slice(c,d)}),a.slice(Math.max(0,d))]})}return a}
+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 default function hightlight(a,b){if(a&&b){var c=a.toUpperCase().indexOf(b.trim().toUpperCase()),d=c+b.trim().length;if(-1!==c)return/*#__PURE__*/_jsxs(_Fragment,{children:[a.slice(0,Math.max(0,c)),/*#__PURE__*/_jsx("strong",{children:a.slice(c,d)}),a.slice(Math.max(0,d))]})}return a}

package/build/es/no-polyfill/upload/Upload.js

@@ -1,11 +1,7 @@
-import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status,Typography}from"../common";import Title from"../title";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS={[UploadStep.UPLOAD_IMAGE_STEP]:UploadImageStep,[UploadStep.MEDIA_UPLOAD_STEP]:MediaUploadStep};/*
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status,Typography}from"../common";import Title from"../title";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(a){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&a===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&a===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return b.stop();}},b)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props,c=b.httpOptions,e=b.fetcher,f=c||{},g=f.fileInputName,h=void 0===g?a.name:g,i=f.data,j=void 0===i?{}:i,k=new FormData;return k.append(h,a),Object.keys(j).forEach(function(a){return k.append(a,j[a])}),postData(d.prepareHttpOptions(c),k,e)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(a){var c,e,f,g,h,i,j,k,l,m;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,j=d.state.isProcessing,!(h||j)){b.next=4;break}return b.abrupt("return",!1);case 4:if(a){b.next=6;break}throw new Error("Could not retrieve file");case 6:return d.setState({fileName:a.name,isDroppable:!1,isProcessing:!0}),g&&g(a),k=null,b.prev=9,b.next=12,asyncFileRead(a);case 12:k=b.sent,b.next=18;break;case 15:b.prev=15,b.t0=b["catch"](9),d.asyncResponse(b.t0,PROCESS_STATE[0]);case 18:if(k){b.next=20;break}return b.abrupt("return",!1);case 20:if(d.setState({isImage:getFileType(a,k).includes("image")}),isTypeValid(a,i,k)){b.next=25;break}return l={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(l,PROCESS_STATE[0]),b.abrupt("return",!1);case 25:if(isSizeValid(a,f)){b.next=29;break}return m={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(m,PROCESS_STATE[0]),b.abrupt("return",!1);case 29:if(!e){b.next=33;break}return b.next=32,d.asyncPost(a).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(k),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 32:return b.abrupt("return",b.sent);case 33:return d.showDataImage(k),d.asyncResponse(k,"success"),b.abrupt("return",!0);case 36:case"end":return b.stop();}},b,null,[[9,15]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled,c=this.state.isProcessing;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){var b=this.state.isProcessing;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.psButtonDisabled,m=b.csButtonText,n=b.csSuccessText,o=b.size,p=b.uploadStep,q=b.intl,r=this.state,s=r.response,t=r.fileName,u=r.isComplete,v=r.isDroppable,w=r.isError,x=r.isImage,y=r.isProcessing,z=r.isSuccess,A=r.uploadedImage,B=UPLOAD_STEP_COMPONENTS[p]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames("droppable-area",{droppable:!0,"tw-droppable-sm droppable-sm":"sm"===o,"tw-droppable-md droppable-md":"md"===o||!o,"tw-droppable-lg droppable-lg":"lg"===o,"droppable-dropping":v,"droppable-processing":y,"droppable-complete":u,"droppable-negative":w}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!y&&!u&&/*#__PURE__*/_jsx(B,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:u,usAccept:d,usButtonText:e||q.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||q.formatMessage(messages.usPlaceholder)}),y&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:u,isError:w,isSuccess:z,psButtonText:j||q.formatMessage(messages.psButtonText),psProcessingText:k||q.formatMessage(messages.psProcessingText),psButtonDisabled:l,onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(z||w||u)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:t,isComplete:u,isError:w,isImage:x,csButtonText:m||q.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===s||void 0===s?void 0:s.status),csSuccessText:n||q.formatMessage(messages.csSuccessText),uploadedImage:A,onClear:function onClear(b){return a.handleOnClear(b)}}),!y&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{size:"16"})}),/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"m-t-3",children:c||q.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
  * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
  * rendered first and then updated with the right status.
- */class Upload extends Component{constructor(a){super(a),this.dragCounter=0,this.timeouts=null,this.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null}}getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}onDragEnter(a){a.preventDefault(),this.dragCounter+=1;const{usDisabled:b}=this.props,{isProcessing:c}=this.state;1!==this.dragCounter||b||c||this.setState({isDroppable:!0})}onDrop(a){const{isProcessing:b}=this.state;a.preventDefault(),b||this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}onAnimationCompleted=async a=>{const{response:b,isProcessing:c,fileName:d}=this.state,{animationDelay:e}=this.props;// Success.
-if(c&&a===Status.SUCCEEDED){const{onSuccess:a}=this.props;this.timeouts=setTimeout(()=>{this.setState({isProcessing:!1,isComplete:!0},()=>a?a(b,d):{})},e)}// Failure.
-if(c&&a===Status.FAILED){const{onFailure:a}=this.props;this.timeouts=setTimeout(()=>{this.setState({isProcessing:!1,isComplete:!0},()=>a?a(b):{})},e)}};asyncPost=a=>{const{httpOptions:b,fetcher:c}=this.props,{fileInputName:d=a.name,data:e={}}=b||{},f=new FormData;return f.append(d,a),Object.keys(e).forEach(a=>f.append(a,e[a])),postData(this.prepareHttpOptions(b),f,c)};asyncResponse=(a,b)=>{// Gives time to the animation callback to fire.
-this.timeouts=setTimeout(()=>{this.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)};prepareHttpOptions=a=>{if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a};handleOnClear=a=>{a.preventDefault();const{onCancel:b}=this.props;b&&b(),this.reset()};reset=()=>{this.dragCounter=0,clearTimeout(this.timeouts),this.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})};showDataImage=a=>{const{isImage:b}=this.state;b&&this.setState({uploadedImage:a})};fileDropped=async a=>{const{httpOptions:b,maxSize:c,onStart:d,usDisabled:e,usAccept:f}=this.props,{isProcessing:g}=this.state;if(e||g)return!1;if(!a)throw new Error("Could not retrieve file");this.setState({fileName:a.name,isDroppable:!1,isProcessing:!0}),d&&d(a);let h=null;try{h=await asyncFileRead(a)}catch(a){this.asyncResponse(a,PROCESS_STATE[0])}if(!h)return!1;if(this.setState({isImage:getFileType(a,h).includes("image")}),!isTypeValid(a,f,h)){return this.asyncResponse({status:415,statusText:"Unsupported Media Type"},PROCESS_STATE[0]),!1}if(!isSizeValid(a,c)){return this.asyncResponse({status:413,statusText:"Request Entity Too Large"},PROCESS_STATE[0]),!1}return b?await this.asyncPost(a).then(a=>this.asyncResponse(a,"success")).then(()=>(this.showDataImage(h),!0)).catch(a=>(this.asyncResponse(a,PROCESS_STATE[0]),!1)):(this.showDataImage(h),this.asyncResponse(h,"success"),!0);// Post on form submit. And return the encoded image.
-};render(){const{usDropMessage:a,usAccept:b,usButtonText:c,usDisabled:d,usHelpImage:e,usLabel:f,usPlaceholder:g,psButtonText:h,psProcessingText:i,psButtonDisabled:j,csButtonText:k,csSuccessText:l,size:m,uploadStep:n,intl:o}=this.props,{response:p,fileName:q,isComplete:r,isDroppable:s,isError:t,isImage:u,isProcessing:v,isSuccess:w,uploadedImage:x}=this.state,y=UPLOAD_STEP_COMPONENTS[n]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames("droppable-area",{droppable:!0,"tw-droppable-sm droppable-sm":"sm"===m,"tw-droppable-md droppable-md":"md"===m||!m,"tw-droppable-lg droppable-lg":"lg"===m,"droppable-dropping":s,"droppable-processing":v,"droppable-complete":r,"droppable-negative":t}),onDragEnter:a=>this.onDragEnter(a),onDragLeave:a=>this.onDragLeave(a),onDrop:a=>this.onDrop(a),onDragOver:a=>a.preventDefault(),children:[!v&&!r&&/*#__PURE__*/_jsx(y,{fileDropped:a=>this.fileDropped(a),isComplete:r,usAccept:b,usButtonText:c||o.formatMessage(messages.usButtonText),usDisabled:d,usHelpImage:e,usLabel:f,usPlaceholder:g||o.formatMessage(messages.usPlaceholder)}),v&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:r,isError:t,isSuccess:w,psButtonText:h||o.formatMessage(messages.psButtonText),psProcessingText:i||o.formatMessage(messages.psProcessingText),psButtonDisabled:j,onAnimationCompleted:a=>this.onAnimationCompleted(a),onClear:a=>this.handleOnClear(a)}),(w||t||r)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:q,isComplete:r,isError:t,isImage:u,csButtonText:k||o.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(p?.status),csSuccessText:l||o.formatMessage(messages.csSuccessText),uploadedImage:x,onClear:a=>this.handleOnClear(a)}),!v&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{size:"16"})}),/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"m-t-3",children:a||o.formatMessage(messages.usDropMessage)})]})})]})}}Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),/**
+ */Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),/**
    * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
    * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
    */fetcher:PropTypes.func,maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psButtonDisabled:PropTypes.bool,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**

package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js

@@ -1 +1 @@
-import{AlertCircle as AlertCircleIcon,Document as DocumentIcon}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{Priority,Typography}from"../../..";import Body from"../../../body";import Button from"../../../button";import{Sentiment,Size}from"../../../common";import StatusIcon from"../../../statusIcon";import Title from"../../../title";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const CompleteStep=a=>{const{isModern:b}=useTheme(),{csButtonText:c,csFailureText:d,csSuccessText:e,fileName:f,isComplete:g,isError:h,isImage:i,onClear:j,uploadedImage:k}=a;return/*#__PURE__*/_jsx("div",{className:"droppable-complete-card droppable-card","aria-hidden":!g,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"droppable-card-content d-flex flex-column align-items-center",children:h?/*#__PURE__*/_jsxs(_Fragment,{children:[b?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:Sentiment.NEGATIVE}):/*#__PURE__*/_jsx(AlertCircleIcon,{size:24,className:"text-negative"}),d&&/*#__PURE__*/_jsx("p",{className:classNames("m-t-2",{"m-b-0":b}),children:d})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[i&&k?/*#__PURE__*/_jsx("img",{src:k,alt:"OK",className:"thumbnail "}):/*#__PURE__*/_jsx(DocumentIcon,{}),f&&/*#__PURE__*/_jsx(Body,{as:"p",className:"m-b-0",children:f}),e&&/*#__PURE__*/_jsx(Title,{className:"caption m-t-1",type:Typography.TITLE_BODY,children:e})]})}),c&&/*#__PURE__*/_jsx(Button,{priority:b?Priority.PRIMARY:Priority.SECONDARY,className:classNames({"m-t-1":b&&!h,"m-t-2":b&&h,"m-t-3":!b}),onClick:a=>j(a),children:c})]})})};CompleteStep.propTypes={csButtonText:PropTypes.string.isRequired,csSuccessText:PropTypes.string.isRequired,csFailureText:PropTypes.string.isRequired,fileName:PropTypes.string.isRequired,isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isImage:PropTypes.bool.isRequired,onClear:PropTypes.func.isRequired,uploadedImage:PropTypes.string},CompleteStep.defaultProps={uploadedImage:null};export default CompleteStep;
+import{AlertCircle as AlertCircleIcon,Document as DocumentIcon}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import{Priority,Typography}from"../../..";import Body from"../../../body";import Button from"../../../button";import{Sentiment,Size}from"../../../common";import StatusIcon from"../../../statusIcon";import Title from"../../../title";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 CompleteStep=function(a){var b=useTheme(),c=b.isModern,d=a.csButtonText,e=a.csFailureText,f=a.csSuccessText,g=a.fileName,h=a.isComplete,i=a.isError,j=a.isImage,k=a.onClear,l=a.uploadedImage;return/*#__PURE__*/_jsx("div",{className:"droppable-complete-card droppable-card","aria-hidden":!h,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"droppable-card-content d-flex flex-column align-items-center",children:i?/*#__PURE__*/_jsxs(_Fragment,{children:[c?/*#__PURE__*/_jsx(StatusIcon,{size:Size.LARGE,sentiment:Sentiment.NEGATIVE}):/*#__PURE__*/_jsx(AlertCircleIcon,{size:24,className:"text-negative"}),e&&/*#__PURE__*/_jsx("p",{className:classNames("m-t-2",{"m-b-0":c}),children:e})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[j&&l?/*#__PURE__*/_jsx("img",{src:l,alt:"OK",className:"thumbnail "}):/*#__PURE__*/_jsx(DocumentIcon,{}),g&&/*#__PURE__*/_jsx(Body,{as:"p",className:"m-b-0",children:g}),f&&/*#__PURE__*/_jsx(Title,{className:"caption m-t-1",type:Typography.TITLE_BODY,children:f})]})}),d&&/*#__PURE__*/_jsx(Button,{priority:c?Priority.PRIMARY:Priority.SECONDARY,className:classNames({"m-t-1":c&&!i,"m-t-2":c&&i,"m-t-3":!c}),onClick:function onClick(a){return k(a)},children:d})]})})};CompleteStep.propTypes={csButtonText:PropTypes.string.isRequired,csSuccessText:PropTypes.string.isRequired,csFailureText:PropTypes.string.isRequired,fileName:PropTypes.string.isRequired,isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isImage:PropTypes.bool.isRequired,onClear:PropTypes.func.isRequired,uploadedImage:PropTypes.string},CompleteStep.defaultProps={uploadedImage:null};export default CompleteStep;

package/build/es/no-polyfill/upload/steps/mediaUploadStep/mediaUploadStep.js

@@ -1 +1 @@
-import{Upload as UploadIcon}from"@transferwise/icons";import PropTypes from"prop-types";import Body from"../../../body";import Button from"../../../button/Button";import{Typography}from"../../../common";import Title from"../../../title";import{getSupportedSpotMimeTypes,requestMedia}from"../../utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const MediaUploadStep=a=>{let{isComplete:b,usAccept:c,usButtonText:d,usDisabled:e,usHelpImage:f,usLabel:g,usPlaceholder:h,fileDropped:i}=a;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("div",{className:"droppable-default-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"m-b-3",children:(()=>f?"string"==typeof f?/*#__PURE__*/_jsx("img",{src:f,alt:g,className:"thumbnail text-xs-center"}):f:/*#__PURE__*/_jsx("div",{className:"circle circle-sm circle-inverse p-t-1",children:/*#__PURE__*/_jsx(UploadIcon,{size:24})}))()}),g&&/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"m-b-1",children:g}),h&&/*#__PURE__*/_jsx(Body,{as:"p",type:Typography.BODY_LARGE,className:"m-b-3",children:`${h}`}),/*#__PURE__*/_jsx(Button,{disabled:e,onClick:()=>{const a=getSupportedSpotMimeTypes(c);if(0===a.length)throw new Error("provided mimeTypes not supported");requestMedia({allowedMimeTypes:a}).then(a=>i(a))},children:d||/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"m-r-0"})})]})})})};MediaUploadStep.propTypes={fileDropped:PropTypes.func.isRequired,isComplete:PropTypes.bool.isRequired,usAccept:PropTypes.string.isRequired,usButtonText:PropTypes.string.isRequired,usDisabled:PropTypes.bool.isRequired,usHelpImage:PropTypes.node.isRequired,usLabel:PropTypes.string.isRequired,usPlaceholder:PropTypes.string.isRequired};export default MediaUploadStep;
+import{Upload as UploadIcon}from"@transferwise/icons";import PropTypes from"prop-types";import Body from"../../../body";import Button from"../../../button/Button";import{Typography}from"../../../common";import Title from"../../../title";import{getSupportedSpotMimeTypes,requestMedia}from"../../utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MediaUploadStep=function(a){var b=a.isComplete,c=a.usAccept,d=a.usButtonText,e=a.usDisabled,f=a.usHelpImage,g=a.usLabel,h=a.usPlaceholder,i=a.fileDropped;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("div",{className:"droppable-default-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"m-b-3",children:function getImage(){return f?"string"==typeof f?/*#__PURE__*/_jsx("img",{src:f,alt:g,className:"thumbnail text-xs-center"}):f:/*#__PURE__*/_jsx("div",{className:"circle circle-sm circle-inverse p-t-1",children:/*#__PURE__*/_jsx(UploadIcon,{size:24})})}()}),g&&/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"m-b-1",children:g}),h&&/*#__PURE__*/_jsx(Body,{as:"p",type:Typography.BODY_LARGE,className:"m-b-3",children:"".concat(h)}),/*#__PURE__*/_jsx(Button,{disabled:e,onClick:function getMediaFile(){var a=getSupportedSpotMimeTypes(c);if(0===a.length)throw new Error("provided mimeTypes not supported");requestMedia({allowedMimeTypes:a}).then(function(a){return i(a)})},children:d||/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"m-r-0"})})]})})})};MediaUploadStep.propTypes={fileDropped:PropTypes.func.isRequired,isComplete:PropTypes.bool.isRequired,usAccept:PropTypes.string.isRequired,usButtonText:PropTypes.string.isRequired,usDisabled:PropTypes.bool.isRequired,usHelpImage:PropTypes.node.isRequired,usLabel:PropTypes.string.isRequired,usPlaceholder:PropTypes.string.isRequired};export default MediaUploadStep;

package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js

@@ -1 +1 @@
-import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import Button from"../../../button";import{Status,Size,Typography}from"../../../common";import ProcessIndicator from"../../../processIndicator";import Title from"../../../title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";const ProcessingStep=a=>{const{isComplete:b,isError:c,isSuccess:d,onAnimationCompleted:e,onClear:f,psButtonText:g,psProcessingText:h,psButtonDisabled:i}=a,{isModern:j}=useTheme();let k=Status.PROCESSING;return c&&(k=Status.FAILED),d&&(k=Status.SUCCEEDED),/*#__PURE__*/_jsx("div",{className:"droppable-processing-card droppable-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.Small,status:k,onAnimationCompleted:a=>e(a)}),/*#__PURE__*/_jsx(Title,{className:classNames({"m-t-3":!j,"m-b-3":!j,"m-t-2":j,"m-b-2":j}),type:Typography.TITLE_BODY,children:h}),g&&/*#__PURE__*/_jsx(Button,{disabled:i,onClick:a=>f(a),children:g})]})})};ProcessingStep.propTypes={isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isSuccess:PropTypes.bool.isRequired,onAnimationCompleted:PropTypes.func.isRequired,onClear:PropTypes.func.isRequired,psButtonText:PropTypes.string.isRequired,psProcessingText:PropTypes.string.isRequired,psButtonDisabled:PropTypes.bool.isRequired};export default ProcessingStep;
+import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import Button from"../../../button";import{Status,Size,Typography}from"../../../common";import ProcessIndicator from"../../../processIndicator";import Title from"../../../title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ProcessingStep=function(a){var b=a.isComplete,c=a.isError,d=a.isSuccess,e=a.onAnimationCompleted,f=a.onClear,g=a.psButtonText,h=a.psProcessingText,i=a.psButtonDisabled,j=useTheme(),k=j.isModern,l=Status.PROCESSING;return c&&(l=Status.FAILED),d&&(l=Status.SUCCEEDED),/*#__PURE__*/_jsx("div",{className:"droppable-processing-card droppable-card","aria-hidden":b,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.Small,status:l,onAnimationCompleted:function onAnimationCompleted(a){return e(a)}}),/*#__PURE__*/_jsx(Title,{className:classNames({"m-t-3":!k,"m-b-3":!k,"m-t-2":k,"m-b-2":k}),type:Typography.TITLE_BODY,children:h}),g&&/*#__PURE__*/_jsx(Button,{disabled:i,onClick:function onClick(a){return f(a)},children:g})]})})};ProcessingStep.propTypes={isComplete:PropTypes.bool.isRequired,isError:PropTypes.bool.isRequired,isSuccess:PropTypes.bool.isRequired,onAnimationCompleted:PropTypes.func.isRequired,onClear:PropTypes.func.isRequired,psButtonText:PropTypes.string.isRequired,psProcessingText:PropTypes.string.isRequired,psButtonDisabled:PropTypes.bool.isRequired};export default ProcessingStep;

package/build/es/no-polyfill/upload/steps/uploadImageStep/uploadImageStep.js

@@ -1 +1 @@
-import{Upload as UploadIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{createRef,PureComponent}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";class UploadImageStep extends PureComponent{constructor(){super(),this.uploadInputRef=/*#__PURE__*/createRef()}onManualUpload=()=>{const{fileDropped:a}=this.props;if(this.uploadInputRef&&this.uploadInputRef.current){const b=this.uploadInputRef.current.files[0];a(b)}};getImage=()=>{const{usHelpImage:a,usLabel:b}=this.props;return a?"string"==typeof a?/*#__PURE__*/_jsx("img",{src:a,alt:b,className:"thumbnail text-xs-center"}):a:/*#__PURE__*/_jsx("div",{className:"circle circle-sm circle-inverse p-t-1",children:/*#__PURE__*/_jsx(UploadIcon,{size:24})})};render(){const{isComplete:a,usAccept:b,usButtonText:c,usDisabled:d,usLabel:e,usPlaceholder:f}=this.props;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("div",{className:"droppable-default-card","aria-hidden":a,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"m-b-3",children:this.getImage()}),e&&/*#__PURE__*/_jsx("h4",{className:"np-text-title-body m-b-1",children:e}),f&&/*#__PURE__*/_jsx("p",{className:"np-text-body-large m-b-3",children:`${f}`}),/*#__PURE__*/_jsxs("label",{className:`btn btn-primary btn-md ${d?"disabled":""}`,children:[c?/*#__PURE__*/_jsx("span",{children:c}):/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"m-r-0"}),/*#__PURE__*/_jsx("input",{ref:this.uploadInputRef,type:"file",accept:"*"===b?null:b,className:"tw-droppable-input hidden",disabled:d,name:"file-upload",onChange:()=>this.onManualUpload()})]})]})})})}}UploadImageStep.propTypes={fileDropped:PropTypes.func.isRequired,isComplete:PropTypes.bool.isRequired,usAccept:PropTypes.string.isRequired,usButtonText:PropTypes.string.isRequired,usDisabled:PropTypes.bool.isRequired,usHelpImage:PropTypes.node.isRequired,usLabel:PropTypes.string.isRequired,usPlaceholder:PropTypes.string.isRequired};export default UploadImageStep;
+import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Upload as UploadIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{createRef,PureComponent}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var UploadImageStep=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"onManualUpload",function(){var b=a.props.fileDropped;if(a.uploadInputRef&&a.uploadInputRef.current){var c=a.uploadInputRef.current.files[0];b(c)}}),_defineProperty(_assertThisInitialized(a),"getImage",function(){var b=a.props,c=b.usHelpImage,d=b.usLabel;return c?"string"==typeof c?/*#__PURE__*/_jsx("img",{src:c,alt:d,className:"thumbnail text-xs-center"}):c:/*#__PURE__*/_jsx("div",{className:"circle circle-sm circle-inverse p-t-1",children:/*#__PURE__*/_jsx(UploadIcon,{size:24})})}),a.uploadInputRef=/*#__PURE__*/createRef(),a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"render",value:function render(){var a=this,b=this.props,c=b.isComplete,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usLabel,h=b.usPlaceholder;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("div",{className:"droppable-default-card","aria-hidden":c,children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"m-b-3",children:this.getImage()}),g&&/*#__PURE__*/_jsx("h4",{className:"np-text-title-body m-b-1",children:g}),h&&/*#__PURE__*/_jsx("p",{className:"np-text-body-large m-b-3",children:"".concat(h)}),/*#__PURE__*/_jsxs("label",{className:"btn btn-primary btn-md ".concat(f?"disabled":""),children:[e?/*#__PURE__*/_jsx("span",{children:e}):/*#__PURE__*/_jsx(UploadIcon,{size:24,className:"m-r-0"}),/*#__PURE__*/_jsx("input",{ref:this.uploadInputRef,type:"file",accept:"*"===d?null:d,className:"tw-droppable-input hidden",disabled:f,name:"file-upload",onChange:function onChange(){return a.onManualUpload()}})]})]})})})}}]),b}(PureComponent);UploadImageStep.propTypes={fileDropped:PropTypes.func.isRequired,isComplete:PropTypes.bool.isRequired,usAccept:PropTypes.string.isRequired,usButtonText:PropTypes.string.isRequired,usDisabled:PropTypes.bool.isRequired,usHelpImage:PropTypes.node.isRequired,usLabel:PropTypes.string.isRequired,usPlaceholder:PropTypes.string.isRequired};export default UploadImageStep;

package/build/es/no-polyfill/upload/uploadSteps.js

@@ -1,2 +1,2 @@
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export let UploadStep=/*#__PURE__*/function(a){return a.UPLOAD_IMAGE_STEP="uploadImageStep",a.MEDIA_UPLOAD_STEP="mediaUploadStep",a}({});
+export var UploadStep=/*#__PURE__*/function(a){return a.UPLOAD_IMAGE_STEP="uploadImageStep",a.MEDIA_UPLOAD_STEP="mediaUploadStep",a}({});

package/build/es/no-polyfill/upload/utils/asyncFileRead/asyncFileRead.js

@@ -1 +1 @@
-export const asyncFileRead=a=>new Promise((b,c)=>{const d=new FileReader;d.readAsDataURL(a),d.addEventListener("load",a=>{b(a.target.result)}),d.addEventListener("error",a=>{c(a)})});
+export var asyncFileRead=function(a){return new Promise(function(b,c){var d=new FileReader;d.readAsDataURL(a),d.addEventListener("load",function(a){b(a.target.result)}),d.addEventListener("error",function(a){c(a)})})};

package/build/es/no-polyfill/upload/utils/getFileType/getFileType.js

@@ -1 +1 @@
-export const getFileType=(a,b)=>{if(!a&&!b)return"";if(a&&a.type&&""!==a.type)return a.type??"";if(b){const a=b.match(/^data:([a-z]+\/[a-z]+);/);if(a&&a[1])return a[1]??""}return""};
+export var getFileType=function(a,b){if(!a&&!b)return"";if(a&&a.type&&""!==a.type){var c;return null!==(c=a.type)&&void 0!==c?c:""}if(b){var d=b.match(/^data:([a-z]+\/[a-z]+);/);if(d&&d[1]){var e;return null!==(e=d[1])&&void 0!==e?e:""}}return""};

package/build/es/no-polyfill/upload/utils/getSupportedSpotMimeTypes/getSupportedSpotMimeTypes.js

@@ -1,2 +1,2 @@
 // Spot Platform's Media API only support these MIME types
-const SUPPORTED_MIME_TYPES=["image/jpeg","video/*","application/pdf"];export const getSupportedSpotMimeTypes=a=>{if("*"===a)return SUPPORTED_MIME_TYPES;const b=a.split(","),c={"image/*":"image/jpeg","application/*":"application/pdf"},d=b.map(a=>c[a]||a);return d.filter(a=>SUPPORTED_MIME_TYPES.includes(a))};
+var SUPPORTED_MIME_TYPES=["image/jpeg","video/*","application/pdf"];export var getSupportedSpotMimeTypes=function(a){if("*"===a)return SUPPORTED_MIME_TYPES;var b=a.split(","),c={"image/*":"image/jpeg","application/*":"application/pdf"},d=b.map(function(a){return c[a]||a});return d.filter(function(a){return SUPPORTED_MIME_TYPES.includes(a)})};

package/build/es/no-polyfill/upload/utils/isSizeValid/isSizeValid.js

@@ -1 +1 @@
-export const isSizeValid=(a,b)=>Number.isInteger(b)&&a.size<=b;
+export var isSizeValid=function(a,b){return Number.isInteger(b)&&a.size<=b};

package/build/es/no-polyfill/upload/utils/isTypeValid/isTypeValid.js

@@ -1 +1 @@
-import{getFileType}from"../getFileType";export const isTypeValid=(a,b,c)=>{if(!a||!b)return!1;const d=b.replace(/\s/g,"").split(","),e=getFileType(a,c);return!!("*"===b||d.includes(e))||d.some(a=>{const b=a.split("/"),c=b[0],d=b[1];return!("*"!==d)&&e.includes(c)})};
+import{getFileType}from"../getFileType";export var isTypeValid=function(a,b,c){if(!a||!b)return!1;var d=b.replace(/\s/g,"").split(","),e=getFileType(a,c);return!!("*"===b||d.includes(e))||d.some(function(a){var b=a.split("/"),c=b[0],d=b[1];return!("*"!==d)&&e.includes(c)})};

package/build/es/no-polyfill/upload/utils/postData/postData.js

@@ -1 +1 @@
-export const postData=function(a){let b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:fetch;return c(`${a.url}`,{method:"POST",body:b,...a}).then(a=>{if(!a.ok){const b=new Error(a.statusText);throw b.status=a.status,b.response=a,b}return a}).catch(a=>{throw a})};
+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}export var postData=function(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:fetch;return c("".concat(a.url),_objectSpread({method:"POST",body:b},a)).then(function(a){if(!a.ok){var b=new Error(a.statusText);throw b.status=a.status,b.response=a,b}return a}).catch(function(a){throw a})};

package/build/es/no-polyfill/upload/utils/requestMedia/requestMedia.js

@@ -1 +1 @@
-export const requestMedia=a=>new Promise((b,c)=>{("undefined"==typeof window||"undefined"==typeof window.microapps)&&c(`microapps must be available in window to use Spot Platform's Media API`),window.microapps.requestMedia(a).then(a=>{const c=base64ToByteArray(a.bytes),d=new Blob([c],{type:a.mimeType});b(d)}).catch(a=>c(a))});const base64ToByteArray=a=>{const b=atob(a),c=b.length,d=Array(c);for(let e=0;e<c;e+=1)d[e]=b.charCodeAt(e);return new Uint8Array(d)};
+export var requestMedia=function(a){return new Promise(function(b,c){("undefined"==typeof window||"undefined"==typeof window.microapps)&&c("microapps must be available in window to use Spot Platform's Media API"),window.microapps.requestMedia(a).then(function(a){var c=base64ToByteArray(a.bytes),d=new Blob([c],{type:a.mimeType});b(d)}).catch(function(a){return c(a)})})};var base64ToByteArray=function(a){for(var b=atob(a),c=b.length,d=Array(c),e=0;e<c;e+=1)d[e]=b.charCodeAt(e);return new Uint8Array(d)};

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

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

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

@@ -1 +1 @@
-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";const spiedDateObject=jest.spyOn(global,"Date");describe("UploadInput",()=>{const 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(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:d;return render(/*#__PURE__*/_jsx(UploadInput,{...a}))};beforeEach(()=>{spiedDateObject.mockImplementation(()=>({getTime:jest.fn().mockReturnValue(Math.random())}))}),afterAll(()=>{spiedDateObject.mockRestore()}),describe("single file upload",()=>{it("should trigger onUploadFiles & onFilesChange with a single FormData entry containing `file` field",async()=>{spiedDateObject.mockImplementation(()=>({getTime:jest.fn().mockReturnValueOnce("11111111").mockReturnValueOnce("22222222")}));const c=jest.fn();e({...d,onFilesChange:c});const f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);userEvent.upload(f,[a,b]),await waitFor(()=>{expect(d.onUploadFile).toHaveBeenCalledTimes(1)}),expect(c).toHaveBeenCalledTimes(2),expect(c).toHaveBeenNthCalledWith(1,[{filename:"foo.png",id:`foo.png_3_${"11111111"}`,status:"pending",url:void 0}]),expect(c).toHaveBeenNthCalledWith(2,[{filename:"foo.png",id:2,status:"succeeded",url:void 0}])}),it("should render only one file even if multiple ones were supplied",()=>{e({...d,files:c}),expect(screen.getByText(c[0].filename)).toBeInTheDocument(),c.slice(1,c.length).forEach(a=>{expect(screen.queryByText(a.filename)).not.toBeInTheDocument()})})}),describe("multiple file upload",()=>{it("should render all files",()=>{e({...d,files:c,multiple:!0}),c.forEach(a=>{expect(screen.getByText(a.filename)).toBeInTheDocument()})}),it("should render the UploadButton also",()=>{e({...d,files:c,multiple:!0}),expect(screen.getByText("Upload files")).toBeInTheDocument()}),it("should trigger onUploadFile with multiple FormData entries containing `file` fields",async()=>{e({...d,multiple:!0}),d.onUploadFile.mockClear(),expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute("multiple");const c=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);userEvent.upload(c,[a,b]),await waitFor(()=>{expect(d.onUploadFile).toHaveBeenCalledTimes(2)})})}),describe("file deletion",()=>{const a=jest.fn();beforeEach(()=>{a.mockClear()}),it("should delete file with modal confirmation",async()=>{e({...d,files:c,multiple:!0,onFilesChange:a});const b=screen.getAllByTestId(UPLOAD_ITEM_TEST_IDS.uploadItem)[0];within(b).getByLabelText("Remove file",{exact:!1}).click(),screen.getByText("Remove").click(),await waitForElementToBeRemoved(b),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"}])}),it("should delete file with failed state without modal confirmation",()=>{const b=[{id:1,filename:"purchase-receipt.pdf",status:Status.FAILED}];e({...d,files:b,multiple:!0,onFilesChange:a});const 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",()=>{e({...d,files:c,multiple:!0,onDeleteFile:void 0}),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("Max File Upload limit",()=>{it("should show max file number in the description next to the upload button",async()=>{e({...d,multiple:!0,maxFiles:2}),await waitFor(()=>{expect(screen.getByText(/Maximum 2 files\./)).toBeInTheDocument()})}),it("should show given error when maxFiles limit is applied and more files are uploaded",async()=>{const c=jest.fn();e({...d,multiple:!0,maxFiles:3,maxFilesErrorMessage:"Maximum files message from prop",onUploadFile:c}),c.mockImplementation(a=>{const b=a.get("file");return Promise.resolve({file:b,id:Math.random()})});const f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);userEvent.upload(f,[a,b]);const g=new File(["foo2"],"foo2.png",{type:"image/png"}),h=new File(["foo2"],"foo2.jpg",{type:"image/jpeg"});userEvent.upload(f,[g,h]),await waitFor(()=>{expect(screen.getByText("Maximum files message from prop")).toBeInTheDocument()})}),it("should show default error when maxFiles limit exceeds and no error message provided",async()=>{const c=jest.fn();e({...d,multiple:!0,maxFiles:2,onUploadFile:c}),c.mockImplementation(a=>{const b=a.get("file");return Promise.resolve({file:b,id:Math.random()})});const f=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),g=new File(["foo2"],"foo2.png",{type:"image/png"});userEvent.upload(f,[a,b,g]),await waitFor(()=>{expect(screen.getByText("Sorry, this upload failed because we can only accept 2 files at once.")).toBeInTheDocument()})})}),describe("Misc",()=>{it("should attach the input id accepted from props to the input components",()=>{const a="LabelText";render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("label",{htmlFor:"testInputId",children:a}),/*#__PURE__*/_jsx(UploadInput,{...d,id:"testInputId"})]})),expect(screen.getByLabelText(a)).toHaveAttribute("id","testInputId")}),it("should show the file size error when provided in props",async()=>{const a="file oversized";e({...d,sizeLimit:1,sizeLimitErrorMessage:a});const b=screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput),c=new File([""],"testFile.png",{type:"image/png"});Object.defineProperty(c,"size",{value:2048}),userEvent.upload(b,[c]),await waitFor(()=>{expect(screen.getByText(a)).toBeInTheDocument()})})})});
+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{action}from"@storybook/addon-actions";import{Status}from"../common";import UploadInput from"./UploadInput";import{jsx as _jsx}from"react/jsx-runtime";const meta={title:"Forms/UploadInput",component:UploadInput,tags:["autodocs"]};export default meta;const 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(){let{successful:a=!0,delaySeconds:b=3,response:c={id:Math.round(1e4*Math.random()),url:"#"}}=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return new Promise((d,e)=>{setTimeout(()=>a?d(c):e(new Error("Unexpected error")),1e3*b)})},props={onUploadFile:()=>createDelayedPromise(),onDeleteFile:()=>createDelayedPromise()},Template=a=>/*#__PURE__*/_jsx(UploadInput,{...a});export const SingleFile=Template.bind({});SingleFile.args={...props};export const MultipleFiles=Template.bind({});MultipleFiles.args={...props,multiple:!0};export const UploadInputWithDescriptionFromProps=Template.bind({});UploadInputWithDescriptionFromProps.args={...props,multiple:!0,description:"Custom file description from prop"};export const Disabled=Template.bind({});Disabled.args={...props,disabled:!0};export const WithAnyFileType=Template.bind({});WithAnyFileType.args={...props,fileTypes:"*"};export const WithSingleFileType=Template.bind({});WithSingleFileType.args={...props,fileTypes:".zip,application/zip"};export const WithMultipleExistingFiles=Template.bind({});WithMultipleExistingFiles.args={...props,files,multiple:!0};export const WithoutDelete=Template.bind({});WithoutDelete.args={...props,files,onDeleteFile:void 0,multiple:!0};export const WithUploadFailed=Template.bind({});WithUploadFailed.args={...props,files:files.slice(0),onUploadFile:()=>createDelayedPromise({successful:!1}),multiple:!0};export const WithDeleteFailed=Template.bind({});WithDeleteFailed.args={...props,files:files.slice(0),onDeleteFile:()=>createDelayedPromise({successful:!1}),multiple:!0};export const CustomConfirmMessage=Template.bind({});CustomConfirmMessage.args={...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 const withManualDownloadHandler=Template.bind({});withManualDownloadHandler.args={...props,files,onDownload:action("Manual download handler")};export const withFilesChangeHandler=Template.bind({});withFilesChangeHandler.args={...props,files,onFilesChange:action("Files change handler")};export const withMaxFilesToUploadLimit=Template.bind({});withMaxFilesToUploadLimit.args={...props,multiple:!0,maxFiles:5,maxFilesErrorMessage:"Can't upload as maximum number of files allowed are already uploaded"};export const withFileSizeErrorMessage=Template.bind({});withFileSizeErrorMessage.args={...props,sizeLimit:1,sizeLimitErrorMessage:"The file is oversized"};export const withCustomUploadButtonTitle=Template.bind({});withCustomUploadButtonTitle.args={...props,uploadButtonTitle:"Upload the VAT receipts for FY 2022-23"};
+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";var meta={title:"Forms/UploadInput",component:UploadInput,tags:["autodocs"]};export default meta;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{PlusCircle as PlusIcon,Upload as UploadIcon}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import Body from"../../body";import{Typography}from"../../common";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 let TEST_IDS=/*#__PURE__*/function(a){return a.uploadInput="uploadInput",a.mediaBody="mediaBody",a}({});const onDragOver=a=>{a.preventDefault()},DEFAULT_FILE_INPUT_ID="np-upload-button",UploadButton=a=>{function b(){if(e)return e;const a=u(),b="*"===a?o(MESSAGES.allFileTypes):a;return o(MESSAGES.instructions,{fileTypes:b,size:Math.round(k/1e3)})}let{disabled:c,multiple:d,description:e,fileTypes:j=imageFileTypes,sizeLimit:k=DEFAULT_SIZE_LIMIT,maxFiles:f,onChange:g,id:l=DEFAULT_FILE_INPUT_ID,uploadButtonTitle:h,multipleFileInputWithFilesAdded:i}=a;const{isModern:m}=useTheme(),{isRTL:n}=useDirection(),{formatMessage:o}=useIntl(),p=useRef(null),[q,r]=useState(!1),s=useRef(0),t=()=>{s.current=0,r(!1)},u=()=>"*"===j?j:Array.isArray(j)?getAllowedFileTypes(j).join(", "):getAllowedFileTypes([j]).join(", ");return/*#__PURE__*/_jsxs("div",{className:classNames("np-upload-button-container","droppable",{"droppable-dropping":q}),...(!c&&{onDragEnter:a=>{a.preventDefault(),s.current+=1,1===s.current&&r(!0)},onDragLeave:a=>{a.preventDefault(),s.current-=1,0===s.current&&r(!1)},onDrop:a=>{a.preventDefault(),t(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&g(a.dataTransfer.files)},onDragOver}),children:[/*#__PURE__*/_jsx("input",{ref:p,id:l,type:"file",...function(){const a="*"===u();return a?null:Array.isArray(j)?{accept:j.join(",")}:{accept:j}}(),...(d&&{multiple:!0}),className:"tw-droppable-input",disabled:c,name:"file-upload","data-testid":TEST_IDS.uploadInput,onChange:a=>{const{files:b}=a.target;b&&(g(b),p.current&&(p.current.value=""))}}),/*#__PURE__*/_jsx("label",{htmlFor:l,className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c,"np-upload-input--square-top":i}),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(Body,{type:Typography.BODY_LARGE_BOLD,className:"d-block",children:function(){return h?h:o(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}()}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs(Body,{className:classNames({"text-primary":!c,small:!m,"font-weight-normal":!m}),children:[b(),f&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),`Maximum ${f} files.`]})]})})}()]})]})}),q&&/*#__PURE__*/_jsxs("div",{className:classNames("droppable-card","droppable-dropping-card","droppable-card-content",{"np-upload-input--square-top":i}),children:[/*#__PURE__*/_jsx(PlusIcon,{className:"m-x-1",size:24}),/*#__PURE__*/_jsx("div",{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{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useRef,useState}from"react";import{useIntl}from"react-intl";import Body from"../../body";import{Typography}from"../../common";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=/*#__PURE__*/function(a){return a.uploadInput="uploadInput",a.mediaBody="mediaBody",a}({});var onDragOver=function(a){a.preventDefault()},DEFAULT_FILE_INPUT_ID="np-upload-button",UploadButton=function(a){function b(){if(e)return e;var a=C(),b="*"===a?u(MESSAGES.allFileTypes):a;return u(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=a.multipleFileInputWithFilesAdded,p=useTheme(),q=p.isModern,r=useDirection(),s=r.isRTL,t=useIntl(),u=t.formatMessage,v=useRef(null),w=useState(!1),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useRef(0),B=function(){A.current=0,z(!1)},C=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":y})},!c&&{onDragEnter:function onDragEnter(a){a.preventDefault(),A.current+=1,1===A.current&&z(!0)},onDragLeave:function onDragLeave(a){a.preventDefault(),A.current-=1,0===A.current&&z(!1)},onDrop:function onDrop(a){a.preventDefault(),B(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&k(a.dataTransfer.files)},onDragOver:onDragOver}),{},{children:[/*#__PURE__*/_jsx("input",_objectSpread(_objectSpread(_objectSpread({ref:v,id:m,type:"file"},function(){var a="*"===C();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),v.current&&(v.current.value=""))}})),/*#__PURE__*/_jsx("label",{htmlFor:m,className:classNames("btn","np-upload-accent","np-upload-button",{disabled:c,"np-upload-input--square-top":o}),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(Body,{type:Typography.BODY_LARGE_BOLD,className:"d-block",children:function(){return n?n:u(d?MESSAGES.uploadFiles:MESSAGES.uploadFile)}()}),function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs(Body,{className:classNames({"text-primary":!c,small:!q,"font-weight-normal":!q}),children:[b(),j&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("br",{}),"Maximum ".concat(j," files.")]})]})})}()]})]})}),y&&/*#__PURE__*/_jsxs("div",{className:classNames("droppable-card","droppable-dropping-card","droppable-card-content",{"np-upload-input--square-top":o}),children:[/*#__PURE__*/_jsx(PlusIcon,{className:"m-x-1",size:24}),/*#__PURE__*/_jsx("div",{children:u(MESSAGES.dropFile)})]})]}))};export default UploadButton;

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

@@ -1,3 +1,3 @@
-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",()=>{const a=new File(["foo"],"foo.png",{type:"image/png"}),b=new File(["foo"],"foo.jpg",{type:"image/jpg"}),c={onChange:jest.fn(),multipleFileInputWithFilesAdded:!0},d=function(){let a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:c;return render(/*#__PURE__*/_jsx(UploadButton,{...a}))};describe("single file upload",()=>{beforeEach(()=>{d()}),it("should render the file input form",()=>{expect(screen.getByText("Upload file")).toBeInTheDocument()}),it("should render the file input button with title, if provided",()=>{d({...c,uploadButtonTitle:"Upload your id"}),expect(screen.getByText("Upload your id")).toBeInTheDocument()}),it("should set accept to imageTypes",()=>{expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("accept",imageFileTypes.join(","))}),it("trigger onChange callback with a FileList",()=>{const 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",()=>{beforeEach(()=>{c.onChange.mockClear(),d({...c,multiple:!0})}),it("should disable the file input",()=>{expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute("multiple")}),it("trigger onChange callback with a FileList",()=>{const 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",()=>{beforeEach(()=>{d({...c,disabled:!0})}),it("should disable the file input",()=>{expect(screen.getByTestId(TEST_IDS.uploadInput)).toBeDisabled()})}),describe("accept all file types",()=>{beforeEach(()=>{d({...c,fileTypes:["*"]})}),it("should not add accept attribute to file input",()=>{expect(screen.getByTestId(TEST_IDS.uploadInput)).not.toHaveAttribute("accept")})}),describe("description for the button",()=>{it("should show default description based on the default file types provided",()=>{d({...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",()=>{d({...c,fileTypes:["*"]}),expect(screen.getByText("All file types, less than 5MB")).toBeInTheDocument()}),it("should show custom description if provided",()=>{d({...c,fileTypes:["*"],description:"Test description"}),expect(screen.getByText("Test description")).toBeInTheDocument()}),it("should show maxFiles next to the description, if provided",()=>{d({...c,fileTypes:["*"],maxFiles:5}),expect(screen.getByText(/Maximum 5 files\./)).toBeInTheDocument()})})});
+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(),multipleFileInputWithFilesAdded:!0},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/no-polyfill/uploadInput/uploadButton/defaults.js

@@ -1 +1 @@
-import{FileType}from"../../common";export const DEFAULT_SIZE_LIMIT=5e3;export const imageFileTypes=[FileType.PDF,FileType.JPG,FileType.PNG];
+import{FileType}from"../../common";export var DEFAULT_SIZE_LIMIT=5e3;export var imageFileTypes=[FileType.PDF,FileType.JPG,FileType.PNG];

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

@@ -1,3 +1,3 @@
-const getAllowedFileTypes=a=>a.map(a=>a.split(",").filter(a=>!a.includes("/"))// Filter out mime types
-.map(a=>a.replace(".","").toUpperCase())// Remove dot and convert extensions to uppercase to be displayed in the instructions
-.join(", "));export default getAllowedFileTypes;
+var getAllowedFileTypes=function(a){return a.map(function(a){return a.split(",").filter(function(a){return!a.includes("/")})// Filter out mime types
+.map(function(a){return a.replace(".","").toUpperCase()})// Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(", ")})};export default getAllowedFileTypes;

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

@@ -1 +1 @@
-import{FileType}from"../../common";import getAllowedFileTypes from"./getAllowedFileTypes";describe("getAllowedFileTypes",()=>{let a;describe("using predefined FileTypes",()=>{beforeAll(()=>{a=getAllowedFileTypes([FileType.PNG,FileType.JPG])}),it("parses allowed file extensions from FileType[] array",()=>{expect(a).toStrictEqual(["PNG","JPG, JPEG"])})}),describe("using custom file extensions and mime types",()=>{beforeAll(()=>{a=getAllowedFileTypes([".xls,.xlm,application/vnd.ms-excel",".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document",".doc,application/msword"])}),it("parses allowed file extensions from FileType[] array",()=>{expect(a).toStrictEqual(["XLS, XLM","DOCX","DOC"])})}),describe("when all file types are allowed",()=>{beforeAll(()=>{a=getAllowedFileTypes(["*"])}),it("should return the wildcard character",()=>{expect(a).toStrictEqual(["*"])})})});
+import{FileType}from"../../common";import getAllowedFileTypes from"./getAllowedFileTypes";describe("getAllowedFileTypes",function(){var a;describe("using predefined FileTypes",function(){beforeAll(function(){a=getAllowedFileTypes([FileType.PNG,FileType.JPG])}),it("parses allowed file extensions from FileType[] array",function(){expect(a).toStrictEqual(["PNG","JPG, JPEG"])})}),describe("using custom file extensions and mime types",function(){beforeAll(function(){a=getAllowedFileTypes([".xls,.xlm,application/vnd.ms-excel",".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document",".doc,application/msword"])}),it("parses allowed file extensions from FileType[] array",function(){expect(a).toStrictEqual(["XLS, XLM","DOCX","DOC"])})}),describe("when all file types are allowed",function(){beforeAll(function(){a=getAllowedFileTypes(["*"])}),it("should return the wildcard character",function(){expect(a).toStrictEqual(["*"])})})});

package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.js

@@ -1,2 +1,2 @@
-import{AlertCircle,CrossCircleFill}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useIntl}from"react-intl";import Body from"../../body";import{Size,Status,Typography,Sentiment}from"../../common";import ProcessIndicator from"../../processIndicator/ProcessIndicator";import StatusIcon from"../../statusIcon/StatusIcon";import MESSAGES from"./UploadItem.messages";import{UploadItemBody}from"./UploadItemBody";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export let TEST_IDS=/*#__PURE__*/function(a){return a.uploadItem="uploadItem",a.mediaBody="mediaBody",a}({});const UploadItem=a=>{let{file:b,canDelete:c,onDelete:d,onDownload:e,singleFileUpload:f}=a;const{formatMessage:g}=useIntl(),{status:h,filename:i,error:j,url:k}=b,{isModern:l}=useTheme(),m=[Status.SUCCEEDED,void 0].includes(h)&&!!k,n=()=>"object"==typeof j&&j.message||j||g(MESSAGES.uploadingFailed);return/*#__PURE__*/_jsx("div",{className:classNames("np-upload-item",{"np-upload-item__link":m}),"data-testid":TEST_IDS.uploadItem,children:/*#__PURE__*/_jsxs("div",{className:"np-upload-item__body",children:[/*#__PURE__*/_jsx(UploadItemBody,{url:m?k:void 0,singleFileUpload:f,onDownload:a=>{e&&(a.preventDefault(),e(b))},children:/*#__PURE__*/_jsx("div",{className:"np-upload-button",children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:(()=>{if(j||h===Status.FAILED)return l?/*#__PURE__*/_jsx(StatusIcon,{size:Size.SMALL,sentiment:Sentiment.NEGATIVE}):/*#__PURE__*/_jsx(AlertCircle,{size:24,className:"text-negative"});let a;switch(h){case Status.PROCESSING:case Status.PENDING:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.PROCESSING});break;case Status.SUCCEEDED:case Status.DONE:default:a=l?/*#__PURE__*/_jsx(StatusIcon,{size:Size.SMALL,sentiment:Sentiment.POSITIVE}):/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.SUCCEEDED});}return l?a:/*#__PURE__*/_jsx("span",{style:{transform:"scale(0.8335)"},children:a});// Scale down ProcessIndicator to be 20px*20px to match `icons`
-})()}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx(Body,{className:"text-word-break d-block text-primary",children:(()=>i||g(MESSAGES.uploadedFile))()}),(()=>{if(j||h===Status.FAILED)return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,className:"text-negative",children:n()});switch(h){case Status.PENDING:return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,children:g(MESSAGES.uploading)});case Status.PROCESSING:return/*#__PURE__*/_jsx(Body,{children:g(MESSAGES.deleting)});case Status.SUCCEEDED:case Status.DONE:default:return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,className:"text-positive",children:g(MESSAGES.uploaded)});}})()]})]})})}),c&&/*#__PURE__*/_jsx("button",{"aria-label":g(MESSAGES.removeFile,{filename:i}),className:classNames("btn","np-upload-item__remove-button","media-left",{"np-upload-item--single-file":f}),type:"button",onClick:()=>d(),children:/*#__PURE__*/_jsx(CrossCircleFill,{size:16})})]})})};export default UploadItem;
+import _typeof from"@babel/runtime/helpers/typeof";import{AlertCircle,CrossCircleFill}from"@transferwise/icons";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useIntl}from"react-intl";import Body from"../../body";import{Size,Status,Typography,Sentiment}from"../../common";import ProcessIndicator from"../../processIndicator/ProcessIndicator";import StatusIcon from"../../statusIcon/StatusIcon";import MESSAGES from"./UploadItem.messages";import{UploadItemBody}from"./UploadItemBody";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var TEST_IDS=/*#__PURE__*/function(a){return a.uploadItem="uploadItem",a.mediaBody="mediaBody",a}({});var UploadItem=function(a){var b=a.file,c=a.canDelete,d=a.onDelete,e=a.onDownload,f=a.singleFileUpload,g=useIntl(),h=g.formatMessage,i=b.status,j=b.filename,k=b.error,l=b.url,m=useTheme(),n=m.isModern,o=[Status.SUCCEEDED,void 0].includes(i)&&!!l,p=function(){return"object"===_typeof(k)&&k.message||k||h(MESSAGES.uploadingFailed)};return/*#__PURE__*/_jsx("div",{className:classNames("np-upload-item",{"np-upload-item__link":o}),"data-testid":TEST_IDS.uploadItem,children:/*#__PURE__*/_jsxs("div",{className:"np-upload-item__body",children:[/*#__PURE__*/_jsx(UploadItemBody,{url:o?l:void 0,singleFileUpload:f,onDownload:function onDownloadFile(a){e&&(a.preventDefault(),e(b))},children:/*#__PURE__*/_jsx("div",{className:"np-upload-button",children:/*#__PURE__*/_jsxs("div",{className:"media",children:[/*#__PURE__*/_jsx("div",{className:"np-upload-icon media-left",children:function getIcon(){if(k||i===Status.FAILED)return n?/*#__PURE__*/_jsx(StatusIcon,{size:Size.SMALL,sentiment:Sentiment.NEGATIVE}):/*#__PURE__*/_jsx(AlertCircle,{size:24,className:"text-negative"});var a;switch(i){case Status.PROCESSING:case Status.PENDING:a=/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.PROCESSING});break;case Status.SUCCEEDED:case Status.DONE:default:a=n?/*#__PURE__*/_jsx(StatusIcon,{size:Size.SMALL,sentiment:Sentiment.POSITIVE}):/*#__PURE__*/_jsx(ProcessIndicator,{size:Size.EXTRA_SMALL,status:Status.SUCCEEDED});}return n?a:/*#__PURE__*/_jsx("span",{style:{transform:"scale(0.8335)"},children:a});// Scale down ProcessIndicator to be 20px*20px to match `icons`
+}()}),/*#__PURE__*/_jsxs("div",{className:"media-body text-xs-left","data-testid":TEST_IDS.mediaBody,children:[/*#__PURE__*/_jsx(Body,{className:"text-word-break d-block text-primary",children:function getTitle(){return j||h(MESSAGES.uploadedFile)}()}),function getDescription(){if(k||i===Status.FAILED)return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,className:"text-negative",children:p()});switch(i){case Status.PENDING:return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,children:h(MESSAGES.uploading)});case Status.PROCESSING:return/*#__PURE__*/_jsx(Body,{children:h(MESSAGES.deleting)});case Status.SUCCEEDED:case Status.DONE:default:return/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,className:"text-positive",children:h(MESSAGES.uploaded)});}}()]})]})})}),c&&/*#__PURE__*/_jsx("button",{"aria-label":h(MESSAGES.removeFile,{filename:j}),className:classNames("btn","np-upload-item__remove-button","media-left",{"np-upload-item--single-file":f}),type:"button",onClick:function onClick(){return d()},children:/*#__PURE__*/_jsx(CrossCircleFill,{size:16})})]})})};export default UploadItem;

package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.spec.js

@@ -1 +1 @@
-import userEvent from"@testing-library/user-event";import{Status}from"../../common";import{render,screen}from"../../test-utils";import UploadItem from"./UploadItem";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadItem",()=>{const a={file:{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED,url:"https://wise.com"},canDelete:!0,onDelete:jest.fn(),singleFileUpload:!0},b=function(){let b=0<arguments.length&&arguments[0]!==void 0?arguments[0]:a;return render(/*#__PURE__*/_jsx(UploadItem,{...b}))};describe("filename",()=>{it("should display the filename",()=>{b(),expect(screen.getByText(a.file.filename)).toBeInTheDocument()}),it("should display the default filename when it is missing",()=>{b({...a,file:{...a.file,filename:void 0}}),expect(screen.getByText("Uploaded file")).toBeInTheDocument()})}),describe("description",()=>{it("should display the default uploading copy while file upload is in progress",()=>{b({...a,file:{...a.file,status:Status.PENDING}}),expect(screen.getByText("Uploading...")).toBeInTheDocument()}),it("should display the default deleting copy while file deletion is in progress",()=>{b({...a,file:{...a.file,status:Status.PROCESSING}}),expect(screen.getByText("Deleting...")).toBeInTheDocument()}),it("should display the default success copy when file upload is complete",()=>{b({...a,file:{...a.file,status:Status.SUCCEEDED}}),expect(screen.getByText("Uploaded")).toBeInTheDocument()})}),describe("failed uploads",()=>{it("should display the error.message from an API response",()=>{b({...a,file:{...a.file,status:Status.FAILED,error:{message:"An API error object with message field"}}}),expect(screen.getByText("An API error object with message field")).toBeInTheDocument()}),it("should display the error if it is supplied as a string",()=>{b({...a,file:{...a.file,status:Status.FAILED,error:"An API error string"}}),expect(screen.getByText("An API error string")).toBeInTheDocument()}),it("should display default error message when error is missing but status is FAILED",()=>{b({...a,file:{...a.file,status:Status.FAILED}}),expect(screen.getByText("Uploading failed")).toBeInTheDocument()}),it("should display the error even if status is missing",()=>{b({...a,file:{...a.file,error:"An API error string without status"}}),expect(screen.getByText("An API error string without status")).toBeInTheDocument()})}),describe("file deletion",()=>{it("should render the remove file button when deleteFile prop is supplied",()=>{b(),expect(screen.getByLabelText("Remove file ",{exact:!1})).toBeInTheDocument()}),it("should not render the remove file button when canDelete prop is false",()=>{b({...a,canDelete:!1}),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("manual file download handler",()=>{it("calls onDownload handler provided through props",()=>{const c=jest.fn();b({...a,onDownload:c}),userEvent.click(screen.getAllByRole("link")[0]),expect(c).toHaveBeenCalledTimes(1),expect(c).toHaveBeenCalledWith(a.file)})})});
+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 userEvent from"@testing-library/user-event";import{Status}from"../../common";import{render,screen}from"../../test-utils";import UploadItem from"./UploadItem";import{jsx as _jsx}from"react/jsx-runtime";describe("UploadItem",function(){var a={file:{id:1,filename:"purchase-receipt.pdf",status:Status.SUCCEEDED,url:"https://wise.com"},canDelete:!0,onDelete:jest.fn(),singleFileUpload:!0},b=function(){var b=0<arguments.length&&arguments[0]!==void 0?arguments[0]:a;return render(/*#__PURE__*/_jsx(UploadItem,_objectSpread({},b)))};describe("filename",function(){it("should display the filename",function(){b(),expect(screen.getByText(a.file.filename)).toBeInTheDocument()}),it("should display the default filename when it is missing",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{filename:void 0})})),expect(screen.getByText("Uploaded file")).toBeInTheDocument()})}),describe("description",function(){it("should display the default uploading copy while file upload is in progress",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.PENDING})})),expect(screen.getByText("Uploading...")).toBeInTheDocument()}),it("should display the default deleting copy while file deletion is in progress",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.PROCESSING})})),expect(screen.getByText("Deleting...")).toBeInTheDocument()}),it("should display the default success copy when file upload is complete",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.SUCCEEDED})})),expect(screen.getByText("Uploaded")).toBeInTheDocument()})}),describe("failed uploads",function(){it("should display the error.message from an API response",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.FAILED,error:{message:"An API error object with message field"}})})),expect(screen.getByText("An API error object with message field")).toBeInTheDocument()}),it("should display the error if it is supplied as a string",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.FAILED,error:"An API error string"})})),expect(screen.getByText("An API error string")).toBeInTheDocument()}),it("should display default error message when error is missing but status is FAILED",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{status:Status.FAILED})})),expect(screen.getByText("Uploading failed")).toBeInTheDocument()}),it("should display the error even if status is missing",function(){b(_objectSpread(_objectSpread({},a),{},{file:_objectSpread(_objectSpread({},a.file),{},{error:"An API error string without status"})})),expect(screen.getByText("An API error string without status")).toBeInTheDocument()})}),describe("file deletion",function(){it("should render the remove file button when deleteFile prop is supplied",function(){b(),expect(screen.getByLabelText("Remove file ",{exact:!1})).toBeInTheDocument()}),it("should not render the remove file button when canDelete prop is false",function(){b(_objectSpread(_objectSpread({},a),{},{canDelete:!1})),expect(screen.queryByLabelText("Remove file ",{exact:!1})).not.toBeInTheDocument()})}),describe("manual file download handler",function(){it("calls onDownload handler provided through props",function(){var c=jest.fn();b(_objectSpread(_objectSpread({},a),{},{onDownload:c})),userEvent.click(screen.getAllByRole("link")[0]),expect(c).toHaveBeenCalledTimes(1),expect(c).toHaveBeenCalledWith(a.file)})})});

package/build/es/no-polyfill/uploadInput/uploadItem/UploadItemBody.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";export const UploadItemBody=a=>{let{children:b,url:c,onDownload:d,singleFileUpload:e}=a;return c?/*#__PURE__*/_jsx("a",{href:c,target:"_blank",rel:"noopener noreferrer",className:e?"np-upload-item--single-file":"",onClick:d,children:b}):/*#__PURE__*/_jsx("div",{children:b})};
+import{jsx as _jsx}from"react/jsx-runtime";export var UploadItemBody=function(a){var b=a.children,c=a.url,d=a.onDownload,e=a.singleFileUpload;return c?/*#__PURE__*/_jsx("a",{href:c,target:"_blank",rel:"noopener noreferrer",className:e?"np-upload-item--single-file":"",onClick:d,children:b}):/*#__PURE__*/_jsx("div",{children:b})};