@transferwise/components 46.17.3 → 46.19.0

package/build/index.esm.js

@@ -2656,16 +2656,16 @@ const CircularButton = ({
   children,
   disabled,
   icon,
-  priority,
-  type,
+  priority = Priority.PRIMARY,
+  type = ControlType.ACCENT,
   ...rest
 }) => {
   const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
-  const iconElement = icon.props.size !== 24 ? /*#__PURE__*/cloneElement(icon, {
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
     size: 24
   }) : icon;
   return /*#__PURE__*/jsxs("label", {
-    className: classNames('np-circular-btn', priority, type, disabled ? 'disabled' : '', className),
+    className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
     children: [/*#__PURE__*/jsx("input", {
       type: "button",
       "aria-label": children,
@@ -2680,22 +2680,6 @@ const CircularButton = ({
     })]
   });
 };
-CircularButton.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  icon: PropTypes.element.isRequired,
-  onClick: PropTypes.func,
-  priority: PropTypes.oneOf(['primary', 'secondary']),
-  type: PropTypes.oneOf(['accent', 'positive', 'negative'])
-};
-CircularButton.defaultProps = {
-  className: undefined,
-  disabled: false,
-  priority: Priority.PRIMARY,
-  type: ControlType.ACCENT
-};
-var CircularButton$1 = CircularButton;
 
 function getDayNames(locale, format = 'short') {
   const days = [];
@@ -4239,6 +4223,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 +4248,7 @@ class DateLookup extends PureComponent {
   }
 }
 DateLookup.propTypes = {
+  id: PropTypes.string,
   value: PropTypes.instanceOf(Date),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),
@@ -7369,7 +7355,7 @@ const InstructionsList = ({
   }) : /*#__PURE__*/jsxs(Fragment, {
     children: [dontsInstructions, dosInstructions]
   });
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx("ul", {
     className: "tw-instructions",
     children: orderedInstructions
   });
@@ -7379,7 +7365,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, {
@@ -9400,6 +9386,7 @@ const defaultSelectProps = {};
 const defaultDisabledCountries = [];
 const PhoneNumberInput = ({
   id,
+  'aria-labelledby': ariaLabelledBy,
   required,
   disabled,
   initialValue,
@@ -9462,6 +9449,7 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxs("div", {
+    "aria-labelledby": ariaLabelledBy,
     className: "tw-telephone",
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-telephone__country-select",
@@ -11088,6 +11076,8 @@ const Summary = ({
         className: "np-summary__title d-flex",
         children: [/*#__PURE__*/jsx(Body, {
           as: "span",
+          role: "heading",
+          "aria-level": 4,
           type: Typography.BODY_LARGE_BOLD,
           className: "text-primary m-b-1",
           children: title
@@ -11951,7 +11941,7 @@ class TypeaheadInput extends Component {
       autoFocus,
       multiple,
       name,
-      optionsShown,
+      dropdownOpen,
       placeholder,
       selected,
       value,
@@ -11973,7 +11963,7 @@ class TypeaheadInput extends Component {
       autoFocus: autoFocus,
       placeholder: hasPlaceholder ? placeholder : '',
       "aria-autocomplete": "list",
-      "aria-expanded": optionsShown,
+      "aria-expanded": dropdownOpen,
       "aria-haspopup": "listbox",
       "aria-controls": `menu-${typeaheadId}`,
       autoComplete: autoComplete,
@@ -12266,7 +12256,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
     });
@@ -12470,7 +12465,7 @@ class Typeahead extends Component {
           }), /*#__PURE__*/jsx(TypeaheadInput, {
             autoFocus,
             multiple,
-            optionsShown,
+            dropdownOpen,
             placeholder,
             selected,
             maxHeight,
@@ -12493,10 +12488,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]
       })
     });
   }
@@ -15122,5 +15117,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.esm.js.map