@transferwise/components 0.0.0-experimental-7173830 → 0.0.0-experimental-4f82861

package/build/index.js

@@ -12244,10 +12244,8 @@ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDispl
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 class TypeaheadInput extends React.Component {
-  inputRef = null;
-  sizerRef = null;
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH
     };
@@ -12257,7 +12255,7 @@ class TypeaheadInput extends React.Component {
       autoFocus
     } = this.props;
     if (autoFocus) {
-      this.inputRef?.focus();
+      this.inputRef.focus();
     }
   }
   componentDidUpdate(previousProps) {
@@ -12268,19 +12266,19 @@ class TypeaheadInput extends React.Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: this.sizerRef ? Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10) : DEFAULT_INPUT_MIN_WIDTH
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10)
       });
     });
   };
   renderInput = () => {
     const {
       typeaheadId,
-      autoFocus = false,
+      autoFocus,
       multiple,
       name,
-      optionsShown = false,
-      placeholder = '',
-      selected = [],
+      optionsShown,
+      placeholder,
+      selected,
       value,
       onChange,
       onKeyDown,
@@ -12321,18 +12319,18 @@ class TypeaheadInput extends React.Component {
   render() {
     const {
       multiple,
-      selected = [],
+      selected,
       value,
-      maxHeight = null,
+      maxHeight,
       renderChip
     } = this.props;
     return multiple ? /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "form-control typeahead__input-container",
-      style: {
-        maxHeight: maxHeight ?? undefined
+      style: maxHeight && {
+        maxHeight
       },
       onClick: () => {
-        this.inputRef?.focus();
+        this.inputRef.focus();
       },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "typeahead__input-wrapper",
@@ -12349,6 +12347,30 @@ class TypeaheadInput extends React.Component {
     }) : this.renderInput();
   }
 }
+TypeaheadInput.propTypes = {
+  typeaheadId: PropTypes__default.default.string.isRequired,
+  name: PropTypes__default.default.string.isRequired,
+  autoFocus: PropTypes__default.default.bool,
+  multiple: PropTypes__default.default.bool.isRequired,
+  value: PropTypes__default.default.string.isRequired,
+  selected: PropTypes__default.default.arrayOf(PropTypes__default.default.object),
+  placeholder: PropTypes__default.default.string,
+  optionsShown: PropTypes__default.default.bool,
+  maxHeight: PropTypes__default.default.number,
+  autoComplete: PropTypes__default.default.string.isRequired,
+  onChange: PropTypes__default.default.func.isRequired,
+  renderChip: PropTypes__default.default.func.isRequired,
+  onKeyDown: PropTypes__default.default.func.isRequired,
+  onFocus: PropTypes__default.default.func.isRequired,
+  onPaste: PropTypes__default.default.func.isRequired
+};
+TypeaheadInput.defaultProps = {
+  autoFocus: false,
+  maxHeight: null,
+  placeholder: '',
+  optionsShown: false,
+  selected: []
+};
 
 function highlight(value, query) {
   if (value && query) {
@@ -12369,9 +12391,9 @@ function highlight(value, query) {
 const Option = props => {
   const {
     option,
-    selected = false,
-    onClick = () => {},
-    query = ''
+    selected,
+    onClick,
+    query
   } = props;
   const {
     label,
@@ -12401,33 +12423,30 @@ const Option = props => {
     })
   });
 };
+Option.propTypes = {
+  option: PropTypes__default.default.shape({
+    label: PropTypes__default.default.string.isRequired,
+    note: PropTypes__default.default.string,
+    secondary: PropTypes__default.default.string
+  }).isRequired,
+  query: PropTypes__default.default.string,
+  selected: PropTypes__default.default.bool,
+  onClick: PropTypes__default.default.func
+};
+Option.defaultProps = {
+  selected: false,
+  query: '',
+  onClick: () => {}
+};
 var TypeaheadOption = Option;
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
+
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
 class Typeahead extends React.Component {
-  static defaultProps = {
-    addon: null,
-    allowNew: false,
-    autoFillOnBlur: true,
-    autoFocus: false,
-    chipSeparators: [],
-    clearable: true,
-    footer: null,
-    initialValue: [],
-    inputAutoComplete: 'new-password',
-    maxHeight: null,
-    minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
-    multiple: false,
-    searchDelay: SEARCH_DELAY,
-    showSuggestions: true,
-    showNewEntry: true,
-    size: exports.Size.MEDIUM,
-    validateChip: () => true
-  };
   constructor(props) {
     super(props);
     const {
@@ -12444,7 +12463,6 @@ class Typeahead extends React.Component {
       keyboardFocusedOptionIndex: null
     };
   }
-  handleSearchDebounced;
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState(previousState => {
@@ -12458,8 +12476,7 @@ class Typeahead extends React.Component {
           };
         }
         return {
-          query: '',
-          selected: previousState.selected
+          query: ''
         };
       });
     }
@@ -12468,8 +12485,13 @@ class Typeahead extends React.Component {
     this.handleSearchDebounced.cancel();
   }
   handleOnFocus = () => {
+    const {
+      onFocus
+    } = this.props;
     this.showMenu();
-    this.props.onFocus?.();
+    if (onFocus) {
+      this.props.onFocus();
+    }
   };
   onOptionSelected = (event, item) => {
     event.preventDefault();
@@ -12552,7 +12574,7 @@ class Typeahead extends React.Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (keyboardFocusedOptionIndex && options[keyboardFocusedOptionIndex]) {
+          if (options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({
@@ -12604,6 +12626,13 @@ class Typeahead extends React.Component {
       query
     });
   };
+  stopPropagation = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
+  };
   handleSearch = query => {
     const {
       onSearch
@@ -12688,7 +12717,7 @@ class Typeahead extends React.Component {
     }
   };
   renderChip = (option, idx) => {
-    const valid = this.props.validateChip?.(option);
+    const valid = this.props.validateChip(option);
     return /*#__PURE__*/jsxRuntime.jsx(Chip, {
       label: option.label,
       className: classNames__default.default('m-t-1', {
@@ -12766,7 +12795,6 @@ class Typeahead extends React.Component {
     const menu = this.renderMenu({
       footer,
       options,
-      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -12785,7 +12813,7 @@ class Typeahead extends React.Component {
         'typeahead--multiple': multiple,
         open: dropdownOpen
       }),
-      onClick: stopPropagation$1,
+      onClick: this.stopPropagation,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames__default.default('form-group', {
           'has-error': hasError,
@@ -12806,7 +12834,6 @@ class Typeahead extends React.Component {
             placeholder,
             selected,
             maxHeight,
-            id: id,
             name: name,
             value: query,
             typeaheadId: id,
@@ -12833,6 +12860,72 @@ class Typeahead extends React.Component {
     });
   }
 }
+Typeahead.propTypes = {
+  id: PropTypes__default.default.string.isRequired,
+  name: PropTypes__default.default.string.isRequired,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    label: PropTypes__default.default.string.isRequired,
+    note: PropTypes__default.default.string,
+    secondary: PropTypes__default.default.string,
+    value: PropTypes__default.default.object
+  })).isRequired,
+  initialValue: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    label: PropTypes__default.default.string.isRequired,
+    note: PropTypes__default.default.string,
+    secondary: PropTypes__default.default.string
+  })),
+  onChange: PropTypes__default.default.func.isRequired,
+  allowNew: PropTypes__default.default.bool,
+  autoFocus: PropTypes__default.default.bool,
+  clearable: PropTypes__default.default.bool,
+  multiple: PropTypes__default.default.bool,
+  showSuggestions: PropTypes__default.default.bool,
+  showNewEntry: PropTypes__default.default.bool,
+  searchDelay: PropTypes__default.default.number,
+  maxHeight: PropTypes__default.default.number,
+  minQueryLength: PropTypes__default.default.number,
+  addon: PropTypes__default.default.node,
+  placeholder: PropTypes__default.default.string,
+  alert: PropTypes__default.default.shape({
+    message: PropTypes__default.default.string.isRequired,
+    type: PropTypes__default.default.oneOf(['error', 'warning', 'neutral']).isRequired
+  }),
+  footer: PropTypes__default.default.node,
+  validateChip: PropTypes__default.default.func,
+  onSearch: PropTypes__default.default.func,
+  onBlur: PropTypes__default.default.func,
+  onInputChange: PropTypes__default.default.func,
+  onFocus: PropTypes__default.default.func,
+  chipSeparators: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
+  size: PropTypes__default.default.oneOf(['md', 'lg']),
+  inputAutoComplete: PropTypes__default.default.string,
+  autoFillOnBlur: PropTypes__default.default.bool
+};
+Typeahead.defaultProps = {
+  allowNew: false,
+  autoFocus: false,
+  clearable: true,
+  multiple: false,
+  maxHeight: null,
+  showSuggestions: true,
+  showNewEntry: true,
+  searchDelay: SEARCH_DELAY,
+  minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
+  addon: null,
+  placeholder: null,
+  alert: null,
+  footer: null,
+  size: exports.Size.MEDIUM,
+  chipSeparators: [],
+  initialValue: [],
+  onSearch: null,
+  onBlur: null,
+  onInputChange: null,
+  onFocus: null,
+  validateChip: () => true,
+  inputAutoComplete: 'new-password',
+  autoFillOnBlur: true
+};
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 exports.UploadStep = void 0;
@@ -14528,6 +14621,7 @@ var de = {
 	"neptune.Info.ariaLabel": "Weitere Informationen",
 	"neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wähle eine der Möglichkeiten aus...",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
 	"neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
 	"neptune.Summary.statusDone": "Schritt erledigt",
@@ -14585,6 +14679,7 @@ var es = {
 	"neptune.Info.ariaLabel": "Más información",
 	"neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Selecciona una opción...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
 	"neptune.Summary.statusDone": "Apartado listo",
@@ -14642,6 +14737,7 @@ var fr = {
 	"neptune.Info.ariaLabel": "Plus d'informations",
 	"neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Sélectionnez une option…",
 	"neptune.Select.searchPlaceholder": "Recherche...",
 	"neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
 	"neptune.Summary.statusDone": "Validé",
@@ -14699,6 +14795,7 @@ var hu = {
 	"neptune.Info.ariaLabel": "További információ",
 	"neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Válassz ki egy lehetőséget...",
 	"neptune.Select.searchPlaceholder": "Keresés...",
 	"neptune.SelectInput.noResultsFound": "Nincs találat",
 	"neptune.Summary.statusDone": "Kész",
@@ -14756,6 +14853,7 @@ var id = {
 	"neptune.Info.ariaLabel": "Informasi lebih lanjut",
 	"neptune.Link.opensInNewTab": "(terbuka di tab baru)",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Pilih opsi...",
 	"neptune.Select.searchPlaceholder": "Cari...",
 	"neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
 	"neptune.Summary.statusDone": "Item selesai",
@@ -14813,6 +14911,7 @@ var it = {
 	"neptune.Info.ariaLabel": "Maggiori informazioni",
 	"neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
 	"neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Seleziona un'opzione...",
 	"neptune.Select.searchPlaceholder": "Cerca...",
 	"neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
 	"neptune.Summary.statusDone": "Completato",
@@ -14870,6 +14969,7 @@ var ja = {
 	"neptune.Info.ariaLabel": "詳細",
 	"neptune.Link.opensInNewTab": "（新しいタブで開きます）",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
 	"neptune.Select.searchPlaceholder": "検索... ",
 	"neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
 	"neptune.Summary.statusDone": "完了",
@@ -14927,6 +15027,7 @@ var pl = {
 	"neptune.Info.ariaLabel": "Więcej informacji",
 	"neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
 	"neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Wybierz opcję...",
 	"neptune.Select.searchPlaceholder": "Wyszukaj...",
 	"neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
 	"neptune.Summary.statusDone": "Czynność wykonana",
@@ -14984,6 +15085,7 @@ var pt = {
 	"neptune.Info.ariaLabel": "Mais informações",
 	"neptune.Link.opensInNewTab": "(abre em uma nova aba)",
 	"neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
 	"neptune.Summary.statusDone": "Pronto",
@@ -15041,6 +15143,7 @@ var ro = {
 	"neptune.Info.ariaLabel": "Mai multe informații",
 	"neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
 	"neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
 	"neptune.Select.searchPlaceholder": "Caută...",
 	"neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
 	"neptune.Summary.statusDone": "Finalizat",
@@ -15098,6 +15201,7 @@ var ru = {
 	"neptune.Info.ariaLabel": "Подробнее",
 	"neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
 	"neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
 	"neptune.Select.searchPlaceholder": "Поиск...",
 	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
 	"neptune.Summary.statusDone": "Этап завершен",
@@ -15155,6 +15259,7 @@ var th = {
 	"neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
 	"neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
@@ -15212,6 +15317,7 @@ var tr = {
 	"neptune.Info.ariaLabel": "Daha fazla bilgi",
 	"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
 	"neptune.Select.searchPlaceholder": "Ara...",
 	"neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
@@ -15326,6 +15432,7 @@ var zhCN = {
 	"neptune.Info.ariaLabel": "更多信息",
 	"neptune.Link.opensInNewTab": "（在新标签页中打开）",
 	"neptune.MoneyInput.Select.placeholder": "请选择...",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "选择一个选项...",
 	"neptune.Select.searchPlaceholder": "搜索",
 	"neptune.SelectInput.noResultsFound": "找不到结果",
 	"neptune.Summary.statusDone": "已完成",
@@ -15383,6 +15490,7 @@ var zhHK = {
 	"neptune.Info.ariaLabel": "更多資訊",
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
+	"neptune.PhoneNumberInput.SelectInput.placeholder": "選擇其中一項…",
 	"neptune.Select.searchPlaceholder": "搜尋…",
 	"neptune.SelectInput.noResultsFound": "找不到任何結果",
 	"neptune.Summary.statusDone": "已完成事項",