@transferwise/components 0.0.0-experimental-3e282e9 → 0.0.0-experimental-65e51cb

package/build/index.esm.js

@@ -3575,53 +3575,59 @@ function getStartOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick,
-  intl: {
-    formatMessage
-  }
-}) => {
-  const buttonRef = useRef(null);
-  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 || ''}, ${formatMessage(messages$6.selected)} ${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: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
-      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);
 
@@ -3694,32 +3700,6 @@ class DayCalendarTable extends PureComponent {
     } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
-  isToday = (day, viewMonth, viewYear) => {
-    return +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day);
-  };
-  getAutofocusDay = (weeks, viewMonth, viewYear) => {
-    let activeDay = null;
-    let today = null;
-    let lowestNonDisabledDay = null;
-    for (const week of weeks) {
-      for (const day of week) {
-        if (this.isActive(day)) {
-          activeDay = day;
-          break;
-        }
-        if (this.isToday(day, viewMonth, viewYear)) {
-          today = day;
-        }
-        if (day && !this.isDisabled(day) && lowestNonDisabledDay === null) {
-          lowestNonDisabledDay = day;
-        }
-      }
-      if (activeDay !== null) {
-        break;
-      }
-    }
-    return activeDay || today || lowestNonDisabledDay;
-  };
   render() {
     const {
       viewMonth,
@@ -3729,7 +3709,6 @@ 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", {
@@ -3759,11 +3738,10 @@ class DayCalendarTable extends PureComponent {
               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, viewMonth, viewYear),
+              today: +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day),
               onClick: this.selectDay
             })
           }, dayIndex))
@@ -3864,11 +3842,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,
@@ -3878,39 +3856,19 @@ const MonthCalendarTable = ({
   const {
     locale
   } = useIntl();
-  const getLink = month => {
-    return /*#__PURE__*/jsx(TableLink$1, {
-      item: month,
-      type: "month",
-      title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
-      active: !!(selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()),
-      disabled: isDisabled(month),
-      today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
-      autofocus: autofocusMonth === month,
-      onClick: onSelect
-    });
-  };
+  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 months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
-  const autofocusMonth = (() => {
-    let activeMonth = null;
-    let lowestNonDisabledMonth = null;
-    for (const month of months) {
-      if (selectedDate && month === selectedDate.getMonth()) {
-        activeMonth = month;
-      }
-      if (!isDisabled(month) && lowestNonDisabledMonth === null) {
-        lowestNonDisabledMonth = month;
-      }
-      if (activeMonth !== null) {
-        break;
-      }
-    }
-    return activeMonth || lowestNonDisabledMonth;
-  })();
   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", {
@@ -4029,38 +3987,15 @@ const YearCalendarTable = ({
     locale
   } = useIntl();
   const startYear = viewYear - viewYear % 20;
-  const getLink = year => {
-    return /*#__PURE__*/jsx(TableLink$1, {
-      item: year,
-      type: "year",
-      title: formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT),
-      active: !!(selectedDate && year === selectedDate.getFullYear()),
-      disabled: isDisabled(year),
-      today: year === new Date().getFullYear(),
-      autofocus: autofocusYear === year,
-      onClick: onSelect
-    });
-  };
-  const isDisabled = year => {
-    return !!(min && year < min.getFullYear() || max && year > max.getFullYear());
-  };
-  const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-  const autofocusYear = (() => {
-    let activeYear = null;
-    let lowestNonDisabledYear = null;
-    for (const year of years) {
-      if (selectedDate && year === selectedDate.getFullYear()) {
-        activeYear = year;
-      }
-      if (!isDisabled(year) && lowestNonDisabledYear === null) {
-        lowestNonDisabledYear = year;
-      }
-      if (activeYear !== null) {
-        break;
-      }
-    }
-    return activeYear || lowestNonDisabledYear;
-  })();
+  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", {
@@ -6161,7 +6096,8 @@ const Info = ({
   presentation = InfoPresentation.POPOVER,
   size = Size.SMALL,
   title = undefined,
-  'aria-label': ariaLabel
+  'aria-label': ariaLabel,
+  preferredPlacement = Position.BOTTOM
 }) => {
   const [open, setOpen] = useState(false);
   const isModal = presentation === InfoPresentation.MODAL;
@@ -6196,7 +6132,7 @@ const Info = ({
       })]
     }) : /*#__PURE__*/jsx(Popover$2, {
       content: content,
-      preferredPlacement: Position.BOTTOM,
+      preferredPlacement: preferredPlacement,
       title: title,
       children: /*#__PURE__*/jsx("button", {
         type: "button",