@transferwise/components 40.12.4 → 40.12.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [40.12.5](https://github.com/transferwise/neptune-web/compare/@transferwise/components@40.12.4...@transferwise/components@40.12.5) (2022-06-17)
+
+
+### Bug Fixes
+
+* **PhoneNumberInput:** dropdown width ([#1488](https://github.com/transferwise/neptune-web/issues/1488)) ([0cffebc](https://github.com/transferwise/neptune-web/commit/0cffebc6cb32ea1152c83a9920191c69d6fbcce1))
+
+
+
+
+
 ## [40.12.4](https://github.com/transferwise/neptune-web/compare/@transferwise/components@40.12.3...@transferwise/components@40.12.4) (2022-06-17)
 
 

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

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(l,j),suffix:""}}()),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(""),v=_slicedToArray(u,2),w=v[0],x=v[1],y=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),z=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),A=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(w)?z:y,w);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===s)return t(o);var a=o.prefix+o.suffix,c=s.prefix+s.suffix;if(a!==c){var d=isValidPhoneNumber(a)?cleanNumber(a):null;b(d),t(o)}},[b,s,o]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:A,selected:{value:o.prefix,label:o.prefix},placeholder:"Select an option...",searchPlaceholder:c,searchValue:w,required:e,disabled:d,size:f,onChange:function onPrefixChange(a){var b=a.value;x(""),p({prefix:b,suffix:o.suffix})},onSearchChange:function onSearchChange(a){return x(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:o.suffix,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&p({prefix:o.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=A.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&p({prefix:d,suffix:e})}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={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},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(l,j),suffix:""}}()),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(""),v=_slicedToArray(u,2),w=v[0],x=v[1],y=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),z=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),A=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(w)?z:y,w);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===s)return t(o);var a=o.prefix+o.suffix,c=s.prefix+s.suffix;if(a!==c){var d=isValidPhoneNumber(a)?cleanNumber(a):null;b(d),t(o)}},[b,s,o]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:A,selected:{value:o.prefix,label:o.prefix},placeholder:"Select an option...",searchPlaceholder:c,dropdownWidth:Size.SMALL,searchValue:w,required:e,disabled:d,size:f,onChange:function onPrefixChange(a){var b=a.value;x(""),p({prefix:b,suffix:o.suffix})},onSearchChange:function onSearchChange(a){return x(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:o.suffix,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&p({prefix:o.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=A.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&p({prefix:d,suffix:e})}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={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},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;

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

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{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.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(l,j),suffix:""}}()),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(""),v=_slicedToArray(u,2),w=v[0],x=v[1],y=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),z=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),A=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(w)?z:y,w);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===s)return t(o);var a=o.prefix+o.suffix,c=s.prefix+s.suffix;if(a!==c){var d=isValidPhoneNumber(a)?cleanNumber(a):null;b(d),t(o)}},[b,s,o]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:A,selected:{value:o.prefix,label:o.prefix},placeholder:"Select an option...",searchPlaceholder:c,searchValue:w,required:e,disabled:d,size:f,onChange:function onPrefixChange(a){var b=a.value;x(""),p({prefix:b,suffix:o.suffix})},onSearchChange:function onSearchChange(a){return x(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:o.suffix,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&p({prefix:o.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=A.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&p({prefix:d,suffix:e})}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={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},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{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.onChange,c=a.searchPlaceholder,d=a.disabled,e=a.required,f=a.size,g=a.placeholder,h=a.onFocus,i=a.onBlur,j=a.countryCode,k=useIntl(),l=k.locale,m=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(l,j),suffix:""}}()),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useState(null),r=_slicedToArray(q,2),s=r[0],t=r[1],u=useState(""),v=_slicedToArray(u,2),w=v[0],x=v[1],y=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),z=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),A=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(w)?z:y,w);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===s)return t(o);var a=o.prefix+o.suffix,c=s.prefix+s.suffix;if(a!==c){var d=isValidPhoneNumber(a)?cleanNumber(a):null;b(d),t(o)}},[b,s,o]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,{options:A,selected:{value:o.prefix,label:o.prefix},placeholder:"Select an option...",searchPlaceholder:c,dropdownWidth:Size.SMALL,searchValue:w,required:e,disabled:d,size:f,onChange:function onPrefixChange(a){var b=a.value;x(""),p({prefix:b,suffix:o.suffix})},onSearchChange:function onSearchChange(a){return x(a)}})}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx("input",{name:"phoneNumber",inputMode:"numeric",value:o.suffix,type:"text",className:"form-control",disabled:d,required:e,placeholder:g,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&p({prefix:o.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=A.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&p({prefix:d,suffix:e})}},onFocus:h,onBlur:i})})})]})};PhoneNumberInput.propTypes={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},PhoneNumberInput.defaultProps={required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:""};export default PhoneNumberInput;