@transferwise/components 46.18.0 → 46.20.0

package/build/index.js

@@ -849,7 +849,7 @@ const StatusIcon = ({
   });
 };
 
-function logActionRequired$2(message) {
+function logActionRequired$1(message) {
   if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
     // eslint-disable-next-line no-console
     console.warn(message);
@@ -857,7 +857,7 @@ function logActionRequired$2(message) {
 }
 function logActionRequiredIf(message, conditional) {
   if (conditional) {
-    logActionRequired$2(message);
+    logActionRequired$1(message);
   }
 }
 
@@ -888,7 +888,7 @@ const deprecated = (validator, {
 }) => (props, propertyName, ...rest) => {
   const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
   if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
-    logActionRequired$2(deprecatedMessage({
+    logActionRequired$1(deprecatedMessage({
       component,
       propName: propertyName,
       message: newPropertyMessage,
@@ -917,7 +917,7 @@ function Markdown({
   }
   const linkTarget = config?.link?.target ?? '_self';
   if (allowList != null && blockList != null) {
-    logActionRequired$2('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
+    logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
   }
   const parser = nodes => {
     const parsed = reader.parse(nodes);
@@ -1069,7 +1069,7 @@ const Alert = props => {
       ...props
     });
   }
-  logActionRequired$1(props);
+  logActionRequired(props);
   const mappedType = deprecatedTypeMap$1[type] || type;
   const Icon = iconTypeMap[mappedType];
   function generateIcon() {
@@ -1152,7 +1152,7 @@ const deprecatedTypeMapMessage$1 = {
   [exports.Sentiment.ERROR]: 'Sentiment.NEGATIVE'
 };
 const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
-function logActionRequired$1({
+function logActionRequired({
   size,
   type
 }) {
@@ -2689,16 +2689,16 @@ const CircularButton = ({
   children,
   disabled,
   icon,
-  priority,
-  type,
+  priority = exports.Priority.PRIMARY,
+  type = exports.ControlType.ACCENT,
   ...rest
 }) => {
   const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
-  const iconElement = icon.props.size !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : icon;
   return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: classNames__default.default('np-circular-btn', priority, type, disabled ? 'disabled' : '', className),
+    className: classNames__default.default('np-circular-btn', priority, type, disabled && 'disabled', className),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       type: "button",
       "aria-label": children,
@@ -2713,22 +2713,6 @@ const CircularButton = ({
     })]
   });
 };
-CircularButton.propTypes = {
-  className: PropTypes__default.default.string,
-  children: PropTypes__default.default.string.isRequired,
-  disabled: PropTypes__default.default.bool,
-  icon: PropTypes__default.default.element.isRequired,
-  onClick: PropTypes__default.default.func,
-  priority: PropTypes__default.default.oneOf(['primary', 'secondary']),
-  type: PropTypes__default.default.oneOf(['accent', 'positive', 'negative'])
-};
-CircularButton.defaultProps = {
-  className: undefined,
-  disabled: false,
-  priority: exports.Priority.PRIMARY,
-  type: exports.ControlType.ACCENT
-};
-var CircularButton$1 = CircularButton;
 
 function getDayNames(locale, format = 'short') {
   const days = [];
@@ -3168,7 +3152,8 @@ const Panel = /*#__PURE__*/React.forwardRef(({
     onClose: onClose,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       ...rest,
-      ref: setPopperElement
+      ref: setPopperElement,
+      role: "dialog"
       // eslint-disable-next-line react/forbid-dom-props
       ,
       style: {
@@ -5301,6 +5286,7 @@ const Logo = ({
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     "aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise business',
+    role: "img",
     className: classNames__default.default(className, 'np-logo'),
     children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
       className: "np-logo-svg np-logo-svg--size-sm"
@@ -5824,22 +5810,33 @@ const Modal = ({
   });
 };
 
-const Popover$1 = ({
+function resolvePlacement(preferredPlacement) {
+  switch (preferredPlacement) {
+    case 'left-top':
+    case 'right-top':
+      return 'top';
+    case 'bottom-left':
+    case 'bottom-right':
+      return 'bottom';
+  }
+  return preferredPlacement;
+}
+function Popover$1({
   children,
   className,
   content,
-  preferredPlacement,
+  preferredPlacement = exports.Position.RIGHT,
   title,
   onClose
-}) => {
-  logActionRequired({
-    preferredPlacement
-  });
+}) {
+  const resolvedPlacement = resolvePlacement(preferredPlacement);
+  React.useEffect(() => {
+    if (resolvedPlacement !== preferredPlacement) {
+      logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
+    }
+  }, [preferredPlacement, resolvedPlacement]);
   const anchorReference = React.useRef(null);
   const [open, setOpen] = React.useState(false);
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const handleOnClose = () => {
     setOpen(false);
     onClose?.();
@@ -5849,25 +5846,21 @@ const Popover$1 = ({
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       ref: anchorReference,
       className: "d-inline-block",
-      children: /*#__PURE__*/React.cloneElement(children, {
+      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
         onClick: () => {
-          if (children?.props?.onClick) {
-            children.props.onClick();
-          }
-          setOpen(!open);
+          children.props.onClick?.();
+          setOpen(prevOpen => !prevOpen);
         }
-      })
+      }) : children
     }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel$1, {
       open: open,
       anchorRef: anchorReference,
-      position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
+      position: resolvedPlacement,
       arrow: true,
       className: "np-popover__container",
       onClose: handleOnClose,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
-        "aria-hidden": !open,
-        role: "dialog",
+        className: "np-popover__content np-text-default-body",
         children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
           type: exports.Typography.TITLE_BODY,
           className: "m-b-1",
@@ -5876,36 +5869,7 @@ const Popover$1 = ({
       })
     })]
   });
-};
-const logActionRequired = ({
-  preferredPlacement
-}) => {
-  logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
-};
-Popover$1.defaultProps = {
-  className: undefined,
-  preferredPlacement: exports.Position.RIGHT,
-  title: undefined
-};
-Popover$1.propTypes = {
-  children: PropTypes__default.default.node.isRequired,
-  className: PropTypes__default.default.string,
-  content: PropTypes__default.default.node.isRequired,
-  /**
-   * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
-   * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
-   */
-  preferredPlacement: PropTypes__default.default.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
-  onClose: PropTypes__default.default.func,
-  title: PropTypes__default.default.node
-};
-const deprecatedPlacements = {
-  [exports.Position.BOTTOM_LEFT]: exports.Position.BOTTOM,
-  [exports.Position.BOTTOM_RIGHT]: exports.Position.BOTTOM,
-  [exports.Position.LEFT_TOP]: exports.Position.TOP,
-  [exports.Position.RIGHT_TOP]: exports.Position.TOP
-};
-var Popover$2 = Popover$1;
+}
 
 var messages$6 = reactIntl.defineMessages({
   ariaLabel: {
@@ -5956,7 +5920,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$2, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$1, {
       content: content,
       preferredPlacement: preferredPlacement,
       title: title,
@@ -7012,14 +6976,13 @@ const getSymbolsInPatternWithPosition = pattern => {
   });
   return patternWithSymbolsPosition;
 };
-var getSymbolsInPatternWithPosition$1 = getSymbolsInPatternWithPosition;
 
 const formatWithPattern = (value, pattern) => {
   if (!value || value === '') {
     return '';
   }
   const valueArray = value.toString().split('');
-  const patternWithSymbolsPosition = getSymbolsInPatternWithPosition$1(pattern);
+  const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
   let patternSymbol = [];
   // valueArray.length increments during the cycle cause we are adding new elements.
   for (let index = 0; index < valueArray.length; index += 1) {
@@ -7034,7 +6997,6 @@ const formatWithPattern = (value, pattern) => {
   }
   return valueArray.join('');
 };
-var formatWithPattern$1 = formatWithPattern;
 
 const unformatWithPattern = (value, pattern) => {
   let valueArray = [''];
@@ -7045,18 +7007,16 @@ const unformatWithPattern = (value, pattern) => {
   return valueArray.join('');
 };
 const getSymbolsInPattern = pattern => pattern.split('').filter(symbol => symbol !== '*');
-var unformatWithPattern$1 = unformatWithPattern;
 
-const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition$1(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
-var getCountOfSymbolsInSelection$1 = getCountOfSymbolsInSelection;
+const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
 
 const getDistanceToNextSymbol = (selectionStart, pattern) => {
-  const patternArray = getSymbolsInPatternWithPosition$1(pattern);
+  const patternArray = getSymbolsInPatternWithPosition(pattern);
   const applicablePattern = patternArray.filter(symbol => symbol.index >= selectionStart);
   return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
 };
 const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
-  const patternArray = getSymbolsInPatternWithPosition$1(pattern);
+  const patternArray = getSymbolsInPatternWithPosition(pattern);
   const applicablePattern = patternArray.filter(symbol => symbol.index < selectionStart).reverse();
   return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
 };
@@ -7086,7 +7046,7 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
       }
       break;
     case 'Paste':
-      cursorPosition += pastedLength + getCountOfSymbolsInSelection$1(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
+      cursorPosition += pastedLength + getCountOfSymbolsInSelection(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
       break;
     case 'Cut':
     case 'Delete':
@@ -7097,7 +7057,6 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
   }
   return cursorPosition;
 };
-var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
 
 class WithDisplayFormat extends React.Component {
   static defaultProps = {
@@ -7107,9 +7066,9 @@ class WithDisplayFormat extends React.Component {
   };
   constructor(props) {
     super(props);
-    const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
+    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern$1(unformattedValue, props.displayPattern),
+      value: formatWithPattern(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator$1(),
       prevDisplayPattern: props.displayPattern,
       triggerType: 'Initial',
@@ -7127,11 +7086,11 @@ class WithDisplayFormat extends React.Component {
     historyNavigator
   }) {
     if (prevDisplayPattern !== displayPattern) {
-      const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
+      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
         prevDisplayPattern: displayPattern,
-        value: formatWithPattern$1(unFormattedValue, displayPattern),
+        value: formatWithPattern(unFormattedValue, displayPattern),
         triggerType: null,
         triggerEvent: null,
         pastedLength: 0
@@ -7161,7 +7120,7 @@ class WithDisplayFormat extends React.Component {
         return 'Delete';
       }
       // Android Fix.
-      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
         return 'Backspace';
       }
       return triggerEvent.key;
@@ -7199,13 +7158,13 @@ class WithDisplayFormat extends React.Component {
     // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
     let newFormattedValue = '';
     if (this.detectUndoRedo(event) === 'Undo') {
-      newFormattedValue = formatWithPattern$1(historyNavigator.undo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
       this.setState({
         value: newFormattedValue,
         triggerType: 'Undo'
       });
     } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern$1(historyNavigator.redo(), displayPattern);
+      newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
       this.setState({
         value: newFormattedValue,
         triggerType: 'Redo'
@@ -7223,7 +7182,7 @@ class WithDisplayFormat extends React.Component {
     const {
       displayPattern
     } = this.props;
-    const pastedLength = unformatWithPattern$1(event.clipboardData.getData('Text'), displayPattern).length;
+    const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
     this.setState({
       triggerType: 'Paste',
       pastedLength
@@ -7253,7 +7212,7 @@ class WithDisplayFormat extends React.Component {
     const {
       value
     } = event.target;
-    let unformattedValue = unformatWithPattern$1(value, displayPattern);
+    let unformattedValue = unformatWithPattern(value, displayPattern);
     const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
@@ -7261,7 +7220,7 @@ class WithDisplayFormat extends React.Component {
     if (action === 'Backspace' || action === 'Delete') {
       unformattedValue = this.handleDelete(unformattedValue, action);
     }
-    const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
+    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
     historyNavigator.add(unformattedValue);
     this.handleCursorPositioning(action);
     this.setState({
@@ -7269,13 +7228,13 @@ class WithDisplayFormat extends React.Component {
     }, () => {
       this.resetEvent();
       if (onChange) {
-        const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
+        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
         onChange(broadcastValue);
       }
     });
   };
   handleOnBlur = event => {
-    this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
+    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
   };
   handleOnFocus = event => {
     const {
@@ -7284,7 +7243,7 @@ class WithDisplayFormat extends React.Component {
     } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
-      onFocus(unformatWithPattern$1(event.target.value, displayPattern));
+      onFocus(unformatWithPattern(event.target.value, displayPattern));
     }
   };
   handleDelete = (unformattedValue, action) => {
@@ -7297,7 +7256,7 @@ class WithDisplayFormat extends React.Component {
     } = this.state;
     const newStack = [...unformattedValue];
     if (selectionStart === selectionEnd) {
-      let startPosition = selectionStart - getCountOfSymbolsInSelection$1(0, selectionStart, displayPattern);
+      let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
       let toDelete = 0;
       let count = getDistanceToNextSymbol(selectionStart, displayPattern);
       if (action === 'Backspace') {
@@ -7321,7 +7280,7 @@ class WithDisplayFormat extends React.Component {
       selectionEnd,
       pastedLength
     } = this.state;
-    const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
+    const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       if (triggerEvent) {
         triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
@@ -9435,6 +9394,7 @@ const defaultSelectProps = {};
 const defaultDisabledCountries = [];
 const PhoneNumberInput = ({
   id,
+  'aria-labelledby': ariaLabelledBy,
   required,
   disabled,
   initialValue,
@@ -9497,6 +9457,7 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "aria-labelledby": ariaLabelledBy,
     className: "tw-telephone",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "tw-telephone__country-select",
@@ -11123,6 +11084,8 @@ const Summary = ({
         className: "np-summary__title d-flex",
         children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
           as: "span",
+          role: "heading",
+          "aria-level": 4,
           type: exports.Typography.BODY_LARGE_BOLD,
           className: "text-primary m-b-1",
           children: title
@@ -11986,7 +11949,7 @@ class TypeaheadInput extends React.Component {
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -12008,7 +11971,7 @@ class TypeaheadInput extends React.Component {
       autoFocus: autoFocus,
       placeholder: hasPlaceholder ? placeholder : '',
       "aria-autocomplete": "list",
-      "aria-expanded": optionsShown,
+      "aria-expanded": dropdownOpen,
       "aria-haspopup": "listbox",
       "aria-controls": `menu-${typeaheadId}`,
       autoComplete: autoComplete,
@@ -12510,7 +12473,7 @@ class Typeahead extends React.Component {
           }), /*#__PURE__*/jsxRuntime.jsx(TypeaheadInput, {
             autoFocus,
             multiple,
-            optionsShown,
+            dropdownOpen,
             placeholder,
             selected,
             maxHeight,
@@ -15180,7 +15143,7 @@ exports.CheckboxOption = CheckboxOption;
 exports.Chevron = Chevron;
 exports.Chip = Chip;
 exports.Chips = Chips;
-exports.CircularButton = CircularButton$1;
+exports.CircularButton = CircularButton;
 exports.CriticalCommsBanner = CriticalCommsBanner;
 exports.DEFAULT_LANG = DEFAULT_LANG;
 exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
@@ -15219,7 +15182,7 @@ exports.Nudge = Nudge;
 exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput;
-exports.Popover = Popover$2;
+exports.Popover = Popover$1;
 exports.ProcessIndicator = ProcessIndicator$1;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;