@transferwise/components 46.15.0 → 46.17.0

package/build/index.esm.js

@@ -20,12 +20,11 @@ import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { createPortal } from 'react-dom';
 import { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
+import commonmark from 'commonmark';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import requiredIf from 'react-required-if';
-import commonmark from 'commonmark';
-import difference from 'lodash.difference';
 import toPairs from 'lodash.topairs';
 import { Spring, animated } from '@react-spring/web';
 
@@ -872,39 +871,32 @@ const writer = new commonmark.HtmlRenderer({
   safe: true
 });
 const NODE_TYPE_LIST = Object.values(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(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__*/jsx(Element, {
     className: className,
@@ -912,7 +904,7 @@ const Markdown = ({
       __html: createMarkup()
     }
   });
-};
+}
 function stripNodes({
   blockList,
   parsed
@@ -921,51 +913,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.string.isRequired,
-  as: PropTypes.string,
-  className: PropTypes.string,
-  allowList: PropTypes.arrayOf(PropTypes.oneOf(['block_quote', 'code_block', 'code', 'emph', 'heading', 'html_block', 'html_inline', 'image', 'item', 'linebreak', 'link', 'list', 'paragraph', 'softbreak', 'strong', 'thematic_break'])),
-  blockList: PropTypes.arrayOf(PropTypes.oneOf(['block_quote', 'code_block', 'code', 'emph', 'heading', 'html_block', 'html_inline', 'image', 'item', 'linebreak', 'link', 'list', 'paragraph', 'softbreak', 'strong', 'thematic_break'])),
-  config: PropTypes.shape({
-    link: PropTypes.shape({
-      target: PropTypes.oneOf(['_blank', '_self'])
-    })
-  })
-};
-Markdown.defaultProps = {
-  as: 'div',
-  className: undefined,
-  allowList: null,
-  blockList: null,
-  config: {
-    link: {
-      target: '_self'
-    }
-  }
-};
-var Markdown$1 = Markdown;
 
 const allowList = [MarkdownNodeType.STRONG];
 const InlineMarkdown = props => {
-  return /*#__PURE__*/jsx(Markdown$1, {
+  return /*#__PURE__*/jsx(Markdown, {
     ...props,
     as: "span",
     allowList: allowList,
@@ -7382,23 +7346,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 +7394,6 @@ function Instruction({
     })]
   });
 }
-var InstructionsList$1 = InstructionsList;
 
 const Loader = ({
   small = false,
@@ -7757,6 +7728,7 @@ class MoneyInput extends Component {
       size,
       addon,
       id,
+      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
@@ -7780,6 +7752,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,
@@ -15148,5 +15121,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, 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$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 };
 //# sourceMappingURL=index.esm.js.map