@transferwise/components 46.15.0 → 46.17.0

package/build/index.js

@@ -21,12 +21,11 @@ var reactPopper = require('react-popper');
 var throttle = require('lodash.throttle');
 var reactDom = require('react-dom');
 var neptuneValidation = require('@transferwise/neptune-validation');
+var commonmark = require('commonmark');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
 var requiredIf = require('react-required-if');
-var commonmark = require('commonmark');
-var difference = require('lodash.difference');
 var toPairs = require('lodash.topairs');
 var web = require('@react-spring/web');
 
@@ -56,11 +55,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
+var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
-var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
-var difference__default = /*#__PURE__*/_interopDefault(difference);
 var toPairs__default = /*#__PURE__*/_interopDefault(toPairs);
 
 class HistoryNavigator {
@@ -906,39 +904,32 @@ const writer = new commonmark__default.default.HtmlRenderer({
   safe: true
 });
 const NODE_TYPE_LIST = Object.values(exports.MarkdownNodeType);
-const Markdown = ({
-  as: Element,
-  children,
-  className,
+function Markdown({
+  as: Element = 'div',
   allowList,
   blockList,
-  config
-}) => {
+  config,
+  className,
+  children
+}) {
   if (!children) {
     return null;
   }
-  if (allowList?.length && blockList?.length) {
+  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.');
   }
   const parser = nodes => {
     const parsed = reader.parse(nodes);
-    if (allowList || blockList) {
-      const toExclude = allowList ? difference__default.default(NODE_TYPE_LIST, allowList) : blockList;
-      return stripNodes({
-        parsed,
-        blockList: toExclude
-      });
-    }
-    return parsed;
+    const toExclude = allowList != null ? NODE_TYPE_LIST.filter(type => !allowList.includes(type)) : blockList;
+    return toExclude != null ? stripNodes({
+      parsed,
+      blockList: toExclude
+    }) : parsed;
   };
   const createMarkup = () => {
-    const {
-      link: {
-        target
-      }
-    } = config;
     const parsed = parser(children);
-    return writer.render(parsed).replace(/<a href="/g, `<a target="${target}" href="`);
+    return writer.render(parsed).replace(/<a href="/g, `<a target="${linkTarget}" href="`);
   };
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     className: className,
@@ -946,7 +937,7 @@ const Markdown = ({
       __html: createMarkup()
     }
   });
-};
+}
 function stripNodes({
   blockList,
   parsed
@@ -955,51 +946,23 @@ function stripNodes({
     return parsed;
   }
   const walker = parsed.walker();
-  let event = walker.next();
-  while (event) {
+  for (let event = walker.next(); event != null; event = walker.next()) {
     const {
       node
     } = event;
-    if (blockList.includes(node.type)) {
-      if (!event.entering) {
-        while (node.firstChild) {
-          node.insertBefore(node.firstChild);
-        }
-        node.unlink();
+    if (blockList.includes(node.type) && !event.entering) {
+      while (node.firstChild != null) {
+        node.insertBefore(node.firstChild);
       }
+      node.unlink();
     }
-    event = walker.next();
   }
-  return walker.root;
+  return parsed;
 }
-Markdown.propTypes = {
-  children: PropTypes__default.default.string.isRequired,
-  as: PropTypes__default.default.string,
-  className: PropTypes__default.default.string,
-  allowList: PropTypes__default.default.arrayOf(PropTypes__default.default.oneOf(['block_quote', 'code_block', 'code', 'emph', 'heading', 'html_block', 'html_inline', 'image', 'item', 'linebreak', 'link', 'list', 'paragraph', 'softbreak', 'strong', 'thematic_break'])),
-  blockList: PropTypes__default.default.arrayOf(PropTypes__default.default.oneOf(['block_quote', 'code_block', 'code', 'emph', 'heading', 'html_block', 'html_inline', 'image', 'item', 'linebreak', 'link', 'list', 'paragraph', 'softbreak', 'strong', 'thematic_break'])),
-  config: PropTypes__default.default.shape({
-    link: PropTypes__default.default.shape({
-      target: PropTypes__default.default.oneOf(['_blank', '_self'])
-    })
-  })
-};
-Markdown.defaultProps = {
-  as: 'div',
-  className: undefined,
-  allowList: null,
-  blockList: null,
-  config: {
-    link: {
-      target: '_self'
-    }
-  }
-};
-var Markdown$1 = Markdown;
 
 const allowList = [exports.MarkdownNodeType.STRONG];
 const InlineMarkdown = props => {
-  return /*#__PURE__*/jsxRuntime.jsx(Markdown$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Markdown, {
     ...props,
     as: "span",
     allowList: allowList,
@@ -7416,23 +7379,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 +7427,6 @@ function Instruction({
     })]
   });
 }
-var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
   small = false,
@@ -7791,6 +7761,7 @@ class MoneyInput extends React.Component {
       size,
       addon,
       id,
+      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
@@ -7814,6 +7785,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,
@@ -15223,13 +15195,13 @@ 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;
 exports.Loader = Loader$1;
 exports.Logo = Logo$1;
-exports.Markdown = Markdown$1;
+exports.Markdown = Markdown;
 exports.Modal = Modal;
 exports.Money = Money$1;
 exports.MoneyInput = MoneyInput$1;