@reachfive/identity-ui 1.21.0 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/es/identity-ui.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { createClient as createClient$1 } from '@reachfive/identity-core';
2
2
  import ReactDOM from 'react-dom';
3
- import React__default, { createElement, useState } from 'react';
3
+ import React__default, { createElement, useState, useEffect, useMemo } from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import { getContext, compose as compose$1, withContext, withHandlers } from '@hypnosphi/recompose';
6
- import { darken, lighten, transparentize, clearFix } from 'polished';
6
+ import { darken, lighten, transparentize } from 'polished';
7
7
  import styled, { keyframes, css } from 'styled-components';
8
8
  import { Transition } from 'react-transition-group';
9
9
  import classes from 'classnames';
10
10
  import { Remarkable } from 'remarkable';
11
11
  import validator from 'validator';
12
- import { isValidNumber, AsYouType, format as format$1, parse } from 'libphonenumber-js';
12
+ import { isValidNumber, AsYouType, format, parse } from 'libphonenumber-js';
13
13
  import { isEqual } from 'lodash-es';
14
- import { DateTime } from 'luxon';
14
+ import { DateTime, Info as Info$1 } from 'luxon';
15
15
  import { isLower, isUpper, isDigit } from 'char-info';
16
16
  import zxcvbn from '@reachfive/zxcvbn';
17
17
 
@@ -7319,12 +7319,6 @@ function isValued(v) {
7319
7319
  var unwrap = isObject(v) ? v[rawProperty] : v;
7320
7320
  return unwrap !== null && unwrap !== undefined && unwrap !== '' && !Number.isNaN(unwrap) && (Array.isArray(unwrap) ? unwrap.length > 0 : true);
7321
7321
  }
7322
- function formatISO8601Date(year, month, day) {
7323
- if (isValued(year) && isValued(month) && isValued(day)) {
7324
- return "".concat(year, "-").concat(month.toString().padStart(2, '0'), "-").concat(day.toString().padStart(2, '0'));
7325
- }
7326
- return null;
7327
- }
7328
7322
  function specializeIdentifierData(data) {
7329
7323
  return data.identifier ? _objectSpread2(_objectSpread2(_objectSpread2({}, data), {}, {
7330
7324
  identifier: undefined
@@ -8690,7 +8684,7 @@ var IdentifierField = /*#__PURE__*/function (_React$Component) {
8690
8684
  _defineProperty(_assertThisInitialized(_this), "asYouType", function (inputValue) {
8691
8685
  var country = _this.props.value.country;
8692
8686
  var phone = new AsYouType(country).input(inputValue);
8693
- var formatted = format$1(phone, country, 'International');
8687
+ var formatted = format(phone, country, 'International');
8694
8688
  var isValid = isValidNumber(phone, country);
8695
8689
  return {
8696
8690
  country: country,
@@ -8710,7 +8704,7 @@ var IdentifierField = /*#__PURE__*/function (_React$Component) {
8710
8704
  if (!userInput) return;
8711
8705
  try {
8712
8706
  var parsed = parse(userInput, country);
8713
- var phoneValue = country === parsed.country ? format$1(parsed, 'National') : userInput;
8707
+ var phoneValue = country === parsed.country ? format(parsed, 'National') : userInput;
8714
8708
  this.asYouType(phoneValue);
8715
8709
  } catch (e) {
8716
8710
  console.error(e);
@@ -9616,275 +9610,248 @@ function selectField(_ref) {
9616
9610
  }));
9617
9611
  }
9618
9612
 
9619
- var formatDate = function formatDate(formValue) {
9620
- if (formValue && formValue.length) {
9621
- var _formValue$split = formValue.split('/'),
9622
- _formValue$split2 = _slicedToArray(_formValue$split, 3),
9623
- month = _formValue$split2[0],
9624
- day = _formValue$split2[1],
9625
- year = _formValue$split2[2];
9626
- if (year && year.length && month && month.length && day && day.length) {
9627
- return formatISO8601Date(year, month, day);
9628
- }
9629
- }
9630
- return null;
9613
+ var useDebounce = function useDebounce(value, milliSeconds) {
9614
+ var _useState = useState(value),
9615
+ _useState2 = _slicedToArray(_useState, 2),
9616
+ debouncedValue = _useState2[0],
9617
+ setDebouncedValue = _useState2[1];
9618
+ useEffect(function () {
9619
+ var handler = setTimeout(function () {
9620
+ setDebouncedValue(value);
9621
+ }, milliSeconds);
9622
+ return function () {
9623
+ clearTimeout(handler);
9624
+ };
9625
+ }, [value, milliSeconds]);
9626
+ return debouncedValue;
9631
9627
  };
9632
- function dateField(config) {
9633
- return simpleField(_objectSpread2(_objectSpread2({
9634
- placeholder: 'mm/dd/yyyy'
9635
- }, config), {}, {
9636
- type: 'text',
9637
- format: {
9638
- bind: function bind(modelValue) {
9639
- if (modelValue && modelValue.length) {
9640
- var _modelValue$split = modelValue.split('-'),
9641
- _modelValue$split2 = _slicedToArray(_modelValue$split, 3),
9642
- _modelValue$split2$ = _modelValue$split2[0],
9643
- year = _modelValue$split2$ === void 0 ? '' : _modelValue$split2$,
9644
- _modelValue$split2$2 = _modelValue$split2[1],
9645
- month = _modelValue$split2$2 === void 0 ? '' : _modelValue$split2$2,
9646
- _modelValue$split2$3 = _modelValue$split2[2],
9647
- day = _modelValue$split2$3 === void 0 ? '' : _modelValue$split2$3;
9648
- return "".concat(month, "/").concat(day, "/").concat(year);
9649
- }
9650
- },
9651
- unbind: formatDate
9652
- },
9653
- validator: new Validator({
9654
- rule: function rule(value) {
9655
- var date = formatDate(value);
9656
- return !date || validator.isISO8601(date);
9657
- },
9658
- hint: 'date'
9659
- })
9660
- }));
9661
- }
9662
9628
 
9663
- var _excluded$6 = ["state"];
9664
9629
  var _templateObject$a, _templateObject2$5;
9665
- var BIRTHDAY_PATH = 'birthdate';
9666
- var months = function months(i18n) {
9667
- return ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'].map(function (m, i) {
9668
- return {
9669
- value: i + 1,
9670
- label: i18n(m)
9671
- };
9672
- });
9673
- };
9674
9630
  var inputRowGutter = 10;
9675
- var InputRow = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n margin-right: ", "px;\n margin-left: ", "px;\n ", "\n"])), -inputRowGutter / 2, -inputRowGutter / 2, clearFix());
9676
- var InputCol = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n float: left;\n padding-right: ", "px;\n padding-left: ", "px;\n width: ", "%;\n box-sizing: border-box;\n"])), inputRowGutter / 2, inputRowGutter / 2, function (props) {
9631
+ var InputRow = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: ", "px;\n"])), inputRowGutter);
9632
+ var InputCol = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n flex-basis: ", "%;\n"])), function (props) {
9677
9633
  return props.width;
9678
9634
  });
9679
- var BirthdateField = function BirthdateField(props) {
9680
- var day = props.day,
9681
- month = props.month,
9682
- year = props.year,
9683
- _props$validation = props.validation,
9684
- validation = _props$validation === void 0 ? {} : _props$validation,
9685
- onChange = props.onChange,
9686
- showLabel = props.showLabel,
9687
- inputId = props.inputId,
9688
- label = props.label,
9689
- _props$required = props.required,
9690
- required = _props$required === void 0 ? true : _props$required,
9691
- months = props.months,
9692
- i18n = props.i18n;
9693
- var handleFieldChange = function handleFieldChange(field) {
9694
- return function (e) {
9695
- var value = e.target.value;
9696
- onChange(function (state) {
9697
- return _defineProperty({}, field, _objectSpread2(_objectSpread2({}, state[field]), {}, {
9698
- value: value
9699
- }));
9700
- });
9701
- };
9635
+ var DateField = function DateField(_ref) {
9636
+ var i18n = _ref.i18n,
9637
+ inputId = _ref.inputId,
9638
+ label = _ref.label,
9639
+ locale = _ref.locale,
9640
+ onChange = _ref.onChange,
9641
+ path = _ref.path,
9642
+ required = _ref.required,
9643
+ showLabel = _ref.showLabel,
9644
+ validation = _ref.validation,
9645
+ value = _ref.value;
9646
+ var _useState = useState(isValued(value) ? value.raw.day : undefined),
9647
+ _useState2 = _slicedToArray(_useState, 2),
9648
+ day = _useState2[0],
9649
+ setDay = _useState2[1];
9650
+ var _useState3 = useState(isValued(value) ? value.raw.month : undefined),
9651
+ _useState4 = _slicedToArray(_useState3, 2),
9652
+ month = _useState4[0],
9653
+ setMonth = _useState4[1];
9654
+ var _useState5 = useState(isValued(value) ? value.raw.year : undefined),
9655
+ _useState6 = _slicedToArray(_useState5, 2),
9656
+ year = _useState6[0],
9657
+ setYear = _useState6[1];
9658
+
9659
+ // debounce year value to delay value update when user is currently editing it
9660
+ var debouncedYear = useDebounce(year, 1000);
9661
+ var setDatePart = function setDatePart(setter, value) {
9662
+ if (Number.isNaN(Number(value))) return; // only accept number value
9663
+ setter(Number(value));
9702
9664
  };
9703
- var handleFieldBlur = function handleFieldBlur(field) {
9704
- return function () {
9705
- return onChange(function (state) {
9706
- return _defineProperty({}, field, _objectSpread2(_objectSpread2({}, state[field]), {}, {
9665
+ var handleDayChange = function handleDayChange(event) {
9666
+ return setDatePart(setDay, event.target.value);
9667
+ };
9668
+ var handleMonthChange = function handleMonthChange(event) {
9669
+ return setDatePart(setMonth, event.target.value);
9670
+ };
9671
+ var handleYearChange = function handleYearChange(event) {
9672
+ return setDatePart(setYear, event.target.value);
9673
+ };
9674
+ useEffect(function () {
9675
+ if (day && month && debouncedYear) {
9676
+ onChange(function () {
9677
+ return {
9678
+ value: {
9679
+ raw: DateTime.fromObject({
9680
+ year: debouncedYear,
9681
+ month: month,
9682
+ day: day
9683
+ })
9684
+ },
9707
9685
  isDirty: true
9708
- }));
9686
+ };
9709
9687
  });
9710
- };
9688
+ }
9689
+ }, [debouncedYear, month, day]); // eslint-disable-line react-hooks/exhaustive-deps
9690
+
9691
+ var months = useMemo(function () {
9692
+ return Info$1.months("long", {
9693
+ locale: locale
9694
+ });
9695
+ }, [locale]);
9696
+ var daysInMonth = useMemo(function () {
9697
+ return Array.from({
9698
+ length: DateTime.fromObject({
9699
+ year: debouncedYear,
9700
+ month: month
9701
+ }).daysInMonth
9702
+ }, function (_value, index) {
9703
+ return index + 1;
9704
+ });
9705
+ }, [debouncedYear, month]);
9706
+
9707
+ // reset day if current value is out of range
9708
+ if (day && !daysInMonth.includes(day)) {
9709
+ setDay(undefined);
9710
+ }
9711
+ var parts = useMemo(function () {
9712
+ return DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
9713
+ return part.type;
9714
+ }).filter(function (type) {
9715
+ return type !== 'literal';
9716
+ });
9717
+ }, [locale]);
9718
+ var error = _typeof(validation) === 'object' && 'error' in validation ? validation.error : null;
9719
+ var fields = {
9720
+ day: /*#__PURE__*/React__default.createElement(InputCol, {
9721
+ key: "day",
9722
+ width: 20
9723
+ }, /*#__PURE__*/React__default.createElement(Select, {
9724
+ name: "".concat(path, ".day"),
9725
+ value: day || '',
9726
+ hasError: error,
9727
+ required: required,
9728
+ onChange: handleDayChange,
9729
+ placeholder: i18n('day'),
9730
+ options: daysInMonth.map(function (day) {
9731
+ return {
9732
+ value: day,
9733
+ label: day
9734
+ };
9735
+ }),
9736
+ "data-testid": "".concat(path, ".day"),
9737
+ "aria-label": i18n('day')
9738
+ })),
9739
+ month: /*#__PURE__*/React__default.createElement(InputCol, {
9740
+ key: "month",
9741
+ width: 50
9742
+ }, /*#__PURE__*/React__default.createElement(Select, {
9743
+ name: "".concat(path, ".month"),
9744
+ value: month || '',
9745
+ hasError: error,
9746
+ required: required,
9747
+ onChange: handleMonthChange,
9748
+ placeholder: i18n('month'),
9749
+ options: months.map(function (month, index) {
9750
+ return {
9751
+ value: index + 1,
9752
+ label: month
9753
+ };
9754
+ }),
9755
+ "data-testid": "".concat(path, ".month"),
9756
+ "aria-label": i18n('month')
9757
+ })),
9758
+ year: /*#__PURE__*/React__default.createElement(InputCol, {
9759
+ key: "year",
9760
+ width: 30
9761
+ }, /*#__PURE__*/React__default.createElement(Input, {
9762
+ type: "number",
9763
+ maxlength: "4",
9764
+ inputmode: "numeric",
9765
+ name: "".concat(path, ".year"),
9766
+ value: year || '',
9767
+ hasError: error,
9768
+ required: required,
9769
+ onChange: handleYearChange,
9770
+ placeholder: i18n('year'),
9771
+ "data-testid": "".concat(path, ".year"),
9772
+ "aria-label": i18n('year')
9773
+ }))
9711
9774
  };
9712
- return /*#__PURE__*/React__default.createElement(FormGroup, _extends({
9775
+ return /*#__PURE__*/React__default.createElement(FormGroup, {
9713
9776
  inputId: inputId,
9714
- labelText: label
9715
- }, pick(validation, 'error'), {
9777
+ labelText: label,
9778
+ error: error,
9716
9779
  showLabel: showLabel
9717
- }), /*#__PURE__*/React__default.createElement(InputRow, null, /*#__PURE__*/React__default.createElement(InputCol, {
9718
- width: 20
9719
- }, /*#__PURE__*/React__default.createElement(Input, {
9720
- type: "text",
9721
- id: inputId,
9722
- name: "".concat(BIRTHDAY_PATH, ".day"),
9723
- maxlength: "2",
9724
- inputmode: "numeric",
9725
- value: day.value,
9726
- hasError: !!validation.day,
9727
- required: required,
9728
- placeholder: i18n('day'),
9729
- onChange: handleFieldChange('day'),
9730
- onBlur: handleFieldBlur('day'),
9731
- "data-testid": "".concat(BIRTHDAY_PATH, ".day")
9732
- })), /*#__PURE__*/React__default.createElement(InputCol, {
9733
- width: 50
9734
- }, /*#__PURE__*/React__default.createElement(Select, {
9735
- name: "".concat(BIRTHDAY_PATH, ".month"),
9736
- value: month.value || '',
9737
- hasError: !!validation.month,
9738
- required: required,
9739
- onChange: handleFieldChange('month'),
9740
- onBlur: handleFieldBlur('month'),
9741
- placeholder: i18n('month'),
9742
- options: months,
9743
- "data-testid": "".concat(BIRTHDAY_PATH, ".month")
9744
- })), /*#__PURE__*/React__default.createElement(InputCol, {
9745
- width: 30
9746
- }, /*#__PURE__*/React__default.createElement(Input, {
9747
- type: "text",
9748
- name: "".concat(BIRTHDAY_PATH, ".year"),
9749
- maxlength: "4",
9750
- inputmode: "numeric",
9751
- value: year.value,
9752
- hasError: !!validation.year,
9753
- required: required,
9754
- placeholder: i18n('year'),
9755
- onChange: handleFieldChange('year'),
9756
- onBlur: handleFieldBlur('year'),
9757
- "data-testid": "".concat(BIRTHDAY_PATH, ".year")
9758
- }))));
9780
+ }, /*#__PURE__*/React__default.createElement(InputRow, null, parts.map(function (part) {
9781
+ return fields[part];
9782
+ })));
9759
9783
  };
9760
- var validateLimitAge = function validateLimitAge(day, month, year) {
9761
- var yearNbr = parseInt(year, 10);
9762
- var dayNbr = parseInt(day, 10);
9763
- var monthNbr = parseInt(month, 10);
9764
- var age = DateTime.now().diff(DateTime.local(yearNbr, monthNbr, dayNbr), "years").years;
9765
- if (age < 6 || age > 129) {
9766
- return 'birthdate.yearLimit';
9767
- }
9768
- return false;
9784
+ var dateFormat = function dateFormat(locale) {
9785
+ return DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
9786
+ switch (part.type) {
9787
+ case 'day':
9788
+ return 'dd';
9789
+ case 'month':
9790
+ return 'mm';
9791
+ case 'year':
9792
+ return 'yyyy';
9793
+ case 'literal':
9794
+ return part.value;
9795
+ }
9796
+ }).join('');
9769
9797
  };
9770
- var format = function format(_ref3) {
9771
- var day = _ref3.day,
9772
- month = _ref3.month,
9773
- year = _ref3.year;
9774
- return formatISO8601Date(year.value, month.value, day.value);
9798
+ var datetimeValidator = function datetimeValidator(locale) {
9799
+ return new Validator({
9800
+ rule: function rule(value) {
9801
+ return isValued(value) && value.raw.isValid;
9802
+ },
9803
+ hint: 'date',
9804
+ parameters: {
9805
+ format: dateFormat(locale)
9806
+ }
9807
+ });
9775
9808
  };
9776
- function birthdateField(_ref4) {
9777
- var label = _ref4.label,
9778
- _ref4$required = _ref4.required,
9779
- required = _ref4$required === void 0 ? true : _ref4$required,
9780
- defaultValue = _ref4.defaultValue;
9781
- return {
9782
- path: BIRTHDAY_PATH,
9783
- create: function create(_ref5) {
9784
- var i18n = _ref5.i18n,
9785
- showLabel = _ref5.showLabel;
9786
- var staticProps = {
9787
- inputId: generateId(),
9788
- label: label || i18n(BIRTHDAY_PATH),
9789
- months: months(i18n),
9790
- required: required,
9791
- i18n: i18n,
9792
- showLabel: showLabel
9793
- };
9794
- return {
9795
- key: BIRTHDAY_PATH,
9796
- modelPath: BIRTHDAY_PATH,
9797
- render: function render(_ref6) {
9798
- var state = _ref6.state,
9799
- props = _objectWithoutProperties(_ref6, _excluded$6);
9800
- return /*#__PURE__*/React__default.createElement(BirthdateField, _extends({
9801
- key: BIRTHDAY_PATH
9802
- }, state, props, staticProps));
9803
- },
9804
- initialize: function initialize(model) {
9805
- var modelValue = model.birthdate || defaultValue;
9806
- var _ref7 = modelValue ? modelValue.split('-') : [],
9807
- _ref8 = _slicedToArray(_ref7, 3),
9808
- _ref8$ = _ref8[0],
9809
- year = _ref8$ === void 0 ? '' : _ref8$,
9810
- _ref8$2 = _ref8[1],
9811
- month = _ref8$2 === void 0 ? '' : _ref8$2,
9812
- _ref8$3 = _ref8[2],
9813
- day = _ref8$3 === void 0 ? '' : _ref8$3;
9814
- return {
9815
- day: {
9816
- value: day,
9817
- isDirty: false
9818
- },
9819
- month: {
9820
- value: parseInt(month),
9821
- isDirty: false
9822
- },
9823
- year: {
9824
- value: year,
9825
- isDirty: false
9826
- }
9827
- };
9828
- },
9829
- unbind: function unbind(model, state) {
9830
- return _objectSpread2(_objectSpread2({}, model), {}, {
9831
- birthdate: format(state)
9832
- });
9833
- },
9834
- validate: function validate(state, _ref9) {
9835
- var isSubmitted = _ref9.isSubmitted;
9836
- var required = staticProps.required;
9837
- var day = state.day,
9838
- month = state.month,
9839
- year = state.year;
9840
- var missingFields = ['day', 'month', 'year'].filter(function (field) {
9841
- return (isSubmitted || state[field].isDirty) && !isValued(state[field].value);
9842
- });
9843
- if (missingFields.length) {
9844
- return required || missingFields.length < 3 ? _objectSpread2({
9845
- error: i18n('validation.required')
9846
- }, missingFields.reduce(function (acc, field) {
9847
- return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, field, true));
9848
- }, {})) : {};
9849
- }
9850
- if (isSubmitted || day.isDirty || month.isDirty || year.isDirty) {
9851
- if (!validator.isNumeric(year.value.toString()) || !DateTime.fromObject({
9852
- year: parseInt(year.value, 10)
9853
- }).isValid) {
9854
- return {
9855
- error: i18n("validation.birthdate.year"),
9856
- year: true
9857
- };
9858
- }
9859
- var birthdate = format(state);
9860
- if (!birthdate || !validator.isISO8601(birthdate)) {
9861
- return {
9862
- error: i18n('validation.birthdate.dayOfMonth'),
9863
- day: true
9864
- };
9865
- }
9866
- if (!(validator.isNumeric(month.value.toString()) && validator.isNumeric(day.value.toString())) || !DateTime.fromObject({
9867
- year: year.value,
9868
- month: month.value,
9869
- day: day.value
9870
- }).isValid) {
9871
- return {
9872
- error: i18n("validation.birthdate.dayOfMonth"),
9873
- day: true
9874
- };
9875
- }
9876
- var limitAge = validateLimitAge(day.value, month.value, year.value);
9877
- if (limitAge) {
9878
- return {
9879
- error: i18n("validation.".concat(limitAge))
9880
- };
9881
- }
9882
- }
9883
- return {};
9884
- }
9885
- };
9809
+ function dateField(props, config) {
9810
+ return createField(_objectSpread2(_objectSpread2({}, props), {}, {
9811
+ format: {
9812
+ bind: function bind(value) {
9813
+ var dt = value ? DateTime.fromISO(value) : DateTime.invalid('empty value');
9814
+ return dt.isValid ? {
9815
+ raw: dt
9816
+ } : undefined;
9817
+ },
9818
+ unbind: function unbind(value) {
9819
+ return value.raw.toISODate();
9820
+ }
9821
+ },
9822
+ validator: props.validator ? datetimeValidator(config.language).and(props.validator) : datetimeValidator(config.language),
9823
+ component: DateField,
9824
+ extendedParams: {
9825
+ locale: config.language
9886
9826
  }
9887
- };
9827
+ }));
9828
+ }
9829
+
9830
+ var _excluded$6 = ["min", "max", "label"];
9831
+ var ageLimitValidator = function ageLimitValidator() {
9832
+ var min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
9833
+ var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 129;
9834
+ return new Validator({
9835
+ rule: function rule(value) {
9836
+ var age = DateTime.now().diff(value.raw, 'years').years;
9837
+ return min < age && age < max;
9838
+ },
9839
+ hint: 'birthdate.yearLimit',
9840
+ parameters: {
9841
+ min: min,
9842
+ max: max
9843
+ }
9844
+ });
9845
+ };
9846
+ function birthdateField(_ref, config) {
9847
+ var min = _ref.min,
9848
+ max = _ref.max,
9849
+ label = _ref.label,
9850
+ props = _objectWithoutProperties(_ref, _excluded$6);
9851
+ return dateField(_objectSpread2(_objectSpread2({}, props), {}, {
9852
+ label: label || 'birthdate',
9853
+ validator: ageLimitValidator(min, max)
9854
+ }), config);
9888
9855
  }
9889
9856
 
9890
9857
  var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
@@ -9900,7 +9867,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
9900
9867
  _defineProperty(_assertThisInitialized(_this), "asYouType", function (inputValue) {
9901
9868
  var country = _this.props.value.country;
9902
9869
  var phone = new AsYouType(country).input(inputValue);
9903
- var formatted = format$1(phone, country, 'International');
9870
+ var formatted = format(phone, country, 'International');
9904
9871
  var isValid = isValidNumber(phone, country);
9905
9872
  _this.props.onChange({
9906
9873
  value: {
@@ -9921,7 +9888,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
9921
9888
  country = _this$props$value.country;
9922
9889
  try {
9923
9890
  var parsed = parse(raw, country);
9924
- var phoneValue = country === parsed.country ? format$1(parsed, 'National') : raw;
9891
+ var phoneValue = country === parsed.country ? format(parsed, 'National') : raw;
9925
9892
  this.asYouType(phoneValue);
9926
9893
  } catch (e) {
9927
9894
  console.error(e);
@@ -10505,7 +10472,7 @@ var predefinedFields = {
10505
10472
  }, cfg));
10506
10473
  }
10507
10474
  };
10508
- function customFieldComponent(customField, cfg) {
10475
+ function customFieldComponent(customField, cfg, config) {
10509
10476
  var baseConfig = _objectSpread2(_objectSpread2({
10510
10477
  label: customField.name
10511
10478
  }, cfg), {}, {
@@ -10517,7 +10484,7 @@ function customFieldComponent(customField, cfg) {
10517
10484
  }) : _objectSpread2({}, baseConfig);
10518
10485
  return checkboxField(checkboxConfig);
10519
10486
  } else if (customField.dataType === 'date') {
10520
- return dateField(baseConfig);
10487
+ return dateField(baseConfig, config);
10521
10488
  } else if (customField.dataType === 'integer') {
10522
10489
  return simpleField(_objectSpread2(_objectSpread2({}, baseConfig), {}, {
10523
10490
  type: 'number',
@@ -10612,7 +10579,7 @@ var resolveField = function resolveField(fieldConfig, config) {
10612
10579
  }
10613
10580
  var customField = findCustomField(config, camelPath);
10614
10581
  if (customField) {
10615
- return customFieldComponent(customField, fieldConfig);
10582
+ return customFieldComponent(customField, fieldConfig, config);
10616
10583
  }
10617
10584
  var camelPathSplit = camelPath.split('.v'); // TODO What if consent start with a `v`?
10618
10585
  var consentField = findConsentField(config, camelPathSplit[0]);
@@ -11233,12 +11200,10 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
11233
11200
  var _this5$props = _this5.props,
11234
11201
  apiClient = _this5$props.apiClient,
11235
11202
  auth = _this5$props.auth,
11236
- challengeId = _this5$props.challengeId,
11237
- accessToken = _this5$props.accessToken;
11203
+ challengeId = _this5$props.challengeId;
11238
11204
  return apiClient.verifyMfaPasswordless({
11239
11205
  challengeId: challengeId,
11240
- verificationCode: data.verificationCode,
11241
- accessToken: accessToken
11206
+ verificationCode: data.verificationCode
11242
11207
  }).then(function (resp) {
11243
11208
  return window.location.replace(auth.redirectUri + "?" + toQueryString(resp));
11244
11209
  });
@@ -12541,7 +12506,7 @@ var Credential = withTheme(styled(Card)(_templateObject3$6 || (_templateObject3$
12541
12506
  var CardContent = withTheme(styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n white-space: initial;\n"])), function (props) {
12542
12507
  return props.theme.get('_blockInnerHeight');
12543
12508
  }));
12544
- var dateFormat = function dateFormat(dateString, locales) {
12509
+ var dateFormat$1 = function dateFormat(dateString, locales) {
12545
12510
  return new Date(dateString).toLocaleDateString(locales, {
12546
12511
  timeZone: 'UTC'
12547
12512
  });
@@ -12564,7 +12529,7 @@ var MfaList = compose(withI18n, withConfig)(function (_ref) {
12564
12529
  }
12565
12530
  }, friendlyName), /*#__PURE__*/React__default.createElement("div", null, email || phoneNumber), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", null, i18n('mfaList.createdAt'), "\xA0: "), /*#__PURE__*/React__default.createElement("time", {
12566
12531
  dateTime: createdAt
12567
- }, dateFormat(createdAt, config.language)))));
12532
+ }, dateFormat$1(createdAt, config.language)))));
12568
12533
  }));
12569
12534
  });
12570
12535
  var mfaListWidget = createWidget({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reachfive/identity-ui",
3
- "version": "1.21.0",
3
+ "version": "1.22.0",
4
4
  "description": "ReachFive Identity Web UI SDK",
5
5
  "author": "ReachFive",
6
6
  "repository": {
@@ -20,7 +20,7 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@hypnosphi/recompose": "0.30.5",
23
- "@reachfive/identity-core": "1.25.0",
23
+ "@reachfive/identity-core": "^1.30.0",
24
24
  "@reachfive/zxcvbn": "1.0.0-alpha.2",
25
25
  "buffer": "^6.0.3",
26
26
  "char-info": "0.3.2",