@lets-events/react 11.6.5 → 11.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +2 -2
- package/.turbo/turbo-build.log +18 -20
- package/CHANGELOG.md +6 -0
- package/dist/index.css +171 -0
- package/dist/index.d.mts +9 -12
- package/dist/index.d.ts +9 -12
- package/dist/index.js +200 -188
- package/dist/index.mjs +205 -191
- package/package.json +1 -2
- package/src/components/Alert.tsx +303 -303
- package/src/components/Avatar.tsx +55 -55
- package/src/components/Badge.tsx +125 -125
- package/src/components/Box.tsx +3 -3
- package/src/components/Button/index.tsx +16 -16
- package/src/components/Button/styledComponents.ts +287 -287
- package/src/components/ButtonGroup.tsx +484 -484
- package/src/components/Calendar/index.tsx +136 -136
- package/src/components/Calendar/styledComponents.ts +209 -209
- package/src/components/Card.tsx +48 -48
- package/src/components/CheckboxGroup.tsx +176 -176
- package/src/components/Container.tsx +39 -39
- package/src/components/Drawer/index.tsx +48 -48
- package/src/components/Drawer/styledComponents.ts +46 -46
- package/src/components/Dropdown.tsx +302 -302
- package/src/components/Filter.tsx +164 -164
- package/src/components/Flex.tsx +118 -118
- package/src/components/FormFields/AddressFormFields/CityFormField.tsx +111 -111
- package/src/components/FormFields/AddressFormFields/CountryFormField.tsx +33 -33
- package/src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx +39 -45
- package/src/components/FormFields/AddressFormFields/StateFormField.tsx +32 -32
- package/src/components/FormFields/AddressFormFields/index.tsx +141 -139
- package/src/components/FormFields/BirthDateFormField.tsx +85 -87
- package/src/components/FormFields/CNPJFormField.tsx +87 -89
- package/src/components/FormFields/CPFFormField.tsx +77 -79
- package/src/components/FormFields/CheckboxGroupFormField.tsx +90 -90
- package/src/components/FormFields/Form.tsx +28 -29
- package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +40 -42
- package/src/components/FormFields/MultiSelectFormField.tsx +55 -59
- package/src/components/FormFields/PhoneFormField.tsx +40 -130
- package/src/components/FormFields/RadioGroupFormField.tsx +84 -84
- package/src/components/FormFields/SelectFormField.tsx +93 -93
- package/src/components/FormFields/TextAreaFormField.tsx +48 -48
- package/src/components/FormFields/TextFormField.tsx +107 -76
- package/src/components/FormFields/{ErrorFormMessage.tsx → subComponents/ErrorFormMessage.tsx} +36 -36
- package/src/components/FormFields/{FormLabel.tsx → subComponents/FormLabel.tsx} +29 -29
- package/src/components/FormFields/utils/validation.ts +20 -0
- package/src/components/Grid.tsx +137 -137
- package/src/components/Icon.tsx +47 -47
- package/src/components/MenuDropdown/index.tsx +30 -30
- package/src/components/MenuDropdown/styledComponents.ts +31 -31
- package/src/components/Modal.tsx +90 -90
- package/src/components/MultiSelect.tsx +218 -218
- package/src/components/RadioGroup.tsx +210 -210
- package/src/components/Section.tsx +33 -33
- package/src/components/Step.tsx +164 -164
- package/src/components/Switch.tsx +108 -108
- package/src/components/Text.tsx +38 -38
- package/src/components/TextField.tsx +316 -312
- package/src/components/TextareaField.tsx +128 -128
- package/src/components/TimePicker.tsx +298 -298
- package/src/components/Toast/components/ToastItem.tsx +41 -41
- package/src/components/Toast/components/ToastProvider.tsx +63 -63
- package/src/components/Toast/hooks/useToast.ts +12 -12
- package/src/components/Toast/index.tsx +5 -5
- package/src/components/Toast/styles/index.ts +135 -135
- package/src/components/Toast/types/index.ts +46 -46
- package/src/components/Tooltip/index.tsx +66 -66
- package/src/components/Tooltip/styles.ts +77 -77
- package/src/hooks/useCountries.ts +41 -41
- package/src/hooks/useOnClickOutside.tsx +20 -20
- package/src/index.tsx +54 -54
- package/src/styles/index.ts +38 -38
- package/src/types/typographyValues.ts +178 -178
- package/src/utils/getNestedValue.ts +3 -3
- package/src/utils/states.ts +29 -29
- package/tsconfig.json +3 -3
package/dist/index.js
CHANGED
|
@@ -2761,7 +2761,10 @@ var TextFieldStyled = styled(import_themes7.TextField.Root, {
|
|
|
2761
2761
|
}
|
|
2762
2762
|
}
|
|
2763
2763
|
}
|
|
2764
|
-
]
|
|
2764
|
+
],
|
|
2765
|
+
defaultVariants: {
|
|
2766
|
+
typography: "labelSmall"
|
|
2767
|
+
}
|
|
2765
2768
|
});
|
|
2766
2769
|
var TextFieldSlotStyled = styled(import_themes7.TextField.Slot, {
|
|
2767
2770
|
display: "flex",
|
|
@@ -2796,7 +2799,17 @@ var InputAddon = styled(TextStyle, {
|
|
|
2796
2799
|
display: "flex",
|
|
2797
2800
|
flexWrap: "nowrap",
|
|
2798
2801
|
alignItems: "center",
|
|
2799
|
-
lineHeight: 1
|
|
2802
|
+
lineHeight: 1,
|
|
2803
|
+
variants: {
|
|
2804
|
+
color: {
|
|
2805
|
+
default: {
|
|
2806
|
+
borderColor: "$dark300"
|
|
2807
|
+
},
|
|
2808
|
+
error: {
|
|
2809
|
+
borderColor: "$error400"
|
|
2810
|
+
}
|
|
2811
|
+
}
|
|
2812
|
+
}
|
|
2800
2813
|
});
|
|
2801
2814
|
var maskFormat = import_mask.format;
|
|
2802
2815
|
var maskUnformat = import_mask.unformat;
|
|
@@ -2825,7 +2838,7 @@ var TextField = import_react2.default.forwardRef(
|
|
|
2825
2838
|
]);
|
|
2826
2839
|
const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
|
|
2827
2840
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
|
|
2828
|
-
!!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { typography: "labelSmall", children: addon }),
|
|
2841
|
+
!!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { color, typography: "labelSmall", children: addon }),
|
|
2829
2842
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
2830
2843
|
TextFieldStyled,
|
|
2831
2844
|
__spreadProps(__spreadValues({
|
|
@@ -2888,27 +2901,17 @@ function TextFieldSlot(_a) {
|
|
|
2888
2901
|
}, props), {
|
|
2889
2902
|
color: void 0
|
|
2890
2903
|
});
|
|
2891
|
-
return
|
|
2904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2892
2905
|
TextFieldSlotStyled,
|
|
2893
2906
|
__spreadProps(__spreadValues({}, sharedStyles), {
|
|
2894
2907
|
style: {
|
|
2895
2908
|
float: position === "flex-start" ? "left" : "right",
|
|
2896
2909
|
order: position === "flex-start" ? 0 : 2,
|
|
2897
2910
|
textAlign,
|
|
2898
|
-
zIndex: 2,
|
|
2899
|
-
cursor: "pointer"
|
|
2900
|
-
},
|
|
2901
|
-
onClick: () => onClick(),
|
|
2902
|
-
children
|
|
2903
|
-
})
|
|
2904
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2905
|
-
TextFieldSlotStyled,
|
|
2906
|
-
__spreadProps(__spreadValues({}, sharedStyles), {
|
|
2907
|
-
style: {
|
|
2908
|
-
float: position === "flex-start" ? "left" : "right",
|
|
2909
|
-
order: position === "flex-start" ? 0 : 2,
|
|
2910
|
-
textAlign
|
|
2911
|
+
zIndex: onClick ? 2 : void 0,
|
|
2912
|
+
cursor: onClick ? "pointer" : void 0
|
|
2911
2913
|
},
|
|
2914
|
+
onClick,
|
|
2912
2915
|
children
|
|
2913
2916
|
})
|
|
2914
2917
|
);
|
|
@@ -3916,8 +3919,8 @@ var import_react_day_picker = require("react-day-picker");
|
|
|
3916
3919
|
function buildFormatLongFn(args) {
|
|
3917
3920
|
return (options = {}) => {
|
|
3918
3921
|
const width = options.width ? String(options.width) : args.defaultWidth;
|
|
3919
|
-
const
|
|
3920
|
-
return
|
|
3922
|
+
const format4 = args.formats[width] || args.formats[args.defaultWidth];
|
|
3923
|
+
return format4;
|
|
3921
3924
|
};
|
|
3922
3925
|
}
|
|
3923
3926
|
|
|
@@ -4612,11 +4615,11 @@ var formatRelativeLocale2 = {
|
|
|
4612
4615
|
other: "P"
|
|
4613
4616
|
};
|
|
4614
4617
|
var formatRelative2 = (token, date, _baseDate, _options) => {
|
|
4615
|
-
const
|
|
4616
|
-
if (typeof
|
|
4617
|
-
return
|
|
4618
|
+
const format4 = formatRelativeLocale2[token];
|
|
4619
|
+
if (typeof format4 === "function") {
|
|
4620
|
+
return format4(date);
|
|
4618
4621
|
}
|
|
4619
|
-
return
|
|
4622
|
+
return format4;
|
|
4620
4623
|
};
|
|
4621
4624
|
|
|
4622
4625
|
// ../../node_modules/date-fns/locale/pt-BR/_lib/localize.js
|
|
@@ -5884,14 +5887,14 @@ function isProtectedDayOfYearToken(token) {
|
|
|
5884
5887
|
function isProtectedWeekYearToken(token) {
|
|
5885
5888
|
return weekYearTokenRE.test(token);
|
|
5886
5889
|
}
|
|
5887
|
-
function warnOrThrowProtectedError(token,
|
|
5888
|
-
const _message = message(token,
|
|
5890
|
+
function warnOrThrowProtectedError(token, format4, input) {
|
|
5891
|
+
const _message = message(token, format4, input);
|
|
5889
5892
|
console.warn(_message);
|
|
5890
5893
|
if (throwTokens.includes(token)) throw new RangeError(_message);
|
|
5891
5894
|
}
|
|
5892
|
-
function message(token,
|
|
5895
|
+
function message(token, format4, input) {
|
|
5893
5896
|
const subject = token[0] === "Y" ? "years" : "days of the month";
|
|
5894
|
-
return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${
|
|
5897
|
+
return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format4}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
|
|
5895
5898
|
}
|
|
5896
5899
|
|
|
5897
5900
|
// ../../node_modules/date-fns/format.js
|
|
@@ -9731,7 +9734,7 @@ function Section(_a) {
|
|
|
9731
9734
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
9732
9735
|
}
|
|
9733
9736
|
|
|
9734
|
-
// src/components/FormFields/ErrorFormMessage.tsx
|
|
9737
|
+
// src/components/FormFields/subComponents/ErrorFormMessage.tsx
|
|
9735
9738
|
var import_free_solid_svg_icons4 = require("@fortawesome/free-solid-svg-icons");
|
|
9736
9739
|
var import_react_fontawesome4 = require("@fortawesome/react-fontawesome");
|
|
9737
9740
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
@@ -9746,7 +9749,7 @@ var ErrorFormMessage = ({ message: message2 }) => {
|
|
|
9746
9749
|
] });
|
|
9747
9750
|
};
|
|
9748
9751
|
|
|
9749
|
-
// src/components/FormFields/FormLabel.tsx
|
|
9752
|
+
// src/components/FormFields/subComponents/FormLabel.tsx
|
|
9750
9753
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
9751
9754
|
var FormLabel = ({
|
|
9752
9755
|
name,
|
|
@@ -9816,37 +9819,62 @@ var TextAreaFormField = (_a) => {
|
|
|
9816
9819
|
|
|
9817
9820
|
// src/components/FormFields/TextFormField.tsx
|
|
9818
9821
|
var import_react_hook_form2 = require("react-hook-form");
|
|
9819
|
-
|
|
9820
|
-
|
|
9821
|
-
function getNestedValue(obj, path) {
|
|
9822
|
-
return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
|
|
9823
|
-
}
|
|
9824
|
-
|
|
9825
|
-
// src/components/FormFields/TextFormField.tsx
|
|
9822
|
+
var import_react17 = require("react");
|
|
9823
|
+
var import_mask2 = require("@react-input/mask");
|
|
9826
9824
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
9827
|
-
var TextFormField = ({
|
|
9828
|
-
|
|
9829
|
-
|
|
9830
|
-
|
|
9831
|
-
|
|
9832
|
-
|
|
9833
|
-
|
|
9834
|
-
|
|
9835
|
-
|
|
9836
|
-
|
|
9837
|
-
|
|
9838
|
-
|
|
9839
|
-
|
|
9840
|
-
|
|
9841
|
-
|
|
9842
|
-
|
|
9843
|
-
|
|
9844
|
-
|
|
9845
|
-
|
|
9846
|
-
|
|
9847
|
-
const
|
|
9825
|
+
var TextFormField = (_a) => {
|
|
9826
|
+
var _b = _a, {
|
|
9827
|
+
name,
|
|
9828
|
+
label,
|
|
9829
|
+
required,
|
|
9830
|
+
mask,
|
|
9831
|
+
validate,
|
|
9832
|
+
validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
|
|
9833
|
+
onChange,
|
|
9834
|
+
valueFormatter
|
|
9835
|
+
} = _b, inputProps = __objRest(_b, [
|
|
9836
|
+
"name",
|
|
9837
|
+
"label",
|
|
9838
|
+
"required",
|
|
9839
|
+
"mask",
|
|
9840
|
+
"validate",
|
|
9841
|
+
"validationErrorMessage",
|
|
9842
|
+
"onChange",
|
|
9843
|
+
"valueFormatter"
|
|
9844
|
+
]);
|
|
9845
|
+
const handleValidate = (0, import_react17.useCallback)(
|
|
9846
|
+
(value) => {
|
|
9847
|
+
var _a2;
|
|
9848
|
+
if (!required && value.trim() === "") return true;
|
|
9849
|
+
return (_a2 = validate == null ? void 0 : validate(value)) != null ? _a2 : true;
|
|
9850
|
+
},
|
|
9851
|
+
[validate, required]
|
|
9852
|
+
);
|
|
9853
|
+
const { field, fieldState } = (0, import_react_hook_form2.useController)({
|
|
9854
|
+
name,
|
|
9855
|
+
rules: {
|
|
9856
|
+
required: required ? validationErrorMessage : false,
|
|
9857
|
+
validate: handleValidate,
|
|
9858
|
+
onChange
|
|
9859
|
+
},
|
|
9860
|
+
defaultValue: ""
|
|
9861
|
+
});
|
|
9862
|
+
const fieldError = fieldState.error;
|
|
9848
9863
|
const haveError = !!fieldError;
|
|
9849
9864
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
9865
|
+
const { value: formValue, onChange: formChange } = field;
|
|
9866
|
+
const formattedValue = (0, import_react17.useMemo)(() => {
|
|
9867
|
+
let value = formValue;
|
|
9868
|
+
if (valueFormatter) value = valueFormatter.format(value);
|
|
9869
|
+
if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
|
|
9870
|
+
return value;
|
|
9871
|
+
}, [formValue, valueFormatter, mask]);
|
|
9872
|
+
const handleChange = (e) => {
|
|
9873
|
+
let value = e.target.value;
|
|
9874
|
+
if (mask) value = (0, import_mask2.unformat)(value, mask);
|
|
9875
|
+
if (valueFormatter) value = valueFormatter.unformat(value);
|
|
9876
|
+
formChange(value);
|
|
9877
|
+
};
|
|
9850
9878
|
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
|
|
9851
9879
|
label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
9852
9880
|
FormLabel,
|
|
@@ -9859,16 +9887,13 @@ var TextFormField = ({
|
|
|
9859
9887
|
),
|
|
9860
9888
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
9861
9889
|
TextField,
|
|
9862
|
-
__spreadProps(__spreadValues({
|
|
9890
|
+
__spreadProps(__spreadValues(__spreadValues({
|
|
9863
9891
|
mask,
|
|
9864
|
-
placeholder,
|
|
9865
|
-
disabled,
|
|
9866
9892
|
color: haveError ? "error" : "default",
|
|
9867
9893
|
"aria-labelledby": `${name}-label`
|
|
9868
|
-
},
|
|
9869
|
-
|
|
9870
|
-
|
|
9871
|
-
value
|
|
9894
|
+
}, inputProps), field), {
|
|
9895
|
+
onChange: handleChange,
|
|
9896
|
+
value: formattedValue
|
|
9872
9897
|
})
|
|
9873
9898
|
),
|
|
9874
9899
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
@@ -9881,14 +9906,12 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
|
9881
9906
|
var Form = (_a) => {
|
|
9882
9907
|
var _b = _a, {
|
|
9883
9908
|
onSubmit,
|
|
9884
|
-
children
|
|
9885
|
-
methods
|
|
9909
|
+
children
|
|
9886
9910
|
} = _b, props = __objRest(_b, [
|
|
9887
9911
|
"onSubmit",
|
|
9888
|
-
"children"
|
|
9889
|
-
"methods"
|
|
9912
|
+
"children"
|
|
9890
9913
|
]);
|
|
9891
|
-
const formMethods =
|
|
9914
|
+
const formMethods = (0, import_react_hook_form3.useForm)(props);
|
|
9892
9915
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: formMethods.handleSubmit(onSubmit), children }) }));
|
|
9893
9916
|
};
|
|
9894
9917
|
|
|
@@ -9906,10 +9929,7 @@ var MultiSelectFormField = (_a) => {
|
|
|
9906
9929
|
"required"
|
|
9907
9930
|
]);
|
|
9908
9931
|
var _a2;
|
|
9909
|
-
const {
|
|
9910
|
-
formState: { errors }
|
|
9911
|
-
} = (0, import_react_hook_form4.useFormContext)();
|
|
9912
|
-
const { field } = (0, import_react_hook_form4.useController)({
|
|
9932
|
+
const { field, fieldState } = (0, import_react_hook_form4.useController)({
|
|
9913
9933
|
name,
|
|
9914
9934
|
rules: {
|
|
9915
9935
|
required
|
|
@@ -9917,8 +9937,8 @@ var MultiSelectFormField = (_a) => {
|
|
|
9917
9937
|
defaultValue: []
|
|
9918
9938
|
});
|
|
9919
9939
|
const { value, onChange, ref, onBlur, disabled } = field;
|
|
9920
|
-
const haveError = !!
|
|
9921
|
-
const errorMsg = (_a2 =
|
|
9940
|
+
const haveError = !!fieldState.error;
|
|
9941
|
+
const errorMsg = (_a2 = fieldState.error) == null ? void 0 : _a2.message;
|
|
9922
9942
|
const handleChange = (v) => {
|
|
9923
9943
|
onChange(v);
|
|
9924
9944
|
};
|
|
@@ -9945,49 +9965,50 @@ var MultiSelectFormField = (_a) => {
|
|
|
9945
9965
|
] });
|
|
9946
9966
|
};
|
|
9947
9967
|
|
|
9968
|
+
// src/components/FormFields/utils/validation.ts
|
|
9969
|
+
var minMaxLength = (min, max, errorMsg) => (value) => {
|
|
9970
|
+
console.log(value);
|
|
9971
|
+
var length = value.length;
|
|
9972
|
+
return length > max || length < min ? errorMsg : true;
|
|
9973
|
+
};
|
|
9974
|
+
|
|
9948
9975
|
// src/components/FormFields/PhoneFormField.tsx
|
|
9949
|
-
var import_react_hook_form5 = require("react-hook-form");
|
|
9950
9976
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
9951
|
-
var PhoneFormField = (
|
|
9952
|
-
|
|
9953
|
-
|
|
9954
|
-
|
|
9955
|
-
|
|
9956
|
-
|
|
9957
|
-
|
|
9958
|
-
|
|
9959
|
-
|
|
9960
|
-
|
|
9961
|
-
|
|
9962
|
-
|
|
9963
|
-
|
|
9964
|
-
|
|
9965
|
-
|
|
9966
|
-
|
|
9967
|
-
|
|
9968
|
-
|
|
9969
|
-
|
|
9970
|
-
|
|
9971
|
-
|
|
9972
|
-
|
|
9973
|
-
|
|
9974
|
-
|
|
9975
|
-
|
|
9976
|
-
|
|
9977
|
-
|
|
9978
|
-
|
|
9979
|
-
name,
|
|
9980
|
-
label,
|
|
9981
|
-
required,
|
|
9982
|
-
haveError
|
|
9977
|
+
var PhoneFormField = ({
|
|
9978
|
+
name,
|
|
9979
|
+
label,
|
|
9980
|
+
required
|
|
9981
|
+
}) => {
|
|
9982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
9983
|
+
TextFormField,
|
|
9984
|
+
{
|
|
9985
|
+
name,
|
|
9986
|
+
label,
|
|
9987
|
+
required,
|
|
9988
|
+
addon: "+ 55",
|
|
9989
|
+
mask: {
|
|
9990
|
+
mask: "(__) _____-____}",
|
|
9991
|
+
replacement: { _: /\d/ }
|
|
9992
|
+
},
|
|
9993
|
+
placeholder: "(00) 00000-0000",
|
|
9994
|
+
type: "tel",
|
|
9995
|
+
validate: minMaxLength(12, 13, "Telefone inv\xE1lido"),
|
|
9996
|
+
valueFormatter: {
|
|
9997
|
+
format(v) {
|
|
9998
|
+
if (!v || v === "") return v;
|
|
9999
|
+
return v.replace(/\b55/, "");
|
|
10000
|
+
},
|
|
10001
|
+
unformat(v) {
|
|
10002
|
+
if (!v || v === "") return v;
|
|
10003
|
+
return "55" + v;
|
|
10004
|
+
}
|
|
9983
10005
|
}
|
|
9984
|
-
|
|
9985
|
-
|
|
9986
|
-
] });
|
|
10006
|
+
}
|
|
10007
|
+
);
|
|
9987
10008
|
};
|
|
9988
10009
|
|
|
9989
10010
|
// src/components/FormFields/CPFFormField.tsx
|
|
9990
|
-
var
|
|
10011
|
+
var import_react_hook_form5 = require("react-hook-form");
|
|
9991
10012
|
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
9992
10013
|
var isValidCPF = (cpf) => {
|
|
9993
10014
|
cpf = cpf.replace(/[^\d]+/g, "");
|
|
@@ -10012,8 +10033,8 @@ var CPFFormField = ({
|
|
|
10012
10033
|
validationErrorMessage,
|
|
10013
10034
|
foreignerLabel
|
|
10014
10035
|
}) => {
|
|
10015
|
-
const { control, setValue } = (0,
|
|
10016
|
-
const foreigner = (0,
|
|
10036
|
+
const { control, setValue } = (0, import_react_hook_form5.useFormContext)();
|
|
10037
|
+
const foreigner = (0, import_react_hook_form5.useWatch)({ name: "foreigner", control });
|
|
10017
10038
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Flex2, { direction: "column", children: [
|
|
10018
10039
|
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
10019
10040
|
TextFormField,
|
|
@@ -10026,11 +10047,9 @@ var CPFFormField = ({
|
|
|
10026
10047
|
mask: "___.___.___-__",
|
|
10027
10048
|
replacement: { _: /[0-9]/ }
|
|
10028
10049
|
},
|
|
10029
|
-
|
|
10030
|
-
|
|
10031
|
-
|
|
10032
|
-
return isValidCPF(value) || validationErrorMessage;
|
|
10033
|
-
}
|
|
10050
|
+
validate: (value) => {
|
|
10051
|
+
if (!required || foreigner) return true;
|
|
10052
|
+
return isValidCPF(value) || validationErrorMessage;
|
|
10034
10053
|
},
|
|
10035
10054
|
disabled: foreigner
|
|
10036
10055
|
}
|
|
@@ -10113,12 +10132,10 @@ var CNPJFormField = ({
|
|
|
10113
10132
|
mask: "__.___.___/____-__",
|
|
10114
10133
|
replacement: { _: /[0-9]/ }
|
|
10115
10134
|
},
|
|
10116
|
-
|
|
10117
|
-
|
|
10118
|
-
|
|
10119
|
-
|
|
10120
|
-
return isValidCNPJ(value) || validationErrorMessage;
|
|
10121
|
-
}
|
|
10135
|
+
validate: (value) => {
|
|
10136
|
+
const isEmpty = value.replace(matchesNonDigit, "").length === 0;
|
|
10137
|
+
if (!required && isEmpty) return true;
|
|
10138
|
+
return isValidCNPJ(value) || validationErrorMessage;
|
|
10122
10139
|
}
|
|
10123
10140
|
}
|
|
10124
10141
|
);
|
|
@@ -10171,12 +10188,10 @@ var BirthDateFormField = ({
|
|
|
10171
10188
|
mask: "__/__/____",
|
|
10172
10189
|
replacement: { _: /[0-9]/ }
|
|
10173
10190
|
},
|
|
10174
|
-
|
|
10175
|
-
|
|
10176
|
-
|
|
10177
|
-
|
|
10178
|
-
return isValidBirthDate(value, language) || validationErrorMessage;
|
|
10179
|
-
}
|
|
10191
|
+
validate: (value) => {
|
|
10192
|
+
const isEmpty = value.replace(/[^\d]+/g, "").length === 0;
|
|
10193
|
+
if (!required && isEmpty) return true;
|
|
10194
|
+
return isValidBirthDate(value, language) || validationErrorMessage;
|
|
10180
10195
|
}
|
|
10181
10196
|
}
|
|
10182
10197
|
);
|
|
@@ -10206,23 +10221,27 @@ var IdentityDocumentNumberFormField = ({
|
|
|
10206
10221
|
mask: "__.___.___-_",
|
|
10207
10222
|
replacement: { _: /[0-9]/ }
|
|
10208
10223
|
},
|
|
10209
|
-
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
return isValidRG(value) || validationErrorMessage;
|
|
10214
|
-
}
|
|
10224
|
+
validate: (value) => {
|
|
10225
|
+
const isEmpty = value.replace(/[^\d]/g, "").length === 0;
|
|
10226
|
+
if (!required && isEmpty) return true;
|
|
10227
|
+
return isValidRG(value) || validationErrorMessage;
|
|
10215
10228
|
}
|
|
10216
10229
|
}
|
|
10217
10230
|
);
|
|
10218
10231
|
};
|
|
10219
10232
|
|
|
10220
10233
|
// src/components/FormFields/AddressFormFields/index.tsx
|
|
10221
|
-
var
|
|
10222
|
-
|
|
10234
|
+
var import_react_hook_form8 = require("react-hook-form");
|
|
10235
|
+
|
|
10236
|
+
// src/components/FormFields/SelectFormField.tsx
|
|
10237
|
+
var import_react_hook_form6 = require("react-hook-form");
|
|
10238
|
+
|
|
10239
|
+
// src/utils/getNestedValue.ts
|
|
10240
|
+
function getNestedValue(obj, path) {
|
|
10241
|
+
return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
|
|
10242
|
+
}
|
|
10223
10243
|
|
|
10224
10244
|
// src/components/FormFields/SelectFormField.tsx
|
|
10225
|
-
var import_react_hook_form7 = require("react-hook-form");
|
|
10226
10245
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
10227
10246
|
var SelectFormField = ({
|
|
10228
10247
|
name,
|
|
@@ -10237,7 +10256,7 @@ var SelectFormField = ({
|
|
|
10237
10256
|
const {
|
|
10238
10257
|
control,
|
|
10239
10258
|
formState: { errors }
|
|
10240
|
-
} = (0,
|
|
10259
|
+
} = (0, import_react_hook_form6.useFormContext)();
|
|
10241
10260
|
const fieldError = getNestedValue(errors, name);
|
|
10242
10261
|
const haveError = !!fieldError;
|
|
10243
10262
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
@@ -10255,7 +10274,7 @@ var SelectFormField = ({
|
|
|
10255
10274
|
}
|
|
10256
10275
|
),
|
|
10257
10276
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10258
|
-
|
|
10277
|
+
import_react_hook_form6.Controller,
|
|
10259
10278
|
{
|
|
10260
10279
|
control,
|
|
10261
10280
|
name,
|
|
@@ -10340,19 +10359,15 @@ function CountryFormField({
|
|
|
10340
10359
|
}
|
|
10341
10360
|
|
|
10342
10361
|
// src/components/FormFields/AddressFormFields/PostalCodeFormField.tsx
|
|
10343
|
-
var import_react_hook_form8 = require("react-hook-form");
|
|
10344
10362
|
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
10345
10363
|
var PostalCodeFormField = ({
|
|
10346
10364
|
name,
|
|
10347
10365
|
label,
|
|
10348
10366
|
required,
|
|
10349
10367
|
placeholder,
|
|
10350
|
-
validationErrorMessage
|
|
10368
|
+
validationErrorMessage,
|
|
10369
|
+
onChange
|
|
10351
10370
|
}) => {
|
|
10352
|
-
const { control } = (0, import_react_hook_form8.useFormContext)();
|
|
10353
|
-
const {
|
|
10354
|
-
field: { onChange, value }
|
|
10355
|
-
} = (0, import_react_hook_form8.useController)({ name, control });
|
|
10356
10371
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
10357
10372
|
TextFormField,
|
|
10358
10373
|
{
|
|
@@ -10364,14 +10379,11 @@ var PostalCodeFormField = ({
|
|
|
10364
10379
|
mask: "_____-___",
|
|
10365
10380
|
replacement: { _: /[0-9]/ }
|
|
10366
10381
|
},
|
|
10367
|
-
value,
|
|
10368
|
-
|
|
10369
|
-
|
|
10370
|
-
|
|
10371
|
-
|
|
10372
|
-
if (!required && isEmpty) return true;
|
|
10373
|
-
return /^\d{8}$/.test(value2.replace(/\D/g, "")) || validationErrorMessage;
|
|
10374
|
-
}
|
|
10382
|
+
onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
|
|
10383
|
+
validate: (value) => {
|
|
10384
|
+
const isEmpty = value.replace(/[^\d]/g, "").length === 0;
|
|
10385
|
+
if (!required && isEmpty) return true;
|
|
10386
|
+
return /^\d{8}$/.test(value.replace(/\D/g, "")) || validationErrorMessage;
|
|
10375
10387
|
}
|
|
10376
10388
|
}
|
|
10377
10389
|
);
|
|
@@ -10428,8 +10440,8 @@ function StateFormField({
|
|
|
10428
10440
|
}
|
|
10429
10441
|
|
|
10430
10442
|
// src/components/FormFields/AddressFormFields/CityFormField.tsx
|
|
10431
|
-
var
|
|
10432
|
-
var
|
|
10443
|
+
var import_react18 = require("react");
|
|
10444
|
+
var import_react_hook_form7 = require("react-hook-form");
|
|
10433
10445
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
10434
10446
|
function CityFormField({
|
|
10435
10447
|
name,
|
|
@@ -10439,11 +10451,11 @@ function CityFormField({
|
|
|
10439
10451
|
isBrazil,
|
|
10440
10452
|
placeholder
|
|
10441
10453
|
}) {
|
|
10442
|
-
const { control, watch } = (0,
|
|
10454
|
+
const { control, watch } = (0, import_react_hook_form7.useFormContext)();
|
|
10443
10455
|
const selectedState = watch(stateName);
|
|
10444
|
-
const [cities, setCities] = (0,
|
|
10445
|
-
const [loading, setLoading] = (0,
|
|
10446
|
-
(0,
|
|
10456
|
+
const [cities, setCities] = (0, import_react18.useState)([]);
|
|
10457
|
+
const [loading, setLoading] = (0, import_react18.useState)(false);
|
|
10458
|
+
(0, import_react18.useEffect)(() => {
|
|
10447
10459
|
if (!isBrazil) {
|
|
10448
10460
|
setCities([]);
|
|
10449
10461
|
return;
|
|
@@ -10483,7 +10495,7 @@ function CityFormField({
|
|
|
10483
10495
|
fetchCities();
|
|
10484
10496
|
}, [selectedState, isBrazil]);
|
|
10485
10497
|
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
10486
|
-
|
|
10498
|
+
import_react_hook_form7.Controller,
|
|
10487
10499
|
{
|
|
10488
10500
|
name,
|
|
10489
10501
|
control,
|
|
@@ -10543,28 +10555,27 @@ function AddressFormFields({
|
|
|
10543
10555
|
required,
|
|
10544
10556
|
layout = "column"
|
|
10545
10557
|
}) {
|
|
10546
|
-
const { control, setValue } = (0,
|
|
10547
|
-
const { errors } = (0,
|
|
10548
|
-
const selectedCountry = (0,
|
|
10549
|
-
const cep = (0, import_react_hook_form10.useWatch)({ control, name: `${name}.zip_code` });
|
|
10558
|
+
const { control, setValue } = (0, import_react_hook_form8.useFormContext)();
|
|
10559
|
+
const { errors } = (0, import_react_hook_form8.useFormState)({ control });
|
|
10560
|
+
const selectedCountry = (0, import_react_hook_form8.useWatch)({ control, name: `${name}.country` });
|
|
10550
10561
|
const isBrazil = selectedCountry === "Brasil";
|
|
10551
10562
|
const addressErrors = getNestedValue2(errors, name);
|
|
10552
10563
|
const haveError = !!addressErrors;
|
|
10553
|
-
|
|
10564
|
+
const handleCEPChange = (cep) => {
|
|
10565
|
+
if (!isBrazil) return;
|
|
10554
10566
|
const cleanedCep = cep == null ? void 0 : cep.replace(/\D/g, "");
|
|
10555
|
-
if (
|
|
10556
|
-
|
|
10557
|
-
|
|
10558
|
-
|
|
10559
|
-
|
|
10560
|
-
|
|
10561
|
-
|
|
10562
|
-
|
|
10563
|
-
|
|
10564
|
-
|
|
10565
|
-
|
|
10566
|
-
|
|
10567
|
-
}, [cep, isBrazil]);
|
|
10567
|
+
if ((cleanedCep == null ? void 0 : cleanedCep.length) !== 8) return;
|
|
10568
|
+
fetch(`https://viacep.com.br/ws/${cleanedCep}/json`).then((res) => res.json()).then((data) => {
|
|
10569
|
+
if (!data.erro) {
|
|
10570
|
+
setValue(`${name}.street`, data.logradouro || "");
|
|
10571
|
+
setValue(`${name}.neighborhood`, data.bairro || "");
|
|
10572
|
+
setValue(`${name}.city`, data.localidade || "");
|
|
10573
|
+
setValue(`${name}.state`, data.uf || "");
|
|
10574
|
+
}
|
|
10575
|
+
}).catch(() => {
|
|
10576
|
+
console.error("Erro ao buscar CEP");
|
|
10577
|
+
});
|
|
10578
|
+
};
|
|
10568
10579
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AddressContainerStyled, { layout, children: [
|
|
10569
10580
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10570
10581
|
FormLabel,
|
|
@@ -10591,7 +10602,8 @@ function AddressFormFields({
|
|
|
10591
10602
|
label: "CEP",
|
|
10592
10603
|
required,
|
|
10593
10604
|
placeholder: "00000-000",
|
|
10594
|
-
validationErrorMessage: "CEP inv\xE1lido"
|
|
10605
|
+
validationErrorMessage: "CEP inv\xE1lido",
|
|
10606
|
+
onChange: handleCEPChange
|
|
10595
10607
|
}
|
|
10596
10608
|
) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10597
10609
|
TextFormField,
|
|
@@ -10642,7 +10654,7 @@ function AddressFormFields({
|
|
|
10642
10654
|
}
|
|
10643
10655
|
|
|
10644
10656
|
// src/components/FormFields/RadioGroupFormField.tsx
|
|
10645
|
-
var
|
|
10657
|
+
var import_react_hook_form9 = require("react-hook-form");
|
|
10646
10658
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
10647
10659
|
var RadioGroupFormField = ({
|
|
10648
10660
|
name,
|
|
@@ -10658,7 +10670,7 @@ var RadioGroupFormField = ({
|
|
|
10658
10670
|
const {
|
|
10659
10671
|
control,
|
|
10660
10672
|
formState: { errors }
|
|
10661
|
-
} = (0,
|
|
10673
|
+
} = (0, import_react_hook_form9.useFormContext)();
|
|
10662
10674
|
const fieldError = getNestedValue(errors, name);
|
|
10663
10675
|
const haveError = !!fieldError;
|
|
10664
10676
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
@@ -10676,7 +10688,7 @@ var RadioGroupFormField = ({
|
|
|
10676
10688
|
}
|
|
10677
10689
|
),
|
|
10678
10690
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
10679
|
-
|
|
10691
|
+
import_react_hook_form9.Controller,
|
|
10680
10692
|
{
|
|
10681
10693
|
name,
|
|
10682
10694
|
control,
|
|
@@ -10703,7 +10715,7 @@ var RadioGroupFormField = ({
|
|
|
10703
10715
|
};
|
|
10704
10716
|
|
|
10705
10717
|
// src/components/FormFields/CheckboxGroupFormField.tsx
|
|
10706
|
-
var
|
|
10718
|
+
var import_react_hook_form10 = require("react-hook-form");
|
|
10707
10719
|
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
10708
10720
|
var CheckboxGroupFormField = ({
|
|
10709
10721
|
name,
|
|
@@ -10719,7 +10731,7 @@ var CheckboxGroupFormField = ({
|
|
|
10719
10731
|
const {
|
|
10720
10732
|
control,
|
|
10721
10733
|
formState: { errors }
|
|
10722
|
-
} = (0,
|
|
10734
|
+
} = (0, import_react_hook_form10.useFormContext)();
|
|
10723
10735
|
const fieldError = getNestedValue(errors, name);
|
|
10724
10736
|
const haveError = !!fieldError;
|
|
10725
10737
|
const errorMsg = fieldError == null ? void 0 : fieldError.message;
|
|
@@ -10738,7 +10750,7 @@ var CheckboxGroupFormField = ({
|
|
|
10738
10750
|
}
|
|
10739
10751
|
),
|
|
10740
10752
|
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10741
|
-
|
|
10753
|
+
import_react_hook_form10.Controller,
|
|
10742
10754
|
{
|
|
10743
10755
|
name,
|
|
10744
10756
|
control,
|