@transferwise/components 0.0.0-experimental-a4458ac → 0.0.0-experimental-3683cd4

package/build/index.esm.js

@@ -5398,7 +5398,7 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', className),
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames('np-flow-header__left', 'd-flex', 'align-items-center', 'justify-content-between', {
+      className: classNames('np-flow-header__left', {
         'flex__item--8': isVertical
       }),
       children: leftContent
@@ -5711,16 +5711,19 @@ var messages$5 = defineMessages({
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  labels,
+  'aria-label': ariaLabel
 }) => {
-  return /*#__PURE__*/jsx(Body, {
-    type: Typography.BODY_LARGE_BOLD,
-    className: classNames('np-animated-label', className),
+  const numberLabels = labels.length - 1;
+  return /*#__PURE__*/jsx("div", {
+    "aria-label": ariaLabel,
+    className: classNames('np-animated-label', 'np-text-body-large-bold', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
       return /*#__PURE__*/jsx("div", {
-        className: classNames('text-xs-center', {
-          'np-animated-label--in text-ellipsis': index === activeLabel
+        className: classNames('text-xs-left', {
+          'np-animated-label--in': index === activeLabel,
+          'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels
         }),
         children: label
       }, nextLabel);
@@ -5729,24 +5732,18 @@ const AnimatedLabel = ({
 };
 
 const BackButton = ({
+  label,
   className,
-  onClick,
-  'aria-label': ariaLabel
-}) => /*#__PURE__*/jsx(Avatar, {
-  type: AvatarType.ICON,
-  size: 40,
-  children: /*#__PURE__*/jsx("button", {
-    type: "button",
-    "aria-label": ariaLabel,
-    className: classNames('np-back-button', 'btn-unstyled', className),
-    onClick: onClick,
-    children: /*#__PURE__*/jsx(ArrowLeft, {
-      size: 24
-    })
-  })
+  onClick
+}) => /*#__PURE__*/jsxs("button", {
+  type: "button",
+  className: classNames('np-back-button', 'align-items-center', 'btn-unstyled', className),
+  onClick: onClick,
+  children: [/*#__PURE__*/jsx(ArrowLeft, {
+    size: 24
+  }), label]
 });
 BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func
@@ -5779,17 +5776,16 @@ const FlowNavigation = ({
   const newAvatar = done ? null : avatar;
   const getLeftContentSmall = () => {
     const displayGoBack = onGoBack != null && activeStep > 0;
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-        "aria-label": intl.formatMessage(messages$5.back),
+    return /*#__PURE__*/jsx(Fragment, {
+      children: displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
+        label: /*#__PURE__*/jsx(AnimatedLabel, {
+          className: "m-x-1",
+          labels: steps.map(step => step.label),
+          activeLabel: activeStep - 1,
+          "aria-label": intl.formatMessage(messages$5.back)
+        }),
         onClick: onGoBack
-      }) : logo, /*#__PURE__*/jsx(AnimatedLabel, {
-        className: "m-x-1",
-        labels: steps.map(step => step.label),
-        activeLabel: activeStep
-      }), /*#__PURE__*/jsx("span", {
-        className: "m-x-1"
-      })]
+      }) : logo
     });
   };
   return /*#__PURE__*/jsx("div", {
@@ -5798,7 +5794,7 @@ const FlowNavigation = ({
       'np-flow-navigation--border-bottom': !done
     }),
     children: /*#__PURE__*/jsx(FlowHeader, {
-      className: classNames('np-flow-navigation__content', isSmall ? 'p-x-2' : 'p-x-3', {
+      className: classNames('np-flow-navigation__content p-x-3', {
         'np-flow-navigation--hidden': !clientWidth,
         'np-flow-navigation--xs-max': isSmall,
         // Size switches on parent container which may or may not have the same size as the window.
@@ -5808,7 +5804,7 @@ const FlowNavigation = ({
       leftContent: isSmall ? getLeftContentSmall() : logo,
       rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "m-x-1"
+          className: "separator"
         }), closeButton]
       }),
       bottomContent: !done && /*#__PURE__*/jsx(Stepper, {
@@ -6641,13 +6637,6 @@ function inferSearchableStrings(value) {
   }
   return [];
 }
-const SelectInputItemCheckPaddingContext = /*#__PURE__*/createContext(false);
-function useSelectInputItemCheckPadding() {
-  const checkPadding = useContext(SelectInputItemCheckPaddingContext);
-  // Avoid layout shifts during transitions via caching
-  const [initialCheckPadding] = useState(checkPadding);
-  return initialCheckPadding;
-}
 const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
 const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
@@ -6792,54 +6781,51 @@ function SelectInput({
     children: ({
       disabled: uiDisabled,
       value
-    }) => /*#__PURE__*/jsx(SelectInputItemCheckPaddingContext.Provider, {
-      value: Boolean(filterable) || value != null,
-      children: /*#__PURE__*/jsx(OptionsOverlay, {
-        placement: "bottom-start",
-        open: open,
-        renderTrigger: ({
-          ref,
-          getInteractionProps
-        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
-          // eslint-disable-next-line react/jsx-no-constructed-context-values
-          value: {
-            ref: mergeRefs([ref, triggerRef]),
-            ...mergeProps({
-              onClick: () => {
-                setOpen(prev => !prev);
-              }
-            }, getInteractionProps())
-          },
-          children: renderTrigger({
-            content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
-              value: true,
-              children: renderValue(value, true)
-            }) : placeholder,
-            placeholderShown: value == null,
-            clear: onClear != null ? () => {
-              onClear();
-              triggerRef.current?.focus({
-                preventScroll: true
-              });
-            } : undefined,
-            disabled: uiDisabled,
-            size,
-            className
-          })
-        }),
-        initialFocusRef: controllerRef,
-        padding: "none",
-        onClose: () => {
-          setOpen(false);
+    }) => /*#__PURE__*/jsx(OptionsOverlay, {
+      placement: "bottom-start",
+      open: open,
+      renderTrigger: ({
+        ref,
+        getInteractionProps
+      }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value: {
+          ref: mergeRefs([ref, triggerRef]),
+          ...mergeProps({
+            onClick: () => {
+              setOpen(prev => !prev);
+            }
+          }, getInteractionProps())
         },
-        children: /*#__PURE__*/jsx(SelectInputOptions, {
-          items: items,
-          renderValue: renderValue,
-          filterable: filterable,
-          filterPlaceholder: filterPlaceholder,
-          searchInputRef: searchInputRef,
-          listboxRef: listboxRef
+        children: renderTrigger({
+          content: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
+            value: true,
+            children: renderValue(value, true)
+          }) : placeholder,
+          placeholderShown: value == null,
+          clear: onClear != null ? () => {
+            onClear();
+            triggerRef.current?.focus({
+              preventScroll: true
+            });
+          } : undefined,
+          disabled: uiDisabled,
+          size,
+          className
         })
+      }),
+      initialFocusRef: controllerRef,
+      padding: "none",
+      onClose: () => {
+        setOpen(false);
+      },
+      children: /*#__PURE__*/jsx(SelectInputOptions, {
+        items: items,
+        renderValue: renderValue,
+        filterable: filterable,
+        filterPlaceholder: filterPlaceholder,
+        searchInputRef: searchInputRef,
+        listboxRef: listboxRef
       })
     })
   });
@@ -7029,7 +7015,6 @@ function SelectInputGroupItemView({
   needle
 }) {
   const headerId = useId();
-  const checkPadding = useSelectInputItemCheckPadding();
   return (
     /*#__PURE__*/
     // An empty container may be rendered when no options match `needle`
@@ -7038,13 +7023,11 @@ function SelectInputGroupItemView({
       role: "group",
       "aria-labelledby": headerId,
       className: classNames(needle === null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? /*#__PURE__*/jsxs("header", {
+      children: [needle == null ? /*#__PURE__*/jsx("header", {
         id: headerId,
         role: "presentation",
         className: "np-select-input-group-item-header np-text-title-group",
-        children: [checkPadding ? /*#__PURE__*/jsx("span", {
-          className: "np-select-input-option-check-placeholder"
-        }) : null, item.label]
+        children: item.label
       }) : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
       // eslint-disable-next-line react/no-array-index-key
       , {
@@ -7060,7 +7043,6 @@ function SelectInputOption({
   disabled,
   children
 }) {
-  const checkPadding = useSelectInputItemCheckPadding();
   return /*#__PURE__*/jsx(Listbox.Option, {
     as: "div",
     value: value,
@@ -7072,12 +7054,12 @@ function SelectInputOption({
     children: ({
       selected
     }) => /*#__PURE__*/jsxs(Fragment, {
-      children: [checkPadding ? /*#__PURE__*/jsx(Check, {
-        size: 16,
-        className: classNames('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsx("div", {
+      children: [/*#__PURE__*/jsx("div", {
         className: "np-select-input-option",
         children: children
+      }), /*#__PURE__*/jsx(Check, {
+        size: 16,
+        className: classNames('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
       })]
     })
   });
@@ -8494,7 +8476,7 @@ class MoneyInput extends 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,
@@ -8531,7 +8513,7 @@ class MoneyInput extends Component {
     if (this.props.onSearchChange) {
       this.props.onSearchChange({
         searchQuery,
-        filteredOptions: filterOptionsForQuery$1(this.props.currencies, searchQuery)
+        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
       });
     }
   };
@@ -8612,7 +8594,7 @@ class MoneyInput extends Component {
     });
   }
 }
-function filterOptionsForQuery$1(options, query) {
+function filterOptionsForQuery(options, query) {
   if (!query) {
     return options;
   }
@@ -8821,7 +8803,6 @@ const OverlayHeader = ({
   logo
 }) => {
   const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
-    size: Size.LARGE,
     onClick: onClose
   });
   return /*#__PURE__*/jsx("div", {
@@ -8831,7 +8812,7 @@ const OverlayHeader = ({
       leftContent: logo,
       rightContent: /*#__PURE__*/jsxs(Fragment, {
         children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: classNames('m-x-1')
+          className: "separator"
         }), closeButton]
       })
     })
@@ -10201,36 +10182,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 (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]));
 
@@ -10309,17 +10263,15 @@ const PhoneNumberInput = props => {
   };
   const [internalValue, setInternalValue] = useState(getInitialValue());
   const [broadcastedValue, setBroadcastedValue] = useState(null);
-  const [searchQuery, setSearchQuery] = 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) {
@@ -10328,9 +10280,13 @@ const PhoneNumberInput = props => {
         note = isArray(iso2) ? iso2.join(', ') : iso2;
       }
       return {
-        value: phone,
-        label: phone,
-        note
+        type: 'option',
+        value: {
+          value: phone,
+          label: phone,
+          note: note
+        },
+        filterMatchers: [phone, note, name]
       };
     });
   };
@@ -10338,7 +10294,6 @@ const PhoneNumberInput = props => {
   const onPrefixChange = ({
     value
   }) => {
-    setSearchQuery('');
     setInternalValue({
       prefix: value,
       suffix: internalValue.suffix
@@ -10366,7 +10321,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,
@@ -10391,22 +10346,19 @@ const PhoneNumberInput = props => {
     className: "tw-telephone",
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-telephone__country-select",
-      children: /*#__PURE__*/jsx(Select, {
-        id: id ? `${id}-select` : undefined,
-        options: options,
-        selected: {
-          value: internalValue.prefix,
-          label: internalValue.prefix
-        },
+      children: /*#__PURE__*/jsx(SelectInput, {
         placeholder: "Select an option...",
-        searchPlaceholder: searchPlaceholder,
-        dropdownWidth: Size.SMALL,
-        searchValue: searchQuery,
-        required: required,
+        items: options,
+        value: options.find(item => item.value.value === internalValue.prefix)?.value,
+        renderValue: (option, withinTrigger) => /*#__PURE__*/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__*/jsx("div", {