@ttoss/forms 0.14.14 → 0.14.16

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 (3) hide show
  1. package/dist/esm/index.js +170 -158
  2. package/dist/index.js +188 -151
  3. package/package.json +5 -5
package/dist/esm/index.js CHANGED
@@ -15,18 +15,18 @@ var Form = ({
15
15
  sx,
16
16
  ...formMethods
17
17
  }) => {
18
- return /* @__PURE__ */ jsx(FormProvider, { ...formMethods, children: /* @__PURE__ */ jsx(
19
- Box,
20
- {
18
+ return /* @__PURE__ */jsx(FormProvider, {
19
+ ...formMethods,
20
+ children: /* @__PURE__ */jsx(Box, {
21
21
  as: "form",
22
22
  variant: "forms.form",
23
- onSubmit: formMethods.handleSubmit((data) => {
23
+ onSubmit: formMethods.handleSubmit(data => {
24
24
  return onSubmit(data);
25
25
  }),
26
26
  sx,
27
27
  children
28
- }
29
- ) });
28
+ })
29
+ });
30
30
  };
31
31
 
32
32
  // src/FormField.tsx
@@ -42,29 +42,26 @@ var ErrorMessage = ({
42
42
  name
43
43
  }) => {
44
44
  const {
45
- formState: { errors }
46
- } = useFormContext();
47
- return /* @__PURE__ */ jsx2(
48
- HookFormErrorMessage,
49
- {
50
- errors,
51
- name,
52
- as: /* @__PURE__ */ jsx2(
53
- Text,
54
- {
55
- variant: "text.error",
56
- role: "alert",
57
- sx: { fontFamily: "caption", fontSize: "xs" }
58
- }
59
- )
45
+ formState: {
46
+ errors
60
47
  }
61
- );
48
+ } = useFormContext();
49
+ return /* @__PURE__ */jsx2(HookFormErrorMessage, {
50
+ errors,
51
+ name,
52
+ as: /* @__PURE__ */jsx2(Text, {
53
+ variant: "text.error",
54
+ role: "alert",
55
+ sx: {
56
+ fontFamily: "caption",
57
+ fontSize: "xs"
58
+ }
59
+ })
60
+ });
62
61
  };
63
62
 
64
63
  // src/FormField.tsx
65
- import {
66
- useController
67
- } from "react-hook-form";
64
+ import { useController } from "react-hook-form";
68
65
  import { jsx as jsx3, jsxs } from "react/jsx-runtime";
69
66
  var FormField = ({
70
67
  label,
@@ -79,15 +76,21 @@ var FormField = ({
79
76
  });
80
77
  const id = idProp || `form-field-${name}`;
81
78
  const memoizedRender = React2.useMemo(() => {
82
- return React2.Children.map(render(controllerReturn), (child) => {
83
- return React2.createElement(child.type, { id, ...child.props });
79
+ return React2.Children.map(render(controllerReturn), child => {
80
+ return /*#__PURE__*/React2.createElement(child.type, {
81
+ id,
82
+ ...child.props
83
+ });
84
84
  });
85
85
  }, [controllerReturn, id, render]);
86
- return /* @__PURE__ */ jsxs(Box2, { children: [
87
- label && /* @__PURE__ */ jsx3(Label, { htmlFor: id, children: label }),
88
- memoizedRender,
89
- /* @__PURE__ */ jsx3(ErrorMessage, { name })
90
- ] });
86
+ return /* @__PURE__ */jsxs(Box2, {
87
+ children: [label && /* @__PURE__ */jsx3(Label, {
88
+ htmlFor: id,
89
+ children: label
90
+ }), memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
91
+ name
92
+ })]
93
+ });
91
94
  };
92
95
 
93
96
  // src/FormFieldCheckbox.tsx
@@ -100,17 +103,26 @@ var FormFieldCheckbox = ({
100
103
  ...checkboxProps
101
104
  }) => {
102
105
  const {
103
- field: { onChange, onBlur, value, ref }
106
+ field: {
107
+ onChange,
108
+ onBlur,
109
+ value,
110
+ ref
111
+ }
104
112
  } = useController2({
105
113
  name,
106
114
  defaultValue: false
107
115
  });
108
116
  const id = `form-field-checkbox-${name}`;
109
- return /* @__PURE__ */ jsxs2(Box3, { children: [
110
- /* @__PURE__ */ jsx4(Flex, { sx: { alignItems: "center" }, children: /* @__PURE__ */ jsxs2(Label2, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: [
111
- /* @__PURE__ */ jsx4(
112
- Checkbox,
113
- {
117
+ return /* @__PURE__ */jsxs2(Box3, {
118
+ children: [/* @__PURE__ */jsx4(Flex, {
119
+ sx: {
120
+ alignItems: "center"
121
+ },
122
+ children: /* @__PURE__ */jsxs2(Label2, {
123
+ "aria-disabled": checkboxProps.disabled,
124
+ htmlFor: id,
125
+ children: [/* @__PURE__ */jsx4(Checkbox, {
114
126
  id,
115
127
  ref,
116
128
  checked: value,
@@ -118,22 +130,16 @@ var FormFieldCheckbox = ({
118
130
  onBlur,
119
131
  name,
120
132
  ...checkboxProps
121
- }
122
- ),
123
- label
124
- ] }) }),
125
- /* @__PURE__ */ jsx4(ErrorMessage, { name })
126
- ] });
133
+ }), label]
134
+ })
135
+ }), /* @__PURE__ */jsx4(ErrorMessage, {
136
+ name
137
+ })]
138
+ });
127
139
  };
128
140
 
129
141
  // src/FormFieldInput.tsx
130
- import {
131
- Box as Box4,
132
- Icon,
133
- Input,
134
- Label as Label3,
135
- Text as Text2
136
- } from "@ttoss/ui";
142
+ import { Box as Box4, Icon, Input, Label as Label3, Text as Text2 } from "@ttoss/ui";
137
143
  import { useController as useController3 } from "react-hook-form";
138
144
  import React3 from "react";
139
145
  import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -145,8 +151,15 @@ var FormFieldInput = ({
145
151
  ...inputProps
146
152
  }) => {
147
153
  const {
148
- field: { onChange, onBlur, value, ref },
149
- formState: { errors }
154
+ field: {
155
+ onChange,
156
+ onBlur,
157
+ value,
158
+ ref
159
+ },
160
+ formState: {
161
+ errors
162
+ }
150
163
  } = useController3({
151
164
  name,
152
165
  defaultValue: ""
@@ -159,54 +172,47 @@ var FormFieldInput = ({
159
172
  }, [value]);
160
173
  const id = `form-field-input-${name}`;
161
174
  const hasError = !!errors[name]?.message;
162
- return /* @__PURE__ */ jsxs3(Box4, { children: [
163
- label && /* @__PURE__ */ jsxs3(
164
- Label3,
165
- {
166
- sx: { display: "flex", alignItems: "center" },
167
- "aria-disabled": inputProps.disabled,
168
- htmlFor: id,
169
- children: [
170
- label,
171
- tooltipIcon && /* @__PURE__ */ jsx5(
172
- Text2,
173
- {
174
- sx: { marginLeft: "md", fontSize: "xs", lineHeight: 0 },
175
- variant: "tooltip-icon",
176
- children: /* @__PURE__ */ jsx5(Icon, { icon: tooltipIcon })
177
- }
178
- ),
179
- showCharacterCounter && /* @__PURE__ */ jsx5(
180
- Text2,
181
- {
182
- sx: {
183
- marginLeft: "auto",
184
- fontSize: "xs",
185
- lineHeight: 0,
186
- color: "underemphasize"
187
- },
188
- variant: "character-counter",
189
- children: characterCounter
190
- }
191
- )
192
- ]
193
- }
194
- ),
195
- /* @__PURE__ */ jsx5(
196
- Input,
197
- {
198
- ref,
199
- onChange,
200
- className: hasError ? "error" : "",
201
- onBlur,
202
- value,
203
- name,
204
- id,
205
- ...inputProps
206
- }
207
- ),
208
- /* @__PURE__ */ jsx5(ErrorMessage, { name })
209
- ] });
175
+ return /* @__PURE__ */jsxs3(Box4, {
176
+ children: [label && /* @__PURE__ */jsxs3(Label3, {
177
+ sx: {
178
+ display: "flex",
179
+ alignItems: "center"
180
+ },
181
+ "aria-disabled": inputProps.disabled,
182
+ htmlFor: id,
183
+ children: [label, tooltipIcon && /* @__PURE__ */jsx5(Text2, {
184
+ sx: {
185
+ marginLeft: "md",
186
+ fontSize: "xs",
187
+ lineHeight: 0
188
+ },
189
+ variant: "tooltip-icon",
190
+ children: /* @__PURE__ */jsx5(Icon, {
191
+ icon: tooltipIcon
192
+ })
193
+ }), showCharacterCounter && /* @__PURE__ */jsx5(Text2, {
194
+ sx: {
195
+ marginLeft: "auto",
196
+ fontSize: "xs",
197
+ lineHeight: 0,
198
+ color: "underemphasize"
199
+ },
200
+ variant: "character-counter",
201
+ children: characterCounter
202
+ })]
203
+ }), /* @__PURE__ */jsx5(Input, {
204
+ ref,
205
+ onChange,
206
+ className: hasError ? "error" : "",
207
+ onBlur,
208
+ value,
209
+ name,
210
+ id,
211
+ ...inputProps
212
+ }), /* @__PURE__ */jsx5(ErrorMessage, {
213
+ name
214
+ })]
215
+ });
210
216
  };
211
217
 
212
218
  // src/FormFieldRadio.tsx
@@ -220,19 +226,25 @@ var FormFieldRadio = ({
220
226
  ...radioProps
221
227
  }) => {
222
228
  const {
223
- field: { onChange, onBlur, value, ref }
229
+ field: {
230
+ onChange,
231
+ onBlur,
232
+ value,
233
+ ref
234
+ }
224
235
  } = useController4({
225
236
  name,
226
237
  defaultValue: ""
227
238
  });
228
- return /* @__PURE__ */ jsxs4(Box5, { children: [
229
- label && /* @__PURE__ */ jsx6(Label4, { children: label }),
230
- /* @__PURE__ */ jsx6(Box5, { children: options.map((option) => {
231
- const id = `form-field-radio-${name}-${option.value}`;
232
- return /* @__PURE__ */ jsxs4(Label4, { htmlFor: id, children: [
233
- /* @__PURE__ */ jsx6(
234
- Radio,
235
- {
239
+ return /* @__PURE__ */jsxs4(Box5, {
240
+ children: [label && /* @__PURE__ */jsx6(Label4, {
241
+ children: label
242
+ }), /* @__PURE__ */jsx6(Box5, {
243
+ children: options.map(option => {
244
+ const id = `form-field-radio-${name}-${option.value}`;
245
+ return /* @__PURE__ */jsxs4(Label4, {
246
+ htmlFor: id,
247
+ children: [/* @__PURE__ */jsx6(Radio, {
236
248
  ref,
237
249
  onChange,
238
250
  onBlur,
@@ -241,13 +253,13 @@ var FormFieldRadio = ({
241
253
  name,
242
254
  id,
243
255
  ...radioProps
244
- }
245
- ),
246
- option.label
247
- ] }, id);
248
- }) }),
249
- /* @__PURE__ */ jsx6(ErrorMessage, { name })
250
- ] });
256
+ }), option.label]
257
+ }, id);
258
+ })
259
+ }), /* @__PURE__ */jsx6(ErrorMessage, {
260
+ name
261
+ })]
262
+ });
251
263
  };
252
264
 
253
265
  // src/FormFieldSelect.tsx
@@ -261,31 +273,39 @@ var FormFieldSelect = ({
261
273
  ...selectProps
262
274
  }) => {
263
275
  const {
264
- field: { onChange, onBlur, value, ref }
276
+ field: {
277
+ onChange,
278
+ onBlur,
279
+ value,
280
+ ref
281
+ }
265
282
  } = useController5({
266
283
  name,
267
284
  defaultValue: ""
268
285
  });
269
286
  const id = `form-field-select-${name}`;
270
- return /* @__PURE__ */ jsxs5(Box6, { children: [
271
- label && /* @__PURE__ */ jsx7(Label5, { htmlFor: id, children: label }),
272
- /* @__PURE__ */ jsx7(
273
- Select,
274
- {
275
- ref,
276
- name,
277
- onChange,
278
- onBlur,
279
- value,
280
- id,
281
- ...selectProps,
282
- children: options.map((option) => {
283
- return /* @__PURE__ */ jsx7("option", { value: option.value, children: option.label }, option.label);
284
- })
285
- }
286
- ),
287
- /* @__PURE__ */ jsx7(ErrorMessage, { name })
288
- ] });
287
+ return /* @__PURE__ */jsxs5(Box6, {
288
+ children: [label && /* @__PURE__ */jsx7(Label5, {
289
+ htmlFor: id,
290
+ children: label
291
+ }), /* @__PURE__ */jsx7(Select, {
292
+ ref,
293
+ name,
294
+ onChange,
295
+ onBlur,
296
+ value,
297
+ id,
298
+ ...selectProps,
299
+ children: options.map(option => {
300
+ return /* @__PURE__ */jsx7("option", {
301
+ value: option.value,
302
+ children: option.label
303
+ }, option.label);
304
+ })
305
+ }), /* @__PURE__ */jsx7(ErrorMessage, {
306
+ name
307
+ })]
308
+ });
289
309
  };
290
310
 
291
311
  // src/FormFieldTextarea.tsx
@@ -297,26 +317,18 @@ var FormFieldTextarea = ({
297
317
  ...textareaProps
298
318
  }) => {
299
319
  const id = `form-field-textarea-${name}`;
300
- return /* @__PURE__ */ jsx8(
301
- FormField,
302
- {
303
- label,
304
- name,
305
- id,
306
- render: ({ field }) => {
307
- return /* @__PURE__ */ jsx8(Textarea, { ...field, ...textareaProps });
308
- }
320
+ return /* @__PURE__ */jsx8(FormField, {
321
+ label,
322
+ name,
323
+ id,
324
+ render: ({
325
+ field
326
+ }) => {
327
+ return /* @__PURE__ */jsx8(Textarea, {
328
+ ...field,
329
+ ...textareaProps
330
+ });
309
331
  }
310
- );
311
- };
312
- export {
313
- Form,
314
- FormField,
315
- FormFieldCheckbox,
316
- FormFieldInput,
317
- FormFieldRadio,
318
- FormFieldSelect,
319
- FormFieldTextarea,
320
- yup,
321
- yupResolver
332
+ });
322
333
  };
334
+ export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, yup, yupResolver };
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  "use strict";
3
+
3
4
  var __create = Object.create;
4
5
  var __defProp = Object.defineProperty;
5
6
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,27 +8,33 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
8
  var __getProtoOf = Object.getPrototypeOf;
8
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
10
  var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
11
+ for (var name in all) __defProp(target, name, {
12
+ get: all[name],
13
+ enumerable: true
14
+ });
12
15
  };
13
16
  var __copyProps = (to, from, except, desc) => {
14
17
  if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
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
+ });
18
22
  }
19
23
  return to;
20
24
  };
21
25
  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
22
26
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
- // If the importer is in node compatibility mode or this is not an ESM
24
- // file that has been converted to a CommonJS file using a Babel-
25
- // compatible transform (i.e. "__esModule" has not been set), then set
26
- // "default" to the CommonJS "module.exports" for node compatibility.
27
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
28
- mod
29
- ));
30
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
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);
31
38
 
32
39
  // src/index.ts
33
40
  var src_exports = {};
@@ -57,18 +64,18 @@ var Form = ({
57
64
  sx,
58
65
  ...formMethods
59
66
  }) => {
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
- {
67
+ return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
68
+ ...formMethods,
69
+ children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
63
70
  as: "form",
64
71
  variant: "forms.form",
65
- onSubmit: formMethods.handleSubmit((data) => {
72
+ onSubmit: formMethods.handleSubmit(data => {
66
73
  return onSubmit(data);
67
74
  }),
68
75
  sx,
69
76
  children
70
- }
71
- ) });
77
+ })
78
+ });
72
79
  };
73
80
 
74
81
  // src/FormField.tsx
@@ -84,23 +91,22 @@ var ErrorMessage = ({
84
91
  name
85
92
  }) => {
86
93
  const {
87
- formState: { errors }
88
- } = (0, import_react_hook_form2.useFormContext)();
89
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
90
- import_error_message.ErrorMessage,
91
- {
92
- errors,
93
- name,
94
- as: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
95
- import_ui2.Text,
96
- {
97
- variant: "text.error",
98
- role: "alert",
99
- sx: { fontFamily: "caption", fontSize: "xs" }
100
- }
101
- )
94
+ formState: {
95
+ errors
102
96
  }
103
- );
97
+ } = (0, import_react_hook_form2.useFormContext)();
98
+ return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
99
+ errors,
100
+ name,
101
+ as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Text, {
102
+ variant: "text.error",
103
+ role: "alert",
104
+ sx: {
105
+ fontFamily: "caption",
106
+ fontSize: "xs"
107
+ }
108
+ })
109
+ });
104
110
  };
105
111
 
106
112
  // src/FormField.tsx
@@ -119,15 +125,21 @@ var FormField = ({
119
125
  });
120
126
  const id = idProp || `form-field-${name}`;
121
127
  const memoizedRender = React2.useMemo(() => {
122
- return React2.Children.map(render(controllerReturn), (child) => {
123
- return React2.createElement(child.type, { id, ...child.props });
128
+ return React2.Children.map(render(controllerReturn), child => {
129
+ return React2.createElement(child.type, {
130
+ id,
131
+ ...child.props
132
+ });
124
133
  });
125
134
  }, [controllerReturn, id, render]);
126
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, { children: [
127
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, { htmlFor: id, children: label }),
128
- memoizedRender,
129
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { name })
130
- ] });
135
+ return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
136
+ children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
137
+ htmlFor: id,
138
+ children: label
139
+ }), memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
140
+ name
141
+ })]
142
+ });
131
143
  };
132
144
 
133
145
  // src/FormFieldCheckbox.tsx
@@ -140,17 +152,26 @@ var FormFieldCheckbox = ({
140
152
  ...checkboxProps
141
153
  }) => {
142
154
  const {
143
- field: { onChange, onBlur, value, ref }
155
+ field: {
156
+ onChange,
157
+ onBlur,
158
+ value,
159
+ ref
160
+ }
144
161
  } = (0, import_react_hook_form4.useController)({
145
162
  name,
146
163
  defaultValue: false
147
164
  });
148
165
  const id = `form-field-checkbox-${name}`;
149
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, { children: [
150
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Flex, { sx: { alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Label, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: [
151
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
152
- import_ui4.Checkbox,
153
- {
166
+ return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
167
+ children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
168
+ sx: {
169
+ alignItems: "center"
170
+ },
171
+ children: /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Label, {
172
+ "aria-disabled": checkboxProps.disabled,
173
+ htmlFor: id,
174
+ children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Checkbox, {
154
175
  id,
155
176
  ref,
156
177
  checked: value,
@@ -158,12 +179,12 @@ var FormFieldCheckbox = ({
158
179
  onBlur,
159
180
  name,
160
181
  ...checkboxProps
161
- }
162
- ),
163
- label
164
- ] }) }),
165
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { name })
166
- ] });
182
+ }), label]
183
+ })
184
+ }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(ErrorMessage, {
185
+ name
186
+ })]
187
+ });
167
188
  };
168
189
 
169
190
  // src/FormFieldInput.tsx
@@ -179,8 +200,15 @@ var FormFieldInput = ({
179
200
  ...inputProps
180
201
  }) => {
181
202
  const {
182
- field: { onChange, onBlur, value, ref },
183
- formState: { errors }
203
+ field: {
204
+ onChange,
205
+ onBlur,
206
+ value,
207
+ ref
208
+ },
209
+ formState: {
210
+ errors
211
+ }
184
212
  } = (0, import_react_hook_form5.useController)({
185
213
  name,
186
214
  defaultValue: ""
@@ -193,54 +221,47 @@ var FormFieldInput = ({
193
221
  }, [value]);
194
222
  const id = `form-field-input-${name}`;
195
223
  const hasError = !!errors[name]?.message;
196
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
197
- label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
198
- import_ui5.Label,
199
- {
200
- sx: { display: "flex", alignItems: "center" },
201
- "aria-disabled": inputProps.disabled,
202
- htmlFor: id,
203
- children: [
204
- label,
205
- tooltipIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
206
- import_ui5.Text,
207
- {
208
- sx: { marginLeft: "md", fontSize: "xs", lineHeight: 0 },
209
- variant: "tooltip-icon",
210
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Icon, { icon: tooltipIcon })
211
- }
212
- ),
213
- showCharacterCounter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
214
- import_ui5.Text,
215
- {
216
- sx: {
217
- marginLeft: "auto",
218
- fontSize: "xs",
219
- lineHeight: 0,
220
- color: "underemphasize"
221
- },
222
- variant: "character-counter",
223
- children: characterCounter
224
- }
225
- )
226
- ]
227
- }
228
- ),
229
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
230
- import_ui5.Input,
231
- {
232
- ref,
233
- onChange,
234
- className: hasError ? "error" : "",
235
- onBlur,
236
- value,
237
- name,
238
- id,
239
- ...inputProps
240
- }
241
- ),
242
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { name })
243
- ] });
224
+ return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Box, {
225
+ children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Label, {
226
+ sx: {
227
+ display: "flex",
228
+ alignItems: "center"
229
+ },
230
+ "aria-disabled": inputProps.disabled,
231
+ htmlFor: id,
232
+ children: [label, tooltipIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
233
+ sx: {
234
+ marginLeft: "md",
235
+ fontSize: "xs",
236
+ lineHeight: 0
237
+ },
238
+ variant: "tooltip-icon",
239
+ children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Icon, {
240
+ icon: tooltipIcon
241
+ })
242
+ }), showCharacterCounter && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Text, {
243
+ sx: {
244
+ marginLeft: "auto",
245
+ fontSize: "xs",
246
+ lineHeight: 0,
247
+ color: "underemphasize"
248
+ },
249
+ variant: "character-counter",
250
+ children: characterCounter
251
+ })]
252
+ }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
253
+ ref,
254
+ onChange,
255
+ className: hasError ? "error" : "",
256
+ onBlur,
257
+ value,
258
+ name,
259
+ id,
260
+ ...inputProps
261
+ }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
262
+ name
263
+ })]
264
+ });
244
265
  };
245
266
 
246
267
  // src/FormFieldRadio.tsx
@@ -254,19 +275,25 @@ var FormFieldRadio = ({
254
275
  ...radioProps
255
276
  }) => {
256
277
  const {
257
- field: { onChange, onBlur, value, ref }
278
+ field: {
279
+ onChange,
280
+ onBlur,
281
+ value,
282
+ ref
283
+ }
258
284
  } = (0, import_react_hook_form6.useController)({
259
285
  name,
260
286
  defaultValue: ""
261
287
  });
262
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, { children: [
263
- label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Label, { children: label }),
264
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Box, { children: options.map((option) => {
265
- const id = `form-field-radio-${name}-${option.value}`;
266
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Label, { htmlFor: id, children: [
267
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
268
- import_ui6.Radio,
269
- {
288
+ return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Box, {
289
+ children: [label && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Label, {
290
+ children: label
291
+ }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Box, {
292
+ children: options.map(option => {
293
+ const id = `form-field-radio-${name}-${option.value}`;
294
+ return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Label, {
295
+ htmlFor: id,
296
+ children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Radio, {
270
297
  ref,
271
298
  onChange,
272
299
  onBlur,
@@ -275,13 +302,13 @@ var FormFieldRadio = ({
275
302
  name,
276
303
  id,
277
304
  ...radioProps
278
- }
279
- ),
280
- option.label
281
- ] }, id);
282
- }) }),
283
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage, { name })
284
- ] });
305
+ }), option.label]
306
+ }, id);
307
+ })
308
+ }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(ErrorMessage, {
309
+ name
310
+ })]
311
+ });
285
312
  };
286
313
 
287
314
  // src/FormFieldSelect.tsx
@@ -295,31 +322,39 @@ var FormFieldSelect = ({
295
322
  ...selectProps
296
323
  }) => {
297
324
  const {
298
- field: { onChange, onBlur, value, ref }
325
+ field: {
326
+ onChange,
327
+ onBlur,
328
+ value,
329
+ ref
330
+ }
299
331
  } = (0, import_react_hook_form7.useController)({
300
332
  name,
301
333
  defaultValue: ""
302
334
  });
303
335
  const id = `form-field-select-${name}`;
304
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ui7.Box, { children: [
305
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ui7.Label, { htmlFor: id, children: label }),
306
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
307
- import_ui7.Select,
308
- {
309
- ref,
310
- name,
311
- onChange,
312
- onBlur,
313
- value,
314
- id,
315
- ...selectProps,
316
- children: options.map((option) => {
317
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: option.value, children: option.label }, option.label);
318
- })
319
- }
320
- ),
321
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { name })
322
- ] });
336
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Box, {
337
+ children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
338
+ htmlFor: id,
339
+ children: label
340
+ }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Select, {
341
+ ref,
342
+ name,
343
+ onChange,
344
+ onBlur,
345
+ value,
346
+ id,
347
+ ...selectProps,
348
+ children: options.map(option => {
349
+ return /* @__PURE__ */(0, import_jsx_runtime7.jsx)("option", {
350
+ value: option.value,
351
+ children: option.label
352
+ }, option.label);
353
+ })
354
+ }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(ErrorMessage, {
355
+ name
356
+ })]
357
+ });
323
358
  };
324
359
 
325
360
  // src/FormFieldTextarea.tsx
@@ -331,17 +366,19 @@ var FormFieldTextarea = ({
331
366
  ...textareaProps
332
367
  }) => {
333
368
  const id = `form-field-textarea-${name}`;
334
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
335
- FormField,
336
- {
337
- label,
338
- name,
339
- id,
340
- render: ({ field }) => {
341
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ui8.Textarea, { ...field, ...textareaProps });
342
- }
369
+ return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
370
+ label,
371
+ name,
372
+ id,
373
+ render: ({
374
+ field
375
+ }) => {
376
+ return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Textarea, {
377
+ ...field,
378
+ ...textareaProps
379
+ });
343
380
  }
344
- );
381
+ });
345
382
  };
346
383
  // Annotate the CommonJS export names for ESM import in node:
347
384
  0 && (module.exports = {
@@ -354,4 +391,4 @@ var FormFieldTextarea = ({
354
391
  FormFieldTextarea,
355
392
  yup,
356
393
  yupResolver
357
- });
394
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/forms",
3
- "version": "0.14.14",
3
+ "version": "0.14.16",
4
4
  "license": "UNLICENSED",
5
5
  "author": "ttoss",
6
6
  "contributors": [
@@ -29,9 +29,9 @@
29
29
  "react": "^18.2.0"
30
30
  },
31
31
  "devDependencies": {
32
- "@ttoss/config": "^1.29.1",
33
- "@ttoss/test-utils": "^1.20.8",
34
- "@ttoss/ui": "^1.31.1",
32
+ "@ttoss/config": "^1.29.2",
33
+ "@ttoss/test-utils": "^1.20.9",
34
+ "@ttoss/ui": "^1.31.3",
35
35
  "@types/jest": "^29.5.0",
36
36
  "jest": "^29.5.0",
37
37
  "react": "^18.2.0",
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "ee0c2e51d38f37f997c020d4303cf90be720ecb0"
44
+ "gitHead": "792b02e52847725c19fdceffb606c201840d5910"
45
45
  }