@transferwise/components 0.0.0-experimental-29ce40f → 0.0.0-experimental-04e4d95

package/build/index.js

@@ -25,6 +25,7 @@ var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
 var requiredIf = require('react-required-if');
+var toPairs = require('lodash.topairs');
 var web = require('@react-spring/web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -56,6 +57,7 @@ var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
+var toPairs__default = /*#__PURE__*/_interopDefault(toPairs);
 
 class HistoryNavigator {
   constructor(history = [], historyLimit = null) {
@@ -93,7 +95,7 @@ var HistoryNavigator$1 = HistoryNavigator;
 function isIosDevice() {
   const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];
   const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 
@@ -939,8 +941,9 @@ function resolveType(type) {
       return 'neutral';
     case 'error':
       return 'negative';
+    default:
+      return type;
   }
-  return type;
 }
 function Alert({
   arrow,
@@ -1086,7 +1089,7 @@ const hashSeed = seed => {
   const modulo = avatarColors.length;
   let hashValue = 0;
   let basePow = 1;
-  for (let i = 0; i < seed.length; i++) {
+  for (let i = 0; i < seed.length; i += 1) {
     hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
     basePow = basePow * base % modulo;
   }
@@ -1378,11 +1381,15 @@ const Dimmer = ({
   }, [onClose]);
   const onEnter = () => {
     setHasNotExited(true);
-    dimmerReference.current && dimmerManager.add(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
   };
   const onExited = () => {
     setHasNotExited(false);
-    dimmerReference.current && dimmerManager.remove(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
   };
   React.useEffect(() => {
     const localReferenceCopy = dimmerReference.current;
@@ -4357,6 +4364,508 @@ const DropFade = ({
   });
 };
 
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+
+const prepFields = (fields, model, validationMessages) => {
+  if (!fields) {
+    return {};
+  }
+  let preparedFields = copyOf(fields);
+  preparedFields = flattenFieldsWithGroups(preparedFields);
+  preparedFields = transformFieldArrayToMap(preparedFields);
+  preparedFields = transformNestedKeysToNestedSpecs(preparedFields);
+  Object.keys(preparedFields).forEach(key => {
+    preparedFields[key] = prepField(preparedFields[key], model, validationMessages);
+  });
+  return preparedFields;
+};
+const prepField = (field, model, validationMessages) => {
+  const preparedField = copyOf(field);
+  prepLegacyProps(preparedField);
+  prepType(preparedField);
+  prepPattern(preparedField);
+  prepValidationMessages(preparedField, validationMessages);
+  return preparedField;
+};
+
+/**
+ * In an older format we had an extra fieldGroup level, here we flatten that out
+ * So the inner arrays of fields within the different field groups are flattened
+ * to a single array, which is returned.
+ *
+ * @param fields
+ */
+const flattenFieldsWithGroups = fields => {
+  if (Array.isArray(fields)) {
+    let flattenedFields = [];
+    fields.forEach(field => {
+      // If we've been given a group with nested fields, break them out.
+      if (field.fields) {
+        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.fields));
+      } else if (field.group) {
+        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.group));
+      } else {
+        // Otherwise it's a regular field, just add it.
+        flattenedFields.push(field);
+      }
+    });
+    return flattenedFields;
+  }
+  return fields;
+};
+const flattenFieldWithGroup = (field, subFields) => {
+  // If first field doesn't have a label, use the one from the group
+  if (field.name && subFields.length > 0 && !subFields[0].name) {
+    subFields[0].name = field.name;
+  }
+  if (field.width && subFields.length > 0 && !subFields[0].width) {
+    subFields[0].width = field.width;
+  }
+
+  // If there was a tooltip at fieldGroup level move it to first field.
+  if (field.tooltip && subFields.length > 0 && !subFields[0].help) {
+    subFields[0].help = {
+      message: field.tooltip
+    };
+  }
+  if (field.info && subFields.length > 0 && !subFields[0].help) {
+    subFields[0].help = {
+      message: field.info
+    };
+  }
+
+  // If there are two parts of this group, render them side by side
+  if (subFields.length === 2) {
+    subFields.forEach(nestedField => {
+      nestedField.width = 'md';
+    });
+  }
+
+  // If there are three parts, render the first two side by side
+  if (subFields.length === 3) {
+    subFields[0].width = 'md';
+    subFields[1].width = 'md';
+  }
+  return subFields;
+};
+
+/*
+ * Some older requirements return an array of fields, where it should be a map
+ * from the property name to the spec.  This converts arrays to maps.
+ */
+const transformFieldArrayToMap = fields => {
+  if (Array.isArray(fields)) {
+    const fieldMap = {};
+    fields.forEach(field => {
+      const key = field.key || field.name;
+      delete field.key;
+      fieldMap[key] = copyOf(field);
+    });
+    return fieldMap;
+  }
+  return fields;
+};
+
+/*
+ * Some older format return keys like 'address.city', expecting the value of
+ * city to be nested inside an address object.  This function creates a spec of
+ * type 'object', and nests such fields inside of it.  When we render we pass
+ * this object spec to a nested fieldset.
+ */
+const transformNestedKeysToNestedSpecs = fieldMap => {
+  if (Array.isArray(fieldMap)) {
+    throw new TypeError('Expecting a map of fields, not an array');
+  }
+  const nestedFields = {};
+  Object.keys(fieldMap).forEach(key => {
+    if (key.indexOf('.') > 0) {
+      // If the key contains a period we need to nest the fields in another object
+      const pathSections = key.split('.');
+      const nestedKey = pathSections[0];
+
+      // If this sub object doesn't exist yet, create it
+      if (!nestedFields[nestedKey]) {
+        nestedFields[nestedKey] = {
+          type: 'object',
+          properties: {}
+        };
+      }
+      nestedFields[nestedKey].properties[pathSections[1]] = fieldMap[key];
+    } else {
+      nestedFields[key] = fieldMap[key];
+    }
+  });
+  return nestedFields;
+};
+const prepType = field => {
+  const type = field.type && field.type.toLowerCase && field.type.toLowerCase();
+  switch (type) {
+    case 'text':
+      field.type = 'string';
+      break;
+    case 'date':
+      field.type = 'string';
+      field.format = 'date';
+      break;
+    case 'password':
+      field.type = 'string';
+      field.control = 'password';
+      break;
+    case 'checkbox':
+      field.type = 'boolean';
+      break;
+    case 'select':
+      if (!field.control) {
+        field.control = 'select';
+      }
+      delete field.type;
+      break;
+    case 'radio':
+      field.control = 'radio';
+      delete field.type;
+      break;
+    case 'upload':
+      field.type = 'string';
+      field.format = 'base64url';
+      break;
+    case 'tel':
+      field.type = 'string';
+      field.format = 'phone';
+      break;
+    case 'textarea':
+      field.type = 'string';
+      field.control = 'textarea';
+      break;
+  }
+  if (!field.control && field.type !== 'object') {
+    field.control = getControlType(field);
+  }
+};
+const prepLegacyProps = field => {
+  if (field.name && !field.title) {
+    field.title = field.name;
+    delete field.name;
+  }
+  if (field.validationRegexp) {
+    field.pattern = field.validationRegexp;
+    delete field.validationRegexp;
+  }
+  if (field.min) {
+    field.minimum = field.min;
+    delete field.min;
+  }
+  if (field.max) {
+    field.maximum = field.max;
+    delete field.max;
+  }
+  if (field.example && !field.placeholder) {
+    field.placeholder = field.example;
+    delete field.example;
+  }
+  if (field.tooltip && !field.help) {
+    field.help = {
+      message: field.tooltip
+    };
+    delete field.tooltip;
+  }
+  if (field.valuesAllowed && !field.values) {
+    field.values = field.valuesAllowed;
+    delete field.valuesAllowed;
+  }
+  if (field.values && field.values.map) {
+    field.values = prepLegacyValues(field.values);
+  }
+  if (field.value && !field.default) {
+    field.default = field.value;
+    delete field.value;
+  }
+  if (field.values) {
+    // In some legacy arrays the first value is a placeholder, extract it.
+    if (field.values && field.values.length > 0 && field.values[0] && !field.values[0].value && field.values[0].label && !field.placeholder) {
+      field.placeholder = field.values[0].label;
+      field.values = field.values.slice(1);
+    }
+  }
+};
+const prepLegacyValues = values => values.map(prepLegacyValue);
+const prepLegacyValue = value => {
+  if (!value.label && value.title) {
+    value.label = value.title;
+    delete value.title;
+  }
+  if (!value.label && value.name) {
+    value.label = value.name;
+    delete value.name;
+  }
+  if (!value.value && value.code) {
+    value.value = value.code;
+    delete value.code;
+  }
+  if (!value.value && value.key) {
+    value.value = value.key;
+    delete value.key;
+  }
+  return value;
+};
+const prepPattern = field => {
+  if (field.pattern) {
+    try {
+      new RegExp(field.pattern);
+    } catch {
+      // eslint-disable-next-line no-console
+      console.warn('API regexp is invalid');
+      delete field.pattern;
+    }
+  } else {
+    delete field.pattern;
+  }
+};
+const prepValidationMessages = (field, validationMessages) => {
+  field.validationMessages = field.validationMessages ? field.validationMessages : validationMessages;
+  if (!field.validationMessages) {
+    delete field.validationMessages;
+    return;
+  }
+  if (field.validationMessages.minimum) {
+    field.validationMessages.min = field.validationMessages.minimum;
+    delete field.validationMessages.minimum;
+  }
+  if (field.validationMessages.maximum) {
+    field.validationMessages.max = field.validationMessages.maximum;
+    delete field.validationMessages.maximum;
+  }
+};
+const getControlType = field => {
+  if (field.control) {
+    return field.control.toLowerCase();
+  }
+  if (field.hidden) {
+    return 'hidden';
+  }
+  if (field.values && field.values.length > 0) {
+    return getSelectionType(field);
+  }
+  switch (field.type) {
+    case 'string':
+      return getControlForStringFormat(field.format);
+    case 'number':
+    case 'integer':
+      return 'number';
+    case 'boolean':
+      return 'checkbox';
+    default:
+      return 'text';
+  }
+};
+const getControlForStringFormat = format => {
+  switch (format) {
+    case 'date':
+      return 'date';
+    case 'base64url':
+      return 'file';
+    case 'password':
+      return 'password';
+    case 'uri':
+      return 'text';
+    // 'url'; - not implemented
+    case 'email':
+      return 'text';
+    // 'email'; - not implemented
+    case 'phone':
+      return 'tel';
+    default:
+      return 'text';
+  }
+};
+const getSelectionType = field => {
+  if (field.control) {
+    return field.control;
+  }
+  if (field.type === 'select') {
+    return 'select';
+  }
+  if (field.type === 'radio') {
+    return 'radio';
+  }
+  if (field.values) {
+    return field.values.length > 3 ? 'select' : 'radio';
+  }
+  return 'select';
+};
+const copyOf = object => JSON.parse(JSON.stringify(object));
+
+const formatUsingPattern = (value = '', pattern) => {
+  if (typeof pattern !== 'string') {
+    return value;
+  }
+  let newPattern = pattern;
+  if (newPattern.indexOf('||') > 0) {
+    newPattern = newPattern.slice(0, Math.max(0, pattern.indexOf('||')));
+  }
+  let newValue = '';
+  let separators = 0;
+  let charactersToAllocate = value.length;
+  let position = 0;
+  while (charactersToAllocate) {
+    if (positionIsSeparator(newPattern, position)) {
+      newValue += newPattern[position];
+      separators += 1;
+    } else {
+      newValue += value[position - separators];
+      charactersToAllocate -= 1;
+    }
+    position += 1;
+  }
+  const separatorsAfterCursor = countSeparatorsAfterCursor(newPattern, position);
+  if (separatorsAfterCursor) {
+    newValue += newPattern.slice(position, separatorsAfterCursor);
+  }
+  return newValue;
+};
+const countSeparatorsAfterCursor = (newPattern, position) => {
+  let separators = 0;
+  while (positionIsSeparator(newPattern, position + separators)) {
+    separators += 1;
+  }
+  return separators;
+};
+const positionIsSeparator = (newPattern, position) => newPattern[position] && newPattern[position] !== '*';
+
+const getValueLabel = (options, value) => {
+  const option = options.find(currentOption => currentOption.value === value);
+  return option && option.label ? option.label : value;
+};
+
+/**
+ *
+ * @param {string} value
+ */
+const mask = value => new Array(value.length + 1).join('*');
+const FormattedValue = ({
+  field,
+  value
+}) => {
+  const {
+    locale
+  } = reactIntl.useIntl();
+  const style = [];
+  if (field.tagClassName && field.tagClassName.h3) {
+    style.push('np-text-body-large-bold');
+    style.push('formatted-value__h3-custom-alignment');
+  }
+  switch (field.control) {
+    case 'select':
+    case 'radio':
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: getValueLabel(field.values, value)
+      });
+    case 'date':
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: formatting.formatDate(value instanceof Date ? value : new Date(value), locale)
+      });
+    case 'number':
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: formatting.formatNumber(value, locale)
+      });
+    case 'password':
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: mask(value)
+      });
+    case 'file':
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "thumbnail",
+        children: /*#__PURE__*/jsxRuntime.jsx("img", {
+          alt: field.title,
+          src: value
+        })
+      });
+    case 'checkbox':
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: JSON.stringify(value)
+      });
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: classNames__default.default(style),
+        children: formatUsingPattern(value, field.displayFormat)
+      });
+  }
+};
+FormattedValue.propTypes = {
+  field: PropTypes__default.default.shape({
+    control: PropTypes__default.default.string.isRequired,
+    displayFormat: PropTypes__default.default.string,
+    refreshRequirementsOnChange: PropTypes__default.default.bool,
+    title: PropTypes__default.default.string.isRequired,
+    type: PropTypes__default.default.string.isRequired,
+    width: PropTypes__default.default.string,
+    tagClassName: PropTypes__default.default.shape({
+      h3: PropTypes__default.default.bool
+    }),
+    values: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+      value: PropTypes__default.default.any
+    }))
+  }).isRequired,
+  value: PropTypes__default.default.any.isRequired
+};
+var FormattedValue$1 = FormattedValue;
+
+function createDefinitions(fields, model) {
+  return toPairs__default.default(fields).map(([name, field]) => createDefinition(name, field, model)).filter(definition => !!definition);
+}
+function createDefinition(name, field, model) {
+  const {
+    title,
+    group,
+    hidden
+  } = field;
+  if (!model[name] || hidden) {
+    return null;
+  }
+  return {
+    title,
+    value: group ? group.map((groupField, groupFieldIndex) => /*#__PURE__*/jsxRuntime.jsx(FormattedValue$1, {
+      // eslint-disable-line react/no-array-index-key
+      field: groupField,
+      value: model[name]
+    }, groupFieldIndex)) : /*#__PURE__*/jsxRuntime.jsx(FormattedValue$1, {
+      field: field,
+      value: model[name]
+    }),
+    key: name
+  };
+}
+
+const DynamicFieldDefinitionList = ({
+  model,
+  title,
+  layout,
+  fields
+}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "m-t-1 m-b-3",
+    children: /*#__PURE__*/jsxRuntime.jsx(Title, {
+      type: exports.Typography.TITLE_BODY,
+      className: "p-t-3",
+      children: title
+    })
+  }), /*#__PURE__*/jsxRuntime.jsx(DefinitionList$1, {
+    layout: layout,
+    definitions: createDefinitions(prepFields(fields), model)
+  })]
+});
+DynamicFieldDefinitionList.propTypes = {
+  model: PropTypes__default.default.shape({}).isRequired,
+  fields: PropTypes__default.default.shape({}).isRequired,
+  title: PropTypes__default.default.string,
+  layout: PropTypes__default.default.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED'])
+};
+DynamicFieldDefinitionList.defaultProps = {
+  title: null,
+  layout: exports.Layout.VERTICAL_TWO_COLUMN
+};
+var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
+
 const ESCAPED_OPENING_CHEVRON = '&lt;';
 const ESCAPED_CLOSING_CHEVRON = '&gt;';
 class EmphasisHtmlTransformer {
@@ -4697,7 +5206,6 @@ const Tooltip = ({
 
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
-  // eslint-disable-next-line compat/compat
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
   const documentTouchIsDefined = typeof window !== 'undefined' && window.DocumentTouch && document instanceof window.DocumentTouch;
   return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
@@ -4705,7 +5213,7 @@ function supportsTouchEvents() {
 function userAgentSuggestsTouchDevice() {
   const sampleTouchDevices = ['android', 'iemobile', 'iphone', 'ipad', 'ipod', 'blackberry', 'bada'];
   const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
@@ -5111,8 +5619,9 @@ function resolvePlacement(preferredPlacement) {
     case 'bottom-left':
     case 'bottom-right':
       return 'bottom';
+    default:
+      return preferredPlacement;
   }
-  return preferredPlacement;
 }
 function Popover$1({
   children,
@@ -6675,7 +7184,6 @@ const Loader = ({
       }, 1000);
     }
     return () => {
-      // eslint-disable-next-line fp/no-mutation
       cancelled = true;
       clearTimeout(timeout);
     };
@@ -8612,7 +9120,7 @@ const explodeNumberModel = number => {
   };
 };
 
-const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
+const DIGITS_MATCH = /^$|^(\+)|(\d+)/g;
 const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
 
 function sortArrayByProperty(arrayToSort, property) {
@@ -8698,7 +9206,8 @@ const PhoneNumberInput = ({
   };
   React.useEffect(() => {
     if (broadcastedValue === null) {
-      return setBroadcastedValue(internalValue);
+      setBroadcastedValue(internalValue);
+      return;
     }
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
     const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
@@ -8971,7 +9480,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
     ...commonProps,
     'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-    'aria-describedby': `${componentId}-title` || undefined,
+    'aria-describedby': `${componentId}-title`,
     'aria-disabled': isDisabled,
     'data-value': value ?? undefined,
     role: type === 'checkbox' || type === 'radio' ? type : undefined,
@@ -9624,8 +10133,8 @@ function Select({
     }
   };
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null) {
-      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
+      selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
   function moveFocusWithDifference(difference) {
@@ -9852,7 +10361,6 @@ function Select({
       disabled: disabled,
       "aria-controls": listboxId,
       "aria-expanded": open,
-      "aria-autocomplete": "none",
       onClick: handleOnClick,
       ...buttonProps,
       children: [selected ? /*#__PURE__*/jsxRuntime.jsx(Option$1, {
@@ -14393,6 +14901,7 @@ exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;
 exports.Drawer = Drawer$1;
 exports.DropFade = DropFade;
+exports.DynamicFieldDefinitionList = DynamicFieldDefinitionList$1;
 exports.Emphasis = Emphasis;
 exports.FlowNavigation = FlowNavigation;
 exports.Header = Header;