@transferwise/components 45.26.0 → 45.26.2

package/build/i18n/en.json

@@ -15,6 +15,7 @@
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.Info.ariaLabel": "More information",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",

package/build/index.esm.js

@@ -800,7 +800,7 @@ const ActionOption = ({
   });
 };
 
-var messages$b = defineMessages({
+var messages$c = defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -816,7 +816,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = useIntl();
-  ariaLabel ??= intl.formatMessage(messages$b.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$c.ariaLabel);
   const Icon = filled ? CrossCircleFill : Cross;
   return /*#__PURE__*/jsx("button", {
     ref: reference,
@@ -836,7 +836,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   });
 });
 
-var messages$a = defineMessages({
+var messages$b = defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -865,7 +865,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$a.opensInNewTab)
+      title: formatMessage(messages$b.opensInNewTab)
     })]
   });
 };
@@ -2312,7 +2312,7 @@ ProcessIndicator.defaultProps = {
 };
 var ProcessIndicator$1 = ProcessIndicator;
 
-var messages$9 = defineMessages({
+var messages$a = defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -2431,7 +2431,7 @@ const Button = /*#__PURE__*/forwardRef(({
     className: classes,
     ...props,
     "aria-live": loading ? 'polite' : 'off',
-    "aria-label": loading ? intl.formatMessage(messages$9.loadingAriaLabel) : rest['aria-label'],
+    "aria-label": loading ? intl.formatMessage(messages$a.loadingAriaLabel) : rest['aria-label'],
     children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -2724,7 +2724,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$8 = defineMessages({
+var messages$9 = defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2756,7 +2756,7 @@ const Chips = ({
         value: chip.value,
         label: chip.label,
         closeButton: {
-          'aria-label': intl.formatMessage(messages$8.ariaLabel, {
+          'aria-label': intl.formatMessage(messages$9.ariaLabel, {
             choice: chip.label
           })
         },
@@ -2864,7 +2864,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$7 = defineMessages({
+var messages$8 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2944,12 +2944,12 @@ const DateInput = ({
   const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
-  dayLabel = dayLabel || formatMessage(messages$7.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$7.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$7.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$8.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$8.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$8.yearLabel);
   placeholders = {
     day: placeholders?.day || 'DD',
-    month: placeholders?.month || formatMessage(messages$7.monthLabel),
+    month: placeholders?.month || formatMessage(messages$8.monthLabel),
     year: placeholders?.year || 'YYYY'
   };
   const getDateAsString = date => {
@@ -3482,7 +3482,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$6 = defineMessages({
+var messages$7 = defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3528,7 +3528,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${intl.formatMessage(messages$6.previous)} ${dateMode}`,
+        "aria-label": `${intl.formatMessage(messages$7.previous)} ${dateMode}`,
         onClick: onPreviousClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.LEFT,
@@ -3542,7 +3542,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `tw-date-lookup-header-current ${buttonClasses}`,
-        "aria-label": intl.formatMessage(messages$6.goTo20YearView),
+        "aria-label": intl.formatMessage(messages$7.goTo20YearView),
         onClick: onLabelClick,
         children: label
       })
@@ -3551,7 +3551,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${useIntl().formatMessage(messages$6.next)} ${dateMode}`,
+        "aria-label": `${useIntl().formatMessage(messages$7.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.RIGHT,
@@ -3575,6 +3575,10 @@ 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.
@@ -3586,61 +3590,56 @@ function getStartOfDay(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }
 
-class TableLink extends PureComponent {
-  onClick = event => {
+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 => {
     event.preventDefault();
-    if (!this.props.disabled) {
-      this.props.onClick(this.props.item);
+    if (!disabled) {
+      onClick(item);
     }
   };
-  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+  const calculateAriaLabel = () => {
     if (active) {
-      return `${longTitle || title}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
+      return `${longTitle || title || ''}, ${intl.formatMessage(messages$7.selected)} ${intl.formatMessage(messages$7[type])}`;
     }
     return longTitle || title;
   };
-  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
+  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
+    })
+  });
 };
-var TableLink$1 = injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3711,6 +3710,22 @@ 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,
@@ -3720,12 +3735,13 @@ 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: "text-xs-center np-text-body-default-bold",
+            className: index > 4 ? 'text-xs-center np-text-body-default' : 'text-xs-center np-text-body-default-bold',
             children: [/*#__PURE__*/jsx("span", {
               className: "hidden-xs",
               children: /*#__PURE__*/jsx("abbr", {
@@ -3744,15 +3760,16 @@ 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 ? 'default' : '',
-            children: day && /*#__PURE__*/jsx(TableLink$1, {
+            className: dayIndex > 4 ? 'weekend' : '',
+            children: day && /*#__PURE__*/jsx(TableLink, {
               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: +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day),
+              today: this.isToday(day),
               onClick: this.selectDay
             })
           }, dayIndex))
@@ -3818,7 +3835,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$6.month),
+        dateMode: formatMessage(messages$7.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3853,11 +3870,11 @@ var DayCalendar$1 = injectIntl(DayCalendar);
 
 const ROWS$1 = 3;
 const COLS$1 = 4;
-const MONTH_ONLY_FORMAY = {
+const MONTH_ONLY_FORMAT = {
   month: 'short'
 };
 const MonthCalendarTable = ({
-  selectedDate: selected,
+  selectedDate,
   min,
   max,
   viewYear,
@@ -3867,19 +3884,37 @@ const MonthCalendarTable = ({
   const {
     locale
   } = useIntl();
-  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 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 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", {
@@ -3946,7 +3981,7 @@ class MonthCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.year),
+        dateMode: formatMessage(messages$7.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3998,15 +4033,36 @@ const YearCalendarTable = ({
     locale
   } = useIntl();
   const startYear = viewYear - viewYear % 20;
-  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
-  });
+  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
+    });
+  })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
     children: [/*#__PURE__*/jsx("thead", {
@@ -4071,7 +4127,7 @@ class YearCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.twentyYears),
+        dateMode: formatMessage(messages$7.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -4113,6 +4169,7 @@ 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(),
@@ -4175,12 +4232,22 @@ 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
+      open: false,
+      originalDate: null
     });
     if (onBlur) {
       onBlur();
@@ -4188,7 +4255,8 @@ class DateLookup extends PureComponent {
   };
   handleKeyDown = event => {
     const {
-      open
+      open,
+      originalDate
     } = this.state;
     switch (event.keyCode) {
       case KeyCodes.LEFT:
@@ -4224,6 +4292,9 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
+        if (originalDate !== null) {
+          this.props.onChange(originalDate);
+        }
         this.close();
         event.preventDefault();
         break;
@@ -4234,8 +4305,14 @@ class DateLookup extends PureComponent {
       selectedDate,
       min,
       max,
-      mode
+      mode,
+      originalDate
     } = 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());
@@ -4368,7 +4445,7 @@ class DateLookup extends PureComponent {
         open: open,
         className: "tw-date-lookup-menu",
         position: Position.BOTTOM,
-        onClose: this.close,
+        onClose: this.discard,
         children: this.getCalendar()
       })]
     });
@@ -5702,7 +5779,7 @@ const Stepper = ({
   });
 };
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   back: {
     id: "neptune.FlowNavigation.back"
   }
@@ -5794,7 +5871,7 @@ const FlowNavigation = ({
       }),
       leftContent: /*#__PURE__*/jsxs(Fragment, {
         children: [isSmall && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-          "aria-label": intl.formatMessage(messages$5.back),
+          "aria-label": intl.formatMessage(messages$6.back),
           onClick: onGoBack
         }) : logo, isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
@@ -6061,7 +6138,7 @@ const Popover$1 = ({
       children: /*#__PURE__*/jsxs("div", {
         className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
         "aria-hidden": !open,
-        role: "tooltip",
+        role: "dialog",
         children: [title && /*#__PURE__*/jsx(Title, {
           type: Typography.TITLE_BODY,
           className: "m-b-1",
@@ -6100,6 +6177,12 @@ const deprecatedPlacements = {
 };
 var Popover$2 = Popover$1;
 
+var messages$5 = defineMessages({
+  ariaLabel: {
+    id: "neptune.Info.ariaLabel"
+  }
+});
+
 const Info = ({
   className = undefined,
   content = undefined,
@@ -6110,7 +6193,9 @@ const Info = ({
   'aria-label': ariaLabel,
   preferredPlacement = Position.BOTTOM
 }) => {
+  const intl = useIntl();
   const [open, setOpen] = useState(false);
+  ariaLabel ??= intl.formatMessage(messages$5.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
   const isSmall = size === Size.SMALL;
   const buttonProps = {
@@ -10752,6 +10837,7 @@ var en = {
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.Info.ariaLabel": "More information",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
@@ -11353,7 +11439,6 @@ const Summary = ({
   help,
   icon,
   illustration = null,
-  // @ts-expect-error help is old and deprecated prop
   info = help,
   status,
   title
@@ -12390,6 +12475,7 @@ const Option = props => {
     children: /*#__PURE__*/jsxs("a", {
       className: "dropdown-item",
       href: "#",
+      tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsx("span", {
         children: hightlight(label, query)