ingeniuscliq-core 0.5.47 → 0.5.48

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.
Files changed (4) hide show
  1. package/dist/components/common/form/FormPhone.d.ts +2 -1
  2. package/dist/components/common/form/FormPhone.d.ts.map +1 -1
  3. package/dist/components/common/form/FormPhone.js +33 -20
  4. package/package.json +1 -1
package/dist/components/common/form/FormPhone.d.ts CHANGED
@@ -21,7 +21,8 @@ interface FormPhoneProps<T extends FieldValues = FieldValues> extends BaseStyleP
21
21
  readonly phoneNumberFieldName?: string;
22
22
  readonly initialCountryCode?: string;
23
23
  readonly selectProps?: React.ComponentProps<typeof Select>;
24
+ readonly validateOnMount?: boolean;
24
25
  }
25
- export declare function FormPhone<T extends FieldValues = FieldValues>({ control, name, label, customLabel, placeholder, className, inputProps, withinLabel, withinMessage, withinControl, required, withoutPlaceholder, setValue, watch, trigger, countryCodeFieldName, phoneNumberFieldName, initialCountryCode, selectProps }: FormPhoneProps<T>): import("react").JSX.Element;
26
+ export declare function FormPhone<T extends FieldValues = FieldValues>({ control, name, label, customLabel, placeholder, className, inputProps, withinLabel, withinMessage, withinControl, required, withoutPlaceholder, setValue, watch, trigger, countryCodeFieldName, phoneNumberFieldName, initialCountryCode, selectProps, validateOnMount }: FormPhoneProps<T>): import("react").JSX.Element;
26
27
  export {};
27
28
  //# sourceMappingURL=FormPhone.d.ts.map
package/dist/components/common/form/FormPhone.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormPhone.d.ts","sourceRoot":"","sources":["../../../../src/components/common/form/FormPhone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAyD,MAAM,wBAAwB,CAAC;AAEvG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWnF,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,cAAc;IAClF,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC;IACzE,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;CAC5D;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EAC7D,OAAO,EACP,IAAI,EACJ,KAAiB,EACjB,WAAuB,EACvB,WAAgB,EAChB,SAAc,EACd,UAAe,EACf,WAAmB,EACnB,aAAqB,EACrB,aAAqB,EACrB,QAAgB,EAChB,kBAA0B,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,WAAgB,EACjB,EAAE,cAAc,CAAC,CAAC,CAAC,+BAgKnB"}
1
+ {"version":3,"file":"FormPhone.d.ts","sourceRoot":"","sources":["../../../../src/components/common/form/FormPhone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAyD,MAAM,wBAAwB,CAAC;AAEvG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAWnF,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,cAAc;IAClF,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC;IACzE,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IAC3D,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EAC7D,OAAO,EACP,IAAI,EACJ,KAAiB,EACjB,WAAuB,EACvB,WAAgB,EAChB,SAAc,EACd,UAAe,EACf,WAAmB,EACnB,aAAqB,EACrB,aAAqB,EACrB,QAAgB,EAChB,kBAA0B,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,WAAgB,EAChB,eAAuB,EACxB,EAAE,cAAc,CAAC,CAAC,CAAC,+BAqLnB"}
package/dist/components/common/form/FormPhone.js CHANGED
@@ -32,7 +32,8 @@ function FormPhone({
32
32
  countryCodeFieldName,
33
33
  phoneNumberFieldName,
34
34
  initialCountryCode,
35
- selectProps = {}
35
+ selectProps = {},
36
+ validateOnMount = false
36
37
  }) {
37
38
  const { t, language } = useLanguage();
38
39
  const countryCodes = useMemo(() => {
@@ -61,13 +62,14 @@ function FormPhone({
61
62
  useEffect(() => {
62
63
  if (initialCountryCode && !watch(countryCodeField)) {
63
64
  const country = countryCodes.find((c) => c.countryCode === initialCountryCode);
64
- if (country) {
65
- setValue(countryCodeField, country.callingCode);
66
- setValue(selectedCountryField, country.countryCode);
67
- setValue(phoneNumberField, "");
65
+ if (country && validateOnMount) {
66
+ setValue(countryCodeField, country.callingCode, { shouldValidate: false });
67
+ setValue(selectedCountryField, country.countryCode, { shouldValidate: false });
68
+ setValue(phoneNumberField, "", { shouldValidate: false });
69
+ setValue(name, "", { shouldValidate: validateOnMount });
68
70
  }
69
71
  }
70
- }, [initialCountryCode, countryCodes]);
72
+ }, [initialCountryCode, countryCodes, validateOnMount, watch, setValue, countryCodeField, selectedCountryField, phoneNumberField, name]);
71
73
  useEffect(() => {
72
74
  const fullPhone = watch(name);
73
75
  const currentCountryCode = watch(countryCodeField);
@@ -76,18 +78,18 @@ function FormPhone({
76
78
  if (matchedCountry) {
77
79
  const callingCode = matchedCountry.callingCode;
78
80
  const phoneNumber = fullPhone.substring(callingCode.length);
79
- setValue(countryCodeField, callingCode);
80
- setValue(phoneNumberField, phoneNumber);
81
- setValue(selectedCountryField, matchedCountry.countryCode);
81
+ setValue(countryCodeField, callingCode, { shouldValidate: false });
82
+ setValue(phoneNumberField, phoneNumber, { shouldValidate: false });
83
+ setValue(selectedCountryField, matchedCountry.countryCode, { shouldValidate: false });
82
84
  }
83
85
  }
84
- }, [watch(name), countryCodes]);
86
+ }, [name, countryCodes, watch, setValue, countryCodeField, phoneNumberField, selectedCountryField]);
85
87
  const getPlaceholder = useCallback(() => {
86
88
  if (withoutPlaceholder) return "";
87
89
  if (placeholder) return required ? placeholder : `${placeholder} ${t("fields.optional")}`;
88
90
  if (name) return required ? t(`fields.${name}`) : `${t("fields." + name)} ${t("fields.fieldLabel.optional")}`;
89
91
  return "";
90
- }, [withoutPlaceholder, placeholder, name, required]);
92
+ }, [withoutPlaceholder, placeholder, name, required, t]);
91
93
  const getLabel = useCallback(() => {
92
94
  if (withinLabel) return "";
93
95
  if (label) return required ? `${label} *` : label;
@@ -114,10 +116,14 @@ function FormPhone({
114
116
  setValue(countryCodeField, callingCode);
115
117
  setValue(selectedCountryField, isoCode);
116
118
  const phoneNumber = watch(phoneNumberField) || "";
117
- const fullNumber = phoneNumber ? `${callingCode}${phoneNumber}` : "";
118
- field.onChange(fullNumber);
119
- if (trigger) {
120
- trigger(name);
119
+ if (phoneNumber) {
120
+ const fullNumber = `${callingCode}${phoneNumber}`;
121
+ field.onChange(fullNumber);
122
+ if (trigger) {
123
+ trigger(name);
124
+ }
125
+ } else {
126
+ field.onChange("");
121
127
  }
122
128
  },
123
129
  value: (
@@ -148,11 +154,18 @@ function FormPhone({
148
154
  onChange: (e) => {
149
155
  const phoneNumber = e.target.value.replace(/[^\d]/g, "");
150
156
  setValue(phoneNumberField, phoneNumber);
151
- const countryCode = watch(countryCodeField) || "+53";
152
- const fullNumber = phoneNumber ? `${countryCode}${phoneNumber}` : "";
153
- field.onChange(fullNumber);
154
- if (trigger) {
155
- trigger(name);
157
+ if (phoneNumber) {
158
+ const countryCode = watch(countryCodeField) || "+53";
159
+ const fullNumber = `${countryCode}${phoneNumber}`;
160
+ field.onChange(fullNumber);
161
+ if (trigger) {
162
+ trigger(name);
163
+ }
164
+ } else {
165
+ field.onChange("");
166
+ if (trigger) {
167
+ trigger(name);
168
+ }
156
169
  }
157
170
  },
158
171
  onBlur: field.onBlur,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ingeniuscliq-core",
3
- "version": "0.5.47",
3
+ "version": "0.5.48",
4
4
  "description": "IngeniusCliq Core UI y lógica compartida",
5
5
  "license": "MIT",
6
6
  "type": "module",