@transferwise/components 0.0.0-experimental-8f9699a → 0.0.0-experimental-dabc13b

package/build/index.esm.js

@@ -3575,10 +3575,6 @@ DateHeader.defaultProps = {
 };
 var DateHeader$1 = DateHeader;
 
-function getFocusableTime(props) {
-  return props.timeSpan.find(time => props.isActive(time)) || props.timeSpan.find(time => props.isNow(time) && !props.isDisabled(time)) || props.timeSpan.find(time => !props.isDisabled(time));
-}
-
 // NB! Using with UTC timestamp (YYYY-MM-DD) might lead to unexpected results, for example
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
@@ -3590,56 +3586,61 @@ function getStartOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick
-}) => {
-  const buttonRef = useRef(null);
-  const intl = useIntl();
-  useEffect(() => {
-    if (autofocus) {
-      setTimeout(() => {
-        buttonRef.current?.focus();
-      }, 0);
-    }
-  }, [autofocus]);
-  const onCalendarClick = event => {
+class TableLink extends PureComponent {
+  onClick = event => {
     event.preventDefault();
-    if (!disabled) {
-      onClick(item);
+    if (!this.props.disabled) {
+      this.props.onClick(this.props.item);
     }
   };
-  const calculateAriaLabel = () => {
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(messages$6.selected)} ${intl.formatMessage(messages$6[type])}`;
+      return `${longTitle || title}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
     }
     return longTitle || title;
   };
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsx("button", {
-      ref: buttonRef,
-      type: "button",
-      className: classNames(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
-        active: !!active
-      }, {
-        today: !!today
-      }),
-      disabled: disabled,
-      tabIndex: autofocus ? 0 : -1,
-      "aria-label": calculateAriaLabel(),
-      "aria-pressed": active,
-      onClick: onCalendarClick,
-      children: title || item
-    })
-  });
+  render() {
+    const {
+      item,
+      type,
+      title,
+      longTitle,
+      active,
+      disabled,
+      today,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    return /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
+        disabled: disabled,
+        "aria-label": this.calculateAriaLabel(longTitle, title, active, type, formatMessage),
+        "aria-pressed": active,
+        onClick: this.onClick,
+        children: title || item
+      })
+    });
+  }
+}
+TableLink.propTypes = {
+  item: PropTypes.number.isRequired,
+  // day (1-31), month (0-11) or year (2018 etc)
+  type: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  title: PropTypes.string,
+  longTitle: PropTypes.string,
+  active: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  today: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
 };
+TableLink.defaultProps = {
+  title: null,
+  longTitle: null
+};
+var TableLink$1 = injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3710,22 +3711,6 @@ class DayCalendarTable extends PureComponent {
     } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
-  isToday = day => {
-    const {
-      viewMonth,
-      viewYear
-    } = this.props;
-    return Number(getStartOfDay(new Date())) === Number(new Date(viewYear, viewMonth, day));
-  };
-  getAutofocusDay = weeks => {
-    const days = weeks.flatMap(week => week);
-    return getFocusableTime({
-      isActive: this.isActive,
-      isNow: this.isToday,
-      isDisabled: this.isDisabled,
-      timeSpan: days
-    });
-  };
   render() {
     const {
       viewMonth,
@@ -3735,13 +3720,12 @@ class DayCalendarTable extends PureComponent {
       }
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
     return /*#__PURE__*/jsxs("table", {
       className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
       children: [/*#__PURE__*/jsx("thead", {
         children: /*#__PURE__*/jsx("tr", {
           children: this.days.map((day, index) => /*#__PURE__*/jsxs("th", {
-            className: index > 4 ? 'text-xs-center np-text-body-default' : 'text-xs-center np-text-body-default-bold',
+            className: "text-xs-center np-text-body-default-bold",
             children: [/*#__PURE__*/jsx("span", {
               className: "hidden-xs",
               children: /*#__PURE__*/jsx("abbr", {
@@ -3760,16 +3744,15 @@ class DayCalendarTable extends PureComponent {
       }), /*#__PURE__*/jsx("tbody", {
         children: weeks.map((week, weekIndex) => /*#__PURE__*/jsx("tr", {
           children: week.map((day, dayIndex) => /*#__PURE__*/jsx("td", {
-            className: dayIndex > 4 ? 'weekend' : '',
-            children: day && /*#__PURE__*/jsx(TableLink, {
+            className: dayIndex > 4 ? 'default' : '',
+            children: day && /*#__PURE__*/jsx(TableLink$1, {
               item: day,
               type: "day",
               title: formatDate(new Date(viewYear, viewMonth, day), locale, SHORT_DAY_FORMAT),
-              autofocus: day === autoFocusDay,
               longTitle: formatDate(new Date(viewYear, viewMonth, day), locale),
               active: this.isActive(day),
               disabled: this.isDisabled(day),
-              today: this.isToday(day),
+              today: +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day),
               onClick: this.selectDay
             })
           }, dayIndex))
@@ -3870,11 +3853,11 @@ var DayCalendar$1 = injectIntl(DayCalendar);
 
 const ROWS$1 = 3;
 const COLS$1 = 4;
-const MONTH_ONLY_FORMAT = {
+const MONTH_ONLY_FORMAY = {
   month: 'short'
 };
 const MonthCalendarTable = ({
-  selectedDate,
+  selectedDate: selected,
   min,
   max,
   viewYear,
@@ -3884,37 +3867,19 @@ const MonthCalendarTable = ({
   const {
     locale
   } = useIntl();
-  const getLink = month => {
-    return /*#__PURE__*/jsx(TableLink, {
-      item: month,
-      type: "month",
-      title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
-      active: isActive(month),
-      disabled: isDisabled(month),
-      today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
-      autofocus: autofocusMonth === month,
-      onClick: onSelect
-    });
-  };
-  const isActive = month => {
-    return selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear();
-  };
-  const isThisMonth = month => {
-    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
-  };
+  const getLink = month => /*#__PURE__*/jsx(TableLink$1, {
+    item: month,
+    type: "month",
+    title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAY),
+    active: !!(selected && month === selected.getMonth() && viewYear === selected.getFullYear()),
+    disabled: isDisabled(month),
+    today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
+    onClick: onSelect
+  });
   const isDisabled = month => {
     const date = new Date(viewYear, month);
     return !!(min && date < new Date(min.getFullYear(), min.getMonth()) || max && date > new Date(max.getFullYear(), max.getMonth()));
   };
-  const autofocusMonth = (() => {
-    const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
-    return getFocusableTime({
-      isActive,
-      isNow: isThisMonth,
-      isDisabled,
-      timeSpan: months
-    });
-  })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0",
     children: [/*#__PURE__*/jsx("thead", {
@@ -4033,36 +3998,15 @@ const YearCalendarTable = ({
     locale
   } = useIntl();
   const startYear = viewYear - viewYear % 20;
-  const getLink = year => {
-    return /*#__PURE__*/jsx(TableLink, {
-      item: year,
-      type: "year",
-      title: formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
-      active: isActive(year),
-      disabled: isDisabled(year),
-      today: isThisYear(year),
-      autofocus: autofocusYear === year,
-      onClick: onSelect
-    });
-  };
-  const isActive = year => {
-    return !!(selectedDate && year === selectedDate.getFullYear());
-  };
-  const isThisYear = year => {
-    return year === new Date().getFullYear();
-  };
-  const isDisabled = year => {
-    return !!(min && year < min.getFullYear() || max && year > max.getFullYear());
-  };
-  const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-    return getFocusableTime({
-      isActive,
-      isNow: isThisYear,
-      isDisabled,
-      timeSpan: years
-    });
-  })();
+  const getLink = year => /*#__PURE__*/jsx(TableLink$1, {
+    item: year,
+    type: "year",
+    title: formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
+    active: !!(selectedDate && year === selectedDate.getFullYear()),
+    disabled: !!(min && year < min.getFullYear() || max && year > max.getFullYear()),
+    today: year === new Date().getFullYear(),
+    onClick: onSelect
+  });
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
     children: [/*#__PURE__*/jsx("thead", {
@@ -4169,7 +4113,6 @@ class DateLookup extends PureComponent {
     super(props);
     this.state = {
       selectedDate: getStartOfDay(props.value),
-      originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
       viewMonth: (props.value || new Date()).getMonth(),
@@ -4232,22 +4175,12 @@ class DateLookup extends PureComponent {
       onFocus();
     }
   };
-  discard = () => {
-    const {
-      originalDate
-    } = this.state;
-    if (originalDate !== null) {
-      this.props.onChange(originalDate);
-    }
-    this.close();
-  };
   close = () => {
     const {
       onBlur
     } = this.props;
     this.setState({
-      open: false,
-      originalDate: null
+      open: false
     });
     if (onBlur) {
       onBlur();
@@ -4255,8 +4188,7 @@ class DateLookup extends PureComponent {
   };
   handleKeyDown = event => {
     const {
-      open,
-      originalDate
+      open
     } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
@@ -4292,9 +4224,6 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
-        if (originalDate !== null) {
-          this.props.onChange(originalDate);
-        }
         this.close();
         event.preventDefault();
         break;
@@ -4305,14 +4234,8 @@ class DateLookup extends PureComponent {
       selectedDate,
       min,
       max,
-      mode,
-      originalDate
+      mode
     } = this.state;
-    if (originalDate === null) {
-      this.setState({
-        originalDate: selectedDate
-      });
-    }
     let date;
     if (selectedDate) {
       date = new Date(mode === MODE.YEAR ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === MODE.MONTH ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === MODE.DAY ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
@@ -4445,7 +4368,7 @@ class DateLookup extends PureComponent {
         open: open,
         className: "tw-date-lookup-menu",
         position: Position.BOTTOM,
-        onClose: this.discard,
+        onClose: this.close,
         children: this.getCalendar()
       })]
     });
@@ -14621,6 +14544,7 @@ var cs = {
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Vybrat možnost...",
 	"neptune.Select.searchPlaceholder": "Hledat...",
+	"neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
 	"neptune.Summary.statusDone": "Položka dokončena",
 	"neptune.Summary.statusNotDone": "Položka k dokončení",
 	"neptune.Summary.statusPending": "Čekající položka",
@@ -14674,6 +14598,7 @@ var de = {
 	"neptune.Link.opensInNewTab": "(wird in einem neuen Tab geöffnet)",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
+	"neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
 	"neptune.Summary.statusDone": "Schritt erledigt",
 	"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
 	"neptune.Summary.statusPending": "Schritt ausstehend",
@@ -14727,6 +14652,7 @@ var es = {
 	"neptune.Link.opensInNewTab": "(se abre en una pestaña nueva)",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
+	"neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
 	"neptune.Summary.statusDone": "Apartado listo",
 	"neptune.Summary.statusNotDone": "Apartado a completar",
 	"neptune.Summary.statusPending": "Apartado pendiente",
@@ -14780,6 +14706,7 @@ var fr = {
 	"neptune.Link.opensInNewTab": "(ouvre dans un nouvel onglet)",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
 	"neptune.Select.searchPlaceholder": "Recherche...",
+	"neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
 	"neptune.Summary.statusDone": "Validé",
 	"neptune.Summary.statusNotDone": "À compléter",
 	"neptune.Summary.statusPending": "En attente",
@@ -14833,6 +14760,7 @@ var hu = {
 	"neptune.Link.opensInNewTab": "(új lapon nyílik meg)",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
 	"neptune.Select.searchPlaceholder": "Keresés...",
+	"neptune.SelectInput.noResultsFound": "Nincs találat",
 	"neptune.Summary.statusDone": "Kész",
 	"neptune.Summary.statusNotDone": "Hátravan",
 	"neptune.Summary.statusPending": "Függőben",
@@ -14886,6 +14814,7 @@ var id = {
 	"neptune.Link.opensInNewTab": "(terbuka di tab baru)",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
 	"neptune.Select.searchPlaceholder": "Cari...",
+	"neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
 	"neptune.Summary.statusDone": "Item selesai",
 	"neptune.Summary.statusNotDone": "Item yang harus dilakukan",
 	"neptune.Summary.statusPending": "Item tertunda",
@@ -14939,6 +14868,7 @@ var it = {
 	"neptune.Link.opensInNewTab": "(si apre in una nuova scheda)",
 	"neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
 	"neptune.Select.searchPlaceholder": "Cerca...",
+	"neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
 	"neptune.Summary.statusDone": "Completato",
 	"neptune.Summary.statusNotDone": "Da completare",
 	"neptune.Summary.statusPending": "In corso",
@@ -14992,6 +14922,7 @@ var ja = {
 	"neptune.Link.opensInNewTab": "（新しいタブで開きます）",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
 	"neptune.Select.searchPlaceholder": "検索... ",
+	"neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
 	"neptune.Summary.statusDone": "完了",
 	"neptune.Summary.statusNotDone": "未対応",
 	"neptune.Summary.statusPending": "保留中",
@@ -15045,6 +14976,7 @@ var pl = {
 	"neptune.Link.opensInNewTab": "(otworzy się w nowej zakładce)",
 	"neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
 	"neptune.Select.searchPlaceholder": "Wyszukaj...",
+	"neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
 	"neptune.Summary.statusDone": "Czynność wykonana",
 	"neptune.Summary.statusNotDone": "Czynność do wykonania",
 	"neptune.Summary.statusPending": "Czynność oczekująca",
@@ -15087,17 +15019,18 @@ var pt = {
 	"neptune.DateInput.month.label": "Mês",
 	"neptune.DateInput.year.label": "Ano",
 	"neptune.DateLookup.day": "dia",
-	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+	"neptune.DateLookup.goTo20YearView": "Acessar a visualização de 20 anos",
 	"neptune.DateLookup.month": "mês",
 	"neptune.DateLookup.next": "próximo",
 	"neptune.DateLookup.previous": "anterior",
 	"neptune.DateLookup.selected": "selecionada",
 	"neptune.DateLookup.twentyYears": "20 anos",
 	"neptune.DateLookup.year": "ano",
-	"neptune.FlowNavigation.back": "back to previous step",
-	"neptune.Link.opensInNewTab": "(abrir a página em uma nova aba)",
+	"neptune.FlowNavigation.back": "voltar à etapa anterior",
+	"neptune.Link.opensInNewTab": "(abre em uma nova aba)",
 	"neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
 	"neptune.Select.searchPlaceholder": "Buscar...",
+	"neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
 	"neptune.Summary.statusDone": "Pronto",
 	"neptune.Summary.statusNotDone": "Não iniciado",
 	"neptune.Summary.statusPending": "Pendente",
@@ -15141,16 +15074,17 @@ var ro = {
 	"neptune.DateInput.year.label": "An",
 	"neptune.DateLookup.day": "zi",
 	"neptune.DateLookup.goTo20YearView": "Accesează vizualizarea pe 20 de ani",
-	"neptune.DateLookup.month": "luna",
+	"neptune.DateLookup.month": "lună",
 	"neptune.DateLookup.next": "înainte",
-	"neptune.DateLookup.previous": "precedenta",
+	"neptune.DateLookup.previous": "înapoi",
 	"neptune.DateLookup.selected": "selectată",
 	"neptune.DateLookup.twentyYears": "20 de ani",
-	"neptune.DateLookup.year": "anul",
+	"neptune.DateLookup.year": "an",
 	"neptune.FlowNavigation.back": "înapoi la pasul anterior",
 	"neptune.Link.opensInNewTab": "(se deschide într-o filă nouă)",
 	"neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
 	"neptune.Select.searchPlaceholder": "Caută...",
+	"neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
 	"neptune.Summary.statusDone": "Finalizat",
 	"neptune.Summary.statusNotDone": "De făcut",
 	"neptune.Summary.statusPending": "În așteptare",
@@ -15196,7 +15130,7 @@ var ru = {
 	"neptune.DateLookup.goTo20YearView": "Перейти к обзору 20 лет",
 	"neptune.DateLookup.month": "месяц",
 	"neptune.DateLookup.next": "далее",
-	"neptune.DateLookup.previous": "предыдущий",
+	"neptune.DateLookup.previous": "назад",
 	"neptune.DateLookup.selected": "выбрано",
 	"neptune.DateLookup.twentyYears": "20 лет",
 	"neptune.DateLookup.year": "год",
@@ -15204,6 +15138,7 @@ var ru = {
 	"neptune.Link.opensInNewTab": "(откроется в новой вкладке)",
 	"neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
 	"neptune.Select.searchPlaceholder": "Поиск...",
+	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
 	"neptune.Summary.statusDone": "Этап завершен",
 	"neptune.Summary.statusNotDone": "Этап к выполнению",
 	"neptune.Summary.statusPending": "Этап в процессе",
@@ -15257,6 +15192,7 @@ var th = {
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
+	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
 	"neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
 	"neptune.Summary.statusPending": "รายการที่รอดำเนินการ",
@@ -15310,6 +15246,7 @@ var tr = {
 	"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
 	"neptune.Select.searchPlaceholder": "Ara...",
+	"neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
 	"neptune.Summary.statusNotDone": "Yapılacak",
 	"neptune.Summary.statusPending": "Bekliyor",
@@ -15363,6 +15300,7 @@ var uk = {
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
 	"neptune.Select.searchPlaceholder": "Пошук…",
+	"neptune.SelectInput.noResultsFound": "Нічого не знайдено",
 	"neptune.Summary.statusDone": "Виконано",
 	"neptune.Summary.statusNotDone": "Не виконано",
 	"neptune.Summary.statusPending": "Виконується",
@@ -15416,6 +15354,7 @@ var zhCN = {
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "请选择...",
 	"neptune.Select.searchPlaceholder": "搜索",
+	"neptune.SelectInput.noResultsFound": "找不到结果",
 	"neptune.Summary.statusDone": "已完成",
 	"neptune.Summary.statusNotDone": "未完成",
 	"neptune.Summary.statusPending": "待处理",
@@ -15469,6 +15408,7 @@ var zhHK = {
 	"neptune.Link.opensInNewTab": "（在新分頁中開啟）",
 	"neptune.MoneyInput.Select.placeholder": "選擇一個選項…",
 	"neptune.Select.searchPlaceholder": "搜尋…",
+	"neptune.SelectInput.noResultsFound": "找不到任何結果",
 	"neptune.Summary.statusDone": "已完成事項",
 	"neptune.Summary.statusNotDone": "未完成事項",
 	"neptune.Summary.statusPending": "待處理事項",