@7shifts/sous-chef 3.51.0 → 4.0.0-beta.0

package/dist/index.js

@@ -5902,15 +5902,33 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var initialValue$1 = {
+  country: 'US'
+};
+var ProviderConfigContext = React.createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = React.useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  return context;
+};
+
 var SousChefProvider = function SousChefProvider(_ref) {
   var children = _ref.children,
     _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? en : _ref$i18n;
-  return React__default.createElement(TranslationsContext.Provider, {
+    i18n = _ref$i18n === void 0 ? en : _ref$i18n,
+    _ref$country = _ref.country,
+    country = _ref$country === void 0 ? 'US' : _ref$country;
+  return React__default.createElement(ProviderConfigContext.Provider, {
+    value: {
+      country: country
+    }
+  }, React__default.createElement(TranslationsContext.Provider, {
     value: {
       i18n: i18n
     }
-  }, React__default.createElement(ToastContainer, null), children);
+  }, React__default.createElement(ToastContainer, null), children));
 };
 
 var styles$a = {"data-table-header":"_1vpCK","data-table-header__item":"_dJWps","data-table-header__item--sortable":"_14AEw","data-table-header__itemfocus":"_2JSFR","data-table-header__item--action":"_29TM7","data-table-header__item-content":"_2Zpt5","data-table-header__item-content--right-align":"_3WtwH","data-table-header__sort-icon":"_3codU"};
@@ -6119,12 +6137,12 @@ var DATA_TABLE_SCROLL_STATES = {
 };
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
-var initialValue$1 = {
+var initialValue$2 = {
   columns: [],
   numberOfRows: 0,
   state: DATA_TABLE_STATES.SKELETON_LOADING
 };
-var Context = React.createContext(initialValue$1);
+var Context = React.createContext(initialValue$2);
 var useDataTableContext = function useDataTableContext() {
   var context = React.useContext(Context);
   if (!context) {
@@ -8127,7 +8145,8 @@ var Calendar$1 = function Calendar(_ref) {
     disabledDays = _ref.disabledDays,
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
-    onMonthChange = _ref.onMonthChange;
+    onMonthChange = _ref.onMonthChange,
+    id = _ref.id;
   var _useDropdownContext = useDropdownContext(),
     isInsideDropdown = _useDropdownContext.isOpen;
   var translate = useTranslation();
@@ -8187,7 +8206,7 @@ var Calendar$1 = function Calendar(_ref) {
     fromYear: calendarDropdownFromYear,
     toYear: calendarDropdownToYear,
     disabled: disabledDays,
-    defaultMonth: initialMonth || selected,
+    defaultMonth: initialMonth || selected || undefined,
     showOutsideDays: true,
     weekStartsOn: weekStart,
     onMonthChange: onMonthChange,
@@ -8204,7 +8223,9 @@ var Calendar$1 = function Calendar(_ref) {
     }
   };
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$G['calendar']
+    className: styles$G['calendar'],
+    id: id,
+    tabIndex: 1
   }, React__default.createElement("div", {
     className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
@@ -8217,7 +8238,7 @@ var Calendar$1 = function Calendar(_ref) {
     role: "dialog"
   }, mode === CALENDAR_MODE.DAY ? React__default.createElement(reactDayPicker.DayPicker, _extends({
     mode: "single",
-    selected: selected,
+    selected: selected || undefined,
     captionLayout: "dropdown-buttons"
   }, defaultProps)) : React__default.createElement(reactDayPicker.DayPicker, _extends({
     mode: "range",
@@ -11019,9 +11040,12 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
       error: error !== undefined ? controllers.error : formikState.error,
       value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (newValue) {
-        formik.setFieldValue(name, newValue === undefined ? null : dateFns.startOfDay(newValue));
+        formik.setFieldValue(name, newValue === undefined || !dateFns.isDate(newValue) ? null : dateFns.startOfDay(newValue));
       },
-      onBlur: _onBlur ? controllers.onBlur : function () {
+      onBlur: _onBlur ? function () {
+        formik.setFieldTouched(name);
+        controllers.onBlur();
+      } : function () {
         formik.setFieldTouched(name);
       }
     });
@@ -11031,6 +11055,117 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
 
 var inputStyles = {"text-field":"_10EFd","date-field":"_33Mhr","text-field--invalid":"_3iXEe","date-field--invalid":"_iupg8","text-field--prefixed":"_2lxID","date-field--prefixed":"_Ukc0m","text-field--suffixed":"_2AI5V","date-field--suffixed":"_3P7jE"};
 
+var DEFAULT_SLOTS = 'dMy';
+var maskfy = function maskfy(params) {
+  var value = params.value,
+    format = params.format,
+    _params$slots = params.slots,
+    slots = _params$slots === void 0 ? DEFAULT_SLOTS : _params$slots,
+    cursorPosition = params.cursorPosition;
+  var formatCursorPosition = format[cursorPosition.selectionStart];
+  var isInAnchorPosition = !slots.includes(formatCursorPosition);
+  var isDeletingAnchor = value.length < format.length && isInAnchorPosition;
+  var _calculateCursorPosit = calculateCursorPosition(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    selectionStart = _calculateCursorPosit[0],
+    selectionEnd = _calculateCursorPosit[1];
+  return {
+    maskedValue: calculateMask(_extends({}, params, {
+      isDeletingAnchor: isDeletingAnchor
+    })),
+    cursorPosition: {
+      selectionStart: selectionStart,
+      selectionEnd: selectionEnd
+    }
+  };
+};
+var calculateMask = function calculateMask(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? DEFAULT_SLOTS : _ref$slots,
+    isDeletingAnchor = _ref.isDeletingAnchor,
+    cursorPosition = _ref.cursorPosition;
+  var slotsSet = new Set(slots);
+  var accept = new RegExp('\\d', 'g');
+  var inputMatches = value.match(accept) || [];
+  var _calculateDigitReplac = calculateDigitReplacement(slots, format, inputMatches.length, cursorPosition),
+    isReplacingDigit = _calculateDigitReplac.isReplacingDigit,
+    isReplacingAt = _calculateDigitReplac.isReplacingAt;
+  if (isReplacingDigit) {
+    inputMatches.splice(isReplacingAt, 1);
+  }
+  if (isDeletingAnchor) {
+    inputMatches.pop();
+  }
+  var maskedValue = Array.from(format, function (character) {
+    return inputMatches[0] === character || slotsSet.has(character) ? inputMatches.shift() || character : character;
+  });
+  return maskedValue.join('');
+};
+var calculateCursorPosition = function calculateCursorPosition(params) {
+  var value = params.value,
+    format = params.format,
+    cursorPosition = params.cursorPosition,
+    _params$slots2 = params.slots,
+    slots = _params$slots2 === void 0 ? DEFAULT_SLOTS : _params$slots2;
+  var slotsSet = new Set(slots);
+  var prev = function (j) {
+    return Array.from(format, function (c, i) {
+      return slotsSet.has(c) ? j = i + 1 : j;
+    });
+  }(0);
+  var first = [].concat(format).findIndex(function (c) {
+    return slotsSet.has(c);
+  });
+  var calculatedCursorRange = [cursorPosition.selectionStart, cursorPosition.selectionEnd].map(function (position) {
+    var valueCharacters = calculateMask(_extends({}, params, {
+      value: value.slice(0, position)
+    })).split('');
+    var slotIndex = valueCharacters.findIndex(function (character) {
+      return slotsSet.has(character);
+    });
+    if (slotIndex < 0) {
+      return prev[prev.length - 1];
+    }
+    return slotIndex;
+  });
+  return calculatedCursorRange;
+};
+var calculateDigitReplacement = function calculateDigitReplacement(slots, format, amountOfDigitsTyped, cursorPosition) {
+  var slotsRegExp = new RegExp("[" + slots.split('').join('|') + "]", 'g');
+  var slotsMatches = format.match(slotsRegExp) || [];
+  var isReplacingDigit = amountOfDigitsTyped > slotsMatches.length;
+  var getCharacterPosition = function getCharacterPosition() {
+    var formatUntilTheCursorPoint = format.slice(0, cursorPosition.selectionStart);
+    var slotsFormatSlicedMatches = formatUntilTheCursorPoint.match(slotsRegExp) || [];
+    return slotsFormatSlicedMatches.length;
+  };
+  return {
+    isReplacingDigit: isReplacingDigit,
+    isReplacingAt: isReplacingDigit ? getCharacterPosition() : 0
+  };
+};
+
+var useFieldMask = function useFieldMask(format) {
+  var maskfyField = function maskfyField(input) {
+    var _maskfy = maskfy({
+        value: input.value,
+        format: format,
+        cursorPosition: {
+          selectionStart: input.selectionStart,
+          selectionEnd: input.selectionEnd
+        }
+      }),
+      maskedValue = _maskfy.maskedValue,
+      cursorPosition = _maskfy.cursorPosition;
+    input.value = maskedValue.toUpperCase();
+    input.setSelectionRange(cursorPosition.selectionStart, cursorPosition.selectionEnd);
+  };
+  return maskfyField;
+};
+
 var DateField = function DateField(_ref) {
   var _classnames;
   var name = _ref.name,
@@ -11053,6 +11188,8 @@ var DateField = function DateField(_ref) {
     onMonthChange = _ref.onMonthChange,
     testId = _ref.testId,
     weekStart = _ref.weekStart;
+  var calendarId = name + "-calendar";
+  var maskfy = useFieldMask(format);
   var inputRef = React.useRef(null);
   var _useState = React.useState(false),
     showCalendar = _useState[0],
@@ -11065,17 +11202,15 @@ var DateField = function DateField(_ref) {
     onBlur: onBlur,
     error: error
   });
-  var _useState2 = React.useState(function () {
-      if (defaultValue) {
-        return formatDate(defaultValue, format);
-      }
-      if (controllers.value) {
-        return formatDate(controllers.value, format);
-      }
-      return '';
-    }),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+  var getDefaultValue = function getDefaultValue() {
+    if (defaultValue) {
+      return formatDate(defaultValue, format);
+    }
+    if (controllers.value) {
+      return formatDate(controllers.value, format);
+    }
+    return '';
+  };
   var hasError = controllers.error;
   var fieldProps = {
     name: name,
@@ -11095,10 +11230,11 @@ var DateField = function DateField(_ref) {
     return undefined;
   };
   React.useEffect(function () {
-    if (!controllers.value && !!inputValue) {
-      setInputValue('');
+    if (!controllers.value && inputRef.current) {
+      inputRef.current.value = '';
     }
   }, [controllers.value]);
+  var selectedDate = getSelectedDate();
   var onClickOutside = React.useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11117,31 +11253,47 @@ var DateField = function DateField(_ref) {
     ref: inputRef,
     readOnly: readOnly,
     disabled: disabled,
-    onFocus: function onFocus() {
-      return setShowCalendar(true);
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
     },
     onClick: function onClick() {
       return setShowCalendar(true);
     },
     placeholder: placeholder || format.toUpperCase(),
     onChange: function onChange(event) {
+      maskfy(event.target);
       var parsedDate = parseDate(event.target.value, format);
       if (parsedDate) {
         controllers.onChange(parsedDate);
       }
-      setInputValue(event.target.value);
     },
-    onBlur: controllers.onBlur,
-    maxLength: format.length,
-    value: inputValue
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        controllers.onBlur();
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!parsedDate) {
+            controllers.onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    },
+    defaultValue: getDefaultValue()
   })), showCalendar && React__default.createElement(Calendar$1, {
     onSelect: function onSelect(date) {
       var _inputRef$current;
-      setInputValue(formatDate(date, format));
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
       controllers.onChange(date);
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     },
-    selected: getSelectedDate(),
+    selected: selectedDate,
     anchorRef: inputRef,
     onClickOutside: onClickOutside,
     disabledDays: function disabledDays(day) {
@@ -11149,7 +11301,9 @@ var DateField = function DateField(_ref) {
     },
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
-    weekStart: weekStart
+    weekStart: weekStart,
+    key: selectedDate ? formatDate(selectedDate, format) : '',
+    id: calendarId
   }));
 };
 
@@ -11228,7 +11382,8 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
     onMonthChange = _ref.onMonthChange,
-    mode = _ref.mode;
+    mode = _ref.mode,
+    id = _ref.id;
   var translate = useTranslation();
   var position = CALENDAR_PLACEMENT.BOTTOM;
   var _useState = React.useState(null),
@@ -11266,13 +11421,16 @@ var DateRangeCalendar = function DateRangeCalendar(_ref) {
   };
   var endDateProps = {
     defaultMonth: initialMonth || end || start,
-    fromMonth: start
+    fromMonth: start,
+    month: end
   };
   var datePickerProps = mode === 'start-date' ? startDateProps : endDateProps;
   var DAYS = getDays(translate);
   var MONTH_NAMES = getMonths(translate);
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$G['calendar']
+    className: styles$G['calendar'],
+    id: id,
+    tabIndex: 1
   }, React__default.createElement("div", {
     className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
@@ -11335,6 +11493,8 @@ var FromDate = function FromDate(_ref) {
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
   var inputRef = React.useRef(null);
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
   var disabledDaysChecks = end ? [{
     after: end
   }] : [];
@@ -11361,13 +11521,43 @@ var FromDate = function FromDate(_ref) {
     "data-testid": testId && testId + "-from-date",
     type: "text",
     ref: inputRef,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
+    },
+    onClick: function onClick() {
       return setShowCalendar(true);
     },
-    value: start ? formatDate(start, format) : '',
-    placeholder: placeholder
+    placeholder: placeholder || format.toUpperCase(),
+    defaultValue: start ? formatDate(start, format) : '',
+    onChange: function onChange(event) {
+      maskfy(event.target);
+      var parsedDate = parseDate(event.target.value, format);
+      if (parsedDate) {
+        handleChange(parsedDate);
+      }
+    },
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!parsedDate) {
+            onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    }
   }), showCalendar && React__default.createElement(DateRangeCalendar, {
-    onSelect: handleChange,
+    onSelect: function onSelect(date) {
+      handleChange(date);
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
+    },
     onClickOutside: onClickOutside,
     anchorRef: inputRef,
     start: start,
@@ -11375,7 +11565,8 @@ var FromDate = function FromDate(_ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "start-date"
+    mode: "start-date",
+    id: calendarId
   }));
 };
 
@@ -11390,12 +11581,23 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     maxDays = _ref.maxDays,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
+    _onBlur = _ref.onBlur,
     testId = _ref.testId;
   var _useState = React.useState(false),
     showCalendar = _useState[0],
     setShowCalendar = _useState[1];
+  var maskfy = useFieldMask(format);
+  var calendarId = name + "-start-calendar";
+  var inputRef = ref;
+  React.useEffect(function () {
+    if (!inputRef || !inputRef.current) {
+      return;
+    }
+    if (!end && inputRef.current.value !== '') {
+      inputRef.current.value = '';
+    }
+  }, [end, inputRef]);
   var disabledDaysChecks = start ? [{
     before: start
   }] : [];
@@ -11406,6 +11608,18 @@ var ToDateElement = function ToDateElement(_ref, ref) {
       disabledDaysChecks.push(disabledDays);
     }
   }
+  var isValidDate = function isValidDate(value) {
+    if (!value) {
+      return false;
+    }
+    if (!start) {
+      return true;
+    }
+    if (start > value) {
+      return false;
+    }
+    return true;
+  };
   var onClickOutside = React.useCallback(function () {
     return setShowCalendar(false);
   }, [setShowCalendar]);
@@ -11417,14 +11631,45 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     "data-testid": testId && testId + "-to-date",
     type: "text",
     ref: ref,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(e) {
+      setShowCalendar(true);
+      maskfy(e.target);
+    },
+    onClick: function onClick() {
       return setShowCalendar(true);
     },
-    value: end ? formatDate(end, format) : '',
-    placeholder: placeholder,
-    onBlur: onBlur
+    placeholder: placeholder || format.toUpperCase(),
+    defaultValue: end ? formatDate(end, format) : '',
+    onChange: function onChange(event) {
+      maskfy(event.target);
+      var parsedDate = parseDate(event.target.value, format);
+      if (isValidDate(parsedDate)) {
+        _onChange(parsedDate);
+      }
+    },
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        var parsedDate = parseDate(event.target.value, format);
+        _onBlur();
+        if (!calendar || calendar.contains(document.activeElement)) {
+          if (!isValidDate(parsedDate)) {
+            event.target.value = '';
+            _onChange(null);
+          }
+          return;
+        }
+        setShowCalendar(false);
+      }, 100);
+    }
   }), showCalendar && React__default.createElement(DateRangeCalendar, {
-    onSelect: onChange,
+    onSelect: function onSelect(date) {
+      _onChange(date);
+      if (!inputRef || !inputRef.current) {
+        return;
+      }
+      inputRef.current.value = formatDate(date, format);
+    },
     onClickOutside: onClickOutside,
     anchorRef: ref,
     start: start,
@@ -11432,7 +11677,8 @@ var ToDateElement = function ToDateElement(_ref, ref) {
     disabledDays: disabledDaysChecks,
     weekStart: weekStart,
     maxDays: maxDays,
-    mode: "end-date"
+    mode: "end-date",
+    id: calendarId
   }));
 };
 var ToDate = React.forwardRef(ToDateElement);
@@ -11453,7 +11699,7 @@ var DateRangeField = function DateRangeField(_ref) {
     placeholder = _ref.placeholder,
     disabled = _ref.disabled,
     _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$weekStart = _ref.weekStart,
     weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
     maxDays = _ref.maxDays,
@@ -11498,8 +11744,8 @@ var DateRangeField = function DateRangeField(_ref) {
     readOnly: readOnly,
     onChange: function onChange(val) {
       return controllers.onChange({
-        start: val,
-        end: end
+        start: val || undefined,
+        end: undefined
       });
     },
     onDayClick: function onDayClick() {
@@ -11525,7 +11771,7 @@ var DateRangeField = function DateRangeField(_ref) {
     onChange: function onChange(val) {
       return controllers.onChange({
         start: start,
-        end: val
+        end: val || undefined
       });
     },
     ref: toInputRef,
@@ -12105,7 +12351,8 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     _onChange = _ref.onChange,
     _onBlur = _ref.onBlur,
     error = _ref.error,
-    onMenuInputFocus = _ref.onMenuInputFocus;
+    onMenuInputFocus = _ref.onMenuInputFocus,
+    defaultCountry = _ref.defaultCountry;
   var _useFormContext = useFormContext(),
     formik = _useFormContext.formik;
   var id = useFieldId({
@@ -12134,6 +12381,28 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     }
   };
   var formikState = getFormikState(name, formik);
+  var phoneFieldValue = formik && formikState && !value ? formikState.value : value;
+  var _useProviderConfig = useProviderConfig(),
+    country = _useProviderConfig.country;
+  var parseMeta = function parseMeta(value) {
+    if (value === '') {
+      return {
+        country: defaultCountry || country,
+        phone: ''
+      };
+    }
+    var phone = libphonenumberJs.parsePhoneNumber(value);
+    var formatedPhone = new libphonenumberJs.AsYouType(phone.country).input(value.replace('+' + phone.countryCallingCode, ''));
+    return {
+      country: phone.country,
+      phone: formatedPhone
+    };
+  };
+  var _useState = React.useState(function () {
+      return parseMeta(phoneFieldValue || '');
+    }),
+    meta = _useState[0],
+    setMeta = _useState[1];
   if (formik && formikState) {
     controllers = _extends({}, controllers, {
       error: error ? controllers.error : formikState.error,
@@ -12158,11 +12427,14 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     });
   }
-  return controllers;
+  return _extends({}, controllers, {
+    metaData: meta,
+    changeMeta: setMeta
+  });
 };
 
 var usePhoneField = function usePhoneField(_ref) {
-  var _classnames, _controllers$value;
+  var _classnames;
   var autoFocus = _ref.autoFocus,
     disabled = _ref.disabled,
     error = _ref.error,
@@ -12176,14 +12448,16 @@ var usePhoneField = function usePhoneField(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     ref = _ref.ref,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    defaultCountry = _ref.defaultCountry;
   var controllers = usePhoneFieldControllers({
     error: error,
     id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
-    value: value
+    value: value,
+    defaultCountry: defaultCountry
   });
   var hasError = !!controllers.error;
   var inputProps = {
@@ -12202,7 +12476,7 @@ var usePhoneField = function usePhoneField(_ref) {
     ref: ref,
     size: 1,
     type: 'text',
-    value: (_controllers$value = controllers.value) === null || _controllers$value === void 0 ? void 0 : _controllers$value.phone
+    value: controllers.metaData.phone
   };
   var fieldProps = {
     caption: caption,
@@ -12214,7 +12488,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -13010,14 +13286,15 @@ var PhoneField = function PhoneField(_ref) {
     })),
     inputProps = _usePhoneField.inputProps,
     fieldProps = _usePhoneField.fieldProps,
-    fieldValue = _usePhoneField.fieldValue;
-  var selectedCountry = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.country;
+    metaData = _usePhoneField.metaData,
+    changeMeta = _usePhoneField.changeMeta;
+  var selectedCountry = metaData.country;
   var handleCountryChange = function handleCountryChange(countryCode) {
-    inputProps.onChange({
+    changeMeta({
       country: countryCode,
-      phone: '',
-      internationalPhone: ''
+      phone: ''
     });
+    inputProps.onChange('');
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -13025,11 +13302,22 @@ var PhoneField = function PhoneField(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(e.target.value);
     e.target.value = formatedPhone;
-    inputProps.onChange({
+    var internationalPhone = '';
+    var parseError = null;
+    try {
+      var phoneNumber = libphonenumberJs.parsePhoneNumber(e.target.value, selectedCountry);
+      internationalPhone = phoneNumber.number;
+    } catch (error) {
+      parseError = error;
+    }
+    if (parseError && parseError.message === 'TOO_LONG') {
+      return;
+    }
+    changeMeta({
       country: selectedCountry,
-      phone: formatedPhone,
-      internationalPhone: ''
+      phone: formatedPhone
     });
+    inputProps.onChange(internationalPhone);
   };
   var handlePhoneBlur = function handlePhoneBlur(e) {
     var internationalPhone = '';
@@ -13039,31 +13327,9 @@ var PhoneField = function PhoneField(_ref) {
     } catch (error) {
       console.warn("PhoneField: " + error);
     }
-    var value = {
-      country: selectedCountry,
-      phone: e.target.value,
-      internationalPhone: internationalPhone
-    };
-    inputProps.onChange(value);
-    inputProps.onBlur(value);
+    inputProps.onChange(internationalPhone);
+    inputProps.onBlur(internationalPhone);
   };
-  React.useEffect(function () {
-    if (Boolean(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone) && (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.phone) === '') {
-      var formatedPhone = '';
-      try {
-        var phoneNumber = libphonenumberJs.parsePhoneNumber(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone);
-        formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(phoneNumber.nationalNumber);
-      } catch (error) {
-        console.warn("PhoneField: " + error);
-      }
-      var value = {
-        country: selectedCountry,
-        phone: formatedPhone,
-        internationalPhone: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone
-      };
-      inputProps.onChange(value);
-    }
-  }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
     className: styles$1c['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {