@transferwise/components 46.14.0 → 46.16.0

package/build/index.js

@@ -7416,23 +7416,31 @@ const InputWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDisplayF
 
 const InstructionsList = ({
   dos,
-  donts
+  donts,
+  sort = 'dosFirst'
 }) => {
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  const dosInstructions = dos?.map((doThis, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  jsxRuntime.jsx(Instruction, {
+    item: doThis,
+    type: "do"
+  }, index)) ?? null;
+  const dontsInstructions = donts?.map((dont, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  jsxRuntime.jsx(Instruction, {
+    item: dont,
+    type: "dont"
+  }, index)) ?? null;
+  const orderedInstructions = sort === 'dosFirst' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [dosInstructions, dontsInstructions]
+  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [dontsInstructions, dosInstructions]
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "tw-instructions",
-    children: [dos && dos.map((doThis, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    jsxRuntime.jsx(Instruction, {
-      item: doThis,
-      type: "do"
-    }, index)), donts && donts.map((dont, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    jsxRuntime.jsx(Instruction, {
-      item: dont,
-      type: "dont"
-    }, index))]
+    children: orderedInstructions
   });
 };
 function Instruction({
@@ -7456,7 +7464,6 @@ function Instruction({
     })]
   });
 }
-var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
   small = false,
@@ -7791,6 +7798,7 @@ class MoneyInput extends React.Component {
       size,
       addon,
       id,
+      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
@@ -7814,6 +7822,7 @@ class MoneyInput extends React.Component {
     const isFixedCurrency = !this.state.searchQuery && hasSingleCurrency() || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "aria-labelledby": ariaLabelledBy,
       className: classNames__default.default(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
       children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
         id: id,
@@ -9972,54 +9981,42 @@ Provider.defaultProps = {
 };
 var Provider$1 = Provider;
 
-const RadioButton = ({
+function RadioButton({
   id,
-  value,
+  value = '',
   name,
   checked,
   onChange,
   disabled,
   readOnly
-}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-    type: "radio",
-    className: "sr-only",
-    id: id,
-    value: value,
-    name: name,
-    checked: checked,
-    disabled: disabled || readOnly,
-    onChange: () => !checked ? onChange(value) : null
-  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: classNames__default.default('tw-radio-button', {
-      checked,
-      disabled: disabled || readOnly
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "tw-radio-check"
-    })
-  })]
-});
-RadioButton.propTypes = {
-  id: PropTypes__default.default.string,
-  name: PropTypes__default.default.string.isRequired,
-  checked: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func,
-  disabled: PropTypes__default.default.bool,
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  readOnly: PropTypes__default.default.bool
-};
-RadioButton.defaultProps = {
-  checked: false,
-  onChange: () => {},
-  disabled: false,
-  id: null,
-  value: '',
-  readOnly: false
-};
-var RadioButton$1 = RadioButton;
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "radio",
+      className: "sr-only",
+      id: id,
+      value: value,
+      name: name,
+      checked: checked,
+      disabled: disabled || readOnly,
+      onChange: () => {
+        if (!checked) {
+          onChange?.(value);
+        }
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: classNames__default.default('tw-radio-button', {
+        checked,
+        disabled: disabled || readOnly
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "tw-radio-check"
+      })
+    })]
+  });
+}
 
-const Radio = ({
+function Radio({
   label,
   id,
   disabled,
@@ -10027,7 +10024,7 @@ const Radio = ({
   avatar,
   secondary,
   ...otherProps
-}) => {
+}) {
   const {
     isModern
   } = componentsTheming.useTheme();
@@ -10043,7 +10040,7 @@ const Radio = ({
       htmlFor: id,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: classNames__default.default(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button'),
-        children: /*#__PURE__*/jsxRuntime.jsx(RadioButton$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
           id: id,
           disabled: disabled,
           ...otherProps
@@ -10065,100 +10062,36 @@ const Radio = ({
       })]
     })
   });
-};
-Radio.propTypes = {
-  avatar: PropTypes__default.default.element,
-  checked: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
-  id: PropTypes__default.default.string,
-  label: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  onChange: PropTypes__default.default.func.isRequired,
-  secondary: PropTypes__default.default.string,
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  className: PropTypes__default.default.string
-};
-Radio.defaultProps = {
-  avatar: undefined,
-  checked: false,
-  disabled: false,
-  id: null,
-  secondary: null,
-  value: '',
-  className: undefined
-};
-var Radio$1 = Radio;
+}
 
-class RadioGroup extends React.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__*/jsxRuntime.jsx("div", {
-      role: "radiogroup",
-      children: radios.map(({
-        id,
-        avatar,
-        value,
-        label,
-        disabled,
-        secondary,
-        readOnly
-      }, index) => /*#__PURE__*/jsxRuntime.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] = React.useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "radiogroup",
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsxRuntime.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__default.default.arrayOf(PropTypes__default.default.shape({
-    id: PropTypes__default.default.string,
-    avatar: PropTypes__default.default.element,
-    value: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-    secondary: PropTypes__default.default.string,
-    label: PropTypes__default.default.string.isRequired,
-    disabled: PropTypes__default.default.bool,
-    readOnly: PropTypes__default.default.bool
-  })).isRequired,
-  onChange: PropTypes__default.default.func.isRequired,
-  selectedValue: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
-  name: PropTypes__default.default.string.isRequired
-};
-RadioGroup.defaultProps = {
-  selectedValue: null
-};
-var RadioGroup$1 = RadioGroup;
 
-const RadioOption = ({
+function RadioOption({
   'aria-label': ariaLabel,
   media,
   title,
@@ -10173,22 +10106,19 @@ const RadioOption = ({
   showMediaCircle,
   showMediaAtAllSizes,
   isContainerAligned
-}) => {
-  const sharedProps = {
-    'aria-label': ariaLabel,
-    media,
-    title,
-    content,
-    name,
-    complex,
-    disabled,
-    showMediaCircle,
-    showMediaAtAllSizes,
-    isContainerAligned
-  };
+}) {
   return /*#__PURE__*/jsxRuntime.jsx(Option$2, {
-    ...sharedProps,
-    button: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(RadioButton, {
       id: id,
       name: name,
       checked: checked,
@@ -10197,36 +10127,7 @@ const RadioOption = ({
       onChange: onChange
     })
   });
-};
-RadioOption.propTypes = {
-  'aria-label': PropTypes__default.default.string,
-  media: PropTypes__default.default.node,
-  id: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  title: PropTypes__default.default.node.isRequired,
-  content: PropTypes__default.default.node,
-  checked: PropTypes__default.default.bool,
-  onChange: PropTypes__default.default.func.isRequired,
-  complex: PropTypes__default.default.bool,
-  disabled: PropTypes__default.default.bool,
-  value: PropTypes__default.default.string,
-  showMediaCircle: PropTypes__default.default.bool,
-  showMediaAtAllSizes: PropTypes__default.default.bool,
-  isContainerAligned: PropTypes__default.default.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,
@@ -15331,7 +15232,7 @@ exports.InlineAlert = InlineAlert;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.InputWithDisplayFormat = InputWithDisplayFormat;
-exports.InstructionsList = InstructionsList$1;
+exports.InstructionsList = InstructionsList;
 exports.LanguageProvider = LanguageProvider;
 exports.Link = Link;
 exports.ListItem = ListItem$1;
@@ -15355,9 +15256,9 @@ exports.PromoCard = PromoCard$1;
 exports.PromoCardGroup = PromoCard$1;
 exports.Provider = Provider$1;
 exports.RTL_LANGUAGES = RTL_LANGUAGES;
-exports.Radio = Radio$1;
-exports.RadioGroup = RadioGroup$1;
-exports.RadioOption = RadioOption$1;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.RadioOption = RadioOption;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 exports.SearchInput = SearchInput;
 exports.Section = Section;