@transferwise/components 45.2.0 → 45.4.0

package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=useIntl(),n=m.locale,o=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(n,k),suffix:""}}()),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useState(null),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(""),x=_slicedToArray(w,2),y=x[0],z=x[1],A=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),B=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),C=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(y)?B:A,y);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===u)return v(q);var a=q.prefix+q.suffix,b=u.prefix+u.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),v(q)}},[c,u,q]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:C,selected:{value:q.prefix,label:q.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:y,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;z(""),r({prefix:b,suffix:q.suffix})},onSearchChange:function onSearchChange(a){return z(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:q.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&r({prefix:q.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=C.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&r({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{}};export default PhoneNumberInput;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix,excludeCountries}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=a.disabledCountries,n=useIntl(),o=n.locale,p=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(o,k),suffix:""}}()),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(""),y=_slicedToArray(x,2),z=y[0],A=y[1],B=excludeCountries(countries,m),C=groupCountriesByPrefix(sortArrayByProperty(B,"iso3")),D=groupCountriesByPrefix(sortArrayByProperty(B,"phone")),E=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(z)?D:C,z);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===v)return w(r);var a=r.prefix+r.suffix,b=v.prefix+v.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),w(r)}},[c,v,r]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:E,selected:{value:r.prefix,label:r.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:z,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;A(""),s({prefix:b,suffix:r.suffix})},onSearchChange:function onSearchChange(a){return A(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:r.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&s({prefix:r.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=E.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&s({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object,/** List of iso3 codes of countries to remove from the list */disabledCountries:PropTypes.arrayOf(PropTypes.string)},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{},disabledCountries:[]};export default PhoneNumberInput;

package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/excludeCountries.js

@@ -0,0 +1,8 @@
+import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.filter.js";// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+var filterCountriesByIso3=function(a,b){var c=new Set(b);return a.filter(function(a){return!c.has(a.iso3)})};/**
+ * Removes the countries sepecified in the second param
+ *
+ * @param {Array} countries: list of country metadata objects
+ * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
+ * @returns
+ */export var excludeCountries=function(a,b){return 0<b.length?filterCountriesByIso3(a,b):a};

package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/index.js

@@ -0,0 +1 @@
+export{excludeCountries}from"./excludeCountries";

package/build/es/polyfill/phoneNumberInput/utils/index.js

@@ -1 +1 @@
-export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";
+export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";export{excludeCountries}from"./excludeCountries";

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

@@ -1,2 +1,2 @@
 import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";// Option.tsx NEW
-import{useTheme}from"@wise/components-theming";import{cloneElement}from"react";import Body from"../../body";import{Typography}from"../../common";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 Option(a){var b=a.label,c=a.currency,d=void 0===c?"":c,e=a.note,f=void 0===e?"":e,g=a.secondary,h=void 0===g?"":g,i=a.icon,j=a.classNames,k=void 0===j?{}:j,l=a.selected,m=void 0!==l&&l,n=useTheme(),o=n.isModern,p=d?function style(a){return a.map(function(a){return k[a]||a}).join(" ")}(["currency-flag","currency-flag-".concat(d.toLowerCase())]):void 0,q=i?/*#__PURE__*/cloneElement(i,{size:24,className:"tw-icon"}):d&&/*#__PURE__*/_jsx("i",{className:p}),r=/*#__PURE__*/_jsxs(Body,{as:"span",type:Typography.BODY_LARGE,className:m?"text-ellipsis":void 0,children:[b,f&&/*#__PURE__*/_jsx(Body,{as:"span",className:o?"m-l-1":"m-l-1 body-2",children:f})]}),s=h&&/*#__PURE__*/_jsx(Body,{className:function secondaryElementClassNames(){var a;return m&&(a="text-ellipsis"),o?a:"".concat(a?a+" ":"","body-2")}(),children:h});return q?/*#__PURE__*/_jsxs("div",{className:"d-flex np-option-content",children:[/*#__PURE__*/_jsx("div",{className:"d-flex flex-column".concat(m?" justify-content-center":""),children:q}),/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column",children:[r,s]})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[q,r,s]})}export default Option;
+import{useTheme}from"@wise/components-theming";import{cloneElement}from"react";import Body from"../../body";import{Typography}from"../../common";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 Option(a){var b=a.label,c=a.currency,d=void 0===c?"":c,e=a.note,f=void 0===e?"":e,g=a.secondary,h=void 0===g?"":g,i=a.icon,j=a.classNames,k=void 0===j?{}:j,l=a.selected,m=void 0!==l&&l,n=useTheme(),o=n.isModern,p=d?function style(a){return a.map(function(a){return k[a]||a}).join(" ")}(["currency-flag","currency-flag-".concat(d.toLowerCase())]):void 0,q=i?/*#__PURE__*/cloneElement(i,{size:24,className:"tw-icon"}):d&&/*#__PURE__*/_jsx("i",{className:p}),r=/*#__PURE__*/_jsxs(Body,{as:"span",type:Typography.BODY_LARGE,className:m?"text-ellipsis":void 0,children:[b,f&&/*#__PURE__*/_jsx(Body,{as:"span",className:o?"m-l-1":"m-l-1 body-2",children:f})]}),s=h&&/*#__PURE__*/_jsx(Body,{className:function secondaryElementClassNames(){var a;return m&&(a="text-ellipsis"),o?a:"".concat(a?a+" ":"","body-2")}(),children:h});return q?/*#__PURE__*/_jsxs("div",{className:"d-flex np-option-content",children:[/*#__PURE__*/_jsx("div",{className:"d-flex flex-column".concat(m?" justify-content-center":""),children:q}),/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column justify-content-center",children:[r,s]})]}):/*#__PURE__*/_jsxs(_Fragment,{children:[q,r,s]})}export default Option;

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

@@ -1 +1 @@
-import{select,text}from"@storybook/addon-knobs";import Button from"../button";import{Position}from"../common";import{within,userEvent,storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/Tooltip"};export var Basic=function(){var a=text("label","Hey edit me!!!!!!"),b=select("position",[Position.BOTTOM,Position.TOP,Position.LEFT,Position.RIGHT],Position.BOTTOM);return/*#__PURE__*/_jsx("div",{className:"text-xs-center",children:/*#__PURE__*/_jsx(Tooltip,{label:a,position:b,children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})})})};Basic.play=hoverOverButton;export var BasicDarkMode=storyConfig(Basic,{darkMode:!0});BasicDarkMode.play=hoverOverButton;function hoverOverButton(a){var b=a.canvasElement,c=within(b);userEvent.hover(c.getByRole("button"))}
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{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"]});