@transferwise/components 46.17.3 → 46.19.0

package/build/index.js

@@ -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 = [];
@@ -4272,6 +4256,7 @@ class DateLookup extends React.PureComponent {
     return /*#__PURE__*/jsxRuntime.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,
@@ -4296,6 +4281,7 @@ class DateLookup extends React.PureComponent {
   }
 }
 DateLookup.propTypes = {
+  id: PropTypes__default.default.string,
   value: PropTypes__default.default.instanceOf(Date),
   min: PropTypes__default.default.instanceOf(Date),
   max: PropTypes__default.default.instanceOf(Date),
@@ -7402,7 +7388,7 @@ const InstructionsList = ({
   }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [dontsInstructions, dosInstructions]
   });
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("ul", {
     className: "tw-instructions",
     children: orderedInstructions
   });
@@ -7412,7 +7398,7 @@ function Instruction({
   type
 }) {
   const isInstructionNode = typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("li", {
     className: "instruction",
     "aria-label": isInstructionNode ? item['aria-label'] : undefined,
     children: [type === 'do' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
@@ -9433,6 +9419,7 @@ const defaultSelectProps = {};
 const defaultDisabledCountries = [];
 const PhoneNumberInput = ({
   id,
+  'aria-labelledby': ariaLabelledBy,
   required,
   disabled,
   initialValue,
@@ -9495,6 +9482,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",
@@ -11121,6 +11109,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
@@ -11984,7 +11974,7 @@ class TypeaheadInput extends React.Component {
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -12006,7 +11996,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,
@@ -12299,7 +12289,12 @@ class Typeahead extends React.Component {
       query = item.label;
     }
     this.updateSelectedValue(selected);
-    this.hideMenu();
+    if (!item.keepFocusOnSelect) {
+      this.hideMenu();
+    }
+    if (item.clearQueryOnSelect) {
+      query = '';
+    }
     this.setState({
       query
     });
@@ -12503,7 +12498,7 @@ class Typeahead extends React.Component {
           }), /*#__PURE__*/jsxRuntime.jsx(TypeaheadInput, {
             autoFocus,
             multiple,
-            optionsShown,
+            dropdownOpen,
             placeholder,
             selected,
             maxHeight,
@@ -12526,10 +12521,10 @@ class Typeahead extends React.Component {
               children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
             })
           })]
-        }), displayAlert && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+        }), displayAlert ? /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
           type: alert.type,
           children: alert.message
-        }), menu]
+        }) : menu]
       })
     });
   }
@@ -15173,7 +15168,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;