@transferwise/components 45.26.1 → 45.26.3

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,
@@ -3618,7 +3618,7 @@ const TableLink = ({
   };
   const calculateAriaLabel = () => {
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(messages$6.selected)} ${intl.formatMessage(messages$6[type])}`;
+      return `${longTitle || title || ''}, ${intl.formatMessage(messages$7.selected)} ${intl.formatMessage(messages$7[type])}`;
     }
     return longTitle || title;
   };
@@ -3835,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
@@ -3981,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'
         }),
@@ -4127,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, {
@@ -5779,7 +5779,7 @@ const Stepper = ({
   });
 };
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   back: {
     id: "neptune.FlowNavigation.back"
   }
@@ -5871,16 +5871,19 @@ 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, {
+        }) : /*#__PURE__*/jsx("div", {
+          className: "np-flow-header__left",
+          children: logo
+        }), isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxs("div", {
-        className: classNames('d-flex', 'align-items-center', {
+        className: classNames('np-flow-header__right', 'd-flex', 'align-items-center', 'justify-content-end', {
           'order-2': isLarge
         }),
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
@@ -6138,7 +6141,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",
@@ -6177,6 +6180,12 @@ const deprecatedPlacements = {
 };
 var Popover$2 = Popover$1;
 
+var messages$5 = defineMessages({
+  ariaLabel: {
+    id: "neptune.Info.ariaLabel"
+  }
+});
+
 const Info = ({
   className = undefined,
   content = undefined,
@@ -6187,7 +6196,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 = {
@@ -10829,6 +10840,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...",
@@ -11430,7 +11442,6 @@ const Summary = ({
   help,
   icon,
   illustration = null,
-  // @ts-expect-error help is old and deprecated prop
   info = help,
   status,
   title
@@ -12467,6 +12478,7 @@ const Option = props => {
     children: /*#__PURE__*/jsxs("a", {
       className: "dropdown-item",
       href: "#",
+      tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsx("span", {
         children: hightlight(label, query)