@transferwise/components 0.0.0-experimental-210ef2c → 0.0.0-experimental-6d7ebae

package/build/index.js

@@ -6783,6 +6783,7 @@ function SelectInput({
   value: controlledValue,
   compareValues,
   renderValue = wrapInFragment,
+  renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
@@ -6856,6 +6857,7 @@ function SelectInput({
       children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
         items: items,
         renderValue: renderValue,
+        renderFooter: renderFooter,
         filterable: filterable,
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
@@ -6921,6 +6923,7 @@ const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function Selec
 function SelectInputOptions({
   items,
   renderValue = wrapInFragment,
+  renderFooter,
   filterable = false,
   filterPlaceholder,
   searchInputRef,
@@ -6978,7 +6981,7 @@ function SelectInputOptions({
           setQuery(event.currentTarget.value);
         }
       })
-    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
       ref: listboxContainerRef,
       className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
       children: [empty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -7002,7 +7005,10 @@ function SelectInputOptions({
           renderValue: renderValue,
           needle: needle
         }, index))
-      })]
+      }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
+        className: "np-select-input-footer",
+        children: renderFooter(needle)
+      }) : null]
     })]
   });
 }
@@ -8510,7 +8516,7 @@ class MoneyInput extends React.Component {
     this.amountFocused = true;
   };
   getSelectOptions() {
-    const selectOptions = [...filterOptionsForQuery$1(this.props.currencies, this.state.searchQuery)];
+    const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
     if (this.props.onCustomAction) {
       selectOptions.push({
         value: CUSTOM_ACTION,
@@ -8547,7 +8553,7 @@ class MoneyInput extends React.Component {
     if (this.props.onSearchChange) {
       this.props.onSearchChange({
         searchQuery,
-        filteredOptions: filterOptionsForQuery$1(this.props.currencies, searchQuery)
+        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
       });
     }
   };
@@ -8628,7 +8634,7 @@ class MoneyInput extends React.Component {
     });
   }
 }
-function filterOptionsForQuery$1(options, query) {
+function filterOptionsForQuery(options, query) {
   if (!query) {
     return options;
   }
@@ -10216,36 +10222,9 @@ const explodeNumberModel = number => {
   };
 };
 
-/**
- * Checks if query is contained into object properties.
- *
- * @param {object} option - the select option
- * @param {string} query - the current search query
- * @returns {boolean}
- */
-const isOptionAndFitsQuery = (option, query) => startsWith(option.iso3, query) || startsWith(option.iso2, query) || startsWith(option.name, query) || startsWith(option.phone, query);
-const startsWith = (property, query) => {
-  if (neptuneValidation.isArray(property)) {
-    return property.filter(proper => normalizeValue(proper).indexOf(normalizeValue(query)) === 0).length > 0;
-  }
-  return normalizeValue(property).indexOf(normalizeValue(query)) === 0;
-};
-const normalizeValue = value => value.toLowerCase().replace('+', '');
-
-/**
- * Filters a set of options based on search string
- *
- * @param options
- * @param query
- * @returns {*}
- */
-const filterOptionsForQuery = (options, query) => options.filter(option => isOptionAndFitsQuery(option, query));
-
 const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
 const cleanNumber = number => number.match(DIGITS_MATCH) && number.match(DIGITS_MATCH).join('') || '';
 
-const isStringNumeric = value => /^\+?[\d-\s]+$/.test(value);
-
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
 const sortArrayByProperty = (arrayToSort, property) => [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
 
@@ -10324,17 +10303,15 @@ const PhoneNumberInput = props => {
   };
   const [internalValue, setInternalValue] = React.useState(getInitialValue());
   const [broadcastedValue, setBroadcastedValue] = React.useState(null);
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const countriesList = excludeCountries(countries$1, disabledCountries);
-  const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
-  const listSortedByPhone = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'phone'));
   const getSelectOptions = () => {
-    const filteredOptions = filterOptionsForQuery(isStringNumeric(searchQuery) ? listSortedByPhone : listSortedByISO3, searchQuery);
-    return filteredOptions.map(option => {
+    const countriesList = excludeCountries(countries$1, disabledCountries);
+    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
+    return listSortedByISO3.map(option => {
       const {
         phone,
         iso3,
-        iso2
+        iso2,
+        name
       } = option;
       let note = '';
       if (iso3) {
@@ -10343,9 +10320,13 @@ const PhoneNumberInput = props => {
         note = neptuneValidation.isArray(iso2) ? iso2.join(', ') : iso2;
       }
       return {
-        value: phone,
-        label: phone,
-        note
+        type: 'option',
+        value: {
+          value: phone,
+          label: phone,
+          note: note
+        },
+        filterMatchers: [phone, note, name]
       };
     });
   };
@@ -10353,7 +10334,6 @@ const PhoneNumberInput = props => {
   const onPrefixChange = ({
     value
   }) => {
-    setSearchQuery('');
     setInternalValue({
       prefix: value,
       suffix: internalValue.suffix
@@ -10381,7 +10361,7 @@ const PhoneNumberInput = props => {
     } = explodeNumberModel(pastedValue);
     const selectedPrefix = options.find(({
       value
-    }) => value === pastedPrefix);
+    }) => value.value === pastedPrefix);
     if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
       setInternalValue({
         prefix: pastedPrefix,
@@ -10406,22 +10386,19 @@ const PhoneNumberInput = props => {
     className: "tw-telephone",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "tw-telephone__country-select",
-      children: /*#__PURE__*/jsxRuntime.jsx(Select, {
-        id: id ? `${id}-select` : undefined,
-        options: options,
-        selected: {
-          value: internalValue.prefix,
-          label: internalValue.prefix
-        },
+      children: /*#__PURE__*/jsxRuntime.jsx(SelectInput, {
         placeholder: "Select an option...",
-        searchPlaceholder: searchPlaceholder,
-        dropdownWidth: exports.Size.SMALL,
-        searchValue: searchQuery,
-        required: required,
+        items: options,
+        value: options.find(item => item.value.value === internalValue.prefix)?.value,
+        renderValue: (option, withinTrigger) => /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent, {
+          title: option.label,
+          note: withinTrigger ? undefined : option.note
+        }),
+        filterable: true,
+        filterPlaceholder: searchPlaceholder,
         disabled: disabled,
         size: size,
         onChange: onPrefixChange,
-        onSearchChange: newSearch => setSearchQuery(newSearch),
         ...selectProps
       })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {