@transferwise/components 45.19.1 → 45.19.3

package/build/index.js

@@ -823,7 +823,7 @@ const ActionOption = ({
   });
 };
 
-var messages$a = reactIntl.defineMessages({
+var messages$b = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -839,7 +839,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = reactIntl.useIntl();
-  ariaLabel ??= intl.formatMessage(messages$a.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$b.ariaLabel);
   const Icon = filled ? icons.CrossCircleFill : icons.Cross;
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     ref: reference,
@@ -859,7 +859,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   });
 });
 
-var messages$9 = reactIntl.defineMessages({
+var messages$a = reactIntl.defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -888,7 +888,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsxRuntime.jsx(icons.NavigateAway, {
-      title: formatMessage(messages$9.opensInNewTab)
+      title: formatMessage(messages$a.opensInNewTab)
     })]
   });
 };
@@ -2250,7 +2250,7 @@ ProcessIndicator.defaultProps = {
 };
 var ProcessIndicator$1 = ProcessIndicator;
 
-var messages$8 = reactIntl.defineMessages({
+var messages$9 = reactIntl.defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -2369,7 +2369,7 @@ const Button = /*#__PURE__*/React.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__*/jsxRuntime.jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -2662,7 +2662,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$7 = reactIntl.defineMessages({
+var messages$8 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2694,7 +2694,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
           })
         },
@@ -2802,7 +2802,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$6 = reactIntl.defineMessages({
+var messages$7 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2880,12 +2880,12 @@ const DateInput = ({
   const [month, setMonth] = React.useState(() => getExplodedDate('month'));
   const [year, setYear] = React.useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.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 => {
@@ -3316,7 +3316,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$5 = reactIntl.defineMessages({
+var messages$6 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3379,7 +3379,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$5.ariaLabel),
+          "aria-label": formatMessage(messages$6.ariaLabel),
           size: exports.Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3409,7 +3409,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$4 = reactIntl.defineMessages({
+var messages$5 = reactIntl.defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3452,7 +3452,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Chevron$1, {
           orientation: exports.Position.LEFT,
@@ -3463,7 +3463,7 @@ const DateHeader = ({
     }), label && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
@@ -3471,7 +3471,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${reactIntl.useIntl().formatMessage(messages$4.next)} ${dateMode}`,
+        "aria-label": `${reactIntl.useIntl().formatMessage(messages$5.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
           orientation: exports.Position.RIGHT,
@@ -3515,7 +3515,7 @@ class TableLink extends React.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;
   };
@@ -3738,7 +3738,7 @@ class DayCalendar extends React.PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$4.month),
+        dateMode: formatMessage(messages$5.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3866,7 +3866,7 @@ class MonthCalendar extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$4.year),
+        dateMode: formatMessage(messages$5.year),
         label: formatting.formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3991,7 +3991,7 @@ class YearCalendar extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$4.twentyYears),
+        dateMode: formatMessage(messages$5.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsxRuntime.jsx(YearCalendarTable$1, {
@@ -5689,13 +5689,21 @@ const Stepper = ({
   });
 };
 
+var messages$4 = reactIntl.defineMessages({
+  back: {
+    id: "neptune.FlowNavigation.back"
+  }
+});
+
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels
+  labels,
+  'aria-label': ariaLabel
 }) => {
   const numberLabels = labels.length - 1;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "aria-label": ariaLabel,
     className: classNames__default.default('np-animated-label', 'np-text-body-large-bold', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
@@ -5709,15 +5717,6 @@ const AnimatedLabel = ({
     })
   });
 };
-AnimatedLabel.propTypes = {
-  activeLabel: PropTypes__default.default.number.isRequired,
-  className: PropTypes__default.default.string,
-  labels: PropTypes__default.default.arrayOf(PropTypes__default.default.node).isRequired
-};
-AnimatedLabel.defaultProps = {
-  className: undefined
-};
-var AnimatedLabel$1 = AnimatedLabel;
 
 const BackButton = ({
   label,
@@ -5752,6 +5751,7 @@ const FlowNavigation = ({
   steps
 }) => {
   const reference = React.useRef(null);
+  const intl = reactIntl.useIntl();
   const [clientWidth] = useClientWidth({
     ref: reference
   });
@@ -5765,10 +5765,11 @@ const FlowNavigation = ({
     const displayGoBack = onGoBack != null && activeStep > 0;
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton$1, {
-        label: /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel$1, {
+        label: /*#__PURE__*/jsxRuntime.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
@@ -6709,7 +6710,7 @@ function SelectInputClearButton({
   const intl = reactIntl.useIntl();
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     type: "button",
-    "aria-label": intl.formatMessage(messages$5.ariaLabel),
+    "aria-label": intl.formatMessage(messages$6.ariaLabel),
     className: classNames__default.default(className, 'np-select-input-addon np-select-input-addon--interactive'),
     onClick: onClick,
     children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
@@ -6866,7 +6867,12 @@ function SelectInputOptions({
   listboxRef
 }) {
   const [query, setQuery] = React.useState('');
-  const needle = React.useMemo(() => query ? searchableString(query) : null, [query]);
+  const needle = React.useMemo(() => {
+    if (filterable) {
+      return query ? searchableString(query) : null;
+    }
+    return undefined;
+  }, [filterable, query]);
   const listboxContainerRef = React.useRef(null);
   React.useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -6978,7 +6984,7 @@ function SelectInputGroupItemView({
     jsxRuntime.jsxs("section", {
       role: "group",
       "aria-labelledby": headerId,
-      className: classNames__default.default(needle == null && 'np-select-input-group-item--without-needle'),
+      className: classNames__default.default(needle === null && 'np-select-input-group-item--without-needle'),
       children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
         id: headerId,
         role: "presentation",
@@ -10709,6 +10715,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...",