@ttoss/forms 0.11.3 → 0.11.4
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/dist/esm/index.js +71 -99
- package/dist/index.d.ts +2 -2
- package/dist/index.js +71 -99
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -18,9 +18,9 @@ var Form = ({
|
|
|
18
18
|
sx,
|
|
19
19
|
...formMethods
|
|
20
20
|
}) => {
|
|
21
|
-
return /* @__PURE__ */ jsx(FormProvider, {
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
return /* @__PURE__ */ jsx(FormProvider, { ...formMethods, children: /* @__PURE__ */ jsx(
|
|
22
|
+
Box,
|
|
23
|
+
{
|
|
24
24
|
as: "form",
|
|
25
25
|
variant: "forms.form",
|
|
26
26
|
onSubmit: formMethods.handleSubmit((data) => {
|
|
@@ -28,8 +28,8 @@ var Form = ({
|
|
|
28
28
|
}),
|
|
29
29
|
sx,
|
|
30
30
|
children
|
|
31
|
-
}
|
|
32
|
-
});
|
|
31
|
+
}
|
|
32
|
+
) });
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
// src/FormFieldCheckbox.tsx
|
|
@@ -46,14 +46,14 @@ var ErrorMessage = ({
|
|
|
46
46
|
const {
|
|
47
47
|
formState: { errors }
|
|
48
48
|
} = useFormContext();
|
|
49
|
-
return /* @__PURE__ */ jsx2(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
role: "alert"
|
|
55
|
-
}
|
|
56
|
-
|
|
49
|
+
return /* @__PURE__ */ jsx2(
|
|
50
|
+
HookFormErrorMessage,
|
|
51
|
+
{
|
|
52
|
+
errors,
|
|
53
|
+
name,
|
|
54
|
+
as: /* @__PURE__ */ jsx2(Text, { variant: "text.error", role: "alert" })
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
57
|
};
|
|
58
58
|
|
|
59
59
|
// src/FormFieldCheckbox.tsx
|
|
@@ -71,31 +71,23 @@ var FormFieldCheckbox = ({
|
|
|
71
71
|
defaultValue: false
|
|
72
72
|
});
|
|
73
73
|
const id = `form-field-checkbox-${name}`;
|
|
74
|
-
return /* @__PURE__ */ jsxs(Box2, {
|
|
75
|
-
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
})
|
|
92
|
-
]
|
|
93
|
-
}),
|
|
94
|
-
/* @__PURE__ */ jsx3(ErrorMessage, {
|
|
95
|
-
name
|
|
96
|
-
})
|
|
97
|
-
]
|
|
98
|
-
});
|
|
74
|
+
return /* @__PURE__ */ jsxs(Box2, { children: [
|
|
75
|
+
/* @__PURE__ */ jsxs(Flex, { sx: { alignItems: "center" }, children: [
|
|
76
|
+
/* @__PURE__ */ jsx3(
|
|
77
|
+
Checkbox,
|
|
78
|
+
{
|
|
79
|
+
id,
|
|
80
|
+
ref,
|
|
81
|
+
disabled,
|
|
82
|
+
checked: value,
|
|
83
|
+
onChange,
|
|
84
|
+
onBlur
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
label && /* @__PURE__ */ jsx3(Label, { "aria-disabled": disabled, htmlFor: id, children: label })
|
|
88
|
+
] }),
|
|
89
|
+
/* @__PURE__ */ jsx3(ErrorMessage, { name })
|
|
90
|
+
] });
|
|
99
91
|
};
|
|
100
92
|
|
|
101
93
|
// src/FormFieldInput.tsx
|
|
@@ -115,14 +107,11 @@ var FormFieldInput = ({
|
|
|
115
107
|
defaultValue: ""
|
|
116
108
|
});
|
|
117
109
|
const id = `form-field-input-${name}`;
|
|
118
|
-
return /* @__PURE__ */ jsxs2(Box3, {
|
|
119
|
-
children:
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
children: label
|
|
124
|
-
}),
|
|
125
|
-
/* @__PURE__ */ jsx4(Input, {
|
|
110
|
+
return /* @__PURE__ */ jsxs2(Box3, { children: [
|
|
111
|
+
label && /* @__PURE__ */ jsx4(Label2, { "aria-disabled": disabled, htmlFor: id, children: label }),
|
|
112
|
+
/* @__PURE__ */ jsx4(
|
|
113
|
+
Input,
|
|
114
|
+
{
|
|
126
115
|
ref,
|
|
127
116
|
onChange,
|
|
128
117
|
onBlur,
|
|
@@ -131,12 +120,10 @@ var FormFieldInput = ({
|
|
|
131
120
|
disabled,
|
|
132
121
|
placeholder,
|
|
133
122
|
id
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
]
|
|
139
|
-
});
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
/* @__PURE__ */ jsx4(ErrorMessage, { name })
|
|
126
|
+
] });
|
|
140
127
|
};
|
|
141
128
|
|
|
142
129
|
// src/FormFieldRadio.tsx
|
|
@@ -154,36 +141,28 @@ var FormFieldRadio = ({
|
|
|
154
141
|
name,
|
|
155
142
|
defaultValue: ""
|
|
156
143
|
});
|
|
157
|
-
return /* @__PURE__ */ jsxs3(Box4, {
|
|
158
|
-
children:
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}, id);
|
|
180
|
-
})
|
|
181
|
-
}),
|
|
182
|
-
/* @__PURE__ */ jsx5(ErrorMessage, {
|
|
183
|
-
name
|
|
184
|
-
})
|
|
185
|
-
]
|
|
186
|
-
});
|
|
144
|
+
return /* @__PURE__ */ jsxs3(Box4, { children: [
|
|
145
|
+
label && /* @__PURE__ */ jsx5(Label3, { children: label }),
|
|
146
|
+
/* @__PURE__ */ jsx5(Box4, { children: options.map((option) => {
|
|
147
|
+
const id = `form-field-radio-${name}-${option.value}`;
|
|
148
|
+
return /* @__PURE__ */ jsxs3(Label3, { htmlFor: id, children: [
|
|
149
|
+
/* @__PURE__ */ jsx5(
|
|
150
|
+
Radio,
|
|
151
|
+
{
|
|
152
|
+
ref,
|
|
153
|
+
onChange,
|
|
154
|
+
onBlur,
|
|
155
|
+
value: option.value,
|
|
156
|
+
defaultChecked: value === option.value,
|
|
157
|
+
name,
|
|
158
|
+
id
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
option.label
|
|
162
|
+
] }, id);
|
|
163
|
+
}) }),
|
|
164
|
+
/* @__PURE__ */ jsx5(ErrorMessage, { name })
|
|
165
|
+
] });
|
|
187
166
|
};
|
|
188
167
|
|
|
189
168
|
// src/FormFieldSelect.tsx
|
|
@@ -203,13 +182,11 @@ var FormFieldSelect = ({
|
|
|
203
182
|
defaultValue: ""
|
|
204
183
|
});
|
|
205
184
|
const id = `form-field-select-${name}`;
|
|
206
|
-
return /* @__PURE__ */ jsxs4(Box5, {
|
|
207
|
-
children:
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}),
|
|
212
|
-
/* @__PURE__ */ jsx6(Select, {
|
|
185
|
+
return /* @__PURE__ */ jsxs4(Box5, { children: [
|
|
186
|
+
label && /* @__PURE__ */ jsx6(Label4, { htmlFor: id, children: label }),
|
|
187
|
+
/* @__PURE__ */ jsx6(
|
|
188
|
+
Select,
|
|
189
|
+
{
|
|
213
190
|
ref,
|
|
214
191
|
name,
|
|
215
192
|
onChange,
|
|
@@ -218,17 +195,12 @@ var FormFieldSelect = ({
|
|
|
218
195
|
arrow,
|
|
219
196
|
id,
|
|
220
197
|
children: options.map((option) => {
|
|
221
|
-
return /* @__PURE__ */ jsx6("option", {
|
|
222
|
-
value: option.value,
|
|
223
|
-
children: option.label
|
|
224
|
-
}, option.label);
|
|
198
|
+
return /* @__PURE__ */ jsx6("option", { value: option.value, children: option.label }, option.label);
|
|
225
199
|
})
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
]
|
|
231
|
-
});
|
|
200
|
+
}
|
|
201
|
+
),
|
|
202
|
+
/* @__PURE__ */ jsx6(ErrorMessage, { name })
|
|
203
|
+
] });
|
|
232
204
|
};
|
|
233
205
|
|
|
234
206
|
// src/FormField.tsx
|
package/dist/index.d.ts
CHANGED
|
@@ -65,7 +65,7 @@ declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
65
65
|
placeholder?: string | undefined;
|
|
66
66
|
}) => JSX.Element;
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
type FormRadioOption$1 = {
|
|
69
69
|
value: string | number;
|
|
70
70
|
label: string;
|
|
71
71
|
};
|
|
@@ -75,7 +75,7 @@ declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({
|
|
|
75
75
|
options: FormRadioOption$1[];
|
|
76
76
|
}) => JSX.Element;
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
type FormRadioOption = {
|
|
79
79
|
value: string | number;
|
|
80
80
|
label: string;
|
|
81
81
|
};
|
package/dist/index.js
CHANGED
|
@@ -57,9 +57,9 @@ var Form = ({
|
|
|
57
57
|
sx,
|
|
58
58
|
...formMethods
|
|
59
59
|
}) => {
|
|
60
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, { ...formMethods, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
import_ui.Box,
|
|
62
|
+
{
|
|
63
63
|
as: "form",
|
|
64
64
|
variant: "forms.form",
|
|
65
65
|
onSubmit: formMethods.handleSubmit((data) => {
|
|
@@ -67,8 +67,8 @@ var Form = ({
|
|
|
67
67
|
}),
|
|
68
68
|
sx,
|
|
69
69
|
children
|
|
70
|
-
}
|
|
71
|
-
});
|
|
70
|
+
}
|
|
71
|
+
) });
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
// src/FormFieldCheckbox.tsx
|
|
@@ -85,14 +85,14 @@ var ErrorMessage = ({
|
|
|
85
85
|
const {
|
|
86
86
|
formState: { errors }
|
|
87
87
|
} = (0, import_react_hook_form2.useFormContext)();
|
|
88
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
role: "alert"
|
|
94
|
-
}
|
|
95
|
-
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
89
|
+
import_error_message.ErrorMessage,
|
|
90
|
+
{
|
|
91
|
+
errors,
|
|
92
|
+
name,
|
|
93
|
+
as: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Text, { variant: "text.error", role: "alert" })
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
96
|
};
|
|
97
97
|
|
|
98
98
|
// src/FormFieldCheckbox.tsx
|
|
@@ -110,31 +110,23 @@ var FormFieldCheckbox = ({
|
|
|
110
110
|
defaultValue: false
|
|
111
111
|
});
|
|
112
112
|
const id = `form-field-checkbox-${name}`;
|
|
113
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
|
|
114
|
-
children: [
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
})
|
|
131
|
-
]
|
|
132
|
-
}),
|
|
133
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, {
|
|
134
|
-
name
|
|
135
|
-
})
|
|
136
|
-
]
|
|
137
|
-
});
|
|
113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, { children: [
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { sx: { alignItems: "center" }, children: [
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
116
|
+
import_ui3.Checkbox,
|
|
117
|
+
{
|
|
118
|
+
id,
|
|
119
|
+
ref,
|
|
120
|
+
disabled,
|
|
121
|
+
checked: value,
|
|
122
|
+
onChange,
|
|
123
|
+
onBlur
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, { "aria-disabled": disabled, htmlFor: id, children: label })
|
|
127
|
+
] }),
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { name })
|
|
129
|
+
] });
|
|
138
130
|
};
|
|
139
131
|
|
|
140
132
|
// src/FormFieldInput.tsx
|
|
@@ -154,14 +146,11 @@ var FormFieldInput = ({
|
|
|
154
146
|
defaultValue: ""
|
|
155
147
|
});
|
|
156
148
|
const id = `form-field-input-${name}`;
|
|
157
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
|
|
158
|
-
children:
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
children: label
|
|
163
|
-
}),
|
|
164
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Input, {
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, { children: [
|
|
150
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, { "aria-disabled": disabled, htmlFor: id, children: label }),
|
|
151
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
152
|
+
import_ui4.Input,
|
|
153
|
+
{
|
|
165
154
|
ref,
|
|
166
155
|
onChange,
|
|
167
156
|
onBlur,
|
|
@@ -170,12 +159,10 @@ var FormFieldInput = ({
|
|
|
170
159
|
disabled,
|
|
171
160
|
placeholder,
|
|
172
161
|
id
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
]
|
|
178
|
-
});
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { name })
|
|
165
|
+
] });
|
|
179
166
|
};
|
|
180
167
|
|
|
181
168
|
// src/FormFieldRadio.tsx
|
|
@@ -193,36 +180,28 @@ var FormFieldRadio = ({
|
|
|
193
180
|
name,
|
|
194
181
|
defaultValue: ""
|
|
195
182
|
});
|
|
196
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
|
|
197
|
-
children:
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}, id);
|
|
219
|
-
})
|
|
220
|
-
}),
|
|
221
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, {
|
|
222
|
-
name
|
|
223
|
-
})
|
|
224
|
-
]
|
|
225
|
-
});
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
|
|
184
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, { children: label }),
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Box, { children: options.map((option) => {
|
|
186
|
+
const id = `form-field-radio-${name}-${option.value}`;
|
|
187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Label, { htmlFor: id, children: [
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
189
|
+
import_ui5.Radio,
|
|
190
|
+
{
|
|
191
|
+
ref,
|
|
192
|
+
onChange,
|
|
193
|
+
onBlur,
|
|
194
|
+
value: option.value,
|
|
195
|
+
defaultChecked: value === option.value,
|
|
196
|
+
name,
|
|
197
|
+
id
|
|
198
|
+
}
|
|
199
|
+
),
|
|
200
|
+
option.label
|
|
201
|
+
] }, id);
|
|
202
|
+
}) }),
|
|
203
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { name })
|
|
204
|
+
] });
|
|
226
205
|
};
|
|
227
206
|
|
|
228
207
|
// src/FormFieldSelect.tsx
|
|
@@ -242,13 +221,11 @@ var FormFieldSelect = ({
|
|
|
242
221
|
defaultValue: ""
|
|
243
222
|
});
|
|
244
223
|
const id = `form-field-select-${name}`;
|
|
245
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, {
|
|
246
|
-
children:
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
}),
|
|
251
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Select, {
|
|
224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, { children: [
|
|
225
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Label, { htmlFor: id, children: label }),
|
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
227
|
+
import_ui6.Select,
|
|
228
|
+
{
|
|
252
229
|
ref,
|
|
253
230
|
name,
|
|
254
231
|
onChange,
|
|
@@ -257,17 +234,12 @@ var FormFieldSelect = ({
|
|
|
257
234
|
arrow,
|
|
258
235
|
id,
|
|
259
236
|
children: options.map((option) => {
|
|
260
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", {
|
|
261
|
-
value: option.value,
|
|
262
|
-
children: option.label
|
|
263
|
-
}, option.label);
|
|
237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: option.value, children: option.label }, option.label);
|
|
264
238
|
})
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
]
|
|
270
|
-
});
|
|
239
|
+
}
|
|
240
|
+
),
|
|
241
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage, { name })
|
|
242
|
+
] });
|
|
271
243
|
};
|
|
272
244
|
|
|
273
245
|
// src/FormField.tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/forms",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.4",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "ttoss",
|
|
6
6
|
"contributors": [
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@ttoss/config": "^1.25.0",
|
|
32
32
|
"@ttoss/test-utils": "^1.18.3",
|
|
33
|
-
"@ttoss/ui": "^1.
|
|
33
|
+
"@ttoss/ui": "^1.27.0",
|
|
34
34
|
"@types/jest": "^29.2.4",
|
|
35
35
|
"jest": "^29.3.1",
|
|
36
36
|
"react": "^18.2.0",
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "9159bd57009f4fee620218bc1a0e7bbac28acccd"
|
|
44
44
|
}
|