@fuf-stack/uniform 0.4.0 → 0.6.0

package/dist/chunk-53AGVLUG.cjs

@@ -0,0 +1,287 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkKMMS4G7Acjs = require('./chunk-KMMS4G7A.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+
+var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+
+// src/FieldArray/FieldArray.tsx
+var _react = require('react');
+var _reacthookform = require('react-hook-form');
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+
+
+var _modifiers = require('@dnd-kit/modifiers');
+
+
+
+var _sortable = require('@dnd-kit/sortable');
+var _input = require('@nextui-org/input');
+var _pixels = require('@fuf-stack/pixels');
+
+// src/FieldArray/FieldArrayField.tsx
+
+var _fa = require('react-icons/fa');
+
+var _utilities = require('@dnd-kit/utilities');
+
+
+var _jsxruntime = require('react/jsx-runtime');
+var FieldArrayField = ({
+  children,
+  className = void 0,
+  field,
+  fields,
+  hideButtons = [],
+  id,
+  index,
+  insert,
+  lastNotDeletable = true,
+  move,
+  moveField,
+  name,
+  remove,
+  testId = void 0
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = _sortable.useSortable.call(void 0, { id });
+  const style = {
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  const { getFieldState, register, watch, trigger } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
+    isInvalid: invalid,
+    errorMessage: JSON.stringify(error),
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  register(`${name}.${index}._errors`);
+  const formValues = watch();
+  _react.useEffect.call(void 0, () => {
+    trigger(`${name}.${index}._errors`);
+  }, [JSON.stringify(formValues)]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ref: setNodeRef, style, className, children: [
+      !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mr-6 flex flex-row items-center", children: [
+        moveField.includes("drag-drop") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: "mr-2 text-base text-xl",
+            "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, `${name}_${index}_movebutton`),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripLines, {})
+          }
+        ),
+        moveField.includes("button") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _pixels.Button,
+            {
+              testId: `${name}.${index}.up`,
+              disabled: index === 0,
+              onClick: () => move(index, index - 1),
+              className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleUp, {})
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _pixels.Button,
+            {
+              testId: `${name}.${index}.down`,
+              disabled: index === fields.length - 1,
+              onClick: () => move(index, index + 1),
+              className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleDown, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-grow", "data-testid": testId, children }),
+          !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pixels.Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: "h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ) }))
+        ] }),
+        !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _pixels.Button,
+          {
+            className: "text-xs font-medium",
+            testId: `add-harbor-button-${index}`,
+            onClick: () => {
+              insert(index + 1, {});
+            },
+            children: "insert"
+          }
+        ) : null
+      ] }, `rest-${field.id}`)
+    ] }),
+    error && typeof error[index] !== "undefined" && // @ts-expect-error rhf incompatibility
+    _optionalChain([error, 'access', _ => _[Number(index)], 'optionalAccess', _2 => _2._errors]) && // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error: _optionalChain([error, 'access', _3 => _3[Number(index)], 'optionalAccess', _4 => _4._errors]) }) }) })
+  ] });
+};
+var FieldArrayField_default = FieldArrayField;
+
+// src/FieldArray/FieldArray.tsx
+
+var FieldArray = ({
+  children,
+  hideButtons = [],
+  label: _label = void 0,
+  lastNotDeletable = true,
+  name,
+  testId: _testId = void 0,
+  moveField = ["button"]
+}) => {
+  const { control, getValues, getFieldState, register, trigger, watch } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { fields, append, remove, insert, move } = _reacthookform.useFieldArray.call(void 0, {
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  register(`${name}._errors`);
+  const formValues = watch();
+  _react.useEffect.call(void 0, () => {
+    trigger(`${name}._errors`);
+  }, [JSON.stringify(formValues)]);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  if (lastNotDeletable && fields.length === 0) {
+    append({});
+  }
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor),
+    _core.useSensor.call(void 0, _core.KeyboardSensor)
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== _optionalChain([over, 'optionalAccess', _5 => _5.id])) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === _optionalChain([over, 'optionalAccess', _6 => _6.id]));
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _core.DndContext,
+    {
+      sensors,
+      collisionDetection: _core.closestCenter,
+      onDragEnd: handleDragEnd,
+      modifiers: [_modifiers.restrictToVerticalAxis, _modifiers.restrictToWindowEdges],
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _sortable.SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: _sortable.verticalListSortingStrategy,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { "data-testid": testId, children: [
+            label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "label",
+              {
+                ...getLabelProps(),
+                className: `${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default, { testId }),
+            fields.map((field, index) => {
+              const duplicate = (i) => {
+                const values = getValues(name);
+                insert(i + 1, { ...values[i], id: null });
+              };
+              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                FieldArrayField_default,
+                {
+                  id: field.id,
+                  testId: `${testId}_${index}`,
+                  className: "mb-3 mt-5 flex flex-row items-center",
+                  field,
+                  fields,
+                  hideButtons,
+                  index,
+                  insert,
+                  lastNotDeletable,
+                  move,
+                  moveField,
+                  name,
+                  remove,
+                  children: children(
+                    `${name}[${index}]`,
+                    index,
+                    fields.length,
+                    move,
+                    insert,
+                    remove,
+                    duplicate
+                  )
+                },
+                field.id
+              );
+            }),
+            !hideButtons.includes("add") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _pixels.Button,
+              {
+                testId: `${testId}_append`,
+                size: "sm",
+                onClick: () => append({}),
+                children: "Add"
+              }
+            ),
+            _optionalChain([error, 'optionalAccess', _7 => _7._errors]) && // eslint-disable-next-line react/jsx-props-no-spreading
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error: _optionalChain([error, 'optionalAccess', _8 => _8._errors]) }) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+
+
+
+exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
+//# sourceMappingURL=chunk-53AGVLUG.cjs.map

package/dist/chunk-53AGVLUG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-53AGVLUG.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"names":["jsx","Button"],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-53AGVLUG.cjs","sourcesContent":[null,"import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useFieldArray } 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';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (\n  name: string,\n  index: number,\n  length: number,\n  move: UseFieldArrayMove,\n  insert: UseFieldArrayInsert<FieldValues, string>,\n  remove: UseFieldArrayRemove,\n  duplicate: (i: number) => void,\n) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n  /** function that renders the children with provided Properties. */\n  children: FieldArrayFieldChildren;\n  /** Hide a set of buttons. */\n  hideButtons?: FieldArrayHideOption[];\n  /** label of the FieldArray. */\n  label?: React.ReactNode;\n  /** stops user from deleting all items. */\n  lastNotDeletable?: boolean;\n  /** name the FieldArray is registered in RHF */\n  name: string;\n  /** ID for test purposes. */\n  testId?: string;\n  /* how the fields can be moved */\n  moveField: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n  children,\n  hideButtons = [],\n  label: _label = undefined,\n  lastNotDeletable = true,\n  name,\n  testId: _testId = undefined,\n  moveField = ['button'],\n}: FieldArrayProps) => {\n  const { control, getValues, getFieldState, register, trigger, 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  register(`${name}._errors`);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    trigger(`${name}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\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  if (lastNotDeletable && fields.length === 0) {\n    append({});\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (active.id !== over?.id) {\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      move(oldIndex, newIndex);\n    }\n  };\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        <ul data-testid={testId}>\n          {label && (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...getLabelProps()}\n              className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n            >\n              {label}\n            </label>\n          )}\n          <FieldCopyTestIdButton testId={testId} />\n\n          {fields.map((field, index) => {\n            const duplicate = (i: number) => {\n              const values = getValues(name);\n              insert(i + 1, { ...values[i], id: null });\n            };\n\n            return (\n              <FieldArrayField\n                id={field.id}\n                key={field.id}\n                testId={`${testId}_${index}`}\n                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                index={index}\n                insert={insert}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n              >\n                {children(\n                  `${name}[${index}]`,\n                  index,\n                  fields.length,\n                  move,\n                  insert,\n                  remove,\n                  duplicate,\n                )}\n              </FieldArrayField>\n            );\n          })}\n\n          {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n            <Button\n              testId={`${testId}_append`}\n              size=\"sm\"\n              onClick={() => append({})}\n            >\n              Add\n            </Button>\n          )}\n          {/* @ts-expect-error rhf incompatibility */}\n          {error?._errors && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                {/* @ts-expect-error rhf incompatibility */}\n                <FieldValidationError error={error?._errors} />\n              </div>\n            </div>\n          )}\n        </ul>\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default FieldArray;\n","import type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\nimport { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  field: Record<'id', string>;\n  fields: Record<'id', string>[];\n  hideButtons?: FieldArrayHideOption[];\n  id: string | number;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  lastNotDeletable?: boolean;\n  move: UseFieldArrayMove;\n  moveField: MoveField[];\n  testId?: string;\n  name: string;\n  remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n  children,\n  className = undefined,\n  field,\n  fields,\n  hideButtons = [],\n  id,\n  index,\n  insert,\n  lastNotDeletable = true,\n  move,\n  moveField,\n  name,\n  remove,\n  testId = undefined,\n}: FieldArrayFieldProps) => {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id });\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const { getFieldState, register, watch, trigger } = 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    isInvalid: invalid,\n    errorMessage: JSON.stringify(error),\n    labelPlacement: 'inside',\n    placeholder: ' ',\n    classNames: { helperWrapper: 'block' },\n  });\n\n  // TODO: Check if this is a current issue: _error gets kicked out of the formValidation if no other errors exist. validationError exists, but the structure changes.\n  register(`${name}.${index}._errors`);\n\n  const formValues = watch();\n  useEffect(() => {\n    trigger(`${name}.${index}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  return (\n    <>\n      <li ref={setNodeRef} style={style} className={className}>\n        {/** Start Button up/down */}\n        {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n          <div className=\"mr-6 flex flex-row items-center\">\n            {moveField.includes('drag-drop') && (\n              <div\n                className=\"mr-2 text-base text-xl\"\n                data-testid={slugify(`${name}_${index}_movebutton`)}\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                <FaGripLines />\n              </div>\n            )}\n            {moveField.includes('button') && (\n              <div className=\"flex flex-col\">\n                <Button\n                  testId={`${name}.${index}.up`}\n                  disabled={index === 0}\n                  onClick={() => move(index, index - 1)}\n                  className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleUp />\n                </Button>\n                <Button\n                  testId={`${name}.${index}.down`}\n                  disabled={index === fields.length - 1}\n                  onClick={() => move(index, index + 1)}\n                  className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleDown />\n                </Button>\n              </div>\n            )}\n          </div>\n        )}\n        {/** End Button up/down */}\n        <div key={`rest-${field.id}`} className=\"w-full\">\n          <div className=\"mb-2 flex items-center\">\n            {/** RENDER CHILDREN */}\n            <div className=\"flex-grow\" data-testid={testId}>\n              {children}\n            </div>\n            {!hideButtons.includes('remove') &&\n              !hideButtons.includes('all') &&\n              (lastNotDeletable && fields.length === 1 ? null : (\n                <Button onClick={() => remove(index)} className=\"ml-1\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </Button>\n              ))}\n          </div>\n\n          {!hideButtons.includes('insert') &&\n          !hideButtons.includes('all') &&\n          index !== fields.length - 1 ? (\n            <Button\n              className=\"text-xs font-medium\"\n              testId={`add-harbor-button-${index}`}\n              onClick={() => {\n                insert(index + 1, {});\n              }}\n            >\n              insert\n            </Button>\n          ) : null}\n        </div>\n      </li>\n      {error &&\n        typeof error[index] !== 'undefined' &&\n        // @ts-expect-error rhf incompatibility\n        error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <div {...getHelperWrapperProps()}>\n            {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error[Number(index)]?._errors} />\n            </div>\n          </div>\n        )}\n    </>\n  );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n  FieldArrayProps,\n  FieldArrayHideOption,\n  FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}

package/dist/chunk-57OFVPRD.js

@@ -0,0 +1,287 @@
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-T3CCNJHK.js";
+import {
+  FieldValidationError_default
+} from "./chunk-DBLODROX.js";
+import {
+  useFormContext
+} from "./chunk-BCMPSLSG.js";
+import {
+  slugify
+} from "./chunk-V46BHM2U.js";
+
+// src/FieldArray/FieldArray.tsx
+import { useEffect as useEffect2 } from "react";
+import { useFieldArray } from "react-hook-form";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  restrictToVerticalAxis,
+  restrictToWindowEdges
+} from "@dnd-kit/modifiers";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { useInput as useInput2 } from "@nextui-org/input";
+import { Button as Button2 } from "@fuf-stack/pixels";
+
+// src/FieldArray/FieldArrayField.tsx
+import { useEffect } from "react";
+import { FaAngleDown, FaAngleUp, FaGripLines } from "react-icons/fa";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useInput } from "@nextui-org/input";
+import { Button } from "@fuf-stack/pixels";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FieldArrayField = ({
+  children,
+  className = void 0,
+  field,
+  fields,
+  hideButtons = [],
+  id,
+  index,
+  insert,
+  lastNotDeletable = true,
+  move,
+  moveField,
+  name,
+  remove,
+  testId = void 0
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  const { getFieldState, register, watch, trigger } = useFormContext();
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = useInput({
+    isInvalid: invalid,
+    errorMessage: JSON.stringify(error),
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  register(`${name}.${index}._errors`);
+  const formValues = watch();
+  useEffect(() => {
+    trigger(`${name}.${index}._errors`);
+  }, [JSON.stringify(formValues)]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { ref: setNodeRef, style, className, children: [
+      !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ jsxs("div", { className: "mr-6 flex flex-row items-center", children: [
+        moveField.includes("drag-drop") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mr-2 text-base text-xl",
+            "data-testid": slugify(`${name}_${index}_movebutton`),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(FaGripLines, {})
+          }
+        ),
+        moveField.includes("button") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              testId: `${name}.${index}.up`,
+              disabled: index === 0,
+              onClick: () => move(index, index - 1),
+              className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(FaAngleUp, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              testId: `${name}.${index}.down`,
+              disabled: index === fields.length - 1,
+              onClick: () => move(index, index + 1),
+              className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ jsx(FaAngleDown, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-grow", "data-testid": testId, children }),
+          !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ jsx(Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ) }))
+        ] }),
+        !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "text-xs font-medium",
+            testId: `add-harbor-button-${index}`,
+            onClick: () => {
+              insert(index + 1, {});
+            },
+            children: "insert"
+          }
+        ) : null
+      ] }, `rest-${field.id}`)
+    ] }),
+    error && typeof error[index] !== "undefined" && // @ts-expect-error rhf incompatibility
+    error[Number(index)]?._errors && // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx(FieldValidationError_default, { error: error[Number(index)]?._errors }) }) })
+  ] });
+};
+var FieldArrayField_default = FieldArrayField;
+
+// src/FieldArray/FieldArray.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FieldArray = ({
+  children,
+  hideButtons = [],
+  label: _label = void 0,
+  lastNotDeletable = true,
+  name,
+  testId: _testId = void 0,
+  moveField = ["button"]
+}) => {
+  const { control, getValues, getFieldState, register, trigger, watch } = useFormContext();
+  const { fields, append, remove, insert, move } = useFieldArray({
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  register(`${name}._errors`);
+  const formValues = watch();
+  useEffect2(() => {
+    trigger(`${name}._errors`);
+  }, [JSON.stringify(formValues)]);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = useInput2({
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  if (lastNotDeletable && fields.length === 0) {
+    append({});
+  }
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor)
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === over?.id);
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx2(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd,
+      modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
+      children: /* @__PURE__ */ jsx2(
+        SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: verticalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs2("ul", { "data-testid": testId, children: [
+            label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ jsx2(
+              "label",
+              {
+                ...getLabelProps(),
+                className: `${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId }),
+            fields.map((field, index) => {
+              const duplicate = (i) => {
+                const values = getValues(name);
+                insert(i + 1, { ...values[i], id: null });
+              };
+              return /* @__PURE__ */ jsx2(
+                FieldArrayField_default,
+                {
+                  id: field.id,
+                  testId: `${testId}_${index}`,
+                  className: "mb-3 mt-5 flex flex-row items-center",
+                  field,
+                  fields,
+                  hideButtons,
+                  index,
+                  insert,
+                  lastNotDeletable,
+                  move,
+                  moveField,
+                  name,
+                  remove,
+                  children: children(
+                    `${name}[${index}]`,
+                    index,
+                    fields.length,
+                    move,
+                    insert,
+                    remove,
+                    duplicate
+                  )
+                },
+                field.id
+              );
+            }),
+            !hideButtons.includes("add") && !hideButtons.includes("all") && /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                testId: `${testId}_append`,
+                size: "sm",
+                onClick: () => append({}),
+                children: "Add"
+              }
+            ),
+            error?._errors && // eslint-disable-next-line react/jsx-props-no-spreading
+            /* @__PURE__ */ jsx2("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx2("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx2(FieldValidationError_default, { error: error?._errors }) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+export {
+  FieldArray_default,
+  FieldArray_default2
+};
+//# sourceMappingURL=chunk-57OFVPRD.js.map

package/dist/chunk-57OFVPRD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useFieldArray } 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';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (\n  name: string,\n  index: number,\n  length: number,\n  move: UseFieldArrayMove,\n  insert: UseFieldArrayInsert<FieldValues, string>,\n  remove: UseFieldArrayRemove,\n  duplicate: (i: number) => void,\n) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n  /** function that renders the children with provided Properties. */\n  children: FieldArrayFieldChildren;\n  /** Hide a set of buttons. */\n  hideButtons?: FieldArrayHideOption[];\n  /** label of the FieldArray. */\n  label?: React.ReactNode;\n  /** stops user from deleting all items. */\n  lastNotDeletable?: boolean;\n  /** name the FieldArray is registered in RHF */\n  name: string;\n  /** ID for test purposes. */\n  testId?: string;\n  /* how the fields can be moved */\n  moveField: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n  children,\n  hideButtons = [],\n  label: _label = undefined,\n  lastNotDeletable = true,\n  name,\n  testId: _testId = undefined,\n  moveField = ['button'],\n}: FieldArrayProps) => {\n  const { control, getValues, getFieldState, register, trigger, 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  register(`${name}._errors`);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    trigger(`${name}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\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  if (lastNotDeletable && fields.length === 0) {\n    append({});\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (active.id !== over?.id) {\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      move(oldIndex, newIndex);\n    }\n  };\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        <ul data-testid={testId}>\n          {label && (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...getLabelProps()}\n              className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n            >\n              {label}\n            </label>\n          )}\n          <FieldCopyTestIdButton testId={testId} />\n\n          {fields.map((field, index) => {\n            const duplicate = (i: number) => {\n              const values = getValues(name);\n              insert(i + 1, { ...values[i], id: null });\n            };\n\n            return (\n              <FieldArrayField\n                id={field.id}\n                key={field.id}\n                testId={`${testId}_${index}`}\n                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                index={index}\n                insert={insert}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n              >\n                {children(\n                  `${name}[${index}]`,\n                  index,\n                  fields.length,\n                  move,\n                  insert,\n                  remove,\n                  duplicate,\n                )}\n              </FieldArrayField>\n            );\n          })}\n\n          {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n            <Button\n              testId={`${testId}_append`}\n              size=\"sm\"\n              onClick={() => append({})}\n            >\n              Add\n            </Button>\n          )}\n          {/* @ts-expect-error rhf incompatibility */}\n          {error?._errors && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                {/* @ts-expect-error rhf incompatibility */}\n                <FieldValidationError error={error?._errors} />\n              </div>\n            </div>\n          )}\n        </ul>\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default FieldArray;\n","import type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\nimport { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  field: Record<'id', string>;\n  fields: Record<'id', string>[];\n  hideButtons?: FieldArrayHideOption[];\n  id: string | number;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  lastNotDeletable?: boolean;\n  move: UseFieldArrayMove;\n  moveField: MoveField[];\n  testId?: string;\n  name: string;\n  remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n  children,\n  className = undefined,\n  field,\n  fields,\n  hideButtons = [],\n  id,\n  index,\n  insert,\n  lastNotDeletable = true,\n  move,\n  moveField,\n  name,\n  remove,\n  testId = undefined,\n}: FieldArrayFieldProps) => {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id });\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const { getFieldState, register, watch, trigger } = 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    isInvalid: invalid,\n    errorMessage: JSON.stringify(error),\n    labelPlacement: 'inside',\n    placeholder: ' ',\n    classNames: { helperWrapper: 'block' },\n  });\n\n  // TODO: Check if this is a current issue: _error gets kicked out of the formValidation if no other errors exist. validationError exists, but the structure changes.\n  register(`${name}.${index}._errors`);\n\n  const formValues = watch();\n  useEffect(() => {\n    trigger(`${name}.${index}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  return (\n    <>\n      <li ref={setNodeRef} style={style} className={className}>\n        {/** Start Button up/down */}\n        {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n          <div className=\"mr-6 flex flex-row items-center\">\n            {moveField.includes('drag-drop') && (\n              <div\n                className=\"mr-2 text-base text-xl\"\n                data-testid={slugify(`${name}_${index}_movebutton`)}\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                <FaGripLines />\n              </div>\n            )}\n            {moveField.includes('button') && (\n              <div className=\"flex flex-col\">\n                <Button\n                  testId={`${name}.${index}.up`}\n                  disabled={index === 0}\n                  onClick={() => move(index, index - 1)}\n                  className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleUp />\n                </Button>\n                <Button\n                  testId={`${name}.${index}.down`}\n                  disabled={index === fields.length - 1}\n                  onClick={() => move(index, index + 1)}\n                  className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleDown />\n                </Button>\n              </div>\n            )}\n          </div>\n        )}\n        {/** End Button up/down */}\n        <div key={`rest-${field.id}`} className=\"w-full\">\n          <div className=\"mb-2 flex items-center\">\n            {/** RENDER CHILDREN */}\n            <div className=\"flex-grow\" data-testid={testId}>\n              {children}\n            </div>\n            {!hideButtons.includes('remove') &&\n              !hideButtons.includes('all') &&\n              (lastNotDeletable && fields.length === 1 ? null : (\n                <Button onClick={() => remove(index)} className=\"ml-1\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </Button>\n              ))}\n          </div>\n\n          {!hideButtons.includes('insert') &&\n          !hideButtons.includes('all') &&\n          index !== fields.length - 1 ? (\n            <Button\n              className=\"text-xs font-medium\"\n              testId={`add-harbor-button-${index}`}\n              onClick={() => {\n                insert(index + 1, {});\n              }}\n            >\n              insert\n            </Button>\n          ) : null}\n        </div>\n      </li>\n      {error &&\n        typeof error[index] !== 'undefined' &&\n        // @ts-expect-error rhf incompatibility\n        error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <div {...getHelperWrapperProps()}>\n            {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error[Number(index)]?._errors} />\n            </div>\n          </div>\n        )}\n    </>\n  );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n  FieldArrayProps,\n  FieldArrayHideOption,\n  FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["useEffect","useInput","Button","jsx","jsxs","useEffect","useInput","Button","FieldArray_default"]}