@trackunit/react-form-components 0.0.154 → 0.0.156

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/index.cjs.js CHANGED
@@ -4398,7 +4398,7 @@ function checkNumberLengthForType(nationalNumber, type, metadata) {
4398
4398
  * @return {string}
4399
4399
  */
4400
4400
 
4401
- function isPossiblePhoneNumber$2(input, options, metadata) {
4401
+ function isPossiblePhoneNumber(input, options, metadata) {
4402
4402
  /* istanbul ignore if */
4403
4403
  if (options === undefined) {
4404
4404
  options = {};
@@ -4779,11 +4779,11 @@ function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o
4779
4779
 
4780
4780
  function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
4781
4781
 
4782
- function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4782
+ function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4783
4783
 
4784
- function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4784
+ function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4785
4785
 
4786
- function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4786
+ function _defineProperty$7(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4787
4787
  var DEFAULT_OPTIONS = {
4788
4788
  formatExtension: function formatExtension(formattedNumber, extension, metadata) {
4789
4789
  return "".concat(formattedNumber).concat(metadata.ext()).concat(extension);
@@ -4808,7 +4808,7 @@ var DEFAULT_OPTIONS = {
4808
4808
  function formatNumber(input, format, options, metadata) {
4809
4809
  // Apply default options.
4810
4810
  if (options) {
4811
- options = _objectSpread$5(_objectSpread$5({}, DEFAULT_OPTIONS), options);
4811
+ options = _objectSpread$6(_objectSpread$6({}, DEFAULT_OPTIONS), options);
4812
4812
  } else {
4813
4813
  options = DEFAULT_OPTIONS;
4814
4814
  }
@@ -4953,11 +4953,11 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
4953
4953
  }
4954
4954
  }
4955
4955
 
4956
- function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4956
+ function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4957
4957
 
4958
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4958
+ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4959
4959
 
4960
- function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4960
+ function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4961
4961
 
4962
4962
  function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4963
4963
 
@@ -5021,7 +5021,7 @@ var PhoneNumber = /*#__PURE__*/function () {
5021
5021
  }, {
5022
5022
  key: "isPossible",
5023
5023
  value: function isPossible() {
5024
- return isPossiblePhoneNumber$2(this, {
5024
+ return isPossiblePhoneNumber(this, {
5025
5025
  v2: true
5026
5026
  }, this.getMetadata());
5027
5027
  }
@@ -5067,7 +5067,7 @@ var PhoneNumber = /*#__PURE__*/function () {
5067
5067
  }, {
5068
5068
  key: "format",
5069
5069
  value: function format(_format, options) {
5070
- return formatNumber(this, _format, options ? _objectSpread$4(_objectSpread$4({}, options), {}, {
5070
+ return formatNumber(this, _format, options ? _objectSpread$5(_objectSpread$5({}, options), {}, {
5071
5071
  v2: true
5072
5072
  }) : {
5073
5073
  v2: true
@@ -6110,24 +6110,24 @@ function parsePhoneNumber$3(formattedPhoneNumber, defaultCountry, defaultCalling
6110
6110
  };
6111
6111
  }
6112
6112
 
6113
- function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6113
+ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6114
6114
 
6115
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6115
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6116
6116
 
6117
- function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6117
+ function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6118
6118
  function parsePhoneNumberWithError(text, options, metadata) {
6119
- return parse$1(text, _objectSpread$3(_objectSpread$3({}, options), {}, {
6119
+ return parse$1(text, _objectSpread$4(_objectSpread$4({}, options), {}, {
6120
6120
  v2: true
6121
6121
  }), metadata);
6122
6122
  }
6123
6123
 
6124
6124
  function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
6125
6125
 
6126
- function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6126
+ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6127
6127
 
6128
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6128
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6129
6129
 
6130
- function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6130
+ function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6131
6131
 
6132
6132
  function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
6133
6133
 
@@ -6174,7 +6174,7 @@ function normalizeArguments(args) {
6174
6174
  }
6175
6175
 
6176
6176
  if (arg_2) {
6177
- options = _objectSpread$2({
6177
+ options = _objectSpread$3({
6178
6178
  defaultCountry: arg_2
6179
6179
  }, options);
6180
6180
  }
@@ -6202,15 +6202,15 @@ var isObject = function isObject(_) {
6202
6202
  return _typeof$1(_) === 'object';
6203
6203
  };
6204
6204
 
6205
- function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6205
+ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6206
6206
 
6207
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6207
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6208
6208
 
6209
- function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6209
+ function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6210
6210
  function parsePhoneNumber$2(text, options, metadata) {
6211
6211
  // Validate `defaultCountry`.
6212
6212
  if (options && options.defaultCountry && !isSupportedCountry(options.defaultCountry, metadata)) {
6213
- options = _objectSpread$1(_objectSpread$1({}, options), {}, {
6213
+ options = _objectSpread$2(_objectSpread$2({}, options), {}, {
6214
6214
  defaultCountry: undefined
6215
6215
  });
6216
6216
  } // Parse phone number.
@@ -6235,12 +6235,30 @@ function parsePhoneNumber$1() {
6235
6235
  return parsePhoneNumber$2(text, options, metadata);
6236
6236
  }
6237
6237
 
6238
+ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6239
+
6240
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6241
+
6242
+ function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6243
+ function isValidPhoneNumber$1() {
6244
+ var _normalizeArguments = normalizeArguments(arguments),
6245
+ text = _normalizeArguments.text,
6246
+ options = _normalizeArguments.options,
6247
+ metadata = _normalizeArguments.metadata;
6248
+
6249
+ options = _objectSpread$1(_objectSpread$1({}, options), {}, {
6250
+ extract: false
6251
+ });
6252
+ var phoneNumber = parsePhoneNumber$2(text, options, metadata);
6253
+ return phoneNumber && phoneNumber.isValid() || false;
6254
+ }
6255
+
6238
6256
  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6239
6257
 
6240
6258
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6241
6259
 
6242
6260
  function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6243
- function isPossiblePhoneNumber$1() {
6261
+ function validatePhoneNumberLength$1() {
6244
6262
  var _normalizeArguments = normalizeArguments(arguments),
6245
6263
  text = _normalizeArguments.text,
6246
6264
  options = _normalizeArguments.options,
@@ -6248,9 +6266,25 @@ function isPossiblePhoneNumber$1() {
6248
6266
 
6249
6267
  options = _objectSpread(_objectSpread({}, options), {}, {
6250
6268
  extract: false
6251
- });
6252
- var phoneNumber = parsePhoneNumber$2(text, options, metadata);
6253
- return phoneNumber && phoneNumber.isPossible() || false;
6269
+ }); // Parse phone number.
6270
+
6271
+ try {
6272
+ var phoneNumber = parsePhoneNumberWithError(text, options, metadata);
6273
+ metadata = new Metadata(metadata);
6274
+ metadata.selectNumberingPlan(phoneNumber.countryCallingCode);
6275
+ var result = checkNumberLength(phoneNumber.nationalNumber, metadata);
6276
+
6277
+ if (result !== 'IS_POSSIBLE') {
6278
+ return result;
6279
+ }
6280
+ } catch (error) {
6281
+ /* istanbul ignore else */
6282
+ if (error instanceof ParseError) {
6283
+ return error.message;
6284
+ } else {
6285
+ throw error;
6286
+ }
6287
+ }
6254
6288
  }
6255
6289
 
6256
6290
  function getCountries$1(metadata) {
@@ -6261,8 +6295,12 @@ function parsePhoneNumber() {
6261
6295
  return withMetadataArgument(parsePhoneNumber$1, arguments)
6262
6296
  }
6263
6297
 
6264
- function isPossiblePhoneNumber() {
6265
- return withMetadataArgument(isPossiblePhoneNumber$1, arguments)
6298
+ function isValidPhoneNumber() {
6299
+ return withMetadataArgument(isValidPhoneNumber$1, arguments)
6300
+ }
6301
+
6302
+ function validatePhoneNumberLength() {
6303
+ return withMetadataArgument(validatePhoneNumberLength$1, arguments)
6266
6304
  }
6267
6305
 
6268
6306
  function getCountries() {
@@ -6295,33 +6333,9 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
6295
6333
  /**
6296
6334
  * A custom hook for managing phone number input state and validation.
6297
6335
  *
6298
- * @returns {object} - An object containing state values and event handler functions.
6299
- * @property {Function} getIsCountryCodeInvalid - A function for check if country code is valid
6300
- * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
6301
- * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
6302
6336
  * @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
6303
- * @property {string} combinedValue - The combined country code and phone number value.
6304
6337
  */
6305
6338
  const usePhoneInput = () => {
6306
- const getIsCountryCodeInvalid = (code) => {
6307
- if (code) {
6308
- return false;
6309
- }
6310
- return true;
6311
- };
6312
- const getIsNumberInvalid = (number) => {
6313
- if (number) {
6314
- return false;
6315
- }
6316
- return true;
6317
- };
6318
- const getIsPhoneNumberInvalid = (phone) => {
6319
- if (phone) {
6320
- const normalized = getPhoneNumberWithPlus(phone.toString());
6321
- return isPossiblePhoneNumber(normalized);
6322
- }
6323
- return true;
6324
- };
6325
6339
  const getPhoneNumber = ({ country, phone }) => {
6326
6340
  if (country) {
6327
6341
  return getPhoneNumberWithPlus(`${country}${phone || ""}`);
@@ -6329,9 +6343,6 @@ const usePhoneInput = () => {
6329
6343
  return phone || "";
6330
6344
  };
6331
6345
  return {
6332
- getIsCountryCodeInvalid,
6333
- getIsNumberInvalid,
6334
- getIsPhoneNumberInvalid,
6335
6346
  getPhoneNumber,
6336
6347
  };
6337
6348
  };
@@ -14486,7 +14497,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+
14486
14497
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
14487
14498
  * @returns {JSX.Element} CountryCodeSelect component
14488
14499
  */
14489
- const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }) => {
14500
+ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, isClearable, }) => {
14490
14501
  const [isCountryCodeMissing, setIsCountryCodeMissing] = React.useState(false);
14491
14502
  React.useEffect(() => {
14492
14503
  countryCode && setIsCountryCodeMissing(false);
@@ -14494,7 +14505,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
14494
14505
  const filteredCodes = countryCodes.filter(code => {
14495
14506
  return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
14496
14507
  });
14497
- return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined }));
14508
+ return (jsxRuntime.jsx(Select, { dataTestId: dataTestId, className: "w-32", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
14498
14509
  };
14499
14510
 
14500
14511
  /**
@@ -14509,10 +14520,10 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
14509
14520
  */
14510
14521
  const PhoneInput = React.forwardRef((_a, ref) => {
14511
14522
  var _b, _c;
14512
- var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue"]);
14523
+ var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue, isCountryCodeClearable } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue", "isCountryCodeClearable"]);
14513
14524
  const DEFAULT_COUNTRY_CODE = "+45";
14514
- const { getIsCountryCodeInvalid, getIsPhoneNumberInvalid, getPhoneNumber } = usePhoneInput();
14515
- const countryCodePlaceholderValue = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
14525
+ const { getPhoneNumber } = usePhoneInput();
14526
+ const countryCodePlaceholderValue = !readOnly ? countryCodePlaceholder || DEFAULT_COUNTRY_CODE : "";
14516
14527
  const safePhoneNumber = getPhoneNumberWithPlus(value || "");
14517
14528
  const number = parsePhoneNumber(safePhoneNumber);
14518
14529
  const [phone, setPhone] = React.useState((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
@@ -14527,14 +14538,24 @@ const PhoneInput = React.forwardRef((_a, ref) => {
14527
14538
  national: newPhone,
14528
14539
  });
14529
14540
  }, [onChangeValue, getPhoneNumber]);
14541
+ const onPhoneChangeHandler = React__default["default"].useCallback((ph) => {
14542
+ phoneRef.current = ph;
14543
+ setPhone(ph);
14544
+ onChangeHandler({ newPhone: ph, newCode: code });
14545
+ }, [onChangeHandler, code, phoneRef]);
14530
14546
  const onCodeChangeHandler = React__default["default"].useCallback((codeNumber) => {
14547
+ codeRef.current = codeNumber;
14531
14548
  setCode(codeNumber);
14532
- onChangeHandler({ newPhone: phone, newCode: codeNumber });
14533
- }, [phone, onChangeHandler]);
14534
- const onPhoneChangeHandler = React__default["default"].useCallback((phoneNumber) => {
14535
- setPhone(phoneNumber);
14536
- onChangeHandler({ newPhone: phoneNumber, newCode: code });
14537
- }, [onChangeHandler, code]);
14549
+ if (codeNumber !== "") {
14550
+ onChangeHandler({ newPhone: phone, newCode: codeNumber });
14551
+ }
14552
+ else {
14553
+ //Clear the phone number because we disable the field, when there is no country code
14554
+ onChangeHandler({ newPhone: "", newCode: "" });
14555
+ phoneRef.current = "";
14556
+ setPhone("");
14557
+ }
14558
+ }, [phone, onChangeHandler, codeRef]);
14538
14559
  const onBlurHandler = React__default["default"].useCallback(() => {
14539
14560
  onFieldsBlur &&
14540
14561
  onFieldsBlur({
@@ -14556,15 +14577,13 @@ const PhoneInput = React.forwardRef((_a, ref) => {
14556
14577
  return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
14557
14578
  onBlurHandler();
14558
14579
  }, onChange: e => {
14559
- (e === null || e === void 0 ? void 0 : e.value) && onCodeChangeHandler(e === null || e === void 0 ? void 0 : e.value);
14560
- codeRef.current = (e === null || e === void 0 ? void 0 : e.value) || "";
14561
- }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
14562
- (e === null || e === void 0 ? void 0 : e.target.value) && setPhone(e.target.value);
14580
+ var _a;
14581
+ onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
14582
+ }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled || code === "", readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
14563
14583
  onPhoneChangeHandler(e.target.value);
14564
- phoneRef.current = e === null || e === void 0 ? void 0 : e.target.value;
14565
14584
  }, onBlur: () => {
14566
14585
  onBlurHandler();
14567
- }, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || getIsCountryCodeInvalid(code || "") || getIsPhoneNumberInvalid(phone || " "), value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
14586
+ }, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid, value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
14568
14587
  });
14569
14588
 
14570
14589
  /**
@@ -14586,9 +14605,44 @@ const PhoneInput = React.forwardRef((_a, ref) => {
14586
14605
  const PhoneField = React.forwardRef((_a, ref) => {
14587
14606
  var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, onChangeValue, onFieldsBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "onChangeValue", "onFieldsBlur"]);
14588
14607
  const htmlForId = id ? id : "phoneField-" + v4();
14589
- return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: isInvalid, helpText: (isInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
14608
+ const renderAsInvalid = isInvalid || Boolean(errorMessage);
14609
+ return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
14590
14610
  });
14591
14611
 
14612
+ /**
14613
+ * Validates a phone number
14614
+ */
14615
+ const validatePhoneNumber = (phoneNumber) => {
14616
+ if (phoneNumber &&
14617
+ (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
14618
+ return "NOT_A_NUMBER";
14619
+ }
14620
+ if (!phoneNumber) {
14621
+ return "REQUIRED";
14622
+ }
14623
+ const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
14624
+ if (safePhoneNumber.length <= 5) {
14625
+ //needs to be handled manually, parsePhoneNumberFromString can't parse it
14626
+ return "TOO_SHORT";
14627
+ }
14628
+ const number = parsePhoneNumber(safePhoneNumber);
14629
+ if (!number) {
14630
+ return "NOT_A_NUMBER";
14631
+ }
14632
+ if (!isValidPhoneNumber(number.number, number.country)) {
14633
+ return validatePhoneNumberLength(number.number, number.country);
14634
+ }
14635
+ return undefined;
14636
+ };
14637
+ /**
14638
+ * Checks if the country code is valid and required
14639
+ */
14640
+ const isInvalidCountryCode = (error, required) => !!required && error === "REQUIRED";
14641
+ /**
14642
+ * Checks if the phone number is valid and required
14643
+ */
14644
+ const isInvalidPhoneNumber = (error, required) => (!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED");
14645
+
14592
14646
  const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
14593
14647
  variants: {
14594
14648
  layout: {
@@ -15224,9 +15278,12 @@ exports.cvaSelectMenuList = cvaSelectMenuList;
15224
15278
  exports.cvaSelectPrefix = cvaSelectPrefix;
15225
15279
  exports.cvaSelectXIcon = cvaSelectXIcon;
15226
15280
  exports.getOrderedOptions = getOrderedOptions;
15281
+ exports.isInvalidCountryCode = isInvalidCountryCode;
15282
+ exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
15227
15283
  exports.isMultiValue = isMultiValue;
15228
15284
  exports.parseSchedule = parseSchedule;
15229
15285
  exports.serializeSchedule = serializeSchedule;
15230
15286
  exports.useCustomComponents = useCustomComponents;
15231
15287
  exports.usePhoneInput = usePhoneInput;
15288
+ exports.validatePhoneNumber = validatePhoneNumber;
15232
15289
  exports.weekDay = weekDay;
package/index.esm.js CHANGED
@@ -4372,7 +4372,7 @@ function checkNumberLengthForType(nationalNumber, type, metadata) {
4372
4372
  * @return {string}
4373
4373
  */
4374
4374
 
4375
- function isPossiblePhoneNumber$2(input, options, metadata) {
4375
+ function isPossiblePhoneNumber(input, options, metadata) {
4376
4376
  /* istanbul ignore if */
4377
4377
  if (options === undefined) {
4378
4378
  options = {};
@@ -4753,11 +4753,11 @@ function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o
4753
4753
 
4754
4754
  function _arrayLikeToArray$3(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
4755
4755
 
4756
- function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4756
+ function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4757
4757
 
4758
- function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4758
+ function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4759
4759
 
4760
- function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4760
+ function _defineProperty$7(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4761
4761
  var DEFAULT_OPTIONS = {
4762
4762
  formatExtension: function formatExtension(formattedNumber, extension, metadata) {
4763
4763
  return "".concat(formattedNumber).concat(metadata.ext()).concat(extension);
@@ -4782,7 +4782,7 @@ var DEFAULT_OPTIONS = {
4782
4782
  function formatNumber(input, format, options, metadata) {
4783
4783
  // Apply default options.
4784
4784
  if (options) {
4785
- options = _objectSpread$5(_objectSpread$5({}, DEFAULT_OPTIONS), options);
4785
+ options = _objectSpread$6(_objectSpread$6({}, DEFAULT_OPTIONS), options);
4786
4786
  } else {
4787
4787
  options = DEFAULT_OPTIONS;
4788
4788
  }
@@ -4927,11 +4927,11 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
4927
4927
  }
4928
4928
  }
4929
4929
 
4930
- function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4930
+ function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4931
4931
 
4932
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4932
+ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4933
4933
 
4934
- function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4934
+ function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
4935
4935
 
4936
4936
  function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4937
4937
 
@@ -4995,7 +4995,7 @@ var PhoneNumber = /*#__PURE__*/function () {
4995
4995
  }, {
4996
4996
  key: "isPossible",
4997
4997
  value: function isPossible() {
4998
- return isPossiblePhoneNumber$2(this, {
4998
+ return isPossiblePhoneNumber(this, {
4999
4999
  v2: true
5000
5000
  }, this.getMetadata());
5001
5001
  }
@@ -5041,7 +5041,7 @@ var PhoneNumber = /*#__PURE__*/function () {
5041
5041
  }, {
5042
5042
  key: "format",
5043
5043
  value: function format(_format, options) {
5044
- return formatNumber(this, _format, options ? _objectSpread$4(_objectSpread$4({}, options), {}, {
5044
+ return formatNumber(this, _format, options ? _objectSpread$5(_objectSpread$5({}, options), {}, {
5045
5045
  v2: true
5046
5046
  }) : {
5047
5047
  v2: true
@@ -6084,24 +6084,24 @@ function parsePhoneNumber$3(formattedPhoneNumber, defaultCountry, defaultCalling
6084
6084
  };
6085
6085
  }
6086
6086
 
6087
- function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6087
+ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6088
6088
 
6089
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6089
+ function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6090
6090
 
6091
- function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6091
+ function _defineProperty$5(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6092
6092
  function parsePhoneNumberWithError(text, options, metadata) {
6093
- return parse$1(text, _objectSpread$3(_objectSpread$3({}, options), {}, {
6093
+ return parse$1(text, _objectSpread$4(_objectSpread$4({}, options), {}, {
6094
6094
  v2: true
6095
6095
  }), metadata);
6096
6096
  }
6097
6097
 
6098
6098
  function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
6099
6099
 
6100
- function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6100
+ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6101
6101
 
6102
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6102
+ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6103
6103
 
6104
- function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6104
+ function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6105
6105
 
6106
6106
  function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); }
6107
6107
 
@@ -6148,7 +6148,7 @@ function normalizeArguments(args) {
6148
6148
  }
6149
6149
 
6150
6150
  if (arg_2) {
6151
- options = _objectSpread$2({
6151
+ options = _objectSpread$3({
6152
6152
  defaultCountry: arg_2
6153
6153
  }, options);
6154
6154
  }
@@ -6176,15 +6176,15 @@ var isObject = function isObject(_) {
6176
6176
  return _typeof$1(_) === 'object';
6177
6177
  };
6178
6178
 
6179
- function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6179
+ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6180
6180
 
6181
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6181
+ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6182
6182
 
6183
- function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6183
+ function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6184
6184
  function parsePhoneNumber$2(text, options, metadata) {
6185
6185
  // Validate `defaultCountry`.
6186
6186
  if (options && options.defaultCountry && !isSupportedCountry(options.defaultCountry, metadata)) {
6187
- options = _objectSpread$1(_objectSpread$1({}, options), {}, {
6187
+ options = _objectSpread$2(_objectSpread$2({}, options), {}, {
6188
6188
  defaultCountry: undefined
6189
6189
  });
6190
6190
  } // Parse phone number.
@@ -6209,12 +6209,30 @@ function parsePhoneNumber$1() {
6209
6209
  return parsePhoneNumber$2(text, options, metadata);
6210
6210
  }
6211
6211
 
6212
+ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6213
+
6214
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6215
+
6216
+ function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6217
+ function isValidPhoneNumber$1() {
6218
+ var _normalizeArguments = normalizeArguments(arguments),
6219
+ text = _normalizeArguments.text,
6220
+ options = _normalizeArguments.options,
6221
+ metadata = _normalizeArguments.metadata;
6222
+
6223
+ options = _objectSpread$1(_objectSpread$1({}, options), {}, {
6224
+ extract: false
6225
+ });
6226
+ var phoneNumber = parsePhoneNumber$2(text, options, metadata);
6227
+ return phoneNumber && phoneNumber.isValid() || false;
6228
+ }
6229
+
6212
6230
  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6213
6231
 
6214
6232
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6215
6233
 
6216
6234
  function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6217
- function isPossiblePhoneNumber$1() {
6235
+ function validatePhoneNumberLength$1() {
6218
6236
  var _normalizeArguments = normalizeArguments(arguments),
6219
6237
  text = _normalizeArguments.text,
6220
6238
  options = _normalizeArguments.options,
@@ -6222,9 +6240,25 @@ function isPossiblePhoneNumber$1() {
6222
6240
 
6223
6241
  options = _objectSpread(_objectSpread({}, options), {}, {
6224
6242
  extract: false
6225
- });
6226
- var phoneNumber = parsePhoneNumber$2(text, options, metadata);
6227
- return phoneNumber && phoneNumber.isPossible() || false;
6243
+ }); // Parse phone number.
6244
+
6245
+ try {
6246
+ var phoneNumber = parsePhoneNumberWithError(text, options, metadata);
6247
+ metadata = new Metadata(metadata);
6248
+ metadata.selectNumberingPlan(phoneNumber.countryCallingCode);
6249
+ var result = checkNumberLength(phoneNumber.nationalNumber, metadata);
6250
+
6251
+ if (result !== 'IS_POSSIBLE') {
6252
+ return result;
6253
+ }
6254
+ } catch (error) {
6255
+ /* istanbul ignore else */
6256
+ if (error instanceof ParseError) {
6257
+ return error.message;
6258
+ } else {
6259
+ throw error;
6260
+ }
6261
+ }
6228
6262
  }
6229
6263
 
6230
6264
  function getCountries$1(metadata) {
@@ -6235,8 +6269,12 @@ function parsePhoneNumber() {
6235
6269
  return withMetadataArgument(parsePhoneNumber$1, arguments)
6236
6270
  }
6237
6271
 
6238
- function isPossiblePhoneNumber() {
6239
- return withMetadataArgument(isPossiblePhoneNumber$1, arguments)
6272
+ function isValidPhoneNumber() {
6273
+ return withMetadataArgument(isValidPhoneNumber$1, arguments)
6274
+ }
6275
+
6276
+ function validatePhoneNumberLength() {
6277
+ return withMetadataArgument(validatePhoneNumberLength$1, arguments)
6240
6278
  }
6241
6279
 
6242
6280
  function getCountries() {
@@ -6269,33 +6307,9 @@ const getPhoneNumberWithPlus = (phoneNumber) => {
6269
6307
  /**
6270
6308
  * A custom hook for managing phone number input state and validation.
6271
6309
  *
6272
- * @returns {object} - An object containing state values and event handler functions.
6273
- * @property {Function} getIsCountryCodeInvalid - A function for check if country code is valid
6274
- * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
6275
- * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
6276
6310
  * @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
6277
- * @property {string} combinedValue - The combined country code and phone number value.
6278
6311
  */
6279
6312
  const usePhoneInput = () => {
6280
- const getIsCountryCodeInvalid = (code) => {
6281
- if (code) {
6282
- return false;
6283
- }
6284
- return true;
6285
- };
6286
- const getIsNumberInvalid = (number) => {
6287
- if (number) {
6288
- return false;
6289
- }
6290
- return true;
6291
- };
6292
- const getIsPhoneNumberInvalid = (phone) => {
6293
- if (phone) {
6294
- const normalized = getPhoneNumberWithPlus(phone.toString());
6295
- return isPossiblePhoneNumber(normalized);
6296
- }
6297
- return true;
6298
- };
6299
6313
  const getPhoneNumber = ({ country, phone }) => {
6300
6314
  if (country) {
6301
6315
  return getPhoneNumberWithPlus(`${country}${phone || ""}`);
@@ -6303,9 +6317,6 @@ const usePhoneInput = () => {
6303
6317
  return phone || "";
6304
6318
  };
6305
6319
  return {
6306
- getIsCountryCodeInvalid,
6307
- getIsNumberInvalid,
6308
- getIsPhoneNumberInvalid,
6309
6320
  getPhoneNumber,
6310
6321
  };
6311
6322
  };
@@ -14460,7 +14471,7 @@ const countryCodes = countryCodesSet.map(code => ({ label: `+${code}`, value: `+
14460
14471
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
14461
14472
  * @returns {JSX.Element} CountryCodeSelect component
14462
14473
  */
14463
- const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }) => {
14474
+ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, isClearable, }) => {
14464
14475
  const [isCountryCodeMissing, setIsCountryCodeMissing] = useState(false);
14465
14476
  useEffect(() => {
14466
14477
  countryCode && setIsCountryCodeMissing(false);
@@ -14468,7 +14479,7 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
14468
14479
  const filteredCodes = countryCodes.filter(code => {
14469
14480
  return !(excludedCountries === null || excludedCountries === void 0 ? void 0 : excludedCountries.some(excludedCode => excludedCode.value === code.value));
14470
14481
  });
14471
- return (jsx$1(Select, { dataTestId: dataTestId, className: "w-28", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined }));
14482
+ return (jsx$1(Select, { dataTestId: dataTestId, className: "w-32", "aria-invalid": isCountryCodeMissing, options: filteredCodes.map(code => code), value: filteredCodes.find(({ value }) => value === `+${countryCode}`), placeholder: placeholder, hasError: isCountryCodeMissing || isInvalid, maxMenuHeight: 200, onChange: onChange, disabled: disabled, readOnly: readOnly, onBlur: onBlur, closeMenuOnSelect: true, menuIsOpen: readOnly ? false : undefined, isClearable: isClearable }));
14472
14483
  };
14473
14484
 
14474
14485
  /**
@@ -14483,10 +14494,10 @@ const CountryCodeSelect = ({ excludedCountries, countryCode, isInvalid, onChange
14483
14494
  */
14484
14495
  const PhoneInput = forwardRef((_a, ref) => {
14485
14496
  var _b, _c;
14486
- var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue"]);
14497
+ var { dataTestId, isInvalid, disabled = false, value, defaultValue, fieldSize = "medium", disableAction = false, onChange, onBlurCountryCode, readOnly, countryCodePlaceholder, onChangeCountryCode, onBlur, onFieldsBlur, onChangeValue, isCountryCodeClearable } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "value", "defaultValue", "fieldSize", "disableAction", "onChange", "onBlurCountryCode", "readOnly", "countryCodePlaceholder", "onChangeCountryCode", "onBlur", "onFieldsBlur", "onChangeValue", "isCountryCodeClearable"]);
14487
14498
  const DEFAULT_COUNTRY_CODE = "+45";
14488
- const { getIsCountryCodeInvalid, getIsPhoneNumberInvalid, getPhoneNumber } = usePhoneInput();
14489
- const countryCodePlaceholderValue = countryCodePlaceholder || DEFAULT_COUNTRY_CODE;
14499
+ const { getPhoneNumber } = usePhoneInput();
14500
+ const countryCodePlaceholderValue = !readOnly ? countryCodePlaceholder || DEFAULT_COUNTRY_CODE : "";
14490
14501
  const safePhoneNumber = getPhoneNumberWithPlus(value || "");
14491
14502
  const number = parsePhoneNumber(safePhoneNumber);
14492
14503
  const [phone, setPhone] = useState((_b = number === null || number === void 0 ? void 0 : number.nationalNumber.toString()) !== null && _b !== void 0 ? _b : "");
@@ -14501,14 +14512,24 @@ const PhoneInput = forwardRef((_a, ref) => {
14501
14512
  national: newPhone,
14502
14513
  });
14503
14514
  }, [onChangeValue, getPhoneNumber]);
14515
+ const onPhoneChangeHandler = React__default.useCallback((ph) => {
14516
+ phoneRef.current = ph;
14517
+ setPhone(ph);
14518
+ onChangeHandler({ newPhone: ph, newCode: code });
14519
+ }, [onChangeHandler, code, phoneRef]);
14504
14520
  const onCodeChangeHandler = React__default.useCallback((codeNumber) => {
14521
+ codeRef.current = codeNumber;
14505
14522
  setCode(codeNumber);
14506
- onChangeHandler({ newPhone: phone, newCode: codeNumber });
14507
- }, [phone, onChangeHandler]);
14508
- const onPhoneChangeHandler = React__default.useCallback((phoneNumber) => {
14509
- setPhone(phoneNumber);
14510
- onChangeHandler({ newPhone: phoneNumber, newCode: code });
14511
- }, [onChangeHandler, code]);
14523
+ if (codeNumber !== "") {
14524
+ onChangeHandler({ newPhone: phone, newCode: codeNumber });
14525
+ }
14526
+ else {
14527
+ //Clear the phone number because we disable the field, when there is no country code
14528
+ onChangeHandler({ newPhone: "", newCode: "" });
14529
+ phoneRef.current = "";
14530
+ setPhone("");
14531
+ }
14532
+ }, [phone, onChangeHandler, codeRef]);
14512
14533
  const onBlurHandler = React__default.useCallback(() => {
14513
14534
  onFieldsBlur &&
14514
14535
  onFieldsBlur({
@@ -14530,15 +14551,13 @@ const PhoneInput = forwardRef((_a, ref) => {
14530
14551
  return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
14531
14552
  onBlurHandler();
14532
14553
  }, onChange: e => {
14533
- (e === null || e === void 0 ? void 0 : e.value) && onCodeChangeHandler(e === null || e === void 0 ? void 0 : e.value);
14534
- codeRef.current = (e === null || e === void 0 ? void 0 : e.value) || "";
14535
- }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
14536
- (e === null || e === void 0 ? void 0 : e.target.value) && setPhone(e.target.value);
14554
+ var _a;
14555
+ onCodeChangeHandler((_a = e === null || e === void 0 ? void 0 : e.value) !== null && _a !== void 0 ? _a : "");
14556
+ }, disabled: disabled, readOnly: readOnly, isInvalid: isInvalid, placeholder: countryCodePlaceholderValue, isClearable: isCountryCodeClearable }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phone, disabled: disabled || code === "", readOnly: readOnly, isInvalid: isInvalid, onChange: e => {
14537
14557
  onPhoneChangeHandler(e.target.value);
14538
- phoneRef.current = e === null || e === void 0 ? void 0 : e.target.value;
14539
14558
  }, onBlur: () => {
14540
14559
  onBlurHandler();
14541
- }, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || getIsCountryCodeInvalid(code || "") || getIsPhoneNumberInvalid(phone || " "), value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
14560
+ }, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid, value: phoneNumber, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
14542
14561
  });
14543
14562
 
14544
14563
  /**
@@ -14560,9 +14579,44 @@ const PhoneInput = forwardRef((_a, ref) => {
14560
14579
  const PhoneField = forwardRef((_a, ref) => {
14561
14580
  var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId, onChangeValue, onFieldsBlur } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId", "onChangeValue", "onFieldsBlur"]);
14562
14581
  const htmlForId = id ? id : "phoneField-" + v4();
14563
- return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: isInvalid, helpText: (isInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
14582
+ const renderAsInvalid = isInvalid || Boolean(errorMessage);
14583
+ return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value, defaultValue: defaultValue, ref: ref, isInvalid: renderAsInvalid, dataTestId: dataTestId, onChangeValue: onChangeValue, onFieldsBlur: onFieldsBlur }, rest)) }));
14564
14584
  });
14565
14585
 
14586
+ /**
14587
+ * Validates a phone number
14588
+ */
14589
+ const validatePhoneNumber = (phoneNumber) => {
14590
+ if (phoneNumber &&
14591
+ (checkIfPhoneNumberHasPlus(phoneNumber) ? isNaN(+phoneNumber.slice(1, phoneNumber.length)) : isNaN(+phoneNumber))) {
14592
+ return "NOT_A_NUMBER";
14593
+ }
14594
+ if (!phoneNumber) {
14595
+ return "REQUIRED";
14596
+ }
14597
+ const safePhoneNumber = getPhoneNumberWithPlus(phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.trim());
14598
+ if (safePhoneNumber.length <= 5) {
14599
+ //needs to be handled manually, parsePhoneNumberFromString can't parse it
14600
+ return "TOO_SHORT";
14601
+ }
14602
+ const number = parsePhoneNumber(safePhoneNumber);
14603
+ if (!number) {
14604
+ return "NOT_A_NUMBER";
14605
+ }
14606
+ if (!isValidPhoneNumber(number.number, number.country)) {
14607
+ return validatePhoneNumberLength(number.number, number.country);
14608
+ }
14609
+ return undefined;
14610
+ };
14611
+ /**
14612
+ * Checks if the country code is valid and required
14613
+ */
14614
+ const isInvalidCountryCode = (error, required) => !!required && error === "REQUIRED";
14615
+ /**
14616
+ * Checks if the phone number is valid and required
14617
+ */
14618
+ const isInvalidPhoneNumber = (error, required) => (!!error && error !== "REQUIRED") || (!!required && error === "REQUIRED");
14619
+
14566
14620
  const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
14567
14621
  variants: {
14568
14622
  layout: {
@@ -15146,4 +15200,4 @@ const UploadField = forwardRef((_a, ref) => {
15146
15200
  */
15147
15201
  setupLibraryTranslations();
15148
15202
 
15149
- export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, weekDay };
15203
+ export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validatePhoneNumber, weekDay };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "0.0.154",
3
+ "version": "0.0.156",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,7 +9,7 @@
9
9
  "dependencies": {
10
10
  "@trackunit/css-class-variance-utilities": "0.0.14",
11
11
  "@trackunit/i18n-library-translation": "0.0.79",
12
- "@trackunit/react-components": "0.1.165",
12
+ "@trackunit/react-components": "0.1.166",
13
13
  "@trackunit/shared-utils": "0.0.9",
14
14
  "@trackunit/ui-icons": "0.0.77",
15
15
  "date-fns": "2.29.3",
@@ -7,6 +7,7 @@ export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps
7
7
  * If a value is set, the field is rendered in its invalid state.
8
8
  */
9
9
  errorMessage?: string;
10
+ isCountryCodeClearable?: boolean;
10
11
  }
11
12
  /**
12
13
  * The PhoneField component is used to enter phone number.
@@ -14,6 +14,7 @@ interface CountryCodeSelectProps extends CommonProps {
14
14
  readOnly?: boolean;
15
15
  placeholder?: string;
16
16
  onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
17
+ isClearable?: boolean;
17
18
  }
18
19
  /**
19
20
  * The CountryCodeSelect component is used to select a country code for a phone number.
@@ -21,5 +22,5 @@ interface CountryCodeSelectProps extends CommonProps {
21
22
  * @param {CountryCodeSelectProps} props - The props for the CountryCodeSelect component
22
23
  * @returns {JSX.Element} CountryCodeSelect component
23
24
  */
24
- export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, }: CountryCodeSelectProps) => JSX.Element;
25
+ export declare const CountryCodeSelect: ({ excludedCountries, countryCode, isInvalid, onChange, disabled, readOnly, dataTestId, placeholder, onBlur, isClearable, }: CountryCodeSelectProps) => JSX.Element;
25
26
  export {};
@@ -44,6 +44,7 @@ export interface PhoneInputProps extends BaseInputExposedProps {
44
44
  * An custom handler will be called when country code select or phone number input were changed
45
45
  */
46
46
  onChangeValue?: ({ phone, national, countryCode }: PhoneNumberValue) => void;
47
+ isCountryCodeClearable?: boolean;
47
48
  }
48
49
  /**
49
50
  * A component for inputting phone numbers with an optional action button for initiating a phone call.
@@ -0,0 +1,14 @@
1
+ import { ValidatePhoneNumberLengthResult } from "libphonenumber-js";
2
+ export type PhoneInputValidationError = "REQUIRED" | ValidatePhoneNumberLengthResult | undefined;
3
+ /**
4
+ * Validates a phone number
5
+ */
6
+ export declare const validatePhoneNumber: (phoneNumber: string | undefined | null) => PhoneInputValidationError;
7
+ /**
8
+ * Checks if the country code is valid and required
9
+ */
10
+ export declare const isInvalidCountryCode: (error: PhoneInputValidationError, required?: boolean) => boolean;
11
+ /**
12
+ * Checks if the phone number is valid and required
13
+ */
14
+ export declare const isInvalidPhoneNumber: (error: PhoneInputValidationError, required?: boolean) => boolean;
package/src/index.d.ts CHANGED
@@ -13,6 +13,7 @@ export * from "./components/NumberInput/NumberInput";
13
13
  export * from "./components/OptionCard/OptionCard";
14
14
  export * from "./components/PhoneField/PhoneField";
15
15
  export * from "./components/PhoneInput/PhoneInput";
16
+ export * from "./components/PhoneInput/PhoneInputValidationUtils";
16
17
  export * from "./components/RadioGroup";
17
18
  export * from "./components/Schedule/Schedule";
18
19
  export * from "./components/Schedule/ScheduleParser";
@@ -1,7 +1,4 @@
1
1
  export interface UsePhoneInput {
2
- getIsCountryCodeInvalid: (phone?: string) => boolean;
3
- getIsNumberInvalid: (phone: string) => boolean;
4
- getIsPhoneNumberInvalid: (phone: string | number | readonly string[] | undefined) => boolean;
5
2
  getPhoneNumber: ({ country, phone }: {
6
3
  country?: string;
7
4
  phone?: string;
@@ -10,11 +7,6 @@ export interface UsePhoneInput {
10
7
  /**
11
8
  * A custom hook for managing phone number input state and validation.
12
9
  *
13
- * @returns {object} - An object containing state values and event handler functions.
14
- * @property {Function} getIsCountryCodeInvalid - A function for check if country code is valid
15
- * @property {Function} getIsNumberInvalid- A function for check if number part of phone number is valid
16
- * @property {Function} getIsPhoneNumberValid- A function for check if phone number is valid
17
10
  * @property {Function} getPhoneNumber - A function for get formatted phone number with country code and plus sign
18
- * @property {string} combinedValue - The combined country code and phone number value.
19
11
  */
20
12
  export declare const usePhoneInput: () => UsePhoneInput;