@fuf-stack/uniform 1.0.2 → 1.0.3
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/CheckboxGroup/index.cjs +7 -7
- package/dist/CheckboxGroup/index.d.cts +2 -2
- package/dist/CheckboxGroup/index.d.ts +2 -2
- package/dist/CheckboxGroup/index.js +6 -6
- package/dist/{CheckboxGroup-D45rOACY.d.cts → CheckboxGroup-B1g42iP0.d.cts} +2 -2
- package/dist/{CheckboxGroup-D45rOACY.d.ts → CheckboxGroup-B1g42iP0.d.ts} +2 -2
- package/dist/FieldArray/index.cjs +7 -7
- package/dist/FieldArray/index.d.cts +2 -2
- package/dist/FieldArray/index.d.ts +2 -2
- package/dist/FieldArray/index.js +6 -6
- package/dist/{FieldArray-DAzf9zE2.d.cts → FieldArray-DVQka7Bh.d.cts} +2 -2
- package/dist/{FieldArray-DAzf9zE2.d.ts → FieldArray-DVQka7Bh.d.ts} +2 -2
- package/dist/Form/index.cjs +5 -5
- package/dist/Form/index.d.cts +3 -3
- package/dist/Form/index.d.ts +3 -3
- package/dist/Form/index.js +4 -4
- package/dist/{Form-DX5NTR-H.d.ts → Form-C_11i6PA.d.ts} +1 -1
- package/dist/{Form-D0grgL6G.d.cts → Form-Cu0lWRDN.d.cts} +1 -1
- package/dist/{FormContext-ldCpxKnY.d.cts → FormContext-LRho0tno.d.cts} +2 -2
- package/dist/{FormContext-ldCpxKnY.d.ts → FormContext-LRho0tno.d.ts} +2 -2
- package/dist/Input/index.cjs +7 -7
- package/dist/Input/index.js +6 -6
- package/dist/RadioBoxes/index.cjs +7 -7
- package/dist/RadioBoxes/index.js +6 -6
- package/dist/RadioGroup/index.cjs +7 -7
- package/dist/RadioGroup/index.js +6 -6
- package/dist/RadioTabs/index.cjs +7 -7
- package/dist/RadioTabs/index.js +6 -6
- package/dist/Select/index.cjs +7 -7
- package/dist/Select/index.d.cts +2 -2
- package/dist/Select/index.d.ts +2 -2
- package/dist/Select/index.js +6 -6
- package/dist/{Select-CY5fJfiS.d.cts → Select-CTRWinmO.d.cts} +2 -2
- package/dist/{Select-CY5fJfiS.d.ts → Select-CTRWinmO.d.ts} +2 -2
- package/dist/SubmitButton/index.cjs +5 -5
- package/dist/SubmitButton/index.js +4 -4
- package/dist/Switch/index.cjs +7 -7
- package/dist/Switch/index.js +6 -6
- package/dist/TextArea/index.cjs +7 -7
- package/dist/TextArea/index.js +6 -6
- package/dist/{chunk-TKQYWIHG.js → chunk-3NZYJNO4.js} +3 -3
- package/dist/{chunk-TKQYWIHG.js.map → chunk-3NZYJNO4.js.map} +1 -1
- package/dist/{chunk-LJ2KHIIN.cjs → chunk-3WZBQHQM.cjs} +33 -25
- package/dist/chunk-3WZBQHQM.cjs.map +1 -0
- package/dist/{chunk-YPWUPZOU.js → chunk-5BKLAK23.js} +9 -9
- package/dist/{chunk-YPWUPZOU.js.map → chunk-5BKLAK23.js.map} +1 -1
- package/dist/{chunk-BLS46GFN.js → chunk-5GBO2FHU.js} +23 -21
- package/dist/chunk-5GBO2FHU.js.map +1 -0
- package/dist/{chunk-U5WBLGZV.js → chunk-6IU7IYYB.js} +4 -2
- package/dist/{chunk-U5WBLGZV.js.map → chunk-6IU7IYYB.js.map} +1 -1
- package/dist/{chunk-K2IHP7JJ.cjs → chunk-6NSYLHQW.cjs} +68 -45
- package/dist/chunk-6NSYLHQW.cjs.map +1 -0
- package/dist/{chunk-UTFZRBBS.js → chunk-CQWA2DFV.js} +7 -5
- package/dist/chunk-CQWA2DFV.js.map +1 -0
- package/dist/{chunk-UIBHEN65.js → chunk-CWXROORZ.js} +16 -16
- package/dist/{chunk-UIBHEN65.js.map → chunk-CWXROORZ.js.map} +1 -1
- package/dist/{chunk-PTOFJKSN.js → chunk-EKJOEK5I.js} +11 -11
- package/dist/{chunk-PTOFJKSN.js.map → chunk-EKJOEK5I.js.map} +1 -1
- package/dist/{chunk-LLO7FMR7.js → chunk-F3DDS4YF.js} +15 -15
- package/dist/chunk-F3DDS4YF.js.map +1 -0
- package/dist/{chunk-OWWUTKGY.cjs → chunk-FLK6OPFY.cjs} +4 -2
- package/dist/chunk-FLK6OPFY.cjs.map +1 -0
- package/dist/{chunk-H7EXCZKM.cjs → chunk-FWIJ3N3I.cjs} +62 -54
- package/dist/chunk-FWIJ3N3I.cjs.map +1 -0
- package/dist/{chunk-XKX22KIM.cjs → chunk-FZD7GFAE.cjs} +4 -4
- package/dist/{chunk-XKX22KIM.cjs.map → chunk-FZD7GFAE.cjs.map} +1 -1
- package/dist/{chunk-XKXPFVWS.js → chunk-GVLFSVUO.js} +15 -13
- package/dist/chunk-GVLFSVUO.js.map +1 -0
- package/dist/{chunk-S3FGQTPN.js → chunk-HQTHUBVB.js} +32 -33
- package/dist/chunk-HQTHUBVB.js.map +1 -0
- package/dist/{chunk-K7QILQPE.js → chunk-HZKEIJP5.js} +31 -23
- package/dist/chunk-HZKEIJP5.js.map +1 -0
- package/dist/{chunk-L4YPB7MU.cjs → chunk-LTQCM5VQ.cjs} +9 -5
- package/dist/chunk-LTQCM5VQ.cjs.map +1 -0
- package/dist/{chunk-UHMJOD2X.js → chunk-M52AKWAI.js} +61 -38
- package/dist/chunk-M52AKWAI.js.map +1 -0
- package/dist/{chunk-E2ZEMRKR.cjs → chunk-NATEKPMG.cjs} +19 -19
- package/dist/{chunk-E2ZEMRKR.cjs.map → chunk-NATEKPMG.cjs.map} +1 -1
- package/dist/{chunk-BQGN3JTU.js → chunk-NTDKZW4E.js} +4 -4
- package/dist/{chunk-BQGN3JTU.js.map → chunk-NTDKZW4E.js.map} +1 -1
- package/dist/{chunk-WHW6WMII.js → chunk-OC76RMHG.js} +56 -48
- package/dist/chunk-OC76RMHG.js.map +1 -0
- package/dist/{chunk-PA2DQCBY.cjs → chunk-OE5BOGGX.cjs} +4 -4
- package/dist/{chunk-PA2DQCBY.cjs.map → chunk-OE5BOGGX.cjs.map} +1 -1
- package/dist/{chunk-GWJLFB26.cjs → chunk-OTZNGYQZ.cjs} +19 -17
- package/dist/chunk-OTZNGYQZ.cjs.map +1 -0
- package/dist/{chunk-LBOF5M7T.cjs → chunk-P5DV3Y52.cjs} +14 -14
- package/dist/chunk-P5DV3Y52.cjs.map +1 -0
- package/dist/{chunk-MAJ7IXH4.cjs → chunk-T6SB5UO2.cjs} +11 -16
- package/dist/chunk-T6SB5UO2.cjs.map +1 -0
- package/dist/{chunk-NPRL7X5E.cjs → chunk-TQAF2PJG.cjs} +26 -24
- package/dist/chunk-TQAF2PJG.cjs.map +1 -0
- package/dist/{chunk-SNXHPF7L.js → chunk-TRJOEV3R.js} +8 -13
- package/dist/{chunk-SNXHPF7L.js.map → chunk-TRJOEV3R.js.map} +1 -1
- package/dist/{chunk-57WY5GAE.js → chunk-V7QZNDTY.js} +9 -5
- package/dist/chunk-V7QZNDTY.js.map +1 -0
- package/dist/{chunk-3QCNVEUD.cjs → chunk-WIAZMOAH.cjs} +18 -18
- package/dist/chunk-WIAZMOAH.cjs.map +1 -0
- package/dist/{chunk-XSNA554N.cjs → chunk-XQAN6TTP.cjs} +12 -12
- package/dist/{chunk-XSNA554N.cjs.map → chunk-XQAN6TTP.cjs.map} +1 -1
- package/dist/{chunk-GNYQC5IJ.cjs → chunk-Y3AB4GV6.cjs} +7 -5
- package/dist/chunk-Y3AB4GV6.cjs.map +1 -0
- package/dist/{chunk-VTTU37OB.cjs → chunk-YOMV7IQD.cjs} +34 -35
- package/dist/chunk-YOMV7IQD.cjs.map +1 -0
- package/dist/helpers/index.cjs +2 -2
- package/dist/helpers/index.js +1 -1
- package/dist/hooks/index.cjs +4 -4
- package/dist/hooks/index.d.cts +3 -3
- package/dist/hooks/index.d.ts +3 -3
- package/dist/hooks/index.js +3 -3
- package/dist/hooks/useInputValueDebounce/index.cjs +2 -2
- package/dist/hooks/useInputValueDebounce/index.js +1 -1
- package/dist/index.cjs +17 -17
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +16 -16
- package/dist/partials/FieldCopyTestIdButton/index.cjs +2 -2
- package/dist/partials/FieldCopyTestIdButton/index.js +1 -1
- package/dist/partials/FieldValidationError/index.cjs +2 -2
- package/dist/partials/FieldValidationError/index.js +1 -1
- package/package.json +4 -4
- package/dist/chunk-3QCNVEUD.cjs.map +0 -1
- package/dist/chunk-57WY5GAE.js.map +0 -1
- package/dist/chunk-BLS46GFN.js.map +0 -1
- package/dist/chunk-GNYQC5IJ.cjs.map +0 -1
- package/dist/chunk-GWJLFB26.cjs.map +0 -1
- package/dist/chunk-H7EXCZKM.cjs.map +0 -1
- package/dist/chunk-K2IHP7JJ.cjs.map +0 -1
- package/dist/chunk-K7QILQPE.js.map +0 -1
- package/dist/chunk-L4YPB7MU.cjs.map +0 -1
- package/dist/chunk-LBOF5M7T.cjs.map +0 -1
- package/dist/chunk-LJ2KHIIN.cjs.map +0 -1
- package/dist/chunk-LLO7FMR7.js.map +0 -1
- package/dist/chunk-MAJ7IXH4.cjs.map +0 -1
- package/dist/chunk-NPRL7X5E.cjs.map +0 -1
- package/dist/chunk-OWWUTKGY.cjs.map +0 -1
- package/dist/chunk-S3FGQTPN.js.map +0 -1
- package/dist/chunk-UHMJOD2X.js.map +0 -1
- package/dist/chunk-UTFZRBBS.js.map +0 -1
- package/dist/chunk-VTTU37OB.cjs.map +0 -1
- package/dist/chunk-WHW6WMII.js.map +0 -1
- package/dist/chunk-XKXPFVWS.js.map +0 -1
|
@@ -3,18 +3,19 @@
|
|
|
3
3
|
var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkY3AB4GV6cjs = require('./chunk-Y3AB4GV6.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _chunkFWIJ3N3Icjs = require('./chunk-FWIJ3N3I.cjs');
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
var
|
|
17
|
+
var _chunkLTQCM5VQcjs = require('./chunk-LTQCM5VQ.cjs');
|
|
18
|
+
|
|
18
19
|
|
|
19
20
|
|
|
20
21
|
|
|
@@ -118,9 +119,9 @@ var FieldArrayElement = ({
|
|
|
118
119
|
testId = void 0
|
|
119
120
|
}) => {
|
|
120
121
|
var _a;
|
|
121
|
-
const { getFieldState } =
|
|
122
|
+
const { getFieldState } = _chunkFWIJ3N3Icjs.useFormContext.call(void 0, );
|
|
122
123
|
const { error, invalid } = getFieldState(arrayFieldName, void 0);
|
|
123
|
-
const { getHelperWrapperProps, getErrorMessageProps } =
|
|
124
|
+
const { getHelperWrapperProps, getErrorMessageProps } = _chunkFWIJ3N3Icjs.useInput.call(void 0, {
|
|
124
125
|
classNames: { helperWrapper: "block" },
|
|
125
126
|
errorMessage: JSON.stringify(error),
|
|
126
127
|
isInvalid: invalid,
|
|
@@ -136,18 +137,18 @@ var FieldArrayElement = ({
|
|
|
136
137
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
137
138
|
"li",
|
|
138
139
|
{
|
|
139
|
-
className: _pixelutils.cn.call(void 0, className.listItem),
|
|
140
140
|
ref: setNodeRef,
|
|
141
|
+
className: _pixelutils.cn.call(void 0, className.listItem),
|
|
141
142
|
style: sortingStyle,
|
|
142
143
|
children: [
|
|
143
|
-
sortable
|
|
144
|
+
sortable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
144
145
|
SortDragHandle_default,
|
|
145
146
|
{
|
|
146
147
|
className: className.sortDragHandle,
|
|
147
148
|
id,
|
|
148
149
|
testId: `${testId}_sort_drag_handle`
|
|
149
150
|
}
|
|
150
|
-
),
|
|
151
|
+
) : null,
|
|
151
152
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
152
153
|
"div",
|
|
153
154
|
{
|
|
@@ -160,23 +161,27 @@ var FieldArrayElement = ({
|
|
|
160
161
|
ElementRemoveButton_default,
|
|
161
162
|
{
|
|
162
163
|
className: className.removeButton,
|
|
163
|
-
|
|
164
|
-
|
|
164
|
+
testId: `${testId}_remove_button`,
|
|
165
|
+
onClick: () => {
|
|
166
|
+
methods.remove();
|
|
167
|
+
}
|
|
165
168
|
}
|
|
166
169
|
),
|
|
167
|
-
insertAfter && index !== fields.length - 1
|
|
170
|
+
insertAfter && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
168
171
|
ElementInsertAfterButton_default,
|
|
169
172
|
{
|
|
170
173
|
className: className.insertAfterButton,
|
|
171
|
-
|
|
172
|
-
|
|
174
|
+
testId: `${testId}_insert_after_button`,
|
|
175
|
+
onClick: () => {
|
|
176
|
+
methods.insert();
|
|
177
|
+
}
|
|
173
178
|
}
|
|
174
|
-
)
|
|
179
|
+
) : null
|
|
175
180
|
]
|
|
176
181
|
}
|
|
177
182
|
),
|
|
178
|
-
error
|
|
179
|
-
|
|
183
|
+
typeof (error == null ? void 0 : error[index]) !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
184
|
+
_chunkY3AB4GV6cjs.FieldValidationError_default,
|
|
180
185
|
{
|
|
181
186
|
error: (_a = error[Number(index)]) == null ? void 0 : _a._errors,
|
|
182
187
|
testId
|
|
@@ -220,8 +225,12 @@ var SortContext = ({
|
|
|
220
225
|
const handleDragEnd = (event) => {
|
|
221
226
|
const { active, over } = event;
|
|
222
227
|
if (active.id !== (over == null ? void 0 : over.id)) {
|
|
223
|
-
const oldIndex = fields.findIndex((field) =>
|
|
224
|
-
|
|
228
|
+
const oldIndex = fields.findIndex((field) => {
|
|
229
|
+
return field.id === active.id;
|
|
230
|
+
});
|
|
231
|
+
const newIndex = fields.findIndex((field) => {
|
|
232
|
+
return field.id === (over == null ? void 0 : over.id);
|
|
233
|
+
});
|
|
225
234
|
move(oldIndex, newIndex);
|
|
226
235
|
}
|
|
227
236
|
};
|
|
@@ -235,8 +244,10 @@ var SortContext = ({
|
|
|
235
244
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
236
245
|
_sortable.SortableContext,
|
|
237
246
|
{
|
|
238
|
-
items: fields.map((field) => field.id),
|
|
239
247
|
strategy: _sortable.verticalListSortingStrategy,
|
|
248
|
+
items: fields.map((field) => {
|
|
249
|
+
return field.id;
|
|
250
|
+
}),
|
|
240
251
|
children
|
|
241
252
|
}
|
|
242
253
|
)
|
|
@@ -282,13 +293,13 @@ var FieldArray = ({
|
|
|
282
293
|
getFieldState,
|
|
283
294
|
trigger
|
|
284
295
|
// watch
|
|
285
|
-
} =
|
|
286
|
-
const { fields, append, remove, insert, move } =
|
|
296
|
+
} = _chunkFWIJ3N3Icjs.useFormContext.call(void 0, );
|
|
297
|
+
const { fields, append, remove, insert, move } = _chunkFWIJ3N3Icjs.useFieldArray.call(void 0, {
|
|
287
298
|
control,
|
|
288
299
|
name
|
|
289
300
|
});
|
|
290
301
|
const { error, testId, invalid, required } = getFieldState(name, _testId);
|
|
291
|
-
const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =
|
|
302
|
+
const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunkFWIJ3N3Icjs.useInput.call(void 0, {
|
|
292
303
|
isInvalid: invalid,
|
|
293
304
|
isRequired: required,
|
|
294
305
|
errorMessage: JSON.stringify(error),
|
|
@@ -297,51 +308,61 @@ var FieldArray = ({
|
|
|
297
308
|
placeholder: " ",
|
|
298
309
|
classNames: { helperWrapper: "block" }
|
|
299
310
|
});
|
|
300
|
-
const elementInitialValue =
|
|
311
|
+
const elementInitialValue = _chunkLTQCM5VQcjs.toNullishString.call(void 0, _elementInitialValue);
|
|
301
312
|
if (lastElementNotRemovable && fields.length === 0) {
|
|
302
313
|
append(elementInitialValue);
|
|
303
314
|
}
|
|
304
315
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
305
316
|
const showLabel = label || showTestIdCopyButton;
|
|
306
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, {
|
|
317
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { fields, move, sortable, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
307
318
|
"ul",
|
|
308
319
|
{
|
|
309
320
|
className: className.list,
|
|
310
321
|
"data-testid": testId,
|
|
311
|
-
onBlur: () =>
|
|
322
|
+
onBlur: () => _chunk555JRYCScjs.__async.call(void 0, null, null, function* () {
|
|
323
|
+
return trigger(name);
|
|
324
|
+
}),
|
|
312
325
|
children: [
|
|
313
|
-
showLabel
|
|
314
|
-
label
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
326
|
+
showLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
327
|
+
label ? (
|
|
328
|
+
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
329
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
330
|
+
"label",
|
|
331
|
+
_chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), {
|
|
332
|
+
className: _pixelutils.cn.call(void 0, (_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
|
|
333
|
+
children: label
|
|
334
|
+
})
|
|
335
|
+
)
|
|
336
|
+
) : null,
|
|
337
|
+
showTestIdCopyButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default, { testId }) : null
|
|
338
|
+
] }) : null,
|
|
324
339
|
fields.map((field, index) => {
|
|
325
340
|
const elementName = `${name}.${index}`;
|
|
326
341
|
const elementTestId = `${testId}_${index}`;
|
|
327
342
|
const elementMethods = {
|
|
328
|
-
append: () =>
|
|
343
|
+
append: () => {
|
|
344
|
+
append(elementInitialValue);
|
|
345
|
+
},
|
|
329
346
|
duplicate: () => {
|
|
330
347
|
const values = getValues(name);
|
|
331
348
|
insert(index + 1, values[index]);
|
|
332
349
|
},
|
|
333
|
-
insert: () =>
|
|
334
|
-
|
|
350
|
+
insert: () => {
|
|
351
|
+
insert(index + 1, elementInitialValue);
|
|
352
|
+
},
|
|
353
|
+
remove: () => {
|
|
354
|
+
remove(index);
|
|
355
|
+
}
|
|
335
356
|
};
|
|
336
357
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
337
358
|
FieldArrayElement_default,
|
|
338
359
|
{
|
|
339
360
|
arrayFieldName: name,
|
|
340
361
|
className,
|
|
362
|
+
duplicate,
|
|
341
363
|
fields,
|
|
342
364
|
id: field.id,
|
|
343
365
|
index,
|
|
344
|
-
duplicate,
|
|
345
366
|
insertAfter,
|
|
346
367
|
lastNotDeletable: lastElementNotRemovable,
|
|
347
368
|
methods: elementMethods,
|
|
@@ -361,15 +382,17 @@ var FieldArray = ({
|
|
|
361
382
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
362
383
|
_pixels.Button,
|
|
363
384
|
{
|
|
364
|
-
className: className.appendButton,
|
|
365
385
|
disableAnimation: true,
|
|
366
|
-
|
|
386
|
+
className: className.appendButton,
|
|
367
387
|
size: "sm",
|
|
368
388
|
testId: `${testId}_append_button`,
|
|
389
|
+
onClick: () => {
|
|
390
|
+
append(elementInitialValue);
|
|
391
|
+
},
|
|
369
392
|
children: appendButtonText
|
|
370
393
|
}
|
|
371
394
|
),
|
|
372
|
-
(error == null ? void 0 : error._errors)
|
|
395
|
+
(error == null ? void 0 : error._errors) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3AB4GV6cjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors, testId }) })) })) : null
|
|
373
396
|
]
|
|
374
397
|
}
|
|
375
398
|
) });
|
|
@@ -383,4 +406,4 @@ var FieldArray_default2 = FieldArray_default;
|
|
|
383
406
|
|
|
384
407
|
|
|
385
408
|
exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
|
|
386
|
-
//# sourceMappingURL=chunk-
|
|
409
|
+
//# sourceMappingURL=chunk-6NSYLHQW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6NSYLHQW.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button","cn","useSortable","Fragment","FieldArray_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6NSYLHQW.cjs","sourcesContent":[null,"import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n appendButton: 'w-full',\n elementWrapper: 'grow',\n insertAfterButton: 'text-xs font-medium',\n label: 'pointer-events-auto! static! z-0! -mb-1 ml-1 inline-block!',\n list: 'm-0 w-full list-none',\n listItem: 'mb-4 flex w-full flex-row',\n removeButton: 'ml-1',\n sortDragHandle: 'mr-2 text-base text-xl',\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n insertAfter = false,\n label: _label = undefined,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n testId: _testId = undefined,\n}: FieldArrayProps) => {\n // className from slots\n const variants = fieldArrayVariants();\n const className = variantsToClassNames(variants, _className, 'list');\n\n const {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n // TODO: add info\n const elementInitialValue = toNullishString(_elementInitialValue);\n\n // When lastElementNotRemovable is set and the field array is empty,\n // add an initial element to ensure there's always at least one visible element\n if (lastElementNotRemovable && fields.length === 0) {\n append(elementInitialValue);\n }\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <SortContext fields={fields} move={move} sortable={sortable}>\n <ul\n className={className.list}\n data-testid={testId}\n /**\n * TODO: this trigger causes the field array (not element)\n * are shown immediately, but this will cause additional\n * render cycles, not sure if we should do this...\n */\n onBlur={async () => {\n return trigger(name);\n }}\n >\n {/* field array label */}\n {showLabel ? (\n <>\n {label ? (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n {...getLabelProps()}\n className={cn(getLabelProps()?.className, className.label)}\n >\n {label}\n </label>\n ) : null}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null}\n\n {fields.map((field, index) => {\n const elementName = `${name}.${index}`;\n const elementTestId = `${testId}_${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => {\n append(elementInitialValue);\n },\n duplicate: () => {\n const values = getValues(name);\n insert(index + 1, values[index]);\n },\n insert: () => {\n insert(index + 1, elementInitialValue);\n },\n remove: () => {\n remove(index);\n },\n };\n\n return (\n <FieldArrayElement\n key={field.id}\n arrayFieldName={name}\n className={className}\n duplicate={duplicate}\n fields={fields}\n id={field.id}\n index={index}\n insertAfter={insertAfter}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n\n {/* append elements */}\n <Button\n disableAnimation\n className={className.appendButton}\n size=\"sm\"\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n >\n {appendButtonText}\n </Button>\n\n {/* top level field array errors */}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors ? (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} testId={testId} />\n </div>\n </div>\n ) : null}\n </ul>\n </SortContext>\n );\n};\n\nexport default FieldArray;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport interface FieldArrayElementMethods {\n /** Add new element at end */\n append: () => void;\n /** Clone current element */\n duplicate: () => void;\n /** Add new element after current */\n insert: () => void;\n /** Remove current element */\n remove: () => void;\n}\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n /** Base field name for form context */\n arrayFieldName: string;\n /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of wrapper div inside the li that wraps the rendered element fields directly */\n elementWrapper?: ClassValue;\n /** Class for the li */\n listItem?: ClassValue;\n /** Class for the insert button between elements */\n insertAfterButton?: ClassValue;\n /** Class for the remove element button */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** All fields in the form array */\n fields: Record<'id', string>[];\n /** Unique identifier for drag/drop */\n id: string | number;\n /** Field index in array */\n index: number;\n /** Prevent deletion of last remaining element */\n lastNotDeletable?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid of the element */\n testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n arrayFieldName,\n children,\n className,\n fields,\n id,\n index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n const { getFieldState } = useFormContext();\n const { error, invalid } = getFieldState(arrayFieldName, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n classNames: { helperWrapper: 'block' },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n labelPlacement: 'inside',\n placeholder: ' ',\n });\n\n // Apply transform styles when sortable is enabled for smooth drag animations\n // transform: handles the item's position during drag\n // transition: controls the animation timing when dropping\n const { setNodeRef, transform, transition } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n }\n : undefined;\n\n return (\n <>\n <li\n ref={setNodeRef}\n className={cn(className.listItem)}\n style={sortingStyle}\n >\n {/** sorting drag handle */}\n {sortable ? (\n <SortDragHandle\n className={className.sortDragHandle}\n id={id}\n testId={`${testId}_sort_drag_handle`}\n />\n ) : null}\n\n {/** render element fields */}\n <div\n className={cn(className.elementWrapper)}\n data-testid={`${testId}_element_wrapper`}\n >\n {/* TODO: this has to be improved */}\n <Grid>{children}</Grid>\n </div>\n\n {/** remove element */}\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n className={className.removeButton}\n testId={`${testId}_remove_button`}\n onClick={() => {\n methods.remove();\n }}\n />\n )}\n\n {/** insertAfter feature when not last element */}\n {insertAfter && index !== fields.length - 1 ? (\n <ElementInsertAfterButton\n className={className.insertAfterButton}\n testId={`${testId}_insert_after_button`}\n onClick={() => {\n methods.insert();\n }}\n />\n ) : null}\n </li>\n\n {/** element error */}\n {typeof error?.[index] !== 'undefined' && (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n testId={testId as string}\n />\n </div>\n </div>\n )}\n </>\n );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n return (\n <Button\n className={cn(className)}\n color=\"success\"\n icon={<FaPlus />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementRemoveButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n return (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n /** Optional CSS class name */\n className?: ClassValue;\n /** Unique identifier for sortable item */\n id: string | number;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n className = undefined,\n id,\n testId = undefined,\n}: SortDragHandleProps) => {\n // Get dnd-kit sortable attributes and listeners\n const { attributes, listeners } = useSortable({ id });\n\n return (\n <div\n className={cn(className)}\n data-testid={testId}\n {...attributes}\n {...listeners}\n >\n <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** enable/disable sorting functionality */\n sortable: boolean;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n sortable,\n fields,\n move,\n}: SortContextProps): ReactNode => {\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => {\n return field.id === active.id;\n });\n const newIndex = fields.findIndex((field) => {\n return field.id === over?.id;\n });\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n strategy={verticalListSortingStrategy}\n items={fields.map((field) => {\n return field.id;\n })}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}
|
|
@@ -16,10 +16,12 @@ var FieldValidationError = ({
|
|
|
16
16
|
"aria-label": `Validation errors of field ${testId}`,
|
|
17
17
|
className,
|
|
18
18
|
"data-testid": slugify(`${testId}_error`),
|
|
19
|
-
children: errors.map(({ message }, i) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
children: errors.map(({ message }, i) => {
|
|
20
|
+
return (
|
|
21
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
22
|
+
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: message }) }, `error_${i}`)
|
|
23
|
+
);
|
|
24
|
+
})
|
|
23
25
|
}
|
|
24
26
|
);
|
|
25
27
|
};
|
|
@@ -32,4 +34,4 @@ export {
|
|
|
32
34
|
FieldValidationError_default,
|
|
33
35
|
FieldValidationError_default2
|
|
34
36
|
};
|
|
35
|
-
//# sourceMappingURL=chunk-
|
|
37
|
+
//# sourceMappingURL=chunk-CQWA2DFV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n /** CSS class name */\n className?: string;\n /** Field errors */\n error: FieldError | FieldError[];\n /** HTML data-testid attribute used in e2e tests */\n testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n className = undefined,\n error,\n testId,\n}: FieldValidationErrorProps) => {\n // render nothing when no errors\n if (!error || (Array.isArray(error) && !error.length)) {\n return null;\n }\n\n // get errors as array\n const errors: FieldError[] = Array.isArray(error) ? error : [error];\n\n return (\n <ul\n aria-label={`Validation errors of field ${testId}`}\n className={className}\n data-testid={slugify(`${testId}_error`)}\n >\n {errors.map(({ message }, i) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{message}</div>\n </li>\n );\n })}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";AAEA,SAAS,eAAe;AAqCZ;AAvBZ,IAAM,uBAAuB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAE/B,MAAI,CAAC,SAAU,MAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAS;AACrD,WAAO;AAAA,EACT;AAGA,QAAM,SAAuB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,8BAA8B,MAAM;AAAA,MAChD;AAAA,MACA,eAAa,QAAQ,GAAG,MAAM,QAAQ;AAAA,MAErC,iBAAO,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM;AAC9B;AAAA;AAAA,UAEE,oBAAC,QACC,8BAAC,SAAK,mBAAQ,KADP,SAAS,CAAC,EAEnB;AAAA;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;ACzCf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FieldCopyTestIdButton_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-NTDKZW4E.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-CQWA2DFV.js";
|
|
7
7
|
import {
|
|
8
8
|
useController,
|
|
9
9
|
useFormContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-OC76RMHG.js";
|
|
11
11
|
import {
|
|
12
12
|
useInputValueDebounce
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-6IU7IYYB.js";
|
|
14
14
|
|
|
15
15
|
// src/Input/Input.tsx
|
|
16
16
|
import { Input as HeroInput } from "@heroui/input";
|
|
@@ -57,32 +57,32 @@ var Input = ({
|
|
|
57
57
|
return /* @__PURE__ */ jsx(
|
|
58
58
|
HeroInput,
|
|
59
59
|
{
|
|
60
|
+
ref,
|
|
60
61
|
className: cn(className),
|
|
61
|
-
classNames: {
|
|
62
|
-
inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
|
|
63
|
-
},
|
|
64
62
|
"data-testid": testId,
|
|
65
63
|
endContent,
|
|
66
|
-
errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
|
|
67
64
|
isDisabled,
|
|
68
65
|
isInvalid: invalid,
|
|
69
66
|
isRequired: required,
|
|
70
|
-
label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
71
|
-
label,
|
|
72
|
-
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
73
|
-
] }),
|
|
74
67
|
labelPlacement: "outside",
|
|
75
68
|
name,
|
|
76
69
|
onBlur,
|
|
77
70
|
onChange,
|
|
78
71
|
placeholder,
|
|
79
72
|
radius: "sm",
|
|
80
|
-
ref,
|
|
81
73
|
size,
|
|
82
74
|
startContent,
|
|
75
|
+
variant: "bordered",
|
|
76
|
+
classNames: {
|
|
77
|
+
inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
|
|
78
|
+
},
|
|
79
|
+
errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
|
|
80
|
+
label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
81
|
+
label,
|
|
82
|
+
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
83
|
+
] }),
|
|
83
84
|
type,
|
|
84
|
-
value
|
|
85
|
-
variant: "bordered"
|
|
85
|
+
value
|
|
86
86
|
}
|
|
87
87
|
);
|
|
88
88
|
};
|
|
@@ -95,4 +95,4 @@ export {
|
|
|
95
95
|
Input_default,
|
|
96
96
|
Input_default2
|
|
97
97
|
};
|
|
98
|
-
//# sourceMappingURL=chunk-
|
|
98
|
+
//# sourceMappingURL=chunk-CWXROORZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transform?: InputValueTransform;\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n
|
|
1
|
+
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transform?: InputValueTransform;\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroInput\n ref={ref}\n className={cn(className)}\n data-testid={testId}\n endContent={endContent}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n size={size}\n startContent={startContent}\n variant=\"bordered\"\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAsGF,SAIP,UAJO,KAIP,YAJO;AAlEjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ;AAAA,MAEA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACtHf,IAAOA,iBAAQ;","names":["Input_default"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FieldCopyTestIdButton_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-NTDKZW4E.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-CQWA2DFV.js";
|
|
7
7
|
import {
|
|
8
8
|
useController,
|
|
9
9
|
useFormContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-OC76RMHG.js";
|
|
11
11
|
import {
|
|
12
12
|
__objRest,
|
|
13
13
|
__spreadProps,
|
|
@@ -56,8 +56,8 @@ var RadioBox = (_a) => {
|
|
|
56
56
|
__spreadProps(__spreadValues({}, getLabelWrapperProps()), {
|
|
57
57
|
className: cn(getLabelWrapperProps().className, "grow"),
|
|
58
58
|
children: [
|
|
59
|
-
children
|
|
60
|
-
description
|
|
59
|
+
children ? /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, getLabelProps()), { children })) : null,
|
|
60
|
+
description ? /* @__PURE__ */ jsx("span", { className: "text-small text-foreground opacity-70", children: description }) : null
|
|
61
61
|
]
|
|
62
62
|
})
|
|
63
63
|
)
|
|
@@ -114,23 +114,23 @@ var RadioBoxes = ({
|
|
|
114
114
|
HeroRadioGroup,
|
|
115
115
|
{
|
|
116
116
|
classNames,
|
|
117
|
+
ref,
|
|
117
118
|
"data-invalid": invalid,
|
|
118
119
|
"data-required": required,
|
|
119
120
|
"data-testid": testId,
|
|
120
121
|
defaultValue: getValues()[name],
|
|
121
|
-
errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error, testId }),
|
|
122
122
|
isDisabled,
|
|
123
123
|
isInvalid: invalid,
|
|
124
124
|
isRequired: required,
|
|
125
|
+
name,
|
|
126
|
+
onBlur,
|
|
127
|
+
orientation: inline ? "horizontal" : "vertical",
|
|
128
|
+
errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error, testId }),
|
|
125
129
|
label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
126
130
|
/* @__PURE__ */ jsxs2("label", { children: [
|
|
127
131
|
label,
|
|
128
132
|
showTestIdCopyButton && /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId })
|
|
129
133
|
] }),
|
|
130
|
-
name,
|
|
131
|
-
orientation: inline ? "horizontal" : "vertical",
|
|
132
|
-
onBlur,
|
|
133
|
-
ref,
|
|
134
134
|
children: options.map((option) => {
|
|
135
135
|
if ("value" in option) {
|
|
136
136
|
const optionTestId = slugify(
|
|
@@ -166,4 +166,4 @@ export {
|
|
|
166
166
|
RadioBoxes_default,
|
|
167
167
|
RadioBoxes_default2
|
|
168
168
|
};
|
|
169
|
-
//# sourceMappingURL=chunk-
|
|
169
|
+
//# sourceMappingURL=chunk-EKJOEK5I.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n {\n // disabled styles\n 'opacity-disabled pointer-events-none': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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","names":["jsx","jsxs","RadioBoxes_default"]}
|
|
1
|
+
{"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n ref={ref}\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n {...getBaseProps()}\n className={cn(\n 'group border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n {\n // disabled styles\n 'opacity-disabled pointer-events-none': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {}\n <span {...getWrapperProps()}>\n {}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {}\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n ) : null}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,SAAS,cAAc,sBAAsB;AAE7C,SAAS,SAAS,IAAI,4BAA4B;;;ACFlD,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,SAAS,UAAU;AAkCX,cAQF,YARE;AA3BD,IAAM,WAAW,CAAC,OAA+C;AAA/C,eAAE,SAAO,OAblC,IAayB,IAAuB,kBAAvB,IAAuB,CAArB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,SAAS,KAAK;AAElB,SACE;AAAA,IAAC;AAAA,qCACK,aAAa,IADlB;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,UAEE,wCAAwC;AAAA,QAC1C;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,kBAEC,8BAAC,4BAAU,cAAc,EAAG,GAC9B;AAAA,QAEA,oBAAC,yCAAS,gBAAgB,IAAzB,EAEC,8BAAC,2BAAS,gBAAgB,EAAG,IAC/B;AAAA,QACC;AAAA,QACD;AAAA,UAAC;AAAA,2CACK,qBAAqB,IAD1B;AAAA,YAEC,WAAW,GAAG,qBAAqB,EAAE,WAAW,MAAM;AAAA,YAGrD;AAAA,yBAAW,oBAAC,yCAAS,cAAc,IAAvB,EAA2B,WAAS,IAAU;AAAA,cAC1D,cACC,oBAAC,UAAK,WAAU,yCACb,uBACH,IACE;AAAA;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EACF;AAEJ;;;ADsDiB,gBAAAA,MAKP,QAAAC,aALO;AAxGV,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA;AAAA;AAAA,IAGF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAwCD,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AACpB,MAAqC;AACnC,QAAM,EAAE,SAAS,WAAW,eAAe,UAAU,IAAI,eAAe;AAExE,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc,EAAE,SAAS,UAAU,KAAK,CAAC;AAC3D,QAAM,EAAE,UAAU,UAAU,YAAY,QAAQ,IAAI,IAAI;AAExD,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,QAAM,WAAW,mBAAmB;AACpC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,WAAW;AAAA,IACjB,SAAS,WAAW;AAAA,IACpB,aAAa,WAAW;AAAA,IACxB,OAAO,WAAW;AAAA,IAClB,cAAc,WAAW;AAAA,IACzB,SAAS,WAAW;AAAA,EACtB;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MAGA;AAAA,MACA,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa;AAAA,MACb,cAAc,UAAU,EAAE,IAAI;AAAA,MAC9B;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,MACrC,cACE,SAAS,gBAAAA,KAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D,OACE;AAAA,MAEE,gBAAAC,MAAC,WACE;AAAA;AAAA,QACA,wBAAwB,gBAAAD,KAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAIH,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAI,WAAW,QAAQ;AACrB,gBAAM,eAAe;AAAA,YACnB,GAAG,MAAM,WAAW,OAAO,UAAU,OAAO,KAAK;AAAA,YACjD,EAAE,aAAa,KAAK;AAAA,UACtB;AACA,iBACE,gBAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,YAAY;AAAA,cACZ,eAAa;AAAA,cACb,aAAa,OAAO;AAAA,cACpB,MAAM,OAAO;AAAA,cACb,YAAY,cAAc,OAAO;AAAA,cACjC;AAAA,cACA,OAAO,OAAO;AAAA,cAEb,iBAAO,QAAQ,OAAO,QAAQ,OAAO;AAAA;AAAA,YATjC,OAAO;AAAA,UAUd;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;;;AErJf,IAAOE,sBAAQ;","names":["jsx","jsxs","RadioBoxes_default"]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FieldCopyTestIdButton_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-NTDKZW4E.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-CQWA2DFV.js";
|
|
7
7
|
import {
|
|
8
8
|
useController,
|
|
9
9
|
useFormContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-OC76RMHG.js";
|
|
11
11
|
import {
|
|
12
12
|
useInputValueDebounce
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-6IU7IYYB.js";
|
|
14
14
|
|
|
15
15
|
// src/TextArea/TextArea.tsx
|
|
16
16
|
import { Textarea as HeroTextArea } from "@heroui/input";
|
|
@@ -51,27 +51,27 @@ var TextArea = ({
|
|
|
51
51
|
return /* @__PURE__ */ jsx(
|
|
52
52
|
HeroTextArea,
|
|
53
53
|
{
|
|
54
|
+
ref,
|
|
54
55
|
className: cn(className),
|
|
55
|
-
classNames: {
|
|
56
|
-
inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
|
|
57
|
-
},
|
|
58
56
|
"data-testid": testId,
|
|
59
|
-
errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
|
|
60
57
|
isDisabled,
|
|
61
|
-
isRequired: required,
|
|
62
58
|
isInvalid: invalid,
|
|
63
|
-
|
|
64
|
-
label,
|
|
65
|
-
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
66
|
-
] }),
|
|
59
|
+
isRequired: required,
|
|
67
60
|
labelPlacement: "outside",
|
|
68
61
|
name,
|
|
69
62
|
onBlur,
|
|
70
63
|
onChange,
|
|
71
64
|
placeholder,
|
|
72
|
-
ref,
|
|
73
65
|
value,
|
|
74
66
|
variant: "bordered",
|
|
67
|
+
classNames: {
|
|
68
|
+
inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
|
|
69
|
+
},
|
|
70
|
+
errorMessage: error ? /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) : null,
|
|
71
|
+
label: showLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
72
|
+
label,
|
|
73
|
+
showTestIdCopyButton ? /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId }) : null
|
|
74
|
+
] }) : null,
|
|
75
75
|
children
|
|
76
76
|
}
|
|
77
77
|
);
|
|
@@ -85,4 +85,4 @@ export {
|
|
|
85
85
|
TextArea_default,
|
|
86
86
|
TextArea_default2
|
|
87
87
|
};
|
|
88
|
-
//# sourceMappingURL=chunk-
|
|
88
|
+
//# sourceMappingURL=chunk-F3DDS4YF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\n debounceDelay = 300,\n disabled = false,\n label = undefined,\n name,\n placeholder = ' ',\n testId: _testId = undefined,\n}: TextAreaProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use debounced handlers for form updates\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <HeroTextArea\n ref={ref}\n className={cn(className)}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n value={value as string}\n variant=\"bordered\"\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n errorMessage={\n error ? <FieldValidationError error={error} testId={testId} /> : null\n }\n label={\n showLabel ? (\n <>\n {label}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null\n }\n >\n {children}\n </HeroTextArea>\n );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AAqFH,SAIN,UAJM,KAIN,YAJM;AAzDhB,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AACnB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MACvB,eAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,cACE,QAAQ,oBAAC,gCAAqB,OAAc,QAAgB,IAAK;AAAA,MAEnE,OACE,YACE,iCACG;AAAA;AAAA,QACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,SACN,IACE;AAAA,MAGL;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;;;ACrGf,IAAOA,oBAAQ;","names":["TextArea_default"]}
|