@transferwise/components 45.19.1 → 45.19.3

package/build/i18n/en.json

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

package/build/index.esm.js

@@ -789,7 +789,7 @@ const ActionOption = ({
   });
 };
 
-var messages$a = defineMessages({
+var messages$b = defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -805,7 +805,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = useIntl();
-  ariaLabel ??= intl.formatMessage(messages$a.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$b.ariaLabel);
   const Icon = filled ? CrossCircleFill : Cross;
   return /*#__PURE__*/jsx("button", {
     ref: reference,
@@ -825,7 +825,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   });
 });
 
-var messages$9 = defineMessages({
+var messages$a = defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -854,7 +854,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$9.opensInNewTab)
+      title: formatMessage(messages$a.opensInNewTab)
     })]
   });
 };
@@ -2216,7 +2216,7 @@ ProcessIndicator.defaultProps = {
 };
 var ProcessIndicator$1 = ProcessIndicator;
 
-var messages$8 = defineMessages({
+var messages$9 = defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -2335,7 +2335,7 @@ const Button = /*#__PURE__*/forwardRef(({
     className: classes,
     ...props,
     "aria-live": loading ? 'polite' : 'off',
-    "aria-label": loading ? intl.formatMessage(messages$8.loadingAriaLabel) : undefined,
+    "aria-label": loading ? intl.formatMessage(messages$9.loadingAriaLabel) : rest['aria-label'],
     children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -2628,7 +2628,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$7 = defineMessages({
+var messages$8 = defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2660,7 +2660,7 @@ const Chips = ({
         value: chip.value,
         label: chip.label,
         closeButton: {
-          'aria-label': intl.formatMessage(messages$7.ariaLabel, {
+          'aria-label': intl.formatMessage(messages$8.ariaLabel, {
             choice: chip.label
           })
         },
@@ -2768,7 +2768,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$6 = defineMessages({
+var messages$7 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2846,12 +2846,12 @@ const DateInput = ({
   const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
-  dayLabel = dayLabel || formatMessage(messages$6.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$6.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$6.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$7.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$7.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$7.yearLabel);
   placeholders = {
     day: placeholders?.day || 'DD',
-    month: placeholders?.month || formatMessage(messages$6.monthLabel),
+    month: placeholders?.month || formatMessage(messages$7.monthLabel),
     year: placeholders?.year || 'YYYY'
   };
   const getDateAsString = date => {
@@ -3282,7 +3282,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3345,7 +3345,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$5.ariaLabel),
+          "aria-label": formatMessage(messages$6.ariaLabel),
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3375,7 +3375,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$4 = defineMessages({
+var messages$5 = defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3418,7 +3418,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${intl.formatMessage(messages$4.previous)} ${dateMode}`,
+        "aria-label": `${intl.formatMessage(messages$5.previous)} ${dateMode}`,
         onClick: onPreviousClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.LEFT,
@@ -3429,7 +3429,7 @@ const DateHeader = ({
     }), label && /*#__PURE__*/jsx("button", {
       type: "button",
       className: `tw-date-lookup-header-current ${buttonClasses}`,
-      "aria-label": intl.formatMessage(messages$4.goTo20YearView),
+      "aria-label": intl.formatMessage(messages$5.goTo20YearView),
       onClick: onLabelClick,
       children: label
     }), /*#__PURE__*/jsx("div", {
@@ -3437,7 +3437,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${useIntl().formatMessage(messages$4.next)} ${dateMode}`,
+        "aria-label": `${useIntl().formatMessage(messages$5.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.RIGHT,
@@ -3481,7 +3481,7 @@ class TableLink extends PureComponent {
   };
   calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
     if (active) {
-      return `${longTitle || title}, ${formatMessage(messages$4.selected)} ${formatMessage(messages$4[type])}`;
+      return `${longTitle || title}, ${formatMessage(messages$5.selected)} ${formatMessage(messages$5[type])}`;
     }
     return longTitle || title;
   };
@@ -3704,7 +3704,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$4.month),
+        dateMode: formatMessage(messages$5.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3832,7 +3832,7 @@ class MonthCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$4.year),
+        dateMode: formatMessage(messages$5.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3957,7 +3957,7 @@ class YearCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$4.twentyYears),
+        dateMode: formatMessage(messages$5.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -5655,13 +5655,21 @@ const Stepper = ({
   });
 };
 
+var messages$4 = defineMessages({
+  back: {
+    id: "neptune.FlowNavigation.back"
+  }
+});
+
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  labels,
+  'aria-label': ariaLabel
 }) => {
   const numberLabels = labels.length - 1;
   return /*#__PURE__*/jsx("div", {
+    "aria-label": ariaLabel,
     className: classNames('np-animated-label', 'np-text-body-large-bold', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
@@ -5675,15 +5683,6 @@ const AnimatedLabel = ({
     })
   });
 };
-AnimatedLabel.propTypes = {
-  activeLabel: PropTypes.number.isRequired,
-  className: PropTypes.string,
-  labels: PropTypes.arrayOf(PropTypes.node).isRequired
-};
-AnimatedLabel.defaultProps = {
-  className: undefined
-};
-var AnimatedLabel$1 = AnimatedLabel;
 
 const BackButton = ({
   label,
@@ -5718,6 +5717,7 @@ const FlowNavigation = ({
   steps
 }) => {
   const reference = useRef(null);
+  const intl = useIntl();
   const [clientWidth] = useClientWidth({
     ref: reference
   });
@@ -5731,10 +5731,11 @@ const FlowNavigation = ({
     const displayGoBack = onGoBack != null && activeStep > 0;
     return /*#__PURE__*/jsx(Fragment, {
       children: displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-        label: /*#__PURE__*/jsx(AnimatedLabel$1, {
+        label: /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
-          activeLabel: activeStep - 1
+          activeLabel: activeStep - 1,
+          "aria-label": intl.formatMessage(messages$4.back)
         }),
         onClick: onGoBack
       }) : logo
@@ -6675,7 +6676,7 @@ function SelectInputClearButton({
   const intl = useIntl();
   return /*#__PURE__*/jsx("button", {
     type: "button",
-    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    "aria-label": intl.formatMessage(messages$6.ariaLabel),
     className: classNames(className, 'np-select-input-addon np-select-input-addon--interactive'),
     onClick: onClick,
     children: /*#__PURE__*/jsx(Cross, {
@@ -6832,7 +6833,12 @@ function SelectInputOptions({
   listboxRef
 }) {
   const [query, setQuery] = useState('');
-  const needle = useMemo(() => query ? searchableString(query) : null, [query]);
+  const needle = useMemo(() => {
+    if (filterable) {
+      return query ? searchableString(query) : null;
+    }
+    return undefined;
+  }, [filterable, query]);
   const listboxContainerRef = useRef(null);
   useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -6944,7 +6950,7 @@ function SelectInputGroupItemView({
     jsxs("section", {
       role: "group",
       "aria-labelledby": headerId,
-      className: classNames(needle == null && 'np-select-input-group-item--without-needle'),
+      className: classNames(needle === null && 'np-select-input-group-item--without-needle'),
       children: [needle == null ? /*#__PURE__*/jsx("header", {
         id: headerId,
         role: "presentation",
@@ -10675,6 +10681,7 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",