@transferwise/components 0.0.0-experimental-dad811d → 0.0.0-experimental-36cf7cb

package/build/index.js

@@ -549,108 +549,8 @@ const Chevron = ({
   });
 };
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.AvatarType = void 0;
-(function (AvatarType) {
-  AvatarType["THUMBNAIL"] = "thumbnail";
-  AvatarType["ICON"] = "icon";
-  AvatarType["EMOJI"] = "emoji";
-  AvatarType["INITIALS"] = "initials";
-})(exports.AvatarType || (exports.AvatarType = {}));
-
-/*
- * The colors we support generating an Avatar background color from a "seed" for.
- * Changing this array will change the assignment between seeds.
- * Do not change this array.
- */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
-/*
- * Takes in a "seed" string and spits out an index for the color we should use.
- * This implementation has been synced across all three clients so that we consistently
- * generate branded avatar colors when rendering a list of Avatars.
- * Do not change this implementation.
- */
-const hashSeed = seed => {
-  const base = 31;
-  const modulo = avatarColors.length;
-  let hashValue = 0;
-  let basePow = 1;
-  for (let i = 0; i < seed.length; i++) {
-    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
-    basePow = basePow * base % modulo;
-  }
-  return hashValue;
-};
-const getAvatarColorFromSeed = seed => {
-  return avatarColors[hashSeed(seed)];
-};
-
-const backwardsCompatibleSize = size => {
-  switch (size) {
-    case 'sm':
-      return 24;
-    case 'md':
-      return 48;
-    case 'lg':
-      return 72;
-    default:
-      return size;
-  }
-};
-const Avatar = ({
-  backgroundColor = null,
-  backgroundColorSeed = null,
-  children = null,
-  className,
-  outlined = false,
-  size: sizeFromProps = 48,
-  theme = exports.Theme.LIGHT,
-  type = 'thumbnail'
-}) => {
-  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
-  const size = backwardsCompatibleSize(sizeFromProps);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
-      'tw-avatar--outlined': outlined,
-      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-      'np-text-title-body': type === 'initials'
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "tw-avatar__content",
-      style: {
-        backgroundColor: backgroundColor || backgroundColorFromSeed
-      },
-      children: children
-    })
-  });
-};
-
-const Badge = ({
-  badge,
-  className = undefined,
-  size = exports.Size.SMALL,
-  border = exports.Theme.LIGHT,
-  children
-}) => {
-  const classes = classNames__default.default('tw-badge', {
-    [`tw-badge-border-${border}`]: border,
-    [`tw-badge-${size}`]: size
-  }, className);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classes,
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "tw-badge__children",
-      children: children
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "tw-badge__content",
-      children: badge
-    })]
-  });
-};
-
 const Option$2 = /*#__PURE__*/React.forwardRef(({
   media = '',
-  badgeContentIcon = '',
   title,
   content,
   as: component,
@@ -681,13 +581,7 @@ const Option$2 = /*#__PURE__*/React.forwardRef(({
       className: "media",
       children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "media-left",
-        children: badgeContentIcon ? /*#__PURE__*/jsxRuntime.jsx(Badge, {
-          badge: badgeContentIcon,
-          children: /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-            type: "icon",
-            children: media
-          })
-        }) : showMediaCircle ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: showMediaCircle ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: classNames__default.default('circle circle-sm text-primary', {
             'circle-inverse': inverseMediaCircle
           }),
@@ -1355,6 +1249,105 @@ Alert.defaultProps = {
 };
 var Alert$1 = Alert;
 
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+exports.AvatarType = void 0;
+(function (AvatarType) {
+  AvatarType["THUMBNAIL"] = "thumbnail";
+  AvatarType["ICON"] = "icon";
+  AvatarType["EMOJI"] = "emoji";
+  AvatarType["INITIALS"] = "initials";
+})(exports.AvatarType || (exports.AvatarType = {}));
+
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */
+const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */
+const hashSeed = seed => {
+  const base = 31;
+  const modulo = avatarColors.length;
+  let hashValue = 0;
+  let basePow = 1;
+  for (let i = 0; i < seed.length; i++) {
+    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
+    basePow = basePow * base % modulo;
+  }
+  return hashValue;
+};
+const getAvatarColorFromSeed = seed => {
+  return avatarColors[hashSeed(seed)];
+};
+
+const backwardsCompatibleSize = size => {
+  switch (size) {
+    case 'sm':
+      return 24;
+    case 'md':
+      return 48;
+    case 'lg':
+      return 72;
+    default:
+      return size;
+  }
+};
+const Avatar = ({
+  backgroundColor = null,
+  backgroundColorSeed = null,
+  children = null,
+  className,
+  outlined = false,
+  size: sizeFromProps = 48,
+  theme = exports.Theme.LIGHT,
+  type = 'thumbnail'
+}) => {
+  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const size = backwardsCompatibleSize(sizeFromProps);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames__default.default('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
+      'tw-avatar--outlined': outlined,
+      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
+      'np-text-title-body': type === 'initials'
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-avatar__content",
+      style: {
+        backgroundColor: backgroundColor || backgroundColorFromSeed
+      },
+      children: children
+    })
+  });
+};
+
+const Badge = ({
+  badge,
+  className = undefined,
+  size = exports.Size.SMALL,
+  border = exports.Theme.LIGHT,
+  children
+}) => {
+  const classes = classNames__default.default('tw-badge', {
+    [`tw-badge-border-${border}`]: border,
+    [`tw-badge-${size}`]: size
+  }, className);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-badge__children",
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "tw-badge__content",
+      children: badge
+    })]
+  });
+};
+
 const OptionalBadge = ({
   url,
   altText,
@@ -2399,7 +2392,6 @@ const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
     children,
     onClick,
     icon,
-    badgeContentIcon,
     id,
     className,
     ...rest
@@ -2419,7 +2411,6 @@ const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
       as: children ? 'button' : 'div',
       className: classNames__default.default('np-card__button'),
       media: icon,
-      badgeContentIcon: badgeContentIcon,
       title: title,
       content: details,
       showMediaAtAllSizes: true,
@@ -2450,7 +2441,6 @@ Card$1.propTypes = {
   details: PropTypes__default.default.node.isRequired,
   onClick: requiredIf__default.default(PropTypes__default.default.func, hasChildren),
   icon: PropTypes__default.default.node,
-  badgeContentIcon: PropTypes__default.default.node,
   children: PropTypes__default.default.node,
   id: PropTypes__default.default.string,
   className: PropTypes__default.default.string,
@@ -4310,6 +4300,7 @@ class DateLookup extends React.PureComponent {
       size,
       placeholder,
       label,
+      'aria-labelledby': ariaLabelledBy,
       monthFormat,
       disabled,
       clearable,
@@ -4318,6 +4309,7 @@ class DateLookup extends React.PureComponent {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref: this.element,
+      "aria-labelledby": ariaLabelledBy,
       className: "input-group",
       onKeyDown: this.handleKeyDown,
       children: [/*#__PURE__*/jsxRuntime.jsx(DateTrigger$1, {
@@ -4347,6 +4339,7 @@ DateLookup.propTypes = {
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
   placeholder: PropTypes__default.default.string,
   label: PropTypes__default.default.string,
+  'aria-labelledby': PropTypes__default.default.string,
   monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
   disabled: PropTypes__default.default.bool,
   onChange: PropTypes__default.default.func.isRequired,
@@ -4369,19 +4362,6 @@ DateLookup.defaultProps = {
 };
 var DateLookup$1 = DateLookup;
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.DecisionPresentation = void 0;
-(function (Presentation) {
-  Presentation["LIST"] = "LIST";
-  Presentation["LIST_BLOCK"] = "LIST_BLOCK";
-  Presentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
-})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.DecisionType = void 0;
-(function (Type) {
-  Type["NAVIGATION"] = "NAVIGATION";
-})(exports.DecisionType || (exports.DecisionType = {}));
-
 const NavigationOption = /*#__PURE__*/React.forwardRef(({
   as: component = 'button',
   disabled = false,
@@ -4415,70 +4395,6 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const Layout = {
-  COLUMN: 'COLUMN'
-};
-const SizeSwapper = /*#__PURE__*/React.forwardRef(({
-  items,
-  inline
-}, reference) => {
-  const parentReference = React.useRef(null);
-  const [clientWidth] = useClientWidth({
-    ref: reference || parentReference
-  });
-  if (!items || items.length === 0) {
-    return null;
-  }
-  // If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
-  // Do not use deconstruct here to get items and layout.
-  let itemsToRender = [];
-  if (clientWidth) {
-    itemsToRender = items.filter(({
-      breakpoint = 0
-    }) => clientWidth >= breakpoint).pop();
-  } else {
-    // On SSR environments useClientWidth returns null because ref is undefined so we render
-    // all elements by default.
-    // If there's no SSR and on first Hydration only the right elements are going to be rendered.
-    // If clientWidth is null or zero all elements render like a responsive technique would do.
-    itemsToRender.items = items.map(({
-      items
-    }) => Object.values(items));
-  }
-
-  // Always return parent container even if there are no items to display to
-  // keep the ref on DOM and let clientWidth be calculated properly.
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: parentReference,
-    className: classNames__default.default('np-size-swapper', {
-      'd-flex': !inline,
-      'd-inline-flex': inline,
-      'flex-column': itemsToRender && itemsToRender.layout === Layout.COLUMN,
-      'flex-wrap': itemsToRender && itemsToRender.wrap
-    }),
-    style: {
-      visibility: clientWidth ? 'visible' : 'hidden'
-    },
-    children: itemsToRender && itemsToRender.items
-  });
-});
-SizeSwapper.Breakpoint = exports.Breakpoint;
-SizeSwapper.Layout = Layout;
-SizeSwapper.propTypes = {
-  inline: PropTypes__default.default.bool,
-  /** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout  */
-  items: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    items: PropTypes__default.default.arrayOf(PropTypes__default.default.element),
-    breakpoint: PropTypes__default.default.number,
-    layout: PropTypes__default.default.oneOf([SizeSwapper.Layout.COLUMN]),
-    wrap: PropTypes__default.default.bool
-  })).isRequired
-};
-SizeSwapper.defaultProps = {
-  inline: false
-};
-var SizeSwapper$1 = SizeSwapper;
-
 const Tile = ({
   className,
   description,
@@ -4527,7 +4443,7 @@ Tile.propTypes = {
   className: PropTypes__default.default.string,
   description: PropTypes__default.default.node,
   disabled: PropTypes__default.default.bool,
-  href: PropTypes__default.default.string.isRequired,
+  href: PropTypes__default.default.string,
   target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes__default.default.node.isRequired,
@@ -4546,85 +4462,28 @@ Tile.defaultProps = {
 };
 var Tile$1 = Tile;
 
+exports.DecisionPresentation = void 0;
+(function (DecisionPresentation) {
+  DecisionPresentation["LIST"] = "LIST";
+  DecisionPresentation["LIST_BLOCK"] = "LIST_BLOCK";
+  DecisionPresentation["LIST_BLOCK_GRID"] = "LIST_BLOCK_GRID";
+})(exports.DecisionPresentation || (exports.DecisionPresentation = {}));
+exports.DecisionType = void 0;
+(function (DecisionType) {
+  DecisionType["NAVIGATION"] = "NAVIGATION";
+})(exports.DecisionType || (exports.DecisionType = {}));
 const Decision = ({
   options,
-  presentation,
-  type,
-  showMediaCircleInList,
-  isContainerAligned,
-  size
+  presentation = exports.DecisionPresentation.LIST,
+  size = exports.Size.MEDIUM,
+  type = exports.DecisionType.NAVIGATION,
+  showMediaCircleInList = true,
+  isContainerAligned = false
 }) => {
+  const screenXs = useScreenSize(exports.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
   if (type === exports.DecisionType.NAVIGATION) {
-    const {
-      LIST_BLOCK,
-      LIST_BLOCK_GRID
-    } = exports.DecisionPresentation;
-    if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
-      const isSmall = size === exports.Size.SMALL;
-      const isGrid = presentation === LIST_BLOCK_GRID;
-      const items = [{
-        items: [],
-        layout: SizeSwapper$1.Layout.COLUMN
-      }, {
-        items: [],
-        breakpoint: isSmall ? exports.Breakpoint.EXTRA_SMALL : exports.Breakpoint.SMALL,
-        wrap: isGrid
-      }];
-      options.forEach(({
-        description,
-        disabled,
-        href,
-        target,
-        media: {
-          block,
-          list
-        },
-        onClick,
-        title
-      }, key) => {
-        items[0].items.push( /*#__PURE__*/jsxRuntime.jsx(NavigationOption
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          complex: false,
-          content: description,
-          disabled: disabled,
-          href: href,
-          target: target,
-          media: list,
-          showMediaAtAllSizes: true,
-          showMediaCircle: showMediaCircleInList,
-          isContainerAligned: isContainerAligned,
-          title: title,
-          onClick: onClick
-        }, `nav-${key}`));
-        items[1].items.push( /*#__PURE__*/jsxRuntime.jsx(Tile$1
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
-            'np-decision__tile--fixed-width': isGrid
-          }),
-          description: description,
-          disabled: disabled,
-          href: href,
-          target: target,
-          media: block,
-          size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
-          title: title,
-          onClick: onClick
-        }, `tile-${key}`));
-      });
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('np-decision', {
-          'np-decision--small': isSmall,
-          'np-decision--grid': isGrid
-        }),
-        children: /*#__PURE__*/jsxRuntime.jsx(SizeSwapper$1, {
-          items: items
-        })
-      });
-    }
-    // LIST
-    return options.map(({
+    const renderedOptions = options.map(({
       title,
       description,
       disabled,
@@ -4649,42 +4508,49 @@ const Decision = ({
       title: title,
       onClick: onClick
     }, `nav-${key}`));
+    if (presentation === exports.DecisionPresentation.LIST_BLOCK || presentation === exports.DecisionPresentation.LIST_BLOCK_GRID) {
+      const isSmall = size === exports.Size.SMALL;
+      const breakpoint = isSmall ? screenXs : screenSm;
+      const isGrid = presentation === exports.DecisionPresentation.LIST_BLOCK_GRID;
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames__default.default('np-decision d-flex', {
+          'np-decision--small': isSmall,
+          'np-decision--grid': isGrid
+        }, breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
+        children: breakpoint ? options.map(({
+          description,
+          disabled,
+          href,
+          target,
+          media: {
+            block
+          },
+          onClick,
+          title
+        }, key) => /*#__PURE__*/jsxRuntime.jsx(Tile$1
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          className: classNames__default.default(`np-decision__tile${isSmall ? '--small' : ''}`, {
+            'np-decision__tile--fixed-width': isGrid
+          }),
+          description: description,
+          disabled: disabled,
+          href: href,
+          target: target,
+          media: block,
+          size: isSmall ? exports.Size.SMALL : exports.Size.MEDIUM,
+          title: title,
+          onClick: onClick
+        }, `tile-${key}`)) : renderedOptions
+      });
+    }
+    // LIST
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: renderedOptions
+    });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
-};
-Decision.propTypes = {
-  /**  A list of elements to be rendered */
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    description: PropTypes__default.default.node,
-    disabled: PropTypes__default.default.bool,
-    href: PropTypes__default.default.string,
-    target: PropTypes__default.default.oneOf(['_self', '_blank', '_parent', '_top']),
-    media: PropTypes__default.default.shape({
-      block: PropTypes__default.default.node.isRequired,
-      list: PropTypes__default.default.node.isRequired
-    }),
-    onClick: PropTypes__default.default.func,
-    title: PropTypes__default.default.node.isRequired
-  })).isRequired,
-  /**  Handles the display mode of the component */
-  presentation: PropTypes__default.default.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
-  /** Size currently affects only Tile dimension */
-  size: PropTypes__default.default.oneOf(['sm', 'md']),
-  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
-  type: PropTypes__default.default.oneOf(['NAVIGATION']),
-  /** Display media in a circle in list presentation */
-  showMediaCircleInList: PropTypes__default.default.bool,
-  /** Sets navigation options to be aligned with the parent container */
-  isContainerAligned: PropTypes__default.default.bool
-};
-Decision.defaultProps = {
-  presentation: exports.DecisionPresentation.LIST,
-  size: exports.Size.MEDIUM,
-  type: exports.DecisionType.NAVIGATION,
-  showMediaCircleInList: true,
-  isContainerAligned: false
+  return null;
 };
-var Decision$1 = Decision;
 
 const isLayoutHorizontal = layout => [exports.Layout.HORIZONTAL_LEFT_ALIGNED, exports.Layout.HORIZONTAL_RIGHT_ALIGNED, exports.Layout.HORIZONTAL_JUSTIFIED].includes(layout);
 const getAlignmentClasses = (layout, action) => {
@@ -15448,7 +15314,7 @@ exports.DEFAULT_LANG = DEFAULT_LANG;
 exports.DEFAULT_LOCALE = DEFAULT_LOCALE;
 exports.DateInput = DateInput;
 exports.DateLookup = DateLookup$1;
-exports.Decision = Decision$1;
+exports.Decision = Decision;
 exports.DefinitionList = DefinitionList$1;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;