ingeniuscliq-core 0.5.47 → 0.5.49

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 +35 -21
  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,+BAsLnB"}
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,33 +62,35 @@ 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);
74
- if (fullPhone && typeof fullPhone === "string" && fullPhone.length >= 8 && !currentCountryCode) {
76
+ const currentPhoneNumber = watch(phoneNumberField);
77
+ if (fullPhone && typeof fullPhone === "string" && fullPhone.length >= 8 && !currentCountryCode && !currentPhoneNumber) {
75
78
  const matchedCountry = countryCodes.find((c) => fullPhone.startsWith(c.callingCode));
76
79
  if (matchedCountry) {
77
80
  const callingCode = matchedCountry.callingCode;
78
81
  const phoneNumber = fullPhone.substring(callingCode.length);
79
- setValue(countryCodeField, callingCode);
80
- setValue(phoneNumberField, phoneNumber);
81
- setValue(selectedCountryField, matchedCountry.countryCode);
82
+ setValue(countryCodeField, callingCode, { shouldValidate: false });
83
+ setValue(phoneNumberField, phoneNumber, { shouldValidate: false });
84
+ setValue(selectedCountryField, matchedCountry.countryCode, { shouldValidate: false });
82
85
  }
83
86
  }
84
- }, [watch(name), countryCodes]);
87
+ }, [watch(name), countryCodes, watch, setValue, countryCodeField, phoneNumberField, selectedCountryField]);
85
88
  const getPlaceholder = useCallback(() => {
86
89
  if (withoutPlaceholder) return "";
87
90
  if (placeholder) return required ? placeholder : `${placeholder} ${t("fields.optional")}`;
88
91
  if (name) return required ? t(`fields.${name}`) : `${t("fields." + name)} ${t("fields.fieldLabel.optional")}`;
89
92
  return "";
90
- }, [withoutPlaceholder, placeholder, name, required]);
93
+ }, [withoutPlaceholder, placeholder, name, required, t]);
91
94
  const getLabel = useCallback(() => {
92
95
  if (withinLabel) return "";
93
96
  if (label) return required ? `${label} *` : label;
@@ -114,10 +117,14 @@ function FormPhone({
114
117
  setValue(countryCodeField, callingCode);
115
118
  setValue(selectedCountryField, isoCode);
116
119
  const phoneNumber = watch(phoneNumberField) || "";
117
- const fullNumber = phoneNumber ? `${callingCode}${phoneNumber}` : "";
118
- field.onChange(fullNumber);
119
- if (trigger) {
120
- trigger(name);
120
+ if (phoneNumber) {
121
+ const fullNumber = `${callingCode}${phoneNumber}`;
122
+ field.onChange(fullNumber);
123
+ if (trigger) {
124
+ trigger(name);
125
+ }
126
+ } else {
127
+ field.onChange("");
121
128
  }
122
129
  },
123
130
  value: (
@@ -148,11 +155,18 @@ function FormPhone({
148
155
  onChange: (e) => {
149
156
  const phoneNumber = e.target.value.replace(/[^\d]/g, "");
150
157
  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);
158
+ if (phoneNumber) {
159
+ const countryCode = watch(countryCodeField) || "+53";
160
+ const fullNumber = `${countryCode}${phoneNumber}`;
161
+ field.onChange(fullNumber);
162
+ if (trigger) {
163
+ trigger(name);
164
+ }
165
+ } else {
166
+ field.onChange("");
167
+ if (trigger) {
168
+ trigger(name);
169
+ }
156
170
  }
157
171
  },
158
172
  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.49",
4
4
  "description": "IngeniusCliq Core UI y lógica compartida",
5
5
  "license": "MIT",
6
6
  "type": "module",