@fuf-stack/uniform 1.5.1 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Checkboxes/index.cjs +5 -5
- package/dist/Checkboxes/index.js +4 -4
- package/dist/FieldArray/index.cjs +5 -5
- package/dist/FieldArray/index.js +4 -4
- package/dist/Form/index.cjs +5 -5
- package/dist/Form/index.js +4 -4
- package/dist/Input/index.cjs +5 -5
- package/dist/Input/index.js +4 -4
- package/dist/RadioBoxes/index.cjs +5 -5
- package/dist/RadioBoxes/index.js +4 -4
- package/dist/RadioTabs/index.cjs +5 -5
- package/dist/RadioTabs/index.js +4 -4
- package/dist/Radios/index.cjs +5 -5
- package/dist/Radios/index.js +4 -4
- package/dist/Select/index.cjs +5 -5
- package/dist/Select/index.js +4 -4
- package/dist/SubmitButton/index.cjs +5 -5
- package/dist/SubmitButton/index.js +4 -4
- package/dist/Switch/index.cjs +5 -5
- package/dist/Switch/index.js +4 -4
- package/dist/TextArea/index.cjs +5 -5
- package/dist/TextArea/index.js +4 -4
- package/dist/{chunk-74NPRJVH.js → chunk-2TVCFRLE.js} +4 -4
- package/dist/{chunk-74NPRJVH.js.map → chunk-2TVCFRLE.js.map} +1 -1
- package/dist/{chunk-62BVHALF.js → chunk-33JULJXP.js} +13 -13
- package/dist/{chunk-62BVHALF.js.map → chunk-33JULJXP.js.map} +1 -1
- package/dist/{chunk-4MMOSRT3.cjs → chunk-3Z3F4LTX.cjs} +7 -7
- package/dist/{chunk-4MMOSRT3.cjs.map → chunk-3Z3F4LTX.cjs.map} +1 -1
- package/dist/{chunk-ZQ64MG7T.js → chunk-4TOWIBVX.js} +4 -4
- package/dist/{chunk-ZQ64MG7T.js.map → chunk-4TOWIBVX.js.map} +1 -1
- package/dist/{chunk-P6HJOG7D.cjs → chunk-4WYC2RBE.cjs} +7 -3
- package/dist/chunk-4WYC2RBE.cjs.map +1 -0
- package/dist/{chunk-2QLCCB3L.js → chunk-57GTLKQC.js} +4 -4
- package/dist/{chunk-2QLCCB3L.js.map → chunk-57GTLKQC.js.map} +1 -1
- package/dist/{chunk-Q2BOMFJ5.js → chunk-7KLFK2IT.js} +7 -3
- package/dist/{chunk-Q2BOMFJ5.js.map → chunk-7KLFK2IT.js.map} +1 -1
- package/dist/{chunk-J5FFM7WG.cjs → chunk-BGVM2RIC.cjs} +81 -6
- package/dist/chunk-BGVM2RIC.cjs.map +1 -0
- package/dist/{chunk-GVMEDVT5.cjs → chunk-BQLB74OT.cjs} +4 -4
- package/dist/{chunk-GVMEDVT5.cjs.map → chunk-BQLB74OT.cjs.map} +1 -1
- package/dist/{chunk-FLK6OPFY.cjs → chunk-BZ5OMN4Y.cjs} +3 -3
- package/dist/{chunk-FLK6OPFY.cjs.map → chunk-BZ5OMN4Y.cjs.map} +1 -1
- package/dist/{chunk-COLAXULB.js → chunk-CG7LKC5L.js} +6 -6
- package/dist/{chunk-COLAXULB.js.map → chunk-CG7LKC5L.js.map} +1 -1
- package/dist/{chunk-HSKFVCTS.js → chunk-CICN5KXP.js} +3 -3
- package/dist/{chunk-EO4A7QGM.cjs → chunk-F6H3CFFX.cjs} +6 -6
- package/dist/{chunk-EO4A7QGM.cjs.map → chunk-F6H3CFFX.cjs.map} +1 -1
- package/dist/{chunk-RW35BB4P.js → chunk-FUJZS2ZW.js} +2 -2
- package/dist/{chunk-7NWHDCME.cjs → chunk-IOFHIMRR.cjs} +14 -14
- package/dist/{chunk-7NWHDCME.cjs.map → chunk-IOFHIMRR.cjs.map} +1 -1
- package/dist/{chunk-KBUECB4B.cjs → chunk-J2EEMMKC.cjs} +3 -3
- package/dist/{chunk-KBUECB4B.cjs.map → chunk-J2EEMMKC.cjs.map} +1 -1
- package/dist/{chunk-6IU7IYYB.js → chunk-MODD3TFE.js} +2 -2
- package/dist/{chunk-TFMVYQGN.cjs → chunk-NCYGAFR2.cjs} +5 -5
- package/dist/{chunk-TFMVYQGN.cjs.map → chunk-NCYGAFR2.cjs.map} +1 -1
- package/dist/{chunk-65BN4MRG.cjs → chunk-NURK44RO.cjs} +7 -7
- package/dist/{chunk-65BN4MRG.cjs.map → chunk-NURK44RO.cjs.map} +1 -1
- package/dist/{chunk-DHO4HSO7.cjs → chunk-PVB5EFWW.cjs} +5 -5
- package/dist/{chunk-DHO4HSO7.cjs.map → chunk-PVB5EFWW.cjs.map} +1 -1
- package/dist/{chunk-JLJB4A4K.js → chunk-QJETOENA.js} +3 -3
- package/dist/{chunk-SLTUNYTD.js → chunk-RROVF7SO.js} +4 -4
- package/dist/{chunk-SLTUNYTD.js.map → chunk-RROVF7SO.js.map} +1 -1
- package/dist/{chunk-TVMCTUQ4.js → chunk-U57PIYJR.js} +3 -3
- package/dist/{chunk-TVMCTUQ4.js.map → chunk-U57PIYJR.js.map} +1 -1
- package/dist/{chunk-4GBNXNCZ.js → chunk-UVCXMSCC.js} +114 -97
- package/dist/chunk-UVCXMSCC.js.map +1 -0
- package/dist/{chunk-RTFM4VRY.cjs → chunk-WPBRWZ6G.cjs} +5 -5
- package/dist/{chunk-RTFM4VRY.cjs.map → chunk-WPBRWZ6G.cjs.map} +1 -1
- package/dist/{chunk-CFH4VPJ4.js → chunk-XRV3STYH.js} +83 -8
- package/dist/chunk-XRV3STYH.js.map +1 -0
- package/dist/{chunk-EAJFV3AD.cjs → chunk-Y4TP2U6D.cjs} +5 -5
- package/dist/{chunk-EAJFV3AD.cjs.map → chunk-Y4TP2U6D.cjs.map} +1 -1
- package/dist/{chunk-3YDAYNNB.cjs → chunk-ZFOAPZDA.cjs} +112 -95
- package/dist/chunk-ZFOAPZDA.cjs.map +1 -0
- package/dist/hooks/index.cjs +4 -4
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +69 -5
- package/dist/hooks/index.d.ts +69 -5
- package/dist/hooks/index.js +7 -7
- package/dist/hooks/useInputValueDebounce/index.cjs +3 -3
- package/dist/hooks/useInputValueDebounce/index.js +2 -2
- package/dist/hooks/useInputValueTransform/index.cjs +2 -2
- package/dist/hooks/useInputValueTransform/index.js +1 -1
- package/dist/index.cjs +15 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +18 -18
- package/package.json +2 -2
- package/dist/chunk-3YDAYNNB.cjs.map +0 -1
- package/dist/chunk-4GBNXNCZ.js.map +0 -1
- package/dist/chunk-CFH4VPJ4.js.map +0 -1
- package/dist/chunk-J5FFM7WG.cjs.map +0 -1
- package/dist/chunk-P6HJOG7D.cjs.map +0 -1
- /package/dist/{chunk-HSKFVCTS.js.map → chunk-CICN5KXP.js.map} +0 -0
- /package/dist/{chunk-RW35BB4P.js.map → chunk-FUJZS2ZW.js.map} +0 -0
- /package/dist/{chunk-6IU7IYYB.js.map → chunk-MODD3TFE.js.map} +0 -0
- /package/dist/{chunk-JLJB4A4K.js.map → chunk-QJETOENA.js.map} +0 -0
|
@@ -2,10 +2,9 @@ import {
|
|
|
2
2
|
Grid_default
|
|
3
3
|
} from "./chunk-B62HKKMS.js";
|
|
4
4
|
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} from "./chunk-CFH4VPJ4.js";
|
|
5
|
+
useUniformField,
|
|
6
|
+
useUniformFieldArray
|
|
7
|
+
} from "./chunk-XRV3STYH.js";
|
|
9
8
|
import {
|
|
10
9
|
FieldValidationError_default
|
|
11
10
|
} from "./chunk-ELYGQTXB.js";
|
|
@@ -19,8 +18,6 @@ import {
|
|
|
19
18
|
} from "./chunk-K2V4ULA2.js";
|
|
20
19
|
|
|
21
20
|
// src/FieldArray/FieldArray.tsx
|
|
22
|
-
import { useEffect, useRef } from "react";
|
|
23
|
-
import { useReducedMotion as useReducedMotion2 } from "@fuf-stack/pixel-motion";
|
|
24
21
|
import { cn as cn8, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
25
22
|
|
|
26
23
|
// src/FieldArray/subcomponents/ElementAppendButton.tsx
|
|
@@ -56,7 +53,7 @@ var ElementAppendButton_default = ElementAppendButton;
|
|
|
56
53
|
import { useState } from "react";
|
|
57
54
|
import { useSortable as useSortable2 } from "@dnd-kit/sortable";
|
|
58
55
|
import { CSS } from "@dnd-kit/utilities";
|
|
59
|
-
import { AnimatePresence, motion } from "@fuf-stack/pixel-motion";
|
|
56
|
+
import { AnimatePresence, motion as motion2 } from "@fuf-stack/pixel-motion";
|
|
60
57
|
import { cn as cn5 } from "@fuf-stack/pixel-utils";
|
|
61
58
|
|
|
62
59
|
// src/FieldArray/subcomponents/ElementActionsMenu.tsx
|
|
@@ -132,15 +129,17 @@ var ElementActionsMenu_default = ElementActionsMenu;
|
|
|
132
129
|
|
|
133
130
|
// src/FieldArray/subcomponents/ElementRemoveButton.tsx
|
|
134
131
|
import { FaTimes as FaTimes2 } from "react-icons/fa";
|
|
132
|
+
import { motion } from "@fuf-stack/pixel-motion";
|
|
135
133
|
import { cn as cn3 } from "@fuf-stack/pixel-utils";
|
|
136
134
|
import { Button as Button2 } from "@fuf-stack/pixels";
|
|
137
135
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
138
136
|
var ElementRemoveButton = ({
|
|
139
137
|
className = void 0,
|
|
138
|
+
disableAnimation = false,
|
|
140
139
|
onClick,
|
|
141
140
|
testId = void 0
|
|
142
141
|
}) => {
|
|
143
|
-
|
|
142
|
+
const button = /* @__PURE__ */ jsx3(
|
|
144
143
|
Button2,
|
|
145
144
|
{
|
|
146
145
|
ariaLabel: "remove element",
|
|
@@ -153,6 +152,20 @@ var ElementRemoveButton = ({
|
|
|
153
152
|
variant: "light"
|
|
154
153
|
}
|
|
155
154
|
);
|
|
155
|
+
if (disableAnimation) {
|
|
156
|
+
return button;
|
|
157
|
+
}
|
|
158
|
+
return /* @__PURE__ */ jsx3(
|
|
159
|
+
motion.div,
|
|
160
|
+
{
|
|
161
|
+
animate: { opacity: 1, width: "auto" },
|
|
162
|
+
className: "flex",
|
|
163
|
+
exit: { opacity: 0, width: 0 },
|
|
164
|
+
initial: { opacity: 0, width: 0 },
|
|
165
|
+
transition: { duration: 0.2 },
|
|
166
|
+
children: button
|
|
167
|
+
}
|
|
168
|
+
);
|
|
156
169
|
};
|
|
157
170
|
var ElementRemoveButton_default = ElementRemoveButton;
|
|
158
171
|
|
|
@@ -231,7 +244,7 @@ var FieldArrayElement = ({
|
|
|
231
244
|
methods.remove();
|
|
232
245
|
},
|
|
233
246
|
children: isVisible ? /* @__PURE__ */ jsx5(
|
|
234
|
-
|
|
247
|
+
motion2.li,
|
|
235
248
|
{
|
|
236
249
|
ref: setNodeRef,
|
|
237
250
|
animate: disableAnimation ? void 0 : "visible",
|
|
@@ -277,10 +290,11 @@ var FieldArrayElement = ({
|
|
|
277
290
|
}
|
|
278
291
|
})
|
|
279
292
|
}
|
|
280
|
-
) : /* @__PURE__ */ jsx5(Fragment, { children: lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx5(
|
|
293
|
+
) : /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(AnimatePresence, { initial: false, children: lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx5(
|
|
281
294
|
ElementRemoveButton_default,
|
|
282
295
|
{
|
|
283
296
|
className: className.removeButton,
|
|
297
|
+
disableAnimation,
|
|
284
298
|
testId: `${testId}_remove_button`,
|
|
285
299
|
onClick: () => {
|
|
286
300
|
if (disableAnimation) {
|
|
@@ -289,8 +303,9 @@ var FieldArrayElement = ({
|
|
|
289
303
|
setIsVisible(false);
|
|
290
304
|
}
|
|
291
305
|
}
|
|
292
|
-
}
|
|
293
|
-
|
|
306
|
+
},
|
|
307
|
+
"remove-button"
|
|
308
|
+
) }) })
|
|
294
309
|
] })
|
|
295
310
|
},
|
|
296
311
|
id
|
|
@@ -336,7 +351,7 @@ var FieldArrayLabel_default = FieldArrayLabel;
|
|
|
336
351
|
// src/FieldArray/subcomponents/FieldArrayValidationError.tsx
|
|
337
352
|
import {
|
|
338
353
|
AnimatePresence as AnimatePresence2,
|
|
339
|
-
motion as
|
|
354
|
+
motion as motion3,
|
|
340
355
|
useReducedMotion
|
|
341
356
|
} from "@fuf-stack/pixel-motion";
|
|
342
357
|
import { cn as cn7 } from "@fuf-stack/pixel-utils";
|
|
@@ -358,7 +373,7 @@ var FieldArrayValidationError = ({
|
|
|
358
373
|
const disableAnimation = useReducedMotion();
|
|
359
374
|
const hasErrors = invalid && (error == null ? void 0 : error._errors);
|
|
360
375
|
return /* @__PURE__ */ jsx7(AnimatePresence2, { initial: !disableAnimation, children: hasErrors ? /* @__PURE__ */ jsx7(
|
|
361
|
-
|
|
376
|
+
motion3.div,
|
|
362
377
|
{
|
|
363
378
|
exit: disableAnimation ? void 0 : { opacity: 0, height: 0 },
|
|
364
379
|
initial: disableAnimation ? false : { height: 0, opacity: 0 },
|
|
@@ -370,8 +385,8 @@ var FieldArrayValidationError = ({
|
|
|
370
385
|
__spreadProps(__spreadValues({}, getHelperWrapperProps()), {
|
|
371
386
|
className: cn7(
|
|
372
387
|
(_a = getHelperWrapperProps()) == null ? void 0 : _a.className,
|
|
373
|
-
// force helper to be visible (for some reason it's hidden by default) and add padding
|
|
374
|
-
"block
|
|
388
|
+
// force helper to be visible (for some reason it's hidden by default) and add padding
|
|
389
|
+
"block px-3 py-2"
|
|
375
390
|
),
|
|
376
391
|
children: /* @__PURE__ */ jsx7("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx7(
|
|
377
392
|
FieldValidationError_default,
|
|
@@ -389,6 +404,7 @@ var FieldArrayValidationError = ({
|
|
|
389
404
|
var FieldArrayValidationError_default = FieldArrayValidationError;
|
|
390
405
|
|
|
391
406
|
// src/FieldArray/subcomponents/SortContext.tsx
|
|
407
|
+
import { useFormContext } from "react-hook-form";
|
|
392
408
|
import {
|
|
393
409
|
closestCenter,
|
|
394
410
|
DndContext,
|
|
@@ -408,10 +424,12 @@ import {
|
|
|
408
424
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
409
425
|
var SortContext = ({
|
|
410
426
|
children,
|
|
411
|
-
sortable,
|
|
412
427
|
fields,
|
|
413
|
-
move
|
|
428
|
+
move,
|
|
429
|
+
name,
|
|
430
|
+
sortable
|
|
414
431
|
}) => {
|
|
432
|
+
const { trigger } = useFormContext();
|
|
415
433
|
const sensors = useSensors(
|
|
416
434
|
useSensor(PointerSensor),
|
|
417
435
|
useSensor(KeyboardSensor)
|
|
@@ -429,6 +447,7 @@ var SortContext = ({
|
|
|
429
447
|
return field.id === (over == null ? void 0 : over.id);
|
|
430
448
|
});
|
|
431
449
|
move(oldIndex, newIndex);
|
|
450
|
+
trigger(name);
|
|
432
451
|
}
|
|
433
452
|
};
|
|
434
453
|
return /* @__PURE__ */ jsx8(
|
|
@@ -469,12 +488,14 @@ var fieldArrayVariants = tv({
|
|
|
469
488
|
// base styles
|
|
470
489
|
"flex items-center justify-center text-default-600",
|
|
471
490
|
// fixed height/no round corners/center align
|
|
472
|
-
"h-full rounded-none"
|
|
491
|
+
"h-full rounded-none",
|
|
492
|
+
// focus styles - inset ring
|
|
493
|
+
"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus"
|
|
473
494
|
],
|
|
474
495
|
/** class for the append button */
|
|
475
496
|
appendButton: [
|
|
476
497
|
// base styles
|
|
477
|
-
"w-full rounded-b-small rounded-t-none",
|
|
498
|
+
"w-full justify-start rounded-b-small rounded-t-none font-semibold",
|
|
478
499
|
// match label height (p-3 = 12px vertical padding + text-base line height)
|
|
479
500
|
"!h-[48px] !min-h-0",
|
|
480
501
|
// focus styles - inset ring with rounded bottom corners to match container
|
|
@@ -567,31 +588,23 @@ var FieldArray = (_a) => {
|
|
|
567
588
|
"name",
|
|
568
589
|
"sortable"
|
|
569
590
|
]);
|
|
570
|
-
const {
|
|
591
|
+
const {
|
|
592
|
+
fields,
|
|
593
|
+
append,
|
|
594
|
+
remove,
|
|
595
|
+
insert,
|
|
596
|
+
move,
|
|
597
|
+
disableAnimation,
|
|
598
|
+
elementInitialValue,
|
|
599
|
+
getValues,
|
|
600
|
+
testId
|
|
601
|
+
} = useUniformFieldArray(__spreadValues({
|
|
571
602
|
name,
|
|
603
|
+
flat,
|
|
604
|
+
elementInitialValue: _elementInitialValue,
|
|
605
|
+
lastElementNotRemovable,
|
|
572
606
|
showInvalidWhen: "immediate"
|
|
573
607
|
}, uniformFieldProps));
|
|
574
|
-
const { fields, append, remove, insert, move } = useFieldArray({
|
|
575
|
-
control,
|
|
576
|
-
name
|
|
577
|
-
});
|
|
578
|
-
const { trigger, setValue } = useFormContext();
|
|
579
|
-
useEffect(() => {
|
|
580
|
-
setTimeout(() => {
|
|
581
|
-
trigger(name);
|
|
582
|
-
}, 200);
|
|
583
|
-
}, [fields.length]);
|
|
584
|
-
const elementInitialValue = flat ? { [flatArrayKey]: _elementInitialValue != null ? _elementInitialValue : null } : _elementInitialValue != null ? _elementInitialValue : {};
|
|
585
|
-
if (lastElementNotRemovable && fields.length === 0) {
|
|
586
|
-
setValue(name, [elementInitialValue]);
|
|
587
|
-
}
|
|
588
|
-
const prefersReducedMotion = useReducedMotion2();
|
|
589
|
-
const disableAnimationRef = useRef(true);
|
|
590
|
-
useEffect(() => {
|
|
591
|
-
if (!prefersReducedMotion) {
|
|
592
|
-
disableAnimationRef.current = false;
|
|
593
|
-
}
|
|
594
|
-
}, [prefersReducedMotion]);
|
|
595
608
|
const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });
|
|
596
609
|
const className = variantsToClassNames(variants, _className, "base");
|
|
597
610
|
return /* @__PURE__ */ jsxs3("div", { className: className.base, children: [
|
|
@@ -605,70 +618,74 @@ var FieldArray = (_a) => {
|
|
|
605
618
|
),
|
|
606
619
|
fields.length ? (
|
|
607
620
|
/* list wrapper */
|
|
608
|
-
/* @__PURE__ */ jsx9("div", { className: cn8(className.listWrapper), children: /* @__PURE__ */ jsx9(
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
const
|
|
617
|
-
const
|
|
618
|
-
const
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
621
|
+
/* @__PURE__ */ jsx9("div", { className: cn8(className.listWrapper), children: /* @__PURE__ */ jsx9(
|
|
622
|
+
SortContext_default,
|
|
623
|
+
{
|
|
624
|
+
fields,
|
|
625
|
+
move,
|
|
626
|
+
name,
|
|
627
|
+
sortable,
|
|
628
|
+
children: /* @__PURE__ */ jsx9("ul", { className: className.list, "data-testid": testId, children: fields.map((field, index) => {
|
|
629
|
+
const elementName = flat ? `${name}.${index}.${flatArrayKey}` : `${name}.${index}`;
|
|
630
|
+
const elementTestId = `${testId}_${index}`;
|
|
631
|
+
const elementMethods = {
|
|
632
|
+
append: () => {
|
|
633
|
+
append(elementInitialValue);
|
|
634
|
+
},
|
|
635
|
+
duplicate: () => {
|
|
636
|
+
const values = getValues(name);
|
|
637
|
+
const currentValue = values[index];
|
|
638
|
+
const nextValue = flat ? { [flatArrayKey]: currentValue } : currentValue;
|
|
639
|
+
insert(index + 1, nextValue);
|
|
640
|
+
},
|
|
641
|
+
insert: () => {
|
|
642
|
+
insert(index + 1, elementInitialValue);
|
|
643
|
+
},
|
|
644
|
+
remove: () => {
|
|
645
|
+
remove(index);
|
|
646
|
+
}
|
|
647
|
+
};
|
|
648
|
+
return /* @__PURE__ */ jsx9(
|
|
649
|
+
FieldArrayElement_default,
|
|
650
|
+
{
|
|
651
|
+
className,
|
|
652
|
+
disableAnimation,
|
|
653
|
+
duplicate,
|
|
654
|
+
elementMarginBottom,
|
|
655
|
+
fields,
|
|
656
|
+
id: field.id,
|
|
657
|
+
index,
|
|
658
|
+
insertAfter,
|
|
659
|
+
lastNotDeletable: lastElementNotRemovable,
|
|
660
|
+
methods: elementMethods,
|
|
661
|
+
sortable,
|
|
662
|
+
testId: elementTestId,
|
|
663
|
+
children: children({
|
|
664
|
+
index,
|
|
665
|
+
length: fields.length,
|
|
666
|
+
methods: elementMethods,
|
|
667
|
+
name: elementName,
|
|
668
|
+
testId: elementTestId
|
|
669
|
+
})
|
|
670
|
+
},
|
|
671
|
+
field.id
|
|
672
|
+
);
|
|
673
|
+
}) })
|
|
674
|
+
}
|
|
675
|
+
) })
|
|
654
676
|
) : null,
|
|
677
|
+
/* @__PURE__ */ jsx9(FieldArrayValidationError_default, { name }),
|
|
655
678
|
/* @__PURE__ */ jsx9(
|
|
656
679
|
ElementAppendButton_default,
|
|
657
680
|
{
|
|
658
681
|
appendButtonText,
|
|
682
|
+
className: className.appendButton,
|
|
659
683
|
testId: `${testId}_append_button`,
|
|
660
|
-
className: cn8(
|
|
661
|
-
className.appendButton,
|
|
662
|
-
// only round bottom corners if there are no errors below
|
|
663
|
-
// @ts-expect-error - error._errors exists but not typed
|
|
664
|
-
{ "rounded-none": invalid && (error == null ? void 0 : error._errors) }
|
|
665
|
-
),
|
|
666
684
|
onClick: () => {
|
|
667
685
|
append(elementInitialValue);
|
|
668
686
|
}
|
|
669
687
|
}
|
|
670
|
-
)
|
|
671
|
-
/* @__PURE__ */ jsx9(FieldArrayValidationError_default, { name })
|
|
688
|
+
)
|
|
672
689
|
] });
|
|
673
690
|
};
|
|
674
691
|
var FieldArray_default = FieldArray;
|
|
@@ -680,4 +697,4 @@ export {
|
|
|
680
697
|
FieldArray_default,
|
|
681
698
|
FieldArray_default2
|
|
682
699
|
};
|
|
683
|
-
//# sourceMappingURL=chunk-
|
|
700
|
+
//# sourceMappingURL=chunk-UVCXMSCC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/ElementAppendButton.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementActionsMenu.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/FieldArrayLabel.tsx","../src/FieldArray/subcomponents/FieldArrayValidationError.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n /** base class for the field array wrapper */\n base: [\n // base styles\n 'overflow-hidden rounded-small border border-divider bg-content1',\n // divider between items\n 'divide-y divide-divider',\n ],\n /** class for the actions menu button */\n actionsMenuButton: [\n // base styles\n 'flex items-center justify-center text-default-600',\n // fixed height/no round corners/center align\n 'h-full rounded-none',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the append button */\n appendButton: [\n // base styles\n 'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n // match label height (p-3 = 12px vertical padding + text-base line height)\n '!h-[48px] !min-h-0',\n // focus styles - inset ring with rounded bottom corners to match container\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the element fields grid */\n elementFieldsGrid: ['w-full grow p-3'],\n /** class for the label */\n label: [\n // override HeroUI label positioning and display\n 'pointer-events-auto! static! z-auto! block! w-full!',\n // reset any transforms or translations\n 'translate-x-0! translate-y-0! transform-none!',\n // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n 'rounded-t-small p-3 font-semibold text-medium',\n ],\n /** class for the list */\n list: ['overflow-hidden'],\n /** class for the list wrapper */\n listWrapper: ['overflow-hidden'],\n /** class for the list item (performs motion animations) */\n listItem: [\n // base styles\n 'group relative flex flex-row',\n // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n 'first:-mt-px',\n ],\n /** class for the list item inner */\n listItemInner: [\n // base styles\n 'flex w-full flex-row items-stretch divide-divider bg-content1',\n // x division and borders\n 'divide-x divide-solid border-b border-t border-divider',\n ],\n /** class for the remove button */\n removeButton: [\n // base styles\n 'flex items-center justify-center',\n // fixed height/no round corners\n '!h-full !min-h-0 !rounded-none px-3',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the sort drag handle */\n sortDragHandle: [\n // base styles\n 'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n // hover and dragging state\n 'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n },\n variants: {\n hasLabel: {\n false: {\n // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n actionsMenuButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n removeButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n sortDragHandle:\n 'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n },\n },\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 elementMarginBottom = undefined,\n flat = false,\n insertAfter = false,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n ...uniformFieldProps\n}: FieldArrayProps) => {\n const {\n fields,\n append,\n remove,\n insert,\n move,\n disableAnimation,\n elementInitialValue,\n getValues,\n testId,\n } = useUniformFieldArray({\n name,\n flat,\n elementInitialValue: _elementInitialValue,\n lastElementNotRemovable,\n showInvalidWhen: 'immediate',\n ...uniformFieldProps,\n });\n\n // className from slots\n const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n const className = variantsToClassNames(variants, _className, 'base');\n\n return (\n <div className={className.base}>\n {/* field array label */}\n <FieldArrayLabel\n className={className.label}\n label={uniformFieldProps.label}\n name={name}\n />\n\n {fields.length ? (\n /* list wrapper */\n <div className={cn(className.listWrapper)}>\n {/* sortable context */}\n <SortContext\n fields={fields}\n move={move}\n name={name}\n sortable={sortable}\n >\n {/* list container */}\n <ul className={className.list} data-testid={testId}>\n {/* fields / list elements */}\n {fields.map((field, index) => {\n const elementName = flat\n ? `${name}.${index}.${flatArrayKey}`\n : `${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 const currentValue = (values as unknown[])[index];\n const nextValue = flat\n ? { [flatArrayKey]: currentValue }\n : currentValue;\n insert(index + 1, nextValue);\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 className={className}\n disableAnimation={disableAnimation}\n duplicate={duplicate}\n elementMarginBottom={elementMarginBottom}\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 </ul>\n </SortContext>\n </div>\n ) : null}\n\n {/* top level field array errors */}\n <FieldArrayValidationError name={name} />\n\n {/* append elements button */}\n <ElementAppendButton\n appendButtonText={appendButtonText}\n className={className.appendButton}\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n />\n </div>\n );\n};\n\nexport default FieldArray;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementAppendButtonProps {\n /** text of the append element button */\n appendButtonText?: string;\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 ElementAppendButton = ({\n appendButtonText = 'Add Element',\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementAppendButtonProps) => {\n return (\n <Button\n disableAnimation\n className={cn(className)}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n >\n <FaPlus />\n <span>{appendButtonText}</span>\n </Button>\n );\n};\n\nexport default ElementAppendButton;\n","import type { Variants as MotionVariants } from '@fuf-stack/pixel-motion';\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useState } from 'react';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { AnimatePresence, motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport ElementActionsMenu from './ElementActionsMenu';\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 /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of wrapper grid inside the li that wraps the rendered element fields directly */\n elementFieldsGrid?: ClassValue;\n /** Class for the li (performs motion animations) */\n listItem?: ClassValue;\n /** Class for the li inner div (wraps the rendered element fields) */\n listItemInner?: ClassValue;\n /** Class for the actions menu button */\n actionsMenuButton?: ClassValue;\n /** Class for the remove element button (when menu is not used) */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** Globally disable animations for this item (used for first render or prefers-reduced-motion) */\n disableAnimation?: boolean;\n /** Bottom margin for elements (for backwards compatibility) */\n elementMarginBottom?: React.CSSProperties['marginBottom'];\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. Animations when elements are added or removed\n * improve the user experience and provide a better visual feedback.\n */\nconst FieldArrayElement = ({\n children,\n className,\n disableAnimation = false,\n duplicate = false,\n elementMarginBottom: _elementMarginBottom = undefined,\n fields,\n id,\n index: _index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\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, isDragging } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n zIndex: isDragging ? 50 : undefined,\n }\n : undefined;\n\n // Local visibility to allow exit animation before removing from RHF state\n const [isVisible, setIsVisible] = useState(true);\n\n // Motion variants for the list item\n const listItemMotionVariants: MotionVariants = {\n hidden: { opacity: 0, height: 0, marginBottom: 0 },\n visible: {\n opacity: 1,\n height: 'auto',\n transition: { duration: 0.2, ease: 'circOut' },\n // push last visible item down to overlap with append button (hide double border)\n marginBottom: '-1px',\n },\n exit: {\n opacity: 0,\n height: 0,\n marginBottom: 0,\n transition: {\n // on exit first fade out, then shrink\n opacity: { duration: 0.1, ease: 'circOut' },\n height: { delay: 0.1, duration: 0.2, ease: 'circOut' },\n },\n },\n };\n\n // Height animation handled on <motion.li> using overflow hidden\n return (\n <AnimatePresence\n mode=\"wait\"\n // remove from RHF state after exit animation\n onExitComplete={() => {\n methods.remove();\n }}\n >\n {isVisible ? (\n <motion.li\n key={id}\n ref={setNodeRef}\n animate={disableAnimation ? undefined : 'visible'}\n className={cn(className.listItem)}\n data-dragging={isDragging}\n data-testid={`${testId}_element`}\n exit={disableAnimation ? undefined : 'exit'}\n initial={disableAnimation ? false : 'hidden'}\n style={sortingStyle}\n variants={disableAnimation ? undefined : listItemMotionVariants}\n >\n <div className={cn(className.listItemInner)}>\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 in Grid component */}\n <Grid\n className={cn(className.elementFieldsGrid)}\n testId={`${testId}_element_fields_grid`}\n >\n {/* render actual fields */}\n {children}\n </Grid>\n\n {/** actions menu when duplicate or insertAfter is enabled */}\n {duplicate || insertAfter ? (\n <ElementActionsMenu\n className={className.actionsMenuButton}\n duplicate={duplicate}\n insertAfter={insertAfter}\n showRemove={!(lastNotDeletable && fields.length === 1)}\n testId={`${testId}_actions_menu`}\n methods={{\n ...methods,\n remove: () => {\n if (disableAnimation) {\n methods.remove();\n } else {\n setIsVisible(false);\n }\n },\n }}\n />\n ) : (\n <>\n {/** remove element button (when menu is not used) */}\n <AnimatePresence initial={false}>\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n key=\"remove-button\"\n className={className.removeButton}\n disableAnimation={disableAnimation}\n testId={`${testId}_remove_button`}\n onClick={() => {\n if (disableAnimation) {\n methods.remove();\n } else {\n setIsVisible(false);\n }\n }}\n />\n )}\n </AnimatePresence>\n </>\n )}\n </div>\n </motion.li>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { MenuItem } from '@fuf-stack/pixels';\nimport type { Key } from 'react';\nimport type { FieldArrayElementMethods } from './FieldArrayElement';\n\nimport { FaCopy, FaTimes } from 'react-icons/fa';\nimport { VscInsert } from 'react-icons/vsc';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Menu } from '@fuf-stack/pixels';\n\nexport interface ElementActionsMenuProps {\n /** CSS class name */\n className?: ClassValue;\n /** Whether duplicate action is available */\n duplicate?: boolean;\n /** Whether insert after action is available */\n insertAfter?: boolean;\n /** Whether to show remove button (false when last element is not deletable) */\n showRemove?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Menu component for field array element actions (remove, duplicate, insert after)\n */\nconst ElementActionsMenu = ({\n className = undefined,\n duplicate = false,\n insertAfter = false,\n showRemove = true,\n methods,\n testId = undefined,\n}: ElementActionsMenuProps) => {\n const handleAction = (key: Key) => {\n switch (key) {\n case 'remove':\n methods.remove();\n break;\n case 'duplicate':\n methods.duplicate();\n break;\n case 'insertAfter':\n methods.insert();\n break;\n default:\n break;\n }\n };\n\n // Build menu items based on available actions\n const menuItems: MenuItem[] = [];\n\n if (duplicate) {\n menuItems.push({\n key: 'duplicate',\n label: 'Duplicate',\n icon: <FaCopy />,\n });\n }\n\n if (insertAfter) {\n menuItems.push({\n key: 'insertAfter',\n label: 'Insert After',\n icon: <VscInsert />,\n });\n }\n\n if (showRemove) {\n menuItems.push({\n key: 'remove',\n className: 'text-danger',\n label: 'Remove',\n icon: <FaTimes />,\n });\n }\n\n return (\n <Menu\n ariaLabel=\"Element actions\"\n items={menuItems}\n onAction={handleAction}\n placement=\"right\"\n testId={testId}\n triggerButtonProps={{\n className: cn(className),\n disableRipple: true,\n size: 'md',\n variant: 'light',\n }}\n />\n );\n};\n\nexport default ElementActionsMenu;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** Globally disable animations (used for first render or prefers-reduced-motion) */\n disableAnimation?: boolean;\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 disableAnimation = false,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n const button = (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n\n if (disableAnimation) {\n return button;\n }\n\n return (\n <motion.div\n animate={{ opacity: 1, width: 'auto' }}\n className=\"flex\"\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n transition={{ duration: 0.2 }}\n >\n {button}\n </motion.div>\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 { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks';\n\nexport interface FieldArrayLabelProps {\n /** CSS class name */\n className?: string;\n /** Label content */\n label: ReactNode;\n /** Field name */\n name: string;\n}\n\n/**\n * Renders the label for a FieldArray component.\n *\n * This component handles displaying the array label with proper accessibility\n * attributes using the label props from useUniformField.\n */\nconst FieldArrayLabel = ({\n className = undefined,\n label: _label,\n name,\n}: FieldArrayLabelProps) => {\n const { error, getLabelProps, invalid, label } = useUniformField({\n name,\n showInvalidWhen: 'immediate',\n label: _label,\n });\n\n // when no label is provided, don't render anything\n if (!_label) {\n return null;\n }\n\n // @ts-expect-error - error._errors exists but not typed\n const hasErrors = invalid && error?._errors;\n\n return (\n <div\n {...getLabelProps()}\n aria-level={3}\n role=\"heading\"\n className={cn(getLabelProps()?.className, className, {\n // when there are no array level errors, the label should have foreground color\n 'text-foreground!': !hasErrors,\n })}\n >\n {label}\n </div>\n );\n};\n\nexport default FieldArrayLabel;\n","import {\n AnimatePresence,\n motion,\n useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldArrayValidationErrorProps {\n /** Field name */\n name: string;\n}\n\n/**\n * Renders array-level validation errors for FieldArray.\n *\n * This component handles validation errors that apply to the entire array\n * (e.g., \"Array must contain at least 3 elements\", \"Array elements are not unique\"),\n * as opposed to field-level errors which apply to individual array elements.\n *\n * The component wraps errors in the proper accessibility markup and animates\n * them in/out using Framer Motion when they appear or are resolved.\n */\nconst FieldArrayValidationError = ({\n name,\n}: FieldArrayValidationErrorProps) => {\n const {\n error,\n getErrorMessageProps,\n getHelperWrapperProps,\n invalid,\n testId,\n } = useUniformField({\n name,\n showInvalidWhen: 'immediate',\n });\n\n // disable all animation if user prefers reduced motion\n const disableAnimation = useReducedMotion();\n\n // @ts-expect-error - error._errors exists but not typed\n const hasErrors = invalid && error?._errors;\n\n return (\n <AnimatePresence initial={!disableAnimation}>\n {hasErrors ? (\n <motion.div\n key=\"field-array-errors\"\n exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2, ease: 'circOut' }}\n animate={\n disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n }\n >\n <div\n {...getHelperWrapperProps()}\n className={cn(\n getHelperWrapperProps()?.className,\n // force helper to be visible (for some reason it's hidden by default) and add padding\n 'block px-3 py-2',\n )}\n >\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n // @ts-expect-error - error._errors exists but not typed\n error={error._errors}\n testId={testId}\n />\n </div>\n </div>\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } 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 /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** name of the field array */\n name: string;\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n /** enable/disable sorting functionality */\n sortable: boolean;\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 fields,\n move,\n name,\n sortable,\n}: SortContextProps): ReactNode => {\n const { trigger } = useFormContext();\n\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 // Finally trigger validation for the array field,\n // so validation errors are updated for the new order\n trigger(name);\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"],"mappings":"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","names":["cn","useSortable","motion","cn","cn","jsx","FaTimes","cn","Button","jsx","cn","jsx","cn","jsx","jsxs","useSortable","motion","cn","cn","jsx","cn","AnimatePresence","motion","cn","jsx","AnimatePresence","motion","cn","jsx","jsx","jsxs","cn","FieldArray_default"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkBGVM2RICcjs = require('./chunk-BGVM2RIC.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkBZ5OMN4Ycjs = require('./chunk-BZ5OMN4Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
@@ -52,8 +52,8 @@ var TextArea = (_a) => {
|
|
|
52
52
|
label,
|
|
53
53
|
required,
|
|
54
54
|
testId
|
|
55
|
-
} =
|
|
56
|
-
const { onChange, onBlur, value } =
|
|
55
|
+
} = _chunkBGVM2RICcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, { name }, uniformFieldProps));
|
|
56
|
+
const { onChange, onBlur, value } = _chunkBZ5OMN4Ycjs.useInputValueDebounce.call(void 0, {
|
|
57
57
|
debounceDelay,
|
|
58
58
|
onBlur: fieldOnBlur,
|
|
59
59
|
onChange: fieldOnChange,
|
|
@@ -100,4 +100,4 @@ var TextArea_default2 = TextArea_default;
|
|
|
100
100
|
|
|
101
101
|
|
|
102
102
|
exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
103
|
+
//# sourceMappingURL=chunk-WPBRWZ6G.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WPBRWZ6G.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACRA,sCAAyC;AAEzC,oDAAyC;AA+ErC,+CAAA;AA1EG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AA2BD,IAAM,SAAA,EAAW,CAAC,EAAA,EAAA,GAOG;AAPH,EAAA,IAAA,GAAA,EAAA,EAAA,EAChB;AAAA,IAAA,SAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,IACxB,cAAA,EAAgB,GAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAA,EAAc;AAAA,EArDhB,EAAA,EAgDkB,EAAA,EAMb,kBAAA,EAAA,yCAAA,EANa,EAMb;AAAA,IALH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,aAAA;AAAA,MACV,MAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAO,UAAA;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,+CAAA,8CAAgB,EAAE,KAAA,CAAA,EAAS,iBAAA,CAAmB,CAAA;AAGlD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,MAAM,SAAA,EAAW,gBAAA,CAAiB,CAAA;AAClC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,YAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,cAAA,EAAe,SAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA;AAAA,QAExB,aAAA,EAAe,KAAA;AAAA,QACf,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B,CAAA;AAAA,MAEC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;ADpBf;AACA;AEzFA,IAAOA,kBAAAA,EAAQ,gBAAA;AF2Ff;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WPBRWZ6G.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce, useUniformField } from '../hooks';\n\n// input variants\nexport const textAreaVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof textAreaVariants>;\ntype ClassName = TVClassName<typeof textAreaVariants>;\n\nexport interface TextAreaProps extends VariantProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\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: _className = undefined,\n debounceDelay = 300,\n name,\n placeholder = ' ',\n ...uniformFieldProps\n}: TextAreaProps) => {\n const {\n disabled,\n errorMessage,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({ name, ...uniformFieldProps });\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 // classNames from slots\n const variants = textAreaVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n return (\n <HeroTextArea\n ref={ref}\n data-testid={testId}\n errorMessage={errorMessage}\n id={testId}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label}\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 base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\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"]}
|
|
@@ -218,6 +218,7 @@ var FormContext_default = FormProvider;
|
|
|
218
218
|
|
|
219
219
|
// src/hooks/useFormContext/useFormContext.ts
|
|
220
220
|
var checkFieldIsRequired = (validation, path) => {
|
|
221
|
+
const checkPath = path[path.length - 1] === flatArrayKey ? path.slice(0, -1) : path;
|
|
221
222
|
const checkRequired = (schema) => {
|
|
222
223
|
if (schema.type === "array") {
|
|
223
224
|
if (schema.isOptional || schema.isNullable) {
|
|
@@ -227,7 +228,7 @@ var checkFieldIsRequired = (validation, path) => {
|
|
|
227
228
|
}
|
|
228
229
|
return !schema.isOptional && !schema.isNullable;
|
|
229
230
|
};
|
|
230
|
-
return validation.checkSchemaPath(checkRequired,
|
|
231
|
+
return validation.checkSchemaPath(checkRequired, checkPath);
|
|
231
232
|
};
|
|
232
233
|
var getValidationErrorsByName = (errors, name) => {
|
|
233
234
|
const keys = name.split(".").filter((k) => {
|
|
@@ -358,15 +359,19 @@ var useController = (props) => {
|
|
|
358
359
|
};
|
|
359
360
|
};
|
|
360
361
|
|
|
361
|
-
// src/hooks/
|
|
362
|
-
import {
|
|
362
|
+
// src/hooks/useUniformFieldArray/useUniformFieldArray.ts
|
|
363
|
+
import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
|
|
364
|
+
import { useFieldArray as useRHFFieldArray } from "react-hook-form";
|
|
365
|
+
import { useReducedMotion as useReducedMotion2 } from "@fuf-stack/pixel-motion";
|
|
366
|
+
|
|
367
|
+
// src/hooks/useUniformField/useUniformField.tsx
|
|
368
|
+
import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
|
|
369
|
+
import { useReducedMotion } from "@fuf-stack/pixel-motion";
|
|
363
370
|
|
|
364
371
|
// src/hooks/useInput/useInput.ts
|
|
365
372
|
import { useInput } from "@heroui/input";
|
|
366
373
|
|
|
367
374
|
// src/hooks/useUniformField/useUniformField.tsx
|
|
368
|
-
import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
|
|
369
|
-
import { useReducedMotion } from "@fuf-stack/pixel-motion";
|
|
370
375
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
371
376
|
var useDebouncedInvalid = (value, delayMs) => {
|
|
372
377
|
const [state, setState] = useState3(value);
|
|
@@ -467,14 +472,84 @@ function useUniformField(params) {
|
|
|
467
472
|
};
|
|
468
473
|
}
|
|
469
474
|
|
|
475
|
+
// src/hooks/useUniformFieldArray/useUniformFieldArray.ts
|
|
476
|
+
var useUniformFieldArray = ({
|
|
477
|
+
name,
|
|
478
|
+
flat = false,
|
|
479
|
+
elementInitialValue: _elementInitialValue = null,
|
|
480
|
+
lastElementNotRemovable = false,
|
|
481
|
+
disabled,
|
|
482
|
+
testId: explicitTestId,
|
|
483
|
+
label,
|
|
484
|
+
showInvalidWhen = "immediate"
|
|
485
|
+
}) => {
|
|
486
|
+
const uniformField = useUniformField({
|
|
487
|
+
name,
|
|
488
|
+
disabled,
|
|
489
|
+
testId: explicitTestId,
|
|
490
|
+
label,
|
|
491
|
+
showInvalidWhen
|
|
492
|
+
});
|
|
493
|
+
const { control } = uniformField;
|
|
494
|
+
const { fields, append, remove, insert, move } = useRHFFieldArray({
|
|
495
|
+
control,
|
|
496
|
+
name
|
|
497
|
+
});
|
|
498
|
+
const { trigger, setValue } = useFormContext();
|
|
499
|
+
const [disableAnimation, setDisableAnimation] = useState4(true);
|
|
500
|
+
const hasInitialized = useRef3(false);
|
|
501
|
+
useEffect3(() => {
|
|
502
|
+
if (hasInitialized.current) {
|
|
503
|
+
setTimeout(() => {
|
|
504
|
+
trigger(name);
|
|
505
|
+
}, 200);
|
|
506
|
+
}
|
|
507
|
+
}, [fields.length]);
|
|
508
|
+
const prefersReducedMotion = useReducedMotion2();
|
|
509
|
+
useEffect3(() => {
|
|
510
|
+
if (hasInitialized.current) {
|
|
511
|
+
setDisableAnimation(!!prefersReducedMotion);
|
|
512
|
+
}
|
|
513
|
+
}, [prefersReducedMotion]);
|
|
514
|
+
const elementInitialValue = useMemo3(() => {
|
|
515
|
+
return flat ? { [flatArrayKey]: _elementInitialValue != null ? _elementInitialValue : null } : _elementInitialValue != null ? _elementInitialValue : {};
|
|
516
|
+
}, [flat, _elementInitialValue]);
|
|
517
|
+
useEffect3(
|
|
518
|
+
() => {
|
|
519
|
+
if (lastElementNotRemovable && fields.length === 0) {
|
|
520
|
+
setValue(name, [elementInitialValue]);
|
|
521
|
+
}
|
|
522
|
+
hasInitialized.current = true;
|
|
523
|
+
if (!prefersReducedMotion) {
|
|
524
|
+
setTimeout(() => {
|
|
525
|
+
setDisableAnimation(false);
|
|
526
|
+
}, 1);
|
|
527
|
+
}
|
|
528
|
+
},
|
|
529
|
+
// only run once when the component mounts
|
|
530
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
531
|
+
[]
|
|
532
|
+
);
|
|
533
|
+
return __spreadValues({
|
|
534
|
+
// Field array methods and state
|
|
535
|
+
fields,
|
|
536
|
+
append,
|
|
537
|
+
remove,
|
|
538
|
+
insert,
|
|
539
|
+
move,
|
|
540
|
+
disableAnimation,
|
|
541
|
+
elementInitialValue
|
|
542
|
+
}, uniformField);
|
|
543
|
+
};
|
|
544
|
+
|
|
470
545
|
export {
|
|
471
546
|
FormContext_default,
|
|
472
547
|
checkFieldIsRequired,
|
|
473
548
|
useFormContext,
|
|
474
549
|
useClientValidation,
|
|
475
550
|
useController,
|
|
476
|
-
useFieldArray,
|
|
477
551
|
useInput,
|
|
478
|
-
useUniformField
|
|
552
|
+
useUniformField,
|
|
553
|
+
useUniformFieldArray
|
|
479
554
|
};
|
|
480
|
-
//# sourceMappingURL=chunk-
|
|
555
|
+
//# sourceMappingURL=chunk-XRV3STYH.js.map
|