@transferwise/components 46.17.2 → 46.18.0

package/build/index.esm.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, Component, PureComponent, createRef, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -1778,8 +1778,9 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
 }, reference) => {
   /** @type {RefObject<HTMLDivElement>} */
   const localReference = useRef(null);
-  return /*#__PURE__*/jsx(CSSTransition, {
+  return /*#__PURE__*/createElement(CSSTransition, {
     ...rest,
+    key: `sliding-panel--open-${position}`,
     nodeRef: localReference,
     in: open
     // Wait for animation to finish before unmount.
@@ -1792,13 +1793,12 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
       'sliding-panel--fixed': slidingPanelPositionFixed
     }, 'sliding-panel'),
     appear: true,
-    unmountOnExit: true,
-    children: /*#__PURE__*/jsx("div", {
-      ref: mergeRefs([reference, localReference]),
-      className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
-      children: children
-    })
-  });
+    unmountOnExit: true
+  }, /*#__PURE__*/jsx("div", {
+    ref: mergeRefs([reference, localReference]),
+    className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
+    children: children
+  }));
 });
 SlidingPanel.propTypes = {
   children: PropTypes.node,
@@ -3261,7 +3261,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(dateTriggerMessages.ariaLabel),
+          "aria-label": `${formatMessage(dateTriggerMessages.ariaLabel)} ${label}`,
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -4239,6 +4239,7 @@ class DateLookup extends PureComponent {
     return /*#__PURE__*/jsxs("div", {
       // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref: this.element,
+      id: this.props.id,
       "aria-labelledby": ariaLabelledBy,
       className: "input-group",
       onKeyDown: this.handleKeyDown,
@@ -4263,6 +4264,7 @@ class DateLookup extends PureComponent {
   }
 }
 DateLookup.propTypes = {
+  id: PropTypes.string,
   value: PropTypes.instanceOf(Date),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),
@@ -5434,6 +5436,7 @@ const Stepper = ({
     });
     return /*#__PURE__*/jsx("li", {
       className: classNames('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`
       } : {
@@ -7368,7 +7371,7 @@ const InstructionsList = ({
   }) : /*#__PURE__*/jsxs(Fragment, {
     children: [dontsInstructions, dosInstructions]
   });
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx("ul", {
     className: "tw-instructions",
     children: orderedInstructions
   });
@@ -7378,7 +7381,7 @@ function Instruction({
   type
 }) {
   const isInstructionNode = typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs("li", {
     className: "instruction",
     "aria-label": isInstructionNode ? item['aria-label'] : undefined,
     children: [type === 'do' ? /*#__PURE__*/jsx(CheckCircleFill, {
@@ -7859,7 +7862,7 @@ function contains(property, query) {
   return property && property.toLowerCase().includes(query.toLowerCase());
 }
 function sortOptionsLabelsToFirst(options, query) {
-  return options.sort((first, second) => {
+  return [...options].sort((first, second) => {
     const firstContains = contains(first.label, query);
     const secondContains = contains(second.label, query);
     if (firstContains && secondContains) {
@@ -12265,7 +12268,12 @@ class Typeahead extends Component {
       query = item.label;
     }
     this.updateSelectedValue(selected);
-    this.hideMenu();
+    if (!item.keepFocusOnSelect) {
+      this.hideMenu();
+    }
+    if (item.clearQueryOnSelect) {
+      query = '';
+    }
     this.setState({
       query
     });
@@ -12333,7 +12341,7 @@ class Typeahead extends Component {
       selected,
       errorState
     }, () => {
-      onChange(selected);
+      onChange([...selected]);
     });
   };
   clear = event => {
@@ -12492,10 +12500,10 @@ class Typeahead extends Component {
               children: /*#__PURE__*/jsx(Cross, {})
             })
           })]
-        }), displayAlert && /*#__PURE__*/jsx(InlineAlert, {
+        }), displayAlert ? /*#__PURE__*/jsx(InlineAlert, {
           type: alert.type,
           children: alert.message
-        }), menu]
+        }) : menu]
       })
     });
   }
@@ -13476,7 +13484,7 @@ const UploadButton = ({
     if (fileTypes === '*') {
       return fileTypes;
     }
-    return Array.isArray(fileTypes) ? getAllowedFileTypes(fileTypes).join(', ') : getAllowedFileTypes([fileTypes]).join(', ');
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
   };
   function getDescription() {
     if (description) {
@@ -13492,7 +13500,7 @@ const UploadButton = ({
   function getAcceptedTypes() {
     const areAllFilesAllowed = getFileTypesDescription() === '*';
     if (areAllFilesAllowed) {
-      return null; //file input by default allows all files
+      return {}; //file input by default allows all files
     }
     if (Array.isArray(fileTypes)) {
       return {
@@ -13958,7 +13966,7 @@ const UploadInput = ({
   }, []);
   useEffect(() => {
     if (onFilesChange && mounted) {
-      onFilesChange(uploadedFiles);
+      onFilesChange([...uploadedFiles]);
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
   return /*#__PURE__*/jsxs(Fragment, {