@transferwise/components 46.14.0 → 46.16.0

package/build/index.esm.js

@@ -7382,23 +7382,31 @@ const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
 
 const InstructionsList = ({
   dos,
-  donts
+  donts,
+  sort = 'dosFirst'
 }) => {
-  return /*#__PURE__*/jsxs("div", {
+  const dosInstructions = dos?.map((doThis, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  jsx(Instruction, {
+    item: doThis,
+    type: "do"
+  }, index)) ?? null;
+  const dontsInstructions = donts?.map((dont, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  jsx(Instruction, {
+    item: dont,
+    type: "dont"
+  }, index)) ?? null;
+  const orderedInstructions = sort === 'dosFirst' ? /*#__PURE__*/jsxs(Fragment, {
+    children: [dosInstructions, dontsInstructions]
+  }) : /*#__PURE__*/jsxs(Fragment, {
+    children: [dontsInstructions, dosInstructions]
+  });
+  return /*#__PURE__*/jsx("div", {
     className: "tw-instructions",
-    children: [dos && dos.map((doThis, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    jsx(Instruction, {
-      item: doThis,
-      type: "do"
-    }, index)), donts && donts.map((dont, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    jsx(Instruction, {
-      item: dont,
-      type: "dont"
-    }, index))]
+    children: orderedInstructions
   });
 };
 function Instruction({
@@ -7422,7 +7430,6 @@ function Instruction({
     })]
   });
 }
-var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
   small = false,
@@ -7757,6 +7764,7 @@ class MoneyInput extends Component {
       size,
       addon,
       id,
+      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
@@ -7780,6 +7788,7 @@ class MoneyInput extends Component {
     const isFixedCurrency = !this.state.searchQuery && hasSingleCurrency() || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
     return /*#__PURE__*/jsxs("div", {
+      "aria-labelledby": ariaLabelledBy,
       className: classNames(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
       children: [/*#__PURE__*/jsx(Input, {
         id: id,
@@ -9938,54 +9947,42 @@ Provider.defaultProps = {
 };
 var Provider$1 = Provider;
 
-const RadioButton = ({
+function RadioButton({
   id,
-  value,
+  value = '',
   name,
   checked,
   onChange,
   disabled,
   readOnly
-}) => /*#__PURE__*/jsxs(Fragment, {
-  children: [/*#__PURE__*/jsx("input", {
-    type: "radio",
-    className: "sr-only",
-    id: id,
-    value: value,
-    name: name,
-    checked: checked,
-    disabled: disabled || readOnly,
-    onChange: () => !checked ? onChange(value) : null
-  }), /*#__PURE__*/jsx("span", {
-    className: classNames('tw-radio-button', {
-      checked,
-      disabled: disabled || readOnly
-    }),
-    children: /*#__PURE__*/jsx("span", {
-      className: "tw-radio-check"
-    })
-  })]
-});
-RadioButton.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  readOnly: PropTypes.bool
-};
-RadioButton.defaultProps = {
-  checked: false,
-  onChange: () => {},
-  disabled: false,
-  id: null,
-  value: '',
-  readOnly: false
-};
-var RadioButton$1 = RadioButton;
+}) {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("input", {
+      type: "radio",
+      className: "sr-only",
+      id: id,
+      value: value,
+      name: name,
+      checked: checked,
+      disabled: disabled || readOnly,
+      onChange: () => {
+        if (!checked) {
+          onChange?.(value);
+        }
+      }
+    }), /*#__PURE__*/jsx("span", {
+      className: classNames('tw-radio-button', {
+        checked,
+        disabled: disabled || readOnly
+      }),
+      children: /*#__PURE__*/jsx("span", {
+        className: "tw-radio-check"
+      })
+    })]
+  });
+}
 
-const Radio = ({
+function Radio({
   label,
   id,
   disabled,
@@ -9993,7 +9990,7 @@ const Radio = ({
   avatar,
   secondary,
   ...otherProps
-}) => {
+}) {
   const {
     isModern
   } = useTheme();
@@ -10009,7 +10006,7 @@ const Radio = ({
       htmlFor: id,
       children: [/*#__PURE__*/jsx("span", {
         className: classNames(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button'),
-        children: /*#__PURE__*/jsx(RadioButton$1, {
+        children: /*#__PURE__*/jsx(RadioButton, {
           id: id,
           disabled: disabled,
           ...otherProps
@@ -10031,100 +10028,36 @@ const Radio = ({
       })]
     })
   });
-};
-Radio.propTypes = {
-  avatar: PropTypes.element,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  secondary: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string
-};
-Radio.defaultProps = {
-  avatar: undefined,
-  checked: false,
-  disabled: false,
-  id: null,
-  secondary: null,
-  value: '',
-  className: undefined
-};
-var Radio$1 = Radio;
+}
 
-class RadioGroup extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedValue: props.selectedValue
-    };
-  }
-  handleOnChange = selectedValue => {
-    const {
-      onChange
-    } = this.props;
-    this.setState({
-      selectedValue
-    }, onChange && onChange(selectedValue));
-  };
-  render() {
-    const {
-      radios,
-      name
-    } = this.props;
-    const {
-      selectedValue
-    } = this.state;
-    return radios && radios.length > 0 ? /*#__PURE__*/jsx("div", {
-      role: "radiogroup",
-      children: radios.map(({
-        id,
-        avatar,
-        value,
-        label,
-        disabled,
-        secondary,
-        readOnly
-      }, index) => /*#__PURE__*/jsx(Radio$1
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        id: id,
-        value: value,
-        label: label,
-        name: name,
-        disabled: disabled,
-        checked: selectedValue === value,
-        secondary: secondary,
-        readOnly: readOnly,
-        avatar: avatar,
-        onChange: value_ => this.handleOnChange(value_)
-      }, index))
-    }) : null;
-  }
+function RadioGroup({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsx("div", {
+    role: "radiogroup",
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsx(Radio
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...restProps,
+      name: name,
+      value: value,
+      checked: value === uncontrolledValue,
+      onChange: nextValue => {
+        setUncontrolledValue(nextValue);
+        onChange(nextValue);
+      }
+    }, index))
+  }) : null;
 }
-RadioGroup.propTypes = {
-  radios: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    avatar: PropTypes.element,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    secondary: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    readOnly: PropTypes.bool
-  })).isRequired,
-  onChange: PropTypes.func.isRequired,
-  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  name: PropTypes.string.isRequired
-};
-RadioGroup.defaultProps = {
-  selectedValue: null
-};
-var RadioGroup$1 = RadioGroup;
 
-const RadioOption = ({
+function RadioOption({
   'aria-label': ariaLabel,
   media,
   title,
@@ -10139,22 +10072,19 @@ const RadioOption = ({
   showMediaCircle,
   showMediaAtAllSizes,
   isContainerAligned
-}) => {
-  const sharedProps = {
-    'aria-label': ariaLabel,
-    media,
-    title,
-    content,
-    name,
-    complex,
-    disabled,
-    showMediaCircle,
-    showMediaAtAllSizes,
-    isContainerAligned
-  };
+}) {
   return /*#__PURE__*/jsx(Option$2, {
-    ...sharedProps,
-    button: /*#__PURE__*/jsx(RadioButton$1, {
+    "aria-label": ariaLabel,
+    media: media,
+    title: title,
+    content: content,
+    name: name,
+    complex: complex,
+    disabled: disabled,
+    showMediaCircle: showMediaCircle,
+    showMediaAtAllSizes: showMediaAtAllSizes,
+    isContainerAligned: isContainerAligned,
+    button: /*#__PURE__*/jsx(RadioButton, {
       id: id,
       name: name,
       checked: checked,
@@ -10163,36 +10093,7 @@ const RadioOption = ({
       onChange: onChange
     })
   });
-};
-RadioOption.propTypes = {
-  'aria-label': PropTypes.string,
-  media: PropTypes.node,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  content: PropTypes.node,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  complex: PropTypes.bool,
-  disabled: PropTypes.bool,
-  value: PropTypes.string,
-  showMediaCircle: PropTypes.bool,
-  showMediaAtAllSizes: PropTypes.bool,
-  isContainerAligned: PropTypes.bool
-};
-RadioOption.defaultProps = {
-  'aria-label': undefined,
-  media: null,
-  content: null,
-  checked: false,
-  complex: false,
-  disabled: false,
-  showMediaCircle: true,
-  showMediaAtAllSizes: false,
-  isContainerAligned: false,
-  value: ''
-};
-var RadioOption$1 = RadioOption;
+}
 
 const Section = ({
   children,
@@ -15256,5 +15157,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$1 as InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as 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$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as 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$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$1 as 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