@fuf-stack/uniform 0.14.5 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CheckboxGroup/index.cjs +7 -6
- package/dist/CheckboxGroup/index.cjs.map +1 -1
- package/dist/CheckboxGroup/index.js +6 -5
- package/dist/Controller/index.cjs +4 -2
- package/dist/Controller/index.cjs.map +1 -1
- package/dist/Controller/index.d.cts +7 -3
- package/dist/Controller/index.d.ts +7 -3
- package/dist/Controller/index.js +7 -5
- package/dist/Controller-8Nqugui5.d.cts +37 -0
- package/dist/Controller-8Nqugui5.d.ts +37 -0
- package/dist/FieldArray/index.cjs +6 -5
- package/dist/FieldArray/index.cjs.map +1 -1
- package/dist/FieldArray/index.d.cts +5 -3
- package/dist/FieldArray/index.d.ts +5 -3
- package/dist/FieldArray/index.js +5 -4
- package/dist/FieldArray-AqM2XKIh.d.cts +151 -0
- package/dist/FieldArray-AqM2XKIh.d.ts +151 -0
- package/dist/Form/index.cjs +5 -4
- package/dist/Form/index.cjs.map +1 -1
- package/dist/Form/index.js +4 -3
- package/dist/Grid/index.cjs +1 -0
- package/dist/Grid/index.cjs.map +1 -1
- package/dist/Grid/index.js +1 -0
- package/dist/Input/index.cjs +7 -6
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.js +6 -5
- package/dist/RadioGroup/index.cjs +7 -6
- package/dist/RadioGroup/index.cjs.map +1 -1
- package/dist/RadioGroup/index.js +6 -5
- package/dist/Select/index.cjs +7 -6
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.js +6 -5
- package/dist/SubmitButton/index.cjs +5 -4
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.js +4 -3
- package/dist/Switch/index.cjs +7 -6
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.js +6 -5
- package/dist/TextArea/index.cjs +7 -6
- package/dist/TextArea/index.cjs.map +1 -1
- package/dist/TextArea/index.js +6 -5
- package/dist/{chunk-DDZMDOSG.js → chunk-2LAPLELO.js} +21 -17
- package/dist/{chunk-DDZMDOSG.js.map → chunk-2LAPLELO.js.map} +1 -1
- package/dist/chunk-2NSCPLAA.cjs +133 -0
- package/dist/chunk-2NSCPLAA.cjs.map +1 -0
- package/dist/{chunk-QW44EUAH.js → chunk-3Q37222E.js} +8 -8
- package/dist/{chunk-QW44EUAH.js.map → chunk-3Q37222E.js.map} +1 -1
- package/dist/chunk-4AXNPSXG.cjs +82 -0
- package/dist/chunk-4AXNPSXG.cjs.map +1 -0
- package/dist/chunk-4DAZAO6Y.cjs +59 -0
- package/dist/chunk-4DAZAO6Y.cjs.map +1 -0
- package/dist/chunk-4EJS5FXY.js +51 -0
- package/dist/chunk-4EJS5FXY.js.map +1 -0
- package/dist/chunk-4EP3IGSK.cjs +372 -0
- package/dist/chunk-4EP3IGSK.cjs.map +1 -0
- package/dist/{chunk-Y3SFF6RN.cjs → chunk-4M6F2O2K.cjs} +10 -9
- package/dist/chunk-4M6F2O2K.cjs.map +1 -0
- package/dist/{chunk-BYKOCVCK.js → chunk-7HK64PN5.js} +19 -15
- package/dist/{chunk-BYKOCVCK.js.map → chunk-7HK64PN5.js.map} +1 -1
- package/dist/{chunk-OHJYXA6R.cjs → chunk-C4RM2JSD.cjs} +3 -3
- package/dist/{chunk-OHJYXA6R.cjs.map → chunk-C4RM2JSD.cjs.map} +1 -1
- package/dist/chunk-CRTRMMJ7.js +59 -0
- package/dist/chunk-CRTRMMJ7.js.map +1 -0
- package/dist/{chunk-EKE5URXQ.cjs → chunk-F6KTQXWG.cjs} +15 -12
- package/dist/chunk-F6KTQXWG.cjs.map +1 -0
- package/dist/{chunk-XCZKNTFT.cjs → chunk-FLX6VIO7.cjs} +23 -19
- package/dist/chunk-FLX6VIO7.cjs.map +1 -0
- package/dist/chunk-IEF2GJ22.js +82 -0
- package/dist/chunk-IEF2GJ22.js.map +1 -0
- package/dist/chunk-K43U2JVG.cjs +248 -0
- package/dist/chunk-K43U2JVG.cjs.map +1 -0
- package/dist/{chunk-XJZAS7NG.cjs → chunk-MF4JB3YT.cjs} +25 -21
- package/dist/chunk-MF4JB3YT.cjs.map +1 -0
- package/dist/{chunk-BZAPTLMC.js → chunk-MRXNKY72.js} +49 -49
- package/dist/chunk-MRXNKY72.js.map +1 -0
- package/dist/chunk-OBQDQ4RX.js +372 -0
- package/dist/chunk-OBQDQ4RX.js.map +1 -0
- package/dist/{chunk-VP7WDLJM.js → chunk-P4PRVNCH.js} +17 -13
- package/dist/chunk-P4PRVNCH.js.map +1 -0
- package/dist/{chunk-PZ4LZQI4.cjs → chunk-QLQR44AD.cjs} +19 -15
- package/dist/chunk-QLQR44AD.cjs.map +1 -0
- package/dist/{chunk-QCVTB2NI.js → chunk-U26GTLKF.js} +8 -7
- package/dist/{chunk-QCVTB2NI.js.map → chunk-U26GTLKF.js.map} +1 -1
- package/dist/{chunk-GN5NJ6ZU.js → chunk-UJYXA5AD.js} +3 -3
- package/dist/chunk-V5HTEMWZ.cjs +51 -0
- package/dist/chunk-V5HTEMWZ.cjs.map +1 -0
- package/dist/{chunk-VZ5MMFIF.cjs → chunk-V7LRZ5GK.cjs} +5 -5
- package/dist/{chunk-VZ5MMFIF.cjs.map → chunk-V7LRZ5GK.cjs.map} +1 -1
- package/dist/{chunk-WKM2D7LF.js → chunk-VX76MJAI.js} +2 -2
- package/dist/chunk-W66BVPTB.js +248 -0
- package/dist/{chunk-IUNDGVMC.js.map → chunk-W66BVPTB.js.map} +1 -1
- package/dist/{chunk-BS52M4SZ.js → chunk-WAXJ64P7.js} +14 -11
- package/dist/chunk-WAXJ64P7.js.map +1 -0
- package/dist/{chunk-RBIX6EWU.cjs → chunk-Y4AUJ2YA.cjs} +10 -10
- package/dist/chunk-Y4AUJ2YA.cjs.map +1 -0
- package/dist/helpers/index.cjs +11 -2
- package/dist/helpers/index.cjs.map +1 -1
- package/dist/helpers/index.d.cts +68 -1
- package/dist/helpers/index.d.ts +68 -1
- package/dist/helpers/index.js +12 -3
- package/dist/hooks/index.cjs +6 -3
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +3 -2
- package/dist/hooks/index.d.ts +3 -2
- package/dist/hooks/index.js +7 -4
- package/dist/index.cjs +26 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -3
- package/dist/index.d.ts +5 -3
- package/dist/index.js +31 -20
- package/dist/partials/FieldCopyTestIdButton/index.cjs +1 -0
- package/dist/partials/FieldCopyTestIdButton/index.cjs.map +1 -1
- package/dist/partials/FieldCopyTestIdButton/index.js +1 -0
- package/dist/partials/FieldValidationError/index.cjs +4 -3
- package/dist/partials/FieldValidationError/index.cjs.map +1 -1
- package/dist/partials/FieldValidationError/index.js +3 -2
- package/package.json +17 -17
- package/dist/FieldArray-DD9z-xZ3.d.cts +0 -37
- package/dist/FieldArray-DD9z-xZ3.d.ts +0 -37
- package/dist/chunk-BBB4FEY6.cjs +0 -22
- package/dist/chunk-BBB4FEY6.cjs.map +0 -1
- package/dist/chunk-BS52M4SZ.js.map +0 -1
- package/dist/chunk-BZAPTLMC.js.map +0 -1
- package/dist/chunk-EKE5URXQ.cjs.map +0 -1
- package/dist/chunk-HOETR36J.cjs +0 -299
- package/dist/chunk-HOETR36J.cjs.map +0 -1
- package/dist/chunk-HZP3EXGR.cjs +0 -241
- package/dist/chunk-HZP3EXGR.cjs.map +0 -1
- package/dist/chunk-IUNDGVMC.js +0 -241
- package/dist/chunk-KOKIM2ND.js +0 -9
- package/dist/chunk-KOKIM2ND.js.map +0 -1
- package/dist/chunk-PZ4LZQI4.cjs.map +0 -1
- package/dist/chunk-RBIX6EWU.cjs.map +0 -1
- package/dist/chunk-V46BHM2U.js +0 -22
- package/dist/chunk-V46BHM2U.js.map +0 -1
- package/dist/chunk-VP7WDLJM.js.map +0 -1
- package/dist/chunk-VQWKXSHW.cjs +0 -9
- package/dist/chunk-VQWKXSHW.cjs.map +0 -1
- package/dist/chunk-XCZKNTFT.cjs.map +0 -1
- package/dist/chunk-XJWEUCV3.cjs +0 -133
- package/dist/chunk-XJWEUCV3.cjs.map +0 -1
- package/dist/chunk-XJZAS7NG.cjs.map +0 -1
- package/dist/chunk-Y3SFF6RN.cjs.map +0 -1
- package/dist/chunk-Y53IHK6B.js +0 -299
- package/dist/chunk-Y53IHK6B.js.map +0 -1
- /package/dist/{chunk-GN5NJ6ZU.js.map → chunk-UJYXA5AD.js.map} +0 -0
- /package/dist/{chunk-WKM2D7LF.js.map → chunk-VX76MJAI.js.map} +0 -0
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkC4RM2JSDcjs = require('./chunk-C4RM2JSD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
19
|
+
|
|
20
|
+
// src/FieldArray/FieldArray.tsx
|
|
21
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
22
|
+
var _pixels = require('@fuf-stack/pixels');
|
|
23
|
+
|
|
24
|
+
// src/FieldArray/subcomponents/FieldArrayElement.tsx
|
|
25
|
+
var _sortable = require('@dnd-kit/sortable');
|
|
26
|
+
var _utilities = require('@dnd-kit/utilities');
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// src/FieldArray/subcomponents/ElementInsertAfterButton.tsx
|
|
30
|
+
var _fa6 = require('react-icons/fa6');
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
34
|
+
var ElementInsertAfterButton = ({
|
|
35
|
+
className = void 0,
|
|
36
|
+
onClick,
|
|
37
|
+
testId = void 0
|
|
38
|
+
}) => {
|
|
39
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
40
|
+
_pixels.Button,
|
|
41
|
+
{
|
|
42
|
+
className: _pixelutils.cn.call(void 0, className),
|
|
43
|
+
color: "success",
|
|
44
|
+
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaPlus, {}),
|
|
45
|
+
onClick,
|
|
46
|
+
size: "sm",
|
|
47
|
+
testId,
|
|
48
|
+
variant: "light"
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
var ElementInsertAfterButton_default = ElementInsertAfterButton;
|
|
53
|
+
|
|
54
|
+
// src/FieldArray/subcomponents/ElementRemoveButton.tsx
|
|
55
|
+
var _fa = require('react-icons/fa');
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
var ElementRemoveButton = ({
|
|
60
|
+
className = void 0,
|
|
61
|
+
onClick,
|
|
62
|
+
testId = void 0
|
|
63
|
+
}) => {
|
|
64
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
65
|
+
_pixels.Button,
|
|
66
|
+
{
|
|
67
|
+
ariaLabel: "remove element",
|
|
68
|
+
className: _pixelutils.cn.call(void 0, className),
|
|
69
|
+
color: "danger",
|
|
70
|
+
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, {}),
|
|
71
|
+
onClick,
|
|
72
|
+
testId,
|
|
73
|
+
variant: "light"
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
var ElementRemoveButton_default = ElementRemoveButton;
|
|
78
|
+
|
|
79
|
+
// src/FieldArray/subcomponents/SortDragHandle.tsx
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
var SortDragHandle = ({
|
|
85
|
+
className = void 0,
|
|
86
|
+
id,
|
|
87
|
+
testId = void 0
|
|
88
|
+
}) => {
|
|
89
|
+
const { attributes, listeners } = _sortable.useSortable.call(void 0, { id });
|
|
90
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
91
|
+
"div",
|
|
92
|
+
_chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
|
|
93
|
+
className: _pixelutils.cn.call(void 0, className),
|
|
94
|
+
"data-testid": testId
|
|
95
|
+
}, attributes), listeners), {
|
|
96
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripVertical, {})
|
|
97
|
+
})
|
|
98
|
+
);
|
|
99
|
+
};
|
|
100
|
+
var SortDragHandle_default = SortDragHandle;
|
|
101
|
+
|
|
102
|
+
// src/FieldArray/subcomponents/FieldArrayElement.tsx
|
|
103
|
+
|
|
104
|
+
var FieldArrayElement = ({
|
|
105
|
+
children,
|
|
106
|
+
className,
|
|
107
|
+
fields,
|
|
108
|
+
id,
|
|
109
|
+
index,
|
|
110
|
+
insertAfter = false,
|
|
111
|
+
lastNotDeletable = true,
|
|
112
|
+
methods,
|
|
113
|
+
name,
|
|
114
|
+
sortable = false,
|
|
115
|
+
testId = void 0
|
|
116
|
+
}) => {
|
|
117
|
+
var _a;
|
|
118
|
+
const { getFieldState } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
|
|
119
|
+
const { error, invalid } = getFieldState(`${name}`, void 0);
|
|
120
|
+
const { getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
|
|
121
|
+
classNames: { helperWrapper: "block" },
|
|
122
|
+
errorMessage: JSON.stringify(error),
|
|
123
|
+
isInvalid: invalid,
|
|
124
|
+
labelPlacement: "inside",
|
|
125
|
+
placeholder: " "
|
|
126
|
+
});
|
|
127
|
+
const { setNodeRef, transform, transition } = _sortable.useSortable.call(void 0, { id });
|
|
128
|
+
const sortingStyle = sortable ? {
|
|
129
|
+
transform: _utilities.CSS.Translate.toString(transform),
|
|
130
|
+
transition
|
|
131
|
+
} : void 0;
|
|
132
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
133
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
134
|
+
"li",
|
|
135
|
+
{
|
|
136
|
+
className: _pixelutils.cn.call(void 0, className.listItem),
|
|
137
|
+
ref: setNodeRef,
|
|
138
|
+
style: sortingStyle,
|
|
139
|
+
children: [
|
|
140
|
+
sortable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
141
|
+
SortDragHandle_default,
|
|
142
|
+
{
|
|
143
|
+
className: className.sortDragHandle,
|
|
144
|
+
id,
|
|
145
|
+
testId: `${testId}_sort_drag_handle`
|
|
146
|
+
}
|
|
147
|
+
),
|
|
148
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className.elementContent), "data-testid": testId, children }),
|
|
149
|
+
lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
150
|
+
ElementRemoveButton_default,
|
|
151
|
+
{
|
|
152
|
+
className: className.removeButton,
|
|
153
|
+
onClick: () => methods.remove(),
|
|
154
|
+
testId: `${testId}_remove_button`
|
|
155
|
+
}
|
|
156
|
+
),
|
|
157
|
+
insertAfter && index !== fields.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
158
|
+
ElementInsertAfterButton_default,
|
|
159
|
+
{
|
|
160
|
+
className: className.insertAfterButton,
|
|
161
|
+
onClick: () => methods.insert(),
|
|
162
|
+
testId: `${testId}_insert_after_button`
|
|
163
|
+
}
|
|
164
|
+
)
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
error && typeof error[index] !== "undefined" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
169
|
+
_chunkC4RM2JSDcjs.FieldValidationError_default,
|
|
170
|
+
{
|
|
171
|
+
error: (_a = error[Number(index)]) == null ? void 0 : _a._errors
|
|
172
|
+
}
|
|
173
|
+
) })) }))
|
|
174
|
+
] });
|
|
175
|
+
};
|
|
176
|
+
var FieldArrayElement_default = FieldArrayElement;
|
|
177
|
+
|
|
178
|
+
// src/FieldArray/subcomponents/SortContext.tsx
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
var _core = require('@dnd-kit/core');
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
var _modifiers = require('@dnd-kit/modifiers');
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
var SortContext = ({
|
|
197
|
+
children,
|
|
198
|
+
sortable,
|
|
199
|
+
fields,
|
|
200
|
+
move
|
|
201
|
+
}) => {
|
|
202
|
+
const sensors = _core.useSensors.call(void 0,
|
|
203
|
+
_core.useSensor.call(void 0, _core.PointerSensor),
|
|
204
|
+
_core.useSensor.call(void 0, _core.KeyboardSensor)
|
|
205
|
+
);
|
|
206
|
+
if (!sortable) {
|
|
207
|
+
return children;
|
|
208
|
+
}
|
|
209
|
+
const handleDragEnd = (event) => {
|
|
210
|
+
const { active, over } = event;
|
|
211
|
+
if (active.id !== (over == null ? void 0 : over.id)) {
|
|
212
|
+
const oldIndex = fields.findIndex((field) => field.id === active.id);
|
|
213
|
+
const newIndex = fields.findIndex((field) => field.id === (over == null ? void 0 : over.id));
|
|
214
|
+
move(oldIndex, newIndex);
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
218
|
+
_core.DndContext,
|
|
219
|
+
{
|
|
220
|
+
collisionDetection: _core.closestCenter,
|
|
221
|
+
modifiers: [_modifiers.restrictToVerticalAxis, _modifiers.restrictToWindowEdges],
|
|
222
|
+
onDragEnd: handleDragEnd,
|
|
223
|
+
sensors,
|
|
224
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
225
|
+
_sortable.SortableContext,
|
|
226
|
+
{
|
|
227
|
+
items: fields.map((field) => field.id),
|
|
228
|
+
strategy: _sortable.verticalListSortingStrategy,
|
|
229
|
+
children
|
|
230
|
+
}
|
|
231
|
+
)
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
};
|
|
235
|
+
var SortContext_default = SortContext;
|
|
236
|
+
|
|
237
|
+
// src/FieldArray/FieldArray.tsx
|
|
238
|
+
|
|
239
|
+
var fieldArrayVariants = _pixelutils.tv.call(void 0, {
|
|
240
|
+
slots: {
|
|
241
|
+
appendButton: "w-full",
|
|
242
|
+
elementContent: "flex-grow",
|
|
243
|
+
insertAfterButton: "text-xs font-medium",
|
|
244
|
+
label: "!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block",
|
|
245
|
+
list: "m-0 w-full list-none",
|
|
246
|
+
listItem: "mb-4 flex w-full flex-row items-center",
|
|
247
|
+
removeButton: "ml-1",
|
|
248
|
+
sortDragHandle: "mr-2 text-base text-xl"
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
var FieldArray = ({
|
|
252
|
+
appendButtonText = "Add Element",
|
|
253
|
+
children,
|
|
254
|
+
className: _className = void 0,
|
|
255
|
+
duplicate = false,
|
|
256
|
+
elementInitialValue: _elementInitialValue = null,
|
|
257
|
+
insertAfter = false,
|
|
258
|
+
label: _label = void 0,
|
|
259
|
+
lastElementNotDeletable = true,
|
|
260
|
+
name,
|
|
261
|
+
sortable = false,
|
|
262
|
+
testId: _testId = void 0
|
|
263
|
+
}) => {
|
|
264
|
+
var _a;
|
|
265
|
+
const variants = fieldArrayVariants();
|
|
266
|
+
const className = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "list");
|
|
267
|
+
const {
|
|
268
|
+
control,
|
|
269
|
+
debugMode,
|
|
270
|
+
getValues,
|
|
271
|
+
getFieldState,
|
|
272
|
+
trigger
|
|
273
|
+
// watch
|
|
274
|
+
} = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
|
|
275
|
+
const { fields, append, remove, insert, move } = _chunk2NSCPLAAcjs.useFieldArray.call(void 0, {
|
|
276
|
+
control,
|
|
277
|
+
name
|
|
278
|
+
});
|
|
279
|
+
const { error, testId, invalid, required } = getFieldState(name, _testId);
|
|
280
|
+
const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _chunk2NSCPLAAcjs.useInput.call(void 0, {
|
|
281
|
+
isInvalid: invalid,
|
|
282
|
+
isRequired: required,
|
|
283
|
+
errorMessage: JSON.stringify(error),
|
|
284
|
+
label: _label,
|
|
285
|
+
labelPlacement: "inside",
|
|
286
|
+
placeholder: " ",
|
|
287
|
+
classNames: { helperWrapper: "block" }
|
|
288
|
+
});
|
|
289
|
+
const elementInitialValue = _chunk4AXNPSXGcjs.toNullishString.call(void 0, _elementInitialValue);
|
|
290
|
+
if (lastElementNotDeletable && fields.length === 0) {
|
|
291
|
+
append(elementInitialValue);
|
|
292
|
+
}
|
|
293
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
294
|
+
const showLabel = label || showTestIdCopyButton;
|
|
295
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortContext_default, { sortable, move, fields, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
296
|
+
"ul",
|
|
297
|
+
{
|
|
298
|
+
className: className.list,
|
|
299
|
+
"data-testid": testId,
|
|
300
|
+
onBlur: () => trigger(`${name}`),
|
|
301
|
+
children: [
|
|
302
|
+
showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
303
|
+
label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
304
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
305
|
+
"label",
|
|
306
|
+
_chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getLabelProps()), {
|
|
307
|
+
className: _pixelutils.cn.call(void 0, (_a = getLabelProps()) == null ? void 0 : _a.className, className.label),
|
|
308
|
+
children: label
|
|
309
|
+
})
|
|
310
|
+
),
|
|
311
|
+
showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
|
|
312
|
+
] }),
|
|
313
|
+
fields.map((field, index) => {
|
|
314
|
+
const methods = {
|
|
315
|
+
append: () => append(elementInitialValue),
|
|
316
|
+
duplicate: () => {
|
|
317
|
+
const values = getValues(name);
|
|
318
|
+
insert(index + 1, values[index]);
|
|
319
|
+
},
|
|
320
|
+
insert: () => insert(index + 1, elementInitialValue),
|
|
321
|
+
remove: () => remove(index)
|
|
322
|
+
};
|
|
323
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
324
|
+
FieldArrayElement_default,
|
|
325
|
+
{
|
|
326
|
+
className,
|
|
327
|
+
fields,
|
|
328
|
+
id: field.id,
|
|
329
|
+
index,
|
|
330
|
+
duplicate,
|
|
331
|
+
insertAfter,
|
|
332
|
+
lastNotDeletable: lastElementNotDeletable,
|
|
333
|
+
methods,
|
|
334
|
+
name,
|
|
335
|
+
sortable,
|
|
336
|
+
testId: `${testId}_${index}`,
|
|
337
|
+
children: children({
|
|
338
|
+
index,
|
|
339
|
+
length: fields.length,
|
|
340
|
+
methods,
|
|
341
|
+
name: `${name}.${index}`,
|
|
342
|
+
testId: `${testId}_${index}`
|
|
343
|
+
})
|
|
344
|
+
},
|
|
345
|
+
field.id
|
|
346
|
+
);
|
|
347
|
+
}),
|
|
348
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
349
|
+
_pixels.Button,
|
|
350
|
+
{
|
|
351
|
+
className: className.appendButton,
|
|
352
|
+
onClick: () => append(elementInitialValue),
|
|
353
|
+
size: "sm",
|
|
354
|
+
testId: `${testId}_append_button`,
|
|
355
|
+
children: appendButtonText
|
|
356
|
+
}
|
|
357
|
+
),
|
|
358
|
+
(error == null ? void 0 : error._errors) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getHelperWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getErrorMessageProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC4RM2JSDcjs.FieldValidationError_default, { error: error == null ? void 0 : error._errors }) })) }))
|
|
359
|
+
]
|
|
360
|
+
}
|
|
361
|
+
) });
|
|
362
|
+
};
|
|
363
|
+
var FieldArray_default = FieldArray;
|
|
364
|
+
|
|
365
|
+
// src/FieldArray/index.ts
|
|
366
|
+
var FieldArray_default2 = FieldArray_default;
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
|
|
372
|
+
//# sourceMappingURL=chunk-4EP3IGSK.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4EP3IGSK.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","Fragment"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACdA,oDAA6C;AAC7C,2CAAuB;ADgBvB;AACA;AElBA,6CAA4B;AAC5B,+CAAoB;AAEpB;AFmBA;AACA;AG1BA,sCAAuB;AAEvB;AACA;AAoBY,+CAAA;AATZ,IAAM,yBAAA,EAA2B,CAAC;AAAA,EAChC,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA;AAAA,EACA,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAqC;AACnC,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA,EAAM,SAAA;AAAA,MACN,IAAA,kBAAM,6BAAA,WAAC,EAAA,CAAA,CAAO,CAAA;AAAA,MACd,OAAA;AAAA,MACA,IAAA,EAAK,IAAA;AAAA,MACL,MAAA;AAAA,MACA,OAAA,EAAQ;AAAA,IAAA;AAAA,EACV,CAAA;AAEJ,CAAA;AAEA,IAAO,iCAAA,EAAQ,wBAAA;AHkBf;AACA;AInDA,oCAAwB;AAExB;AACA;AAqBY;AAVZ,IAAM,oBAAA,EAAsB,CAAC;AAAA,EAC3B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,OAAA;AAAA,EACA,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAgC;AAC9B,EAAA,uBACEA,6BAAAA;AAAA,IAACC,cAAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAWC,4BAAAA,SAAY,CAAA;AAAA,MACvB,KAAA,EAAM,QAAA;AAAA,MACN,IAAA,kBAAMF,6BAAAA,WAAC,EAAA,CAAA,CAAQ,CAAA;AAAA,MACf,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA,EAAQ;AAAA,IAAA;AAAA,EACV,CAAA;AAEJ,CAAA;AAEA,IAAO,4BAAA,EAAQ,mBAAA;AJ2Cf;AACA;AK5EA;AAEA;AAEA;AAgCM;AAjBN,IAAM,eAAA,EAAiB,CAAC;AAAA,EACtB,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,EAAA;AAAA,EACA,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAA2B;AAEzB,EAAA,MAAM,EAAE,UAAA,EAAY,UAAU,EAAA,EAAI,mCAAA,EAAc,GAAG,CAAC,CAAA;AAEpD,EAAA,uBACEA,6BAAAA;AAAA,IAAC,KAAA;AAAA,IAAA,6CAAA,8CAAA,8CAAA;AAAA,MACC,SAAA,EAAWE,4BAAAA,SAAY,CAAA;AAAA,MACvB,aAAA,EAAa;AAAA,IAAA,CAAA,EAET,UAAA,CAAA,EAEA,SAAA,CAAA,EANL;AAAA,MAQC,QAAA,kBAAAF,6BAAAA,kBAAC,EAAA,CAAA,CAAe;AAAA,IAAA,CAAA;AAAA,EAClB,CAAA;AAEJ,CAAA;AAEA,IAAO,uBAAA,EAAQ,cAAA;ALyDf;AACA;AEDI;AArCJ,IAAM,kBAAA,EAAoB,CAAC;AAAA,EACzB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,EAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,EAAc,KAAA;AAAA,EACd,iBAAA,EAAmB,IAAA;AAAA,EACnB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,EAAW,KAAA;AAAA,EACX,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAA8B;AA3E9B,EAAA,IAAA,EAAA;AA4EE,EAAA,MAAM,EAAE,cAAc,EAAA,EAAI,8CAAA,CAAe;AACzC,EAAA,MAAM,EAAE,KAAA,EAAO,QAAQ,EAAA,EAAI,aAAA,CAAc,CAAA,EAAA;AAGV,EAAA;AACQ,IAAA;AACH,IAAA;AACvB,IAAA;AACK,IAAA;AACH,IAAA;AACd,EAAA;AAKyC,EAAA;AAEtC,EAAA;AACoC,IAAA;AAClC,IAAA;AAEF,EAAA;AAIA,EAAA;AAAA,oBAAA;AAAC,MAAA;AAAA,MAAA;AACiC,QAAA;AAC3B,QAAA;AACE,QAAA;AAGN,QAAA;AACCA,UAAAA;AAAC,YAAA;AAAA,YAAA;AACsB,cAAA;AACrB,cAAA;AACiB,cAAA;AAAA,YAAA;AACnB,UAAA;AAIG,0BAAA;AAKuB,UAAA;AACzB,YAAA;AAAA,YAAA;AACsB,cAAA;AACS,cAAA;AACb,cAAA;AAAA,YAAA;AACnB,UAAA;AAI+B,UAAA;AAC9B,YAAA;AAAA,YAAA;AACsB,cAAA;AACS,cAAA;AACb,cAAA;AAAA,YAAA;AACnB,UAAA;AAAA,QAAA;AAAA,MAAA;AAEJ,IAAA;AAGkC,IAAA;AAG3B,MAAA;AAAA,MAAA;AAE2B,QAAA;AAAG,MAAA;AAGnC,IAAA;AAEJ,EAAA;AAEJ;AAEe;AFsB6B;AACA;AM3K5C;AACE;AACA;AACA;AACA;AACA;AACA;AACK;AACP;AACE;AACA;AACK;AACP;AACE;AACA;AACK;AA8DD;AAzCe;AACnB,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACsB;AAEN,EAAA;AACS,IAAA;AACC,IAAA;AAC1B,EAAA;AAGe,EAAA;AACN,IAAA;AACT,EAAA;AAM+C,EAAA;AACpB,IAAA;AAGP,IAAA;AAEmB,MAAA;AACA,MAAA;AAEZ,MAAA;AACzB,IAAA;AACF,EAAA;AAGEA,EAAAA;AAAC,IAAA;AAAA,IAAA;AACqB,MAAA;AACgB,MAAA;AACzB,MAAA;AACX,MAAA;AAEAA,MAAAA;AAAC,QAAA;AAAA,QAAA;AAC8B,UAAA;AACnB,UAAA;AAET,UAAA;AAAA,QAAA;AACH,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAEe;AN8I6B;AACA;ACrI9BA;AAxFuB;AAC5B,EAAA;AACS,IAAA;AACE,IAAA;AACG,IAAA;AACZ,IAAA;AACD,IAAA;AACI,IAAA;AACI,IAAA;AACE,IAAA;AAClB,EAAA;AACD;AAKmB;AACC,EAAA;AACnB,EAAA;AACwB,EAAA;AACZ,EAAA;AACS,EAAA;AACP,EAAA;AACE,EAAA;AACU,EAAA;AAC1B,EAAA;AACW,EAAA;AACO,EAAA;AACG;AA3CvB,EAAA;AA6CsC,EAAA;AACG,EAAA;AAEjC,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAAA;AAEiB,EAAA;AAEqB,EAAA;AACtC,IAAA;AACA,IAAA;AACD,EAAA;AAEwC,EAAA;AAGX,EAAA;AAEf,IAAA;AACC,IAAA;AACsB,IAAA;AAC3B,IAAA;AACS,IAAA;AACH,IAAA;AACwB,IAAA;AACtC,EAAA;AAGyB,EAAA;AAEU,EAAA;AACV,IAAA;AAC5B,EAAA;AAE6B,EAAA;AACF,EAAA;AAGxB,EAAA;AACE,IAAA;AAAA,IAAA;AACsB,MAAA;AACR,MAAA;AAMkB,MAAA;AAG9B,MAAA;AACCG,QAAAA;AACG,UAAA;AAECH,0BAAAA;AAAC,YAAA;AAAA,YAAA;AAEe,cAAA;AAEb,cAAA;AAAA,YAAA;AACH,UAAA;AAEuB,UAAA;AAC3B,QAAA;AAG4B,QAAA;AAEc,UAAA;AACnB,YAAA;AACJ,YAAA;AACc,cAAA;AACC,cAAA;AAChC,YAAA;AACgC,YAAA;AACN,YAAA;AAC5B,UAAA;AAGEA,UAAAA;AAAC,YAAA;AAAA,YAAA;AACC,cAAA;AACA,cAAA;AACU,cAAA;AACV,cAAA;AACA,cAAA;AACA,cAAA;AAEkB,cAAA;AAClB,cAAA;AACA,cAAA;AACA,cAAA;AAC0B,cAAA;AAEhB,cAAA;AACR,gBAAA;AACe,gBAAA;AACf,gBAAA;AACsB,gBAAA;AACI,gBAAA;AAC3B,cAAA;AAAA,YAAA;AAbU,YAAA;AAcb,UAAA;AAEH,QAAA;AAGDA,wBAAAA;AAACC,UAAAA;AAAA,UAAA;AACsB,YAAA;AACC,YAAA;AACjB,YAAA;AACY,YAAA;AAEhB,YAAA;AAAA,UAAA;AACH,QAAA;AAIQ,QAAA;AAMN,MAAA;AAAA,IAAA;AAGN,EAAA;AAEJ;AAEe;AD0L6B;AACA;AOtW7B;APwW6B;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4EP3IGSK.cjs","sourcesContent":[null,"/* eslint-disable react/jsx-props-no-spreading */\n\nimport 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 elementContent: 'flex-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 items-center',\n removeButton: 'ml-1',\n sortDragHandle: 'mr-2 text-base text-xl',\n },\n});\n\n/**\n * FieldArray component using TODO\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 lastElementNotDeletable = true,\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 if (lastElementNotDeletable && fields.length === 0) {\n append(elementInitialValue);\n }\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <SortContext sortable={sortable} move={move} fields={fields}>\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={() => trigger(`${name}`)}\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 )}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )}\n\n {fields.map((field, index) => {\n // create methods for element\n const methods: FieldArrayElementMethods = {\n append: () => append(elementInitialValue),\n duplicate: () => {\n const values = getValues(name);\n insert(index + 1, values[index]);\n },\n insert: () => insert(index + 1, elementInitialValue),\n remove: () => remove(index),\n };\n\n return (\n <FieldArrayElement\n className={className}\n fields={fields}\n id={field.id}\n index={index}\n duplicate={duplicate}\n insertAfter={insertAfter}\n key={field.id}\n lastNotDeletable={lastElementNotDeletable}\n methods={methods}\n name={name}\n sortable={sortable}\n testId={`${testId}_${index}`}\n >\n {children({\n index,\n length: fields.length,\n methods,\n name: `${name}.${index}`,\n testId: `${testId}_${index}`,\n })}\n </FieldArrayElement>\n );\n })}\n\n {/* append elements */}\n <Button\n className={className.appendButton}\n onClick={() => append(elementInitialValue)}\n size=\"sm\"\n testId={`${testId}_append_button`}\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} />\n </div>\n </div>\n )}\n </ul>\n </SortContext>\n );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport 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 { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type 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 /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of the content of the li */\n elementContent?: 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 /** Base field name for form context */\n name: string;\n /** HTML data-testid attribute used in e2e tests */\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 children,\n className,\n fields,\n id,\n index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n name,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n const { getFieldState } = useFormContext();\n const { error, invalid } = getFieldState(`${name}`, 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 className={cn(className.listItem)}\n ref={setNodeRef}\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 )}\n\n {/** render element fields */}\n <div className={cn(className.elementContent)} data-testid={testId}>\n {children}\n </div>\n\n {/** remove element */}\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n className={className.removeButton}\n onClick={() => methods.remove()}\n testId={`${testId}_remove_button`}\n />\n )}\n\n {/** insertAfter feature when not last element */}\n {insertAfter && index !== fields.length - 1 && (\n <ElementInsertAfterButton\n className={className.insertAfterButton}\n onClick={() => methods.insert()}\n testId={`${testId}_insert_after_button`}\n />\n )}\n </li>\n\n {/** element error */}\n {error && 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 />\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 // eslint-disable-next-line react/jsx-props-no-spreading\n {...attributes}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...listeners}\n >\n <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport 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) => {\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) => field.id === active.id);\n const newIndex = fields.findIndex((field) => field.id === over?.id);\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 items={fields.map((field) => field.id)}\n strategy={verticalListSortingStrategy}\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"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkV5HTEMWZcjs = require('./chunk-V5HTEMWZ.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkC4RM2JSDcjs = require('./chunk-C4RM2JSD.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunk2NSCPLAAcjs = require('./chunk-2NSCPLAA.cjs');
|
|
13
13
|
|
|
14
14
|
// src/TextArea/TextArea.tsx
|
|
15
15
|
var _input = require('@nextui-org/input');
|
|
@@ -24,12 +24,12 @@ var TextArea = ({
|
|
|
24
24
|
placeholder = " ",
|
|
25
25
|
testId: _testId = void 0
|
|
26
26
|
}) => {
|
|
27
|
-
const { control, debugMode, getFieldState } =
|
|
27
|
+
const { control, debugMode, getFieldState } = _chunk2NSCPLAAcjs.useFormContext.call(void 0, );
|
|
28
28
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
29
29
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
30
30
|
const showLabel = label || showTestIdCopyButton;
|
|
31
31
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
32
|
-
|
|
32
|
+
_chunkV5HTEMWZcjs.Controller_default,
|
|
33
33
|
{
|
|
34
34
|
control,
|
|
35
35
|
name,
|
|
@@ -37,7 +37,8 @@ var TextArea = ({
|
|
|
37
37
|
render: ({
|
|
38
38
|
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
39
39
|
}) => {
|
|
40
|
-
|
|
40
|
+
var _a;
|
|
41
|
+
const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
|
|
41
42
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
42
43
|
_input.Textarea,
|
|
43
44
|
{
|
|
@@ -46,7 +47,7 @@ var TextArea = ({
|
|
|
46
47
|
inputWrapper: "group-data-[focus=true]:border-focus"
|
|
47
48
|
},
|
|
48
49
|
"data-testid": testId,
|
|
49
|
-
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
50
|
+
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC4RM2JSDcjs.FieldValidationError_default, { error }),
|
|
50
51
|
isDisabled,
|
|
51
52
|
isRequired: required,
|
|
52
53
|
isInvalid: invalid,
|
|
@@ -78,4 +79,4 @@ var TextArea_default2 = TextArea_default;
|
|
|
78
79
|
|
|
79
80
|
|
|
80
81
|
exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
|
|
81
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-4M6F2O2K.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4M6F2O2K.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACXA,0CAAyC;AAEzC,oDAAmB;AAmFgB,+CAAA;AAxDnC,IAAM,SAAA,EAAW,CAAC;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,IAAA;AAAA,EACA,YAAA,EAAc,GAAA;AAAA,EACd,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAAqB;AACnB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,uBACE,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC;AAAA,QACP,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,MAAA,EAAQ,EAAA,EAAI,IAAI;AAAA,MACnE,CAAA,EAAA,GAAM;AArDZ,QAAA,IAAA,EAAA;AA8EQ,QAAA,MAAM,aAAA,EAAA,CAAe,GAAA,EAAA,MAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,KAAA,CAAO,QAAA,CAAA,CAAA,EAAA,GAAP,KAAA,EAAA,GAAA,EAAqB,EAAA;AAE1C,QAAA,uBACE,6BAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,YACvB,UAAA,EAAY;AAAA,cACV,YAAA,EAAc;AAAA,YAChB,CAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAc,MAAA,mBAAS,6BAAA,8CAAC,EAAA,EAAqB,MAAA,CAAc,CAAA;AAAA,YAC3D,UAAA;AAAA,YACA,UAAA,EAAY,QAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,KAAA,EACE,UAAA,mBACE,8BAAA,oBAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAGJ,cAAA,EAAe,SAAA;AAAA,YACf,WAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA,EAAO,YAAA;AAAA,YACP,QAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA,EAAQ,UAAA;AAAA,YAEP;AAAA,UAAA;AAAA,QACH,CAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;AD7Cf;AACA;AEpEA,IAAOA,kBAAAA,EAAQ,gBAAA;AFsEf;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4M6F2O2K.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Textarea as NextTextArea } from '@nextui-org/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } 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 /** 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 [NextUI TextArea](https://nextui.org/docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\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 showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Ensures the textarea always has a defined string value to prevent uncontrolled to\n * controlled component warnings:\n *\n * 1. Warning Prevention:\n * - Sets default value to '' in field destructuring\n * - Guarantees the value prop is never undefined/null\n * - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n *\n * 2. Value Handling:\n * - Converts undefined/null to empty string\n * - Converts non-string values to strings\n * - Maintains existing string values\n *\n * Examples:\n * - undefined → \"\" (prevents uncontrolled warning)\n * - null → \"\" (prevents uncontrolled warning)\n * - \"hello\" → \"hello\" (maintains string value)\n * - 123 → \"123\" (converts to string)\n *\n * Without this handling, the textarea could switch between controlled/uncontrolled\n * states when the form value changes from undefined to defined, causing React warnings\n * and potential rendering issues.\n */\n const displayValue = value?.toString() ?? '';\n\n return (\n <NextTextArea\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isRequired={required}\n isInvalid={invalid}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n placeholder={placeholder}\n name={name}\n value={displayValue}\n onChange={onChange}\n onBlur={onBlur}\n ref={ref}\n variant=\"bordered\"\n >\n {children}\n </NextTextArea>\n );\n }}\n />\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"]}
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-
|
|
2
|
+
Controller_default
|
|
3
|
+
} from "./chunk-4EJS5FXY.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldCopyTestIdButton_default
|
|
6
6
|
} from "./chunk-2CRY7VDQ.js";
|
|
7
7
|
import {
|
|
8
8
|
FieldValidationError_default
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-VX76MJAI.js";
|
|
10
10
|
import {
|
|
11
11
|
useFormContext
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-MRXNKY72.js";
|
|
13
13
|
import {
|
|
14
14
|
slugify
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-IEF2GJ22.js";
|
|
16
|
+
import {
|
|
17
|
+
__spreadProps,
|
|
18
|
+
__spreadValues
|
|
19
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
16
20
|
|
|
17
21
|
// src/CheckboxGroup/CheckboxGroup.tsx
|
|
18
22
|
import {
|
|
@@ -61,7 +65,7 @@ var CheckboxGroup = ({
|
|
|
61
65
|
label: classNames.label
|
|
62
66
|
};
|
|
63
67
|
return /* @__PURE__ */ jsx(
|
|
64
|
-
|
|
68
|
+
Controller_default,
|
|
65
69
|
{
|
|
66
70
|
control,
|
|
67
71
|
name,
|
|
@@ -87,7 +91,7 @@ var CheckboxGroup = ({
|
|
|
87
91
|
const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
|
|
88
92
|
return /* @__PURE__ */ jsx(
|
|
89
93
|
NextCheckboxGroup,
|
|
90
|
-
{
|
|
94
|
+
__spreadProps(__spreadValues({
|
|
91
95
|
name,
|
|
92
96
|
classNames: itemGroupClassName,
|
|
93
97
|
"data-testid": testId,
|
|
@@ -108,25 +112,25 @@ var CheckboxGroup = ({
|
|
|
108
112
|
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
109
113
|
] }),
|
|
110
114
|
onBlur,
|
|
111
|
-
ref
|
|
112
|
-
|
|
113
|
-
children: options
|
|
115
|
+
ref
|
|
116
|
+
}, checkboxGroupProps), {
|
|
117
|
+
children: options == null ? void 0 : options.map((option) => {
|
|
114
118
|
return /* @__PURE__ */ jsx(
|
|
115
119
|
Checkbox,
|
|
116
120
|
{
|
|
117
121
|
"data-invalid": invalid,
|
|
118
122
|
classNames: itemClassName,
|
|
119
123
|
isDisabled: disabled || option.disabled,
|
|
120
|
-
value: option
|
|
124
|
+
value: option == null ? void 0 : option.value,
|
|
121
125
|
"data-testid": slugify(
|
|
122
|
-
`${testId}_option_${option
|
|
126
|
+
`${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
|
|
123
127
|
),
|
|
124
|
-
children: option
|
|
128
|
+
children: option == null ? void 0 : option.label
|
|
125
129
|
},
|
|
126
130
|
`index_${option.value}`
|
|
127
131
|
);
|
|
128
132
|
})
|
|
129
|
-
}
|
|
133
|
+
})
|
|
130
134
|
);
|
|
131
135
|
}
|
|
132
136
|
}
|
|
@@ -141,4 +145,4 @@ export {
|
|
|
141
145
|
CheckboxGroup_default,
|
|
142
146
|
CheckboxGroup_default2
|
|
143
147
|
};
|
|
144
|
-
//# sourceMappingURL=chunk-
|
|
148
|
+
//# sourceMappingURL=chunk-7HK64PN5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport {\n Checkbox,\n CheckboxGroup as NextCheckboxGroup,\n} from '@nextui-org/checkbox';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n errorMessage: 'text-tiny',\n itemBase: '',\n itemIcon: '',\n itemLabel: 'text-sm',\n itemWrapper: '',\n // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n /** disables the option */\n disabled?: boolean;\n /** HTML data-testid attribute of the option */\n testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n className?: ClassName;\n /** label displayed above the Checkboxes */\n label?: React.ReactNode;\n /** Name the Field is registered on the form. */\n name: string;\n /** Checkboxes that should be displayed. */\n options: CheckboxGroupOption[];\n /** sets all buttons disabled */\n disabled?: boolean;\n /** id for internal testing. */\n testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [NextUI CheckboxGroup](https://nextui.org/docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n className = undefined,\n label = undefined,\n options,\n disabled = false,\n name,\n testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = checkboxGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassName = {\n base: classNames.itemBase,\n wrapper: classNames.itemWrapper,\n icon: classNames.itemIcon,\n label: classNames.itemLabel,\n };\n const itemGroupClassName = {\n base: classNames.base,\n wrapper: classNames.wrapper,\n label: classNames.label,\n };\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({ field: { onChange, value = [], ref, onBlur } }) => {\n /**\n * Handles the checkbox group value changes based on the number of options:\n * 1. For single checkbox (options.length === 1):\n * - Converts undefined/empty array to [] for consistent controlled behavior\n * - Extracts single value from array for onChange\n *\n * Example: undefined → []\n * [value] → value\n *\n * 2. For multiple checkboxes:\n * - Uses raw value array with fallback to empty array\n * - Passes through onChange directly\n *\n * Example: undefined → []\n * ['value1', 'value2'] → ['value1', 'value2']\n */\n const getCheckboxValue = (inputValue: unknown): string[] => {\n if (Array.isArray(inputValue)) {\n return inputValue;\n }\n if (inputValue) {\n return [inputValue as string];\n }\n return [];\n };\n\n const singleCheckboxProps = {\n value: getCheckboxValue(value),\n onChange: (newValue: string[]) => onChange(newValue && newValue[0]),\n };\n\n const multipleCheckboxProps = {\n onChange,\n value: getCheckboxValue(value),\n };\n\n const checkboxGroupProps =\n options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n return (\n <NextCheckboxGroup\n name={name}\n classNames={itemGroupClassName}\n data-testid={testId}\n // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n errorMessage={\n error && (\n <FieldValidationError\n error={error}\n className={classNames.errorMessage}\n />\n )\n }\n isDisabled={disabled}\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 && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n onBlur={onBlur}\n ref={ref}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...checkboxGroupProps}\n >\n {options?.map((option) => {\n return (\n <Checkbox\n data-invalid={invalid}\n classNames={itemClassName}\n key={`index_${option.value}`}\n isDisabled={disabled || option.disabled}\n value={option?.value}\n data-testid={slugify(\n `${testId}_option_${option?.testId || option?.value}`,\n )}\n >\n {option?.label}\n </Checkbox>\n );\n })}\n </NextCheckboxGroup>\n );\n }}\n />\n );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport {\n Checkbox,\n CheckboxGroup as NextCheckboxGroup,\n} from '@nextui-org/checkbox';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n errorMessage: 'text-tiny',\n itemBase: '',\n itemIcon: '',\n itemLabel: 'text-sm',\n itemWrapper: '',\n // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n /** disables the option */\n disabled?: boolean;\n /** HTML data-testid attribute of the option */\n testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n className?: ClassName;\n /** label displayed above the Checkboxes */\n label?: React.ReactNode;\n /** Name the Field is registered on the form. */\n name: string;\n /** Checkboxes that should be displayed. */\n options: CheckboxGroupOption[];\n /** sets all buttons disabled */\n disabled?: boolean;\n /** id for internal testing. */\n testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [NextUI CheckboxGroup](https://nextui.org/docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n className = undefined,\n label = undefined,\n options,\n disabled = false,\n name,\n testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = checkboxGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassName = {\n base: classNames.itemBase,\n wrapper: classNames.itemWrapper,\n icon: classNames.itemIcon,\n label: classNames.itemLabel,\n };\n const itemGroupClassName = {\n base: classNames.base,\n wrapper: classNames.wrapper,\n label: classNames.label,\n };\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({ field: { onChange, value = [], ref, onBlur } }) => {\n /**\n * Handles the checkbox group value changes based on the number of options:\n * 1. For single checkbox (options.length === 1):\n * - Converts undefined/empty array to [] for consistent controlled behavior\n * - Extracts single value from array for onChange\n *\n * Example: undefined → []\n * [value] → value\n *\n * 2. For multiple checkboxes:\n * - Uses raw value array with fallback to empty array\n * - Passes through onChange directly\n *\n * Example: undefined → []\n * ['value1', 'value2'] → ['value1', 'value2']\n */\n const getCheckboxValue = (inputValue: unknown): string[] => {\n if (Array.isArray(inputValue)) {\n return inputValue;\n }\n if (inputValue) {\n return [inputValue as string];\n }\n return [];\n };\n\n const singleCheckboxProps = {\n value: getCheckboxValue(value),\n onChange: (newValue: string[]) => onChange(newValue && newValue[0]),\n };\n\n const multipleCheckboxProps = {\n onChange,\n value: getCheckboxValue(value),\n };\n\n const checkboxGroupProps =\n options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n return (\n <NextCheckboxGroup\n name={name}\n classNames={itemGroupClassName}\n data-testid={testId}\n // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n errorMessage={\n error && (\n <FieldValidationError\n error={error}\n className={classNames.errorMessage}\n />\n )\n }\n isDisabled={disabled}\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 && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n onBlur={onBlur}\n ref={ref}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...checkboxGroupProps}\n >\n {options?.map((option) => {\n return (\n <Checkbox\n data-invalid={invalid}\n classNames={itemClassName}\n key={`index_${option.value}`}\n isDisabled={disabled || option.disabled}\n value={option?.value}\n data-testid={slugify(\n `${testId}_option_${option?.testId || option?.value}`,\n )}\n >\n {option?.label}\n </Checkbox>\n );\n })}\n </NextCheckboxGroup>\n );\n }}\n />\n );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"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","names":["CheckboxGroup_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk4AXNPSXGcjs = require('./chunk-4AXNPSXG.cjs');
|
|
4
4
|
|
|
5
5
|
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
6
6
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -25,7 +25,7 @@ var FieldValidationError = ({
|
|
|
25
25
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
26
26
|
"ul",
|
|
27
27
|
{
|
|
28
|
-
"data-testid":
|
|
28
|
+
"data-testid": _chunk4AXNPSXGcjs.slugify.call(void 0, testId || errorStrings.join()),
|
|
29
29
|
"aria-label": ariaString,
|
|
30
30
|
className,
|
|
31
31
|
children: errorStrings.map((errorString, i) => (
|
|
@@ -44,4 +44,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
|
|
47
|
-
//# sourceMappingURL=chunk-
|
|
47
|
+
//# sourceMappingURL=chunk-C4RM2JSD.cjs.map
|