@ttoss/forms 0.24.9 → 0.25.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/README.md +4 -0
- package/dist/esm/Brazil/index.js +1 -1
- package/dist/esm/MultistepForm/index.js +4 -4
- package/dist/esm/{chunk-ECFRAK7U.js → chunk-6U527R3X.js} +12 -3
- package/dist/esm/index.js +1 -1
- package/package.json +11 -13
- package/src/yup/schema.ts +14 -0
- package/dist/Brazil/index.d.mts +0 -24
- package/dist/Brazil/index.js +0 -832
- package/dist/FormFieldPatternFormat-CkcL14ho.d.mts +0 -10
- package/dist/MultistepForm/index.d.mts +0 -65
- package/dist/MultistepForm/index.js +0 -3260
- package/dist/index.d.mts +0 -107
- package/dist/index.js +0 -773
- package/dist/typings.d-HZBqJJjn.d.mts +0 -12
package/dist/Brazil/index.js
DELETED
|
@@ -1,832 +0,0 @@
|
|
|
1
|
-
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
"use strict";
|
|
3
|
-
|
|
4
|
-
var __create = Object.create;
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __export = (target, all) => {
|
|
11
|
-
for (var name in all) __defProp(target, name, {
|
|
12
|
-
get: all[name],
|
|
13
|
-
enumerable: true
|
|
14
|
-
});
|
|
15
|
-
};
|
|
16
|
-
var __copyProps = (to, from, except, desc) => {
|
|
17
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
-
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
-
get: () => from[key],
|
|
20
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
return to;
|
|
24
|
-
};
|
|
25
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
26
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
27
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
28
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
29
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
30
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
31
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
32
|
-
value: mod,
|
|
33
|
-
enumerable: true
|
|
34
|
-
}) : target, mod));
|
|
35
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
36
|
-
value: true
|
|
37
|
-
}), mod);
|
|
38
|
-
|
|
39
|
-
// src/Brazil/index.ts
|
|
40
|
-
var Brazil_exports = {};
|
|
41
|
-
__export(Brazil_exports, {
|
|
42
|
-
FormFieldCEP: () => FormFieldCEP,
|
|
43
|
-
FormFieldCNPJ: () => FormFieldCNPJ,
|
|
44
|
-
FormFieldPhone: () => FormFieldPhone,
|
|
45
|
-
isCnpjValid: () => isCnpjValid
|
|
46
|
-
});
|
|
47
|
-
module.exports = __toCommonJS(Brazil_exports);
|
|
48
|
-
|
|
49
|
-
// src/index.ts
|
|
50
|
-
var src_exports = {};
|
|
51
|
-
__export(src_exports, {
|
|
52
|
-
Controller: () => import_react_hook_form6.Controller,
|
|
53
|
-
Form: () => Form,
|
|
54
|
-
FormErrorMessage: () => FormErrorMessage,
|
|
55
|
-
FormField: () => FormField,
|
|
56
|
-
FormFieldCheckbox: () => FormFieldCheckbox,
|
|
57
|
-
FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
|
|
58
|
-
FormFieldCurrencyInput: () => FormFieldCurrencyInput,
|
|
59
|
-
FormFieldInput: () => FormFieldInput,
|
|
60
|
-
FormFieldNumericFormat: () => FormFieldNumericFormat,
|
|
61
|
-
FormFieldPassword: () => FormFieldPassword,
|
|
62
|
-
FormFieldPatternFormat: () => FormFieldPatternFormat,
|
|
63
|
-
FormFieldRadio: () => FormFieldRadio,
|
|
64
|
-
FormFieldSelect: () => FormFieldSelect,
|
|
65
|
-
FormFieldTextarea: () => FormFieldTextarea,
|
|
66
|
-
FormGroup: () => FormGroup,
|
|
67
|
-
FormProvider: () => import_react_hook_form6.FormProvider,
|
|
68
|
-
useController: () => import_react_hook_form6.useController,
|
|
69
|
-
useFieldArray: () => import_react_hook_form6.useFieldArray,
|
|
70
|
-
useForm: () => import_react_hook_form6.useForm,
|
|
71
|
-
useFormContext: () => import_react_hook_form6.useFormContext,
|
|
72
|
-
useFormGroup: () => useFormGroup,
|
|
73
|
-
useFormState: () => import_react_hook_form6.useFormState,
|
|
74
|
-
useWatch: () => import_react_hook_form6.useWatch,
|
|
75
|
-
yup: () => yup2,
|
|
76
|
-
yupResolver: () => import_yup2.yupResolver
|
|
77
|
-
});
|
|
78
|
-
var import_yup2 = require("@hookform/resolvers/yup");
|
|
79
|
-
|
|
80
|
-
// src/yup/i18n.ts
|
|
81
|
-
var import_react_i18n = require("@ttoss/react-i18n");
|
|
82
|
-
var import_yup = require("yup");
|
|
83
|
-
(0, import_yup.setLocale)({
|
|
84
|
-
mixed: {
|
|
85
|
-
required: (0, import_react_i18n.defineMessage)({
|
|
86
|
-
defaultMessage: "Field is required",
|
|
87
|
-
description: "Field is required"
|
|
88
|
-
}),
|
|
89
|
-
notType: ({
|
|
90
|
-
type
|
|
91
|
-
}) => {
|
|
92
|
-
return {
|
|
93
|
-
...(0, import_react_i18n.defineMessage)({
|
|
94
|
-
defaultMessage: "Invalid Value for Field of type {type}",
|
|
95
|
-
description: "Invalid Value"
|
|
96
|
-
}),
|
|
97
|
-
values: {
|
|
98
|
-
type
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
string: {
|
|
104
|
-
min: ({
|
|
105
|
-
min
|
|
106
|
-
}) => {
|
|
107
|
-
return {
|
|
108
|
-
...(0, import_react_i18n.defineMessage)({
|
|
109
|
-
defaultMessage: "Field must be at least {min} characters",
|
|
110
|
-
description: "Min length field"
|
|
111
|
-
}),
|
|
112
|
-
values: {
|
|
113
|
-
min
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
// src/yup/schema.ts
|
|
121
|
-
var yup = __toESM(require("yup"));
|
|
122
|
-
yup.addMethod(yup.string, "cnpj", function () {
|
|
123
|
-
return this.test("valid-cnpj", "Invalid CNPJ", value => {
|
|
124
|
-
return isCnpjValid(value);
|
|
125
|
-
});
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
// src/yup/yup.ts
|
|
129
|
-
var yup2 = __toESM(require("yup"));
|
|
130
|
-
|
|
131
|
-
// src/Form.tsx
|
|
132
|
-
var import_ui = require("@ttoss/ui");
|
|
133
|
-
var import_react_hook_form = require("react-hook-form");
|
|
134
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
135
|
-
var Form = ({
|
|
136
|
-
children,
|
|
137
|
-
onSubmit,
|
|
138
|
-
sx,
|
|
139
|
-
...formMethods
|
|
140
|
-
}) => {
|
|
141
|
-
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
|
|
142
|
-
...formMethods,
|
|
143
|
-
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
|
|
144
|
-
as: "form",
|
|
145
|
-
variant: "forms.form",
|
|
146
|
-
onSubmit: formMethods.handleSubmit(data => {
|
|
147
|
-
return onSubmit?.(data);
|
|
148
|
-
}),
|
|
149
|
-
sx,
|
|
150
|
-
children
|
|
151
|
-
})
|
|
152
|
-
});
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
// src/FormErrorMessage.tsx
|
|
156
|
-
var import_error_message = require("@hookform/error-message");
|
|
157
|
-
var import_react_hook_form2 = require("react-hook-form");
|
|
158
|
-
var import_react_i18n2 = require("@ttoss/react-i18n");
|
|
159
|
-
var import_ui2 = require("@ttoss/ui");
|
|
160
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
161
|
-
var isMessageDescriptor = possibleMessageDescriptor => {
|
|
162
|
-
return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
|
|
163
|
-
};
|
|
164
|
-
var FormErrorMessage = ({
|
|
165
|
-
name,
|
|
166
|
-
disabled
|
|
167
|
-
}) => {
|
|
168
|
-
const {
|
|
169
|
-
formState: {
|
|
170
|
-
errors
|
|
171
|
-
}
|
|
172
|
-
} = (0, import_react_hook_form2.useFormContext)();
|
|
173
|
-
return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
|
|
174
|
-
name,
|
|
175
|
-
errors,
|
|
176
|
-
render: ({
|
|
177
|
-
message
|
|
178
|
-
}) => {
|
|
179
|
-
return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
|
|
180
|
-
negative: true,
|
|
181
|
-
disabled,
|
|
182
|
-
children: (() => {
|
|
183
|
-
if (typeof message === "string") {
|
|
184
|
-
return message;
|
|
185
|
-
}
|
|
186
|
-
if (isMessageDescriptor(message)) {
|
|
187
|
-
return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
|
|
188
|
-
...message
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
return JSON.stringify(message);
|
|
192
|
-
})()
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
};
|
|
197
|
-
|
|
198
|
-
// src/FormField.tsx
|
|
199
|
-
var React = __toESM(require("react"));
|
|
200
|
-
var import_react_hook_form3 = require("react-hook-form");
|
|
201
|
-
var import_ui3 = require("@ttoss/ui");
|
|
202
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
203
|
-
var FormField = ({
|
|
204
|
-
label,
|
|
205
|
-
id: idProp,
|
|
206
|
-
name,
|
|
207
|
-
defaultValue,
|
|
208
|
-
disabled,
|
|
209
|
-
tooltip,
|
|
210
|
-
onTooltipClick,
|
|
211
|
-
sx,
|
|
212
|
-
css,
|
|
213
|
-
render
|
|
214
|
-
}) => {
|
|
215
|
-
const controllerReturn = (0, import_react_hook_form3.useController)({
|
|
216
|
-
name,
|
|
217
|
-
defaultValue
|
|
218
|
-
});
|
|
219
|
-
const id = idProp || `form-field-${name}`;
|
|
220
|
-
const memoizedRender = React.useMemo(() => {
|
|
221
|
-
return React.Children.map(render(controllerReturn), child => {
|
|
222
|
-
return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, {
|
|
223
|
-
children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
|
|
224
|
-
"aria-disabled": disabled,
|
|
225
|
-
htmlFor: id,
|
|
226
|
-
tooltip,
|
|
227
|
-
onTooltipClick,
|
|
228
|
-
children: label
|
|
229
|
-
}), React.createElement(child.type, {
|
|
230
|
-
id,
|
|
231
|
-
...child.props
|
|
232
|
-
})]
|
|
233
|
-
});
|
|
234
|
-
});
|
|
235
|
-
}, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
|
|
236
|
-
return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
|
|
237
|
-
sx: {
|
|
238
|
-
flexDirection: "column",
|
|
239
|
-
width: "100%",
|
|
240
|
-
gap: "md",
|
|
241
|
-
...sx
|
|
242
|
-
},
|
|
243
|
-
css,
|
|
244
|
-
children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(FormErrorMessage, {
|
|
245
|
-
name
|
|
246
|
-
})]
|
|
247
|
-
});
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
// src/FormFieldCheckbox.tsx
|
|
251
|
-
var import_ui4 = require("@ttoss/ui");
|
|
252
|
-
var import_react_hook_form4 = require("react-hook-form");
|
|
253
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
254
|
-
var FormFieldCheckbox = ({
|
|
255
|
-
label,
|
|
256
|
-
name,
|
|
257
|
-
sx,
|
|
258
|
-
...checkboxProps
|
|
259
|
-
}) => {
|
|
260
|
-
const {
|
|
261
|
-
field: {
|
|
262
|
-
onChange,
|
|
263
|
-
onBlur,
|
|
264
|
-
value,
|
|
265
|
-
ref
|
|
266
|
-
},
|
|
267
|
-
formState: {
|
|
268
|
-
errors
|
|
269
|
-
}
|
|
270
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
271
|
-
} = (0, import_react_hook_form4.useController)({
|
|
272
|
-
name,
|
|
273
|
-
defaultValue: false
|
|
274
|
-
});
|
|
275
|
-
const id = `form-field-checkbox-${name}`;
|
|
276
|
-
const error = !!errors[name]?.message;
|
|
277
|
-
return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
|
|
278
|
-
sx: {
|
|
279
|
-
flexDirection: "column",
|
|
280
|
-
width: "100%",
|
|
281
|
-
...sx
|
|
282
|
-
},
|
|
283
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
|
|
284
|
-
sx: {
|
|
285
|
-
alignItems: "center"
|
|
286
|
-
},
|
|
287
|
-
children: /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Label, {
|
|
288
|
-
"aria-disabled": checkboxProps.disabled,
|
|
289
|
-
htmlFor: id,
|
|
290
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Checkbox, {
|
|
291
|
-
id,
|
|
292
|
-
ref,
|
|
293
|
-
checked: value,
|
|
294
|
-
onChange,
|
|
295
|
-
onBlur,
|
|
296
|
-
name,
|
|
297
|
-
"aria-invalid": error ? "true" : "false",
|
|
298
|
-
...checkboxProps
|
|
299
|
-
}), label]
|
|
300
|
-
})
|
|
301
|
-
}), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(FormErrorMessage, {
|
|
302
|
-
name
|
|
303
|
-
})]
|
|
304
|
-
});
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
// src/FormFieldPatternFormat.tsx
|
|
308
|
-
var import_ui5 = require("@ttoss/ui");
|
|
309
|
-
var import_react_number_format = require("react-number-format");
|
|
310
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
311
|
-
var FormFieldPatternFormat = ({
|
|
312
|
-
label,
|
|
313
|
-
name,
|
|
314
|
-
...patternFormatProps
|
|
315
|
-
}) => {
|
|
316
|
-
return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
|
|
317
|
-
name,
|
|
318
|
-
label,
|
|
319
|
-
render: ({
|
|
320
|
-
field,
|
|
321
|
-
fieldState
|
|
322
|
-
}) => {
|
|
323
|
-
return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_number_format.PatternFormat, {
|
|
324
|
-
name: field.name,
|
|
325
|
-
value: field.value,
|
|
326
|
-
onBlur: field.onBlur,
|
|
327
|
-
onValueChange: values => {
|
|
328
|
-
field.onChange(values.value);
|
|
329
|
-
},
|
|
330
|
-
customInput: import_ui5.Input,
|
|
331
|
-
"aria-invalid": Boolean(fieldState.error).valueOf(),
|
|
332
|
-
...patternFormatProps
|
|
333
|
-
});
|
|
334
|
-
}
|
|
335
|
-
});
|
|
336
|
-
};
|
|
337
|
-
|
|
338
|
-
// src/FormFieldCreditCardNumber.tsx
|
|
339
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
340
|
-
var FormFieldCreditCardNumber = ({
|
|
341
|
-
label,
|
|
342
|
-
name,
|
|
343
|
-
...formFieldPatternFormatProps
|
|
344
|
-
}) => {
|
|
345
|
-
return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormFieldPatternFormat, {
|
|
346
|
-
name,
|
|
347
|
-
label,
|
|
348
|
-
format: "#### #### #### ####",
|
|
349
|
-
placeholder: "1234 1234 1234 1234",
|
|
350
|
-
...formFieldPatternFormatProps
|
|
351
|
-
});
|
|
352
|
-
};
|
|
353
|
-
|
|
354
|
-
// src/FormFieldNumericFormat.tsx
|
|
355
|
-
var import_ui6 = require("@ttoss/ui");
|
|
356
|
-
var import_react_number_format2 = require("react-number-format");
|
|
357
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
358
|
-
var FormFieldNumericFormat = ({
|
|
359
|
-
label,
|
|
360
|
-
name,
|
|
361
|
-
...numericFormatProps
|
|
362
|
-
}) => {
|
|
363
|
-
return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormField, {
|
|
364
|
-
label,
|
|
365
|
-
name,
|
|
366
|
-
render: ({
|
|
367
|
-
field
|
|
368
|
-
}) => {
|
|
369
|
-
return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_number_format2.NumericFormat, {
|
|
370
|
-
name: field.name,
|
|
371
|
-
value: field.value,
|
|
372
|
-
onBlur: field.onBlur,
|
|
373
|
-
onValueChange: values => {
|
|
374
|
-
field.onChange(values.floatValue);
|
|
375
|
-
},
|
|
376
|
-
customInput: import_ui6.Input,
|
|
377
|
-
...numericFormatProps
|
|
378
|
-
});
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
};
|
|
382
|
-
|
|
383
|
-
// src/FormFieldCurrencyInput.tsx
|
|
384
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
385
|
-
var FormFieldCurrencyInput = ({
|
|
386
|
-
label,
|
|
387
|
-
name,
|
|
388
|
-
prefix,
|
|
389
|
-
decimalSeparator,
|
|
390
|
-
thousandSeparator,
|
|
391
|
-
...formFieldNumericFormatProps
|
|
392
|
-
}) => {
|
|
393
|
-
return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormFieldNumericFormat, {
|
|
394
|
-
name,
|
|
395
|
-
label,
|
|
396
|
-
fixedDecimalScale: true,
|
|
397
|
-
decimalScale: 2,
|
|
398
|
-
prefix,
|
|
399
|
-
decimalSeparator,
|
|
400
|
-
thousandSeparator,
|
|
401
|
-
placeholder: `${prefix} 0${decimalSeparator}00`,
|
|
402
|
-
allowNegative: false,
|
|
403
|
-
...formFieldNumericFormatProps
|
|
404
|
-
});
|
|
405
|
-
};
|
|
406
|
-
|
|
407
|
-
// src/FormFieldInput.tsx
|
|
408
|
-
var import_ui7 = require("@ttoss/ui");
|
|
409
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
410
|
-
var FormFieldInput = ({
|
|
411
|
-
label,
|
|
412
|
-
name,
|
|
413
|
-
tooltip,
|
|
414
|
-
onTooltipClick,
|
|
415
|
-
sx,
|
|
416
|
-
defaultValue = "",
|
|
417
|
-
...inputProps
|
|
418
|
-
}) => {
|
|
419
|
-
return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
|
|
420
|
-
name,
|
|
421
|
-
label,
|
|
422
|
-
disabled: inputProps.disabled,
|
|
423
|
-
tooltip,
|
|
424
|
-
onTooltipClick,
|
|
425
|
-
sx,
|
|
426
|
-
defaultValue,
|
|
427
|
-
render: ({
|
|
428
|
-
field,
|
|
429
|
-
fieldState
|
|
430
|
-
}) => {
|
|
431
|
-
return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui7.Input, {
|
|
432
|
-
...inputProps,
|
|
433
|
-
...field,
|
|
434
|
-
"aria-invalid": fieldState.error ? "true" : void 0
|
|
435
|
-
});
|
|
436
|
-
}
|
|
437
|
-
});
|
|
438
|
-
};
|
|
439
|
-
|
|
440
|
-
// src/FormFieldPassword.tsx
|
|
441
|
-
var import_ui8 = require("@ttoss/ui");
|
|
442
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
443
|
-
var FormFieldPassword = ({
|
|
444
|
-
label,
|
|
445
|
-
name,
|
|
446
|
-
tooltip,
|
|
447
|
-
onTooltipClick,
|
|
448
|
-
sx,
|
|
449
|
-
defaultValue = "",
|
|
450
|
-
...inputProps
|
|
451
|
-
}) => {
|
|
452
|
-
return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
|
|
453
|
-
name,
|
|
454
|
-
label,
|
|
455
|
-
disabled: inputProps.disabled,
|
|
456
|
-
tooltip,
|
|
457
|
-
onTooltipClick,
|
|
458
|
-
sx,
|
|
459
|
-
defaultValue,
|
|
460
|
-
render: ({
|
|
461
|
-
field,
|
|
462
|
-
fieldState
|
|
463
|
-
}) => {
|
|
464
|
-
return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui8.InputPassword, {
|
|
465
|
-
...inputProps,
|
|
466
|
-
...field,
|
|
467
|
-
"aria-invalid": fieldState.error ? "true" : void 0
|
|
468
|
-
});
|
|
469
|
-
}
|
|
470
|
-
});
|
|
471
|
-
};
|
|
472
|
-
|
|
473
|
-
// src/FormFieldRadio.tsx
|
|
474
|
-
var import_ui9 = require("@ttoss/ui");
|
|
475
|
-
var import_react_hook_form5 = require("react-hook-form");
|
|
476
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
477
|
-
var FormFieldRadio = ({
|
|
478
|
-
label,
|
|
479
|
-
name,
|
|
480
|
-
options,
|
|
481
|
-
sx,
|
|
482
|
-
...radioProps
|
|
483
|
-
}) => {
|
|
484
|
-
const {
|
|
485
|
-
field: {
|
|
486
|
-
onChange,
|
|
487
|
-
onBlur,
|
|
488
|
-
value,
|
|
489
|
-
ref
|
|
490
|
-
}
|
|
491
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
492
|
-
} = (0, import_react_hook_form5.useController)({
|
|
493
|
-
name,
|
|
494
|
-
defaultValue: ""
|
|
495
|
-
});
|
|
496
|
-
return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Flex, {
|
|
497
|
-
sx: {
|
|
498
|
-
flexDirection: "column",
|
|
499
|
-
width: "100%",
|
|
500
|
-
...sx
|
|
501
|
-
},
|
|
502
|
-
children: [label && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Label, {
|
|
503
|
-
sx: {
|
|
504
|
-
marginBottom: "md"
|
|
505
|
-
},
|
|
506
|
-
children: label
|
|
507
|
-
}), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Box, {
|
|
508
|
-
children: options.map(option => {
|
|
509
|
-
const id = `form-field-radio-${name}-${option.value}`;
|
|
510
|
-
return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Label, {
|
|
511
|
-
htmlFor: id,
|
|
512
|
-
children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Radio, {
|
|
513
|
-
ref,
|
|
514
|
-
onChange,
|
|
515
|
-
onBlur,
|
|
516
|
-
value: option.value,
|
|
517
|
-
checked: value === option.value,
|
|
518
|
-
name,
|
|
519
|
-
id,
|
|
520
|
-
...radioProps
|
|
521
|
-
}), option.label]
|
|
522
|
-
}, id);
|
|
523
|
-
})
|
|
524
|
-
}), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormErrorMessage, {
|
|
525
|
-
name
|
|
526
|
-
})]
|
|
527
|
-
});
|
|
528
|
-
};
|
|
529
|
-
|
|
530
|
-
// src/FormFieldSelect.tsx
|
|
531
|
-
var import_ui10 = require("@ttoss/ui");
|
|
532
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
533
|
-
var FormFieldSelect = ({
|
|
534
|
-
label,
|
|
535
|
-
name,
|
|
536
|
-
id,
|
|
537
|
-
defaultValue,
|
|
538
|
-
sx,
|
|
539
|
-
css,
|
|
540
|
-
disabled,
|
|
541
|
-
tooltip,
|
|
542
|
-
onTooltipClick,
|
|
543
|
-
...selectProps
|
|
544
|
-
}) => {
|
|
545
|
-
return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
|
|
546
|
-
name,
|
|
547
|
-
label,
|
|
548
|
-
id,
|
|
549
|
-
defaultValue,
|
|
550
|
-
disabled,
|
|
551
|
-
tooltip,
|
|
552
|
-
onTooltipClick,
|
|
553
|
-
sx,
|
|
554
|
-
css,
|
|
555
|
-
render: ({
|
|
556
|
-
field,
|
|
557
|
-
fieldState
|
|
558
|
-
}) => {
|
|
559
|
-
return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Select, {
|
|
560
|
-
...selectProps,
|
|
561
|
-
...field,
|
|
562
|
-
isDisabled: disabled,
|
|
563
|
-
"aria-invalid": fieldState.error ? "true" : void 0
|
|
564
|
-
});
|
|
565
|
-
}
|
|
566
|
-
});
|
|
567
|
-
};
|
|
568
|
-
|
|
569
|
-
// src/FormFieldTextarea.tsx
|
|
570
|
-
var import_ui11 = require("@ttoss/ui");
|
|
571
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
572
|
-
var FormFieldTextarea = ({
|
|
573
|
-
label,
|
|
574
|
-
name,
|
|
575
|
-
sx,
|
|
576
|
-
...textareaProps
|
|
577
|
-
}) => {
|
|
578
|
-
const id = `form-field-textarea-${name}`;
|
|
579
|
-
return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormField, {
|
|
580
|
-
label,
|
|
581
|
-
name,
|
|
582
|
-
id,
|
|
583
|
-
sx,
|
|
584
|
-
render: ({
|
|
585
|
-
field,
|
|
586
|
-
fieldState
|
|
587
|
-
}) => {
|
|
588
|
-
return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Textarea, {
|
|
589
|
-
...field,
|
|
590
|
-
...textareaProps,
|
|
591
|
-
"aria-invalid": fieldState.error ? "true" : void 0
|
|
592
|
-
});
|
|
593
|
-
}
|
|
594
|
-
});
|
|
595
|
-
};
|
|
596
|
-
|
|
597
|
-
// src/FormGroup.tsx
|
|
598
|
-
var React2 = __toESM(require("react"));
|
|
599
|
-
var import_ui12 = require("@ttoss/ui");
|
|
600
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
601
|
-
var FormGroupLevelsManagerContext = React2.createContext({
|
|
602
|
-
levelsLength: 1,
|
|
603
|
-
registerChild: () => {
|
|
604
|
-
return null;
|
|
605
|
-
}
|
|
606
|
-
});
|
|
607
|
-
var FormGroupLevelsManager = ({
|
|
608
|
-
children
|
|
609
|
-
}) => {
|
|
610
|
-
const [levelsLength, setLevelsLength] = React2.useState(0);
|
|
611
|
-
const registerChild = React2.useCallback(level => {
|
|
612
|
-
if (level + 1 > levelsLength) {
|
|
613
|
-
setLevelsLength(level + 1);
|
|
614
|
-
}
|
|
615
|
-
}, [levelsLength]);
|
|
616
|
-
return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManagerContext.Provider, {
|
|
617
|
-
value: {
|
|
618
|
-
levelsLength,
|
|
619
|
-
registerChild
|
|
620
|
-
},
|
|
621
|
-
children
|
|
622
|
-
});
|
|
623
|
-
};
|
|
624
|
-
var FormGroupContext = React2.createContext({});
|
|
625
|
-
var useFormGroup = () => {
|
|
626
|
-
const {
|
|
627
|
-
parentLevel
|
|
628
|
-
} = React2.useContext(FormGroupContext);
|
|
629
|
-
const {
|
|
630
|
-
levelsLength
|
|
631
|
-
} = React2.useContext(FormGroupLevelsManagerContext);
|
|
632
|
-
return {
|
|
633
|
-
level: parentLevel,
|
|
634
|
-
levelsLength
|
|
635
|
-
};
|
|
636
|
-
};
|
|
637
|
-
var FormGroupWrapper = ({
|
|
638
|
-
title,
|
|
639
|
-
direction,
|
|
640
|
-
children,
|
|
641
|
-
name,
|
|
642
|
-
...boxProps
|
|
643
|
-
}) => {
|
|
644
|
-
const {
|
|
645
|
-
level
|
|
646
|
-
} = useFormGroup();
|
|
647
|
-
const {
|
|
648
|
-
registerChild
|
|
649
|
-
} = React2.useContext(FormGroupLevelsManagerContext);
|
|
650
|
-
React2.useEffect(() => {
|
|
651
|
-
if (typeof level === "number") {
|
|
652
|
-
registerChild(level);
|
|
653
|
-
}
|
|
654
|
-
}, [level, registerChild]);
|
|
655
|
-
const childrenContainerSx = {
|
|
656
|
-
flexDirection: direction || "column",
|
|
657
|
-
gap: "md",
|
|
658
|
-
width: "100%"
|
|
659
|
-
};
|
|
660
|
-
return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_ui12.Box, {
|
|
661
|
-
"aria-level": level,
|
|
662
|
-
...boxProps,
|
|
663
|
-
sx: {
|
|
664
|
-
marginTop: level === 0 ? "none" : "lg",
|
|
665
|
-
marginBottom: "lg",
|
|
666
|
-
...boxProps.sx
|
|
667
|
-
},
|
|
668
|
-
children: [title && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Box, {
|
|
669
|
-
sx: {
|
|
670
|
-
marginBottom: "md"
|
|
671
|
-
},
|
|
672
|
-
children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Text, {
|
|
673
|
-
sx: {
|
|
674
|
-
fontSize: "2xl",
|
|
675
|
-
fontWeight: "bold"
|
|
676
|
-
},
|
|
677
|
-
children: title
|
|
678
|
-
})
|
|
679
|
-
}), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
|
|
680
|
-
sx: childrenContainerSx,
|
|
681
|
-
children
|
|
682
|
-
}), name && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormErrorMessage, {
|
|
683
|
-
name
|
|
684
|
-
})]
|
|
685
|
-
});
|
|
686
|
-
};
|
|
687
|
-
var FormGroup = props => {
|
|
688
|
-
const {
|
|
689
|
-
level
|
|
690
|
-
} = useFormGroup();
|
|
691
|
-
const currentLevel = level === void 0 ? 0 : level + 1;
|
|
692
|
-
return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupContext.Provider, {
|
|
693
|
-
value: {
|
|
694
|
-
parentLevel: currentLevel
|
|
695
|
-
},
|
|
696
|
-
children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManager, {
|
|
697
|
-
children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
|
|
698
|
-
...props
|
|
699
|
-
})
|
|
700
|
-
}) : /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
|
|
701
|
-
...props
|
|
702
|
-
})
|
|
703
|
-
});
|
|
704
|
-
};
|
|
705
|
-
|
|
706
|
-
// src/index.ts
|
|
707
|
-
var import_react_hook_form6 = require("react-hook-form");
|
|
708
|
-
__reExport(src_exports, require("react-hook-form"));
|
|
709
|
-
|
|
710
|
-
// src/Brazil/FormFieldCNPJ.tsx
|
|
711
|
-
var import_ui13 = require("@ttoss/ui");
|
|
712
|
-
var import_react_number_format3 = require("react-number-format");
|
|
713
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
714
|
-
var isCnpjValid = cnpj => {
|
|
715
|
-
if (cnpj?.length != 14) {
|
|
716
|
-
return false;
|
|
717
|
-
}
|
|
718
|
-
if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
|
|
719
|
-
return false;
|
|
720
|
-
}
|
|
721
|
-
let size = cnpj.length - 2;
|
|
722
|
-
let numbers = cnpj.substring(0, size);
|
|
723
|
-
const digits = cnpj.substring(size);
|
|
724
|
-
let soma = 0;
|
|
725
|
-
let pos = size - 7;
|
|
726
|
-
for (let i = size; i >= 1; i--) {
|
|
727
|
-
soma += numbers.charAt(size - i) * pos--;
|
|
728
|
-
if (pos < 2) {
|
|
729
|
-
pos = 9;
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
733
|
-
if (result != digits.charAt(0)) {
|
|
734
|
-
return false;
|
|
735
|
-
}
|
|
736
|
-
size = size + 1;
|
|
737
|
-
numbers = cnpj.substring(0, size);
|
|
738
|
-
soma = 0;
|
|
739
|
-
pos = size - 7;
|
|
740
|
-
for (let i = size; i >= 1; i--) {
|
|
741
|
-
soma += numbers.charAt(size - i) * pos--;
|
|
742
|
-
if (pos < 2) {
|
|
743
|
-
pos = 9;
|
|
744
|
-
}
|
|
745
|
-
}
|
|
746
|
-
result = soma % 11 < 2 ? 0 : 11 - soma % 11;
|
|
747
|
-
if (result != digits.charAt(1)) {
|
|
748
|
-
return false;
|
|
749
|
-
}
|
|
750
|
-
return true;
|
|
751
|
-
};
|
|
752
|
-
var FormFieldCNPJ = ({
|
|
753
|
-
label,
|
|
754
|
-
name,
|
|
755
|
-
...patternFormatProps
|
|
756
|
-
}) => {
|
|
757
|
-
return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormField, {
|
|
758
|
-
name,
|
|
759
|
-
label,
|
|
760
|
-
render: ({
|
|
761
|
-
field
|
|
762
|
-
}) => {
|
|
763
|
-
return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_number_format3.PatternFormat, {
|
|
764
|
-
name: field.name,
|
|
765
|
-
value: field.value,
|
|
766
|
-
onBlur: field.onBlur,
|
|
767
|
-
onValueChange: values => {
|
|
768
|
-
field.onChange(values.value);
|
|
769
|
-
},
|
|
770
|
-
format: "##.###.###/####-##",
|
|
771
|
-
customInput: import_ui13.Input,
|
|
772
|
-
placeholder: "12.345.678/0000-00",
|
|
773
|
-
...patternFormatProps
|
|
774
|
-
});
|
|
775
|
-
}
|
|
776
|
-
});
|
|
777
|
-
};
|
|
778
|
-
|
|
779
|
-
// src/Brazil/FormFieldPhone.tsx
|
|
780
|
-
var import_ui14 = require("@ttoss/ui");
|
|
781
|
-
var import_react_number_format4 = require("react-number-format");
|
|
782
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
783
|
-
var FormFieldPhone = ({
|
|
784
|
-
label,
|
|
785
|
-
name,
|
|
786
|
-
...patternFormatProps
|
|
787
|
-
}) => {
|
|
788
|
-
return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormField, {
|
|
789
|
-
name,
|
|
790
|
-
label,
|
|
791
|
-
render: ({
|
|
792
|
-
field
|
|
793
|
-
}) => {
|
|
794
|
-
const format = field.value?.length > 10 ? "(##) #####-####" : "(##) ####-#####";
|
|
795
|
-
return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_react_number_format4.PatternFormat, {
|
|
796
|
-
name: field.name,
|
|
797
|
-
value: field.value,
|
|
798
|
-
onBlur: field.onBlur,
|
|
799
|
-
onValueChange: values => {
|
|
800
|
-
field.onChange(values.value);
|
|
801
|
-
},
|
|
802
|
-
format,
|
|
803
|
-
customInput: import_ui14.Input,
|
|
804
|
-
placeholder: "(11) 91234-1234",
|
|
805
|
-
...patternFormatProps
|
|
806
|
-
});
|
|
807
|
-
}
|
|
808
|
-
});
|
|
809
|
-
};
|
|
810
|
-
|
|
811
|
-
// src/Brazil/FormFieldCEP.tsx
|
|
812
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
813
|
-
var FormFieldCEP = ({
|
|
814
|
-
label,
|
|
815
|
-
name,
|
|
816
|
-
...formFieldPatternFormatProps
|
|
817
|
-
}) => {
|
|
818
|
-
return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(FormFieldPatternFormat, {
|
|
819
|
-
name,
|
|
820
|
-
label,
|
|
821
|
-
format: "#####-###",
|
|
822
|
-
placeholder: "12345-678",
|
|
823
|
-
...formFieldPatternFormatProps
|
|
824
|
-
});
|
|
825
|
-
};
|
|
826
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
827
|
-
0 && (module.exports = {
|
|
828
|
-
FormFieldCEP,
|
|
829
|
-
FormFieldCNPJ,
|
|
830
|
-
FormFieldPhone,
|
|
831
|
-
isCnpjValid
|
|
832
|
-
});
|