@fuf-stack/uniform 0.14.1 → 0.14.2
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/FieldArray/index.cjs +2 -2
- package/dist/FieldArray/index.d.cts +3 -2
- package/dist/FieldArray/index.d.ts +3 -2
- package/dist/FieldArray/index.js +1 -1
- package/dist/{FieldArray-B_Gsw-to.d.cts → FieldArray-CAVDQ51R.d.cts} +1 -0
- package/dist/{FieldArray-B_Gsw-to.d.ts → FieldArray-CAVDQ51R.d.ts} +1 -0
- package/dist/{chunk-WH2YRUGV.js → chunk-EEOOSLP2.js} +1 -1
- package/dist/chunk-EEOOSLP2.js.map +1 -0
- package/dist/{chunk-YSTOLMPK.cjs → chunk-P3APABJJ.cjs} +1 -1
- package/dist/chunk-P3APABJJ.cjs.map +1 -0
- package/dist/index.cjs +4 -4
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +4 -4
- package/package.json +20 -21
- package/dist/chunk-WH2YRUGV.js.map +0 -1
- package/dist/chunk-YSTOLMPK.cjs.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkP3APABJJcjs = require('../chunk-P3APABJJ.cjs');
|
|
5
5
|
require('../chunk-JU5RT22Y.cjs');
|
|
6
6
|
require('../chunk-OHJYXA6R.cjs');
|
|
7
7
|
require('../chunk-XJWEUCV3.cjs');
|
|
@@ -9,5 +9,5 @@ require('../chunk-BBB4FEY6.cjs');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
exports.FieldArray =
|
|
12
|
+
exports.FieldArray = _chunkP3APABJJcjs.FieldArray_default; exports.default = _chunkP3APABJJcjs.FieldArray_default2;
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { F as FieldArray } from '../FieldArray-
|
|
2
|
-
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-
|
|
1
|
+
import { F as FieldArray } from '../FieldArray-CAVDQ51R.cjs';
|
|
2
|
+
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-CAVDQ51R.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import 'react-hook-form';
|
|
5
6
|
|
|
6
7
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { F as FieldArray } from '../FieldArray-
|
|
2
|
-
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-
|
|
1
|
+
import { F as FieldArray } from '../FieldArray-CAVDQ51R.js';
|
|
2
|
+
export { c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from '../FieldArray-CAVDQ51R.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import 'react-hook-form';
|
|
5
6
|
|
|
6
7
|
|
package/dist/FieldArray/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { JSX } from 'react';
|
|
2
3
|
import { UseFieldArrayInsert, FieldValues, UseFieldArrayMove, UseFieldArrayRemove } from 'react-hook-form';
|
|
3
4
|
|
|
4
5
|
type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { JSX } from 'react';
|
|
2
3
|
import { UseFieldArrayInsert, FieldValues, UseFieldArrayMove, UseFieldArrayRemove } from 'react-hook-form';
|
|
3
4
|
|
|
4
5
|
type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';
|
|
@@ -0,0 +1 @@
|
|
|
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 { JSX } from 'react';\nimport type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} 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 { useFieldArray, 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 = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\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 {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastNotDeletable && fields.length === 0) {\n append(undefined); // TODO: Check if this breaks something\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\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\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 {showTestIdCopyButton && <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 className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}.${index}`,\n remove,\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(undefined)} // TODO: Check if this breaks something\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\n// import { 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, 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 return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\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 && 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 <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\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":["useInput","Button","jsx","jsxs","useInput","Button","FieldArray_default"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-P3APABJJ.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/pixels/pixels/packages/uniform/dist/chunk-P3APABJJ.cjs","sourcesContent":[null,"import type { DragEndEvent } from '@dnd-kit/core';\nimport type { JSX } from 'react';\nimport type {\n FieldValues,\n UseFieldArrayInsert,\n UseFieldArrayMove,\n UseFieldArrayRemove,\n} 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 { useFieldArray, 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 = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\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 {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastNotDeletable && fields.length === 0) {\n append(undefined); // TODO: Check if this breaks something\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\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\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 {showTestIdCopyButton && <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 className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}.${index}`,\n remove,\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(undefined)} // TODO: Check if this breaks something\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\n// import { 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, 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 return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\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 && 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 <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\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/index.cjs
CHANGED
|
@@ -15,7 +15,7 @@ var _chunk25LLM544cjs = require('./chunk-25LLM544.cjs');
|
|
|
15
15
|
var _chunkRY4F5YDScjs = require('./chunk-RY4F5YDS.cjs');
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _chunkP3APABJJcjs = require('./chunk-P3APABJJ.cjs');
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
var _chunkPZ4LZQI4cjs = require('./chunk-PZ4LZQI4.cjs');
|
|
@@ -24,10 +24,10 @@ var _chunkPZ4LZQI4cjs = require('./chunk-PZ4LZQI4.cjs');
|
|
|
24
24
|
var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var _chunkXJZAS7NGcjs = require('./chunk-XJZAS7NG.cjs');
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _chunkU6VUNJZGcjs = require('./chunk-U6VUNJZG.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
var _chunkVQWKXSHWcjs = require('./chunk-VQWKXSHW.cjs');
|
|
@@ -63,5 +63,5 @@ var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
|
|
66
|
-
exports.CheckboxGroup = _chunkRY4F5YDScjs.CheckboxGroup_default; exports.Controller = _chunkVQWKXSHWcjs.Controller; exports.FieldArray =
|
|
66
|
+
exports.CheckboxGroup = _chunkRY4F5YDScjs.CheckboxGroup_default; exports.Controller = _chunkVQWKXSHWcjs.Controller; exports.FieldArray = _chunkP3APABJJcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOHJYXA6Rcjs.FieldValidationError_default; exports.Form = _chunkPZ4LZQI4cjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkU6VUNJZGcjs.Input_default; exports.RadioGroup = _chunkXJZAS7NGcjs.RadioGroup_default; exports.Select = _chunkHZP3EXGRcjs.Select_default; exports.SubmitButton = _chunkVZ5MMFIFcjs.SubmitButton_default; exports.Switch = _chunkEKE5URXQcjs.Switch_default; exports.TextArea = _chunk25LLM544cjs.TextArea_default; exports.checkFieldIsRequired = _chunkXJWEUCV3cjs.checkFieldIsRequired; exports.slugify = _chunkBBB4FEY6cjs.slugify; exports.useFieldArray = _chunkXJWEUCV3cjs.useFieldArray; exports.useFormContext = _chunkXJWEUCV3cjs.useFormContext;
|
|
67
67
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Controller, ControllerProps, useFieldArray } from 'react-hook-form';
|
|
2
2
|
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-o-qWkWe1.cjs';
|
|
3
|
-
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-
|
|
3
|
+
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-CAVDQ51R.cjs';
|
|
4
4
|
export { F as Form, a as FormProps } from './Form-D0grgL6G.cjs';
|
|
5
5
|
export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
|
|
6
6
|
export { slugify } from './helpers/index.cjs';
|
|
@@ -17,8 +17,8 @@ import 'react/jsx-runtime';
|
|
|
17
17
|
import 'tailwind-variants/dist/config.js';
|
|
18
18
|
import 'tailwind-variants';
|
|
19
19
|
import '@fuf-stack/pixel-utils';
|
|
20
|
-
import '@fuf-stack/veto';
|
|
21
20
|
import 'react';
|
|
21
|
+
import '@fuf-stack/veto';
|
|
22
22
|
import './FormContext-ldCpxKnY.cjs';
|
|
23
23
|
import 'slug';
|
|
24
24
|
import '@fuf-stack/pixels/Tabs';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Controller, ControllerProps, useFieldArray } from 'react-hook-form';
|
|
2
2
|
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-o-qWkWe1.js';
|
|
3
|
-
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-
|
|
3
|
+
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-CAVDQ51R.js';
|
|
4
4
|
export { F as Form, a as FormProps } from './Form-DX5NTR-H.js';
|
|
5
5
|
export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.js';
|
|
6
6
|
export { slugify } from './helpers/index.js';
|
|
@@ -17,8 +17,8 @@ import 'react/jsx-runtime';
|
|
|
17
17
|
import 'tailwind-variants/dist/config.js';
|
|
18
18
|
import 'tailwind-variants';
|
|
19
19
|
import '@fuf-stack/pixel-utils';
|
|
20
|
-
import '@fuf-stack/veto';
|
|
21
20
|
import 'react';
|
|
21
|
+
import '@fuf-stack/veto';
|
|
22
22
|
import './FormContext-ldCpxKnY.js';
|
|
23
23
|
import 'slug';
|
|
24
24
|
import '@fuf-stack/pixels/Tabs';
|
package/dist/index.js
CHANGED
|
@@ -15,19 +15,19 @@ import {
|
|
|
15
15
|
} from "./chunk-XJGJ5ZNM.js";
|
|
16
16
|
import {
|
|
17
17
|
FieldArray_default
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-EEOOSLP2.js";
|
|
19
19
|
import {
|
|
20
20
|
Form_default
|
|
21
21
|
} from "./chunk-VP7WDLJM.js";
|
|
22
22
|
import {
|
|
23
23
|
Grid_default
|
|
24
24
|
} from "./chunk-PDCEKC3G.js";
|
|
25
|
-
import {
|
|
26
|
-
Input_default
|
|
27
|
-
} from "./chunk-TR2J3OKH.js";
|
|
28
25
|
import {
|
|
29
26
|
RadioGroup_default
|
|
30
27
|
} from "./chunk-DDZMDOSG.js";
|
|
28
|
+
import {
|
|
29
|
+
Input_default
|
|
30
|
+
} from "./chunk-TR2J3OKH.js";
|
|
31
31
|
import {
|
|
32
32
|
Controller
|
|
33
33
|
} from "./chunk-KOKIM2ND.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Hannes Tiede",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -112,35 +112,34 @@
|
|
|
112
112
|
},
|
|
113
113
|
"dependencies": {
|
|
114
114
|
"@dnd-kit/core": "6.3.1",
|
|
115
|
-
"@dnd-kit/modifiers": "
|
|
116
|
-
"@dnd-kit/sortable": "
|
|
115
|
+
"@dnd-kit/modifiers": "9.0.0",
|
|
116
|
+
"@dnd-kit/sortable": "10.0.0",
|
|
117
117
|
"@dnd-kit/utilities": "3.2.2",
|
|
118
|
-
"@nextui-org/button": "2.
|
|
119
|
-
"@nextui-org/checkbox": "2.
|
|
120
|
-
"@nextui-org/input": "2.
|
|
121
|
-
"@nextui-org/radio": "2.
|
|
122
|
-
"@nextui-org/select": "2.
|
|
123
|
-
"@nextui-org/switch": "2.
|
|
124
|
-
"@nextui-org/system": "2.
|
|
125
|
-
"@nextui-org/theme": "2.
|
|
118
|
+
"@nextui-org/button": "2.2.6",
|
|
119
|
+
"@nextui-org/checkbox": "2.3.6",
|
|
120
|
+
"@nextui-org/input": "2.4.6",
|
|
121
|
+
"@nextui-org/radio": "2.3.6",
|
|
122
|
+
"@nextui-org/select": "2.4.6",
|
|
123
|
+
"@nextui-org/switch": "2.2.6",
|
|
124
|
+
"@nextui-org/system": "2.4.4",
|
|
125
|
+
"@nextui-org/theme": "2.4.3",
|
|
126
126
|
"@react-aria/visually-hidden": "3.8.18",
|
|
127
|
-
"framer-motion": "11.13.
|
|
128
|
-
"react-icons": "5.
|
|
127
|
+
"framer-motion": "11.13.5",
|
|
128
|
+
"react-icons": "5.4.0",
|
|
129
129
|
"react-hook-form": "7.54.0",
|
|
130
130
|
"react-select": "5.8.3",
|
|
131
|
-
"slug": "
|
|
132
|
-
"@fuf-stack/pixel-utils": "0.4.
|
|
131
|
+
"slug": "10.0.0",
|
|
132
|
+
"@fuf-stack/pixel-utils": "0.4.2",
|
|
133
133
|
"@fuf-stack/veto": "0.8.0",
|
|
134
|
-
"@fuf-stack/pixels": "0.29.
|
|
134
|
+
"@fuf-stack/pixels": "0.29.2"
|
|
135
135
|
},
|
|
136
136
|
"devDependencies": {
|
|
137
|
-
"@testing-library/react-hooks": "8.0.1",
|
|
138
137
|
"@types/debug": "4.1.12",
|
|
139
|
-
"@types/react": "
|
|
140
|
-
"@types/react-dom": "
|
|
138
|
+
"@types/react": "19.0.1",
|
|
139
|
+
"@types/react-dom": "19.0.2",
|
|
141
140
|
"@types/slug": "5.0.9",
|
|
142
|
-
"react": "
|
|
143
|
-
"react-dom": "
|
|
141
|
+
"react": "19.0.0",
|
|
142
|
+
"react-dom": "19.0.0",
|
|
144
143
|
"@repo/storybook-config": "0.0.1",
|
|
145
144
|
"@repo/tailwind-config": "0.0.1",
|
|
146
145
|
"@repo/tsup-config": "0.0.1",
|
|
@@ -1 +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\n// import { useEffect } from 'react';\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 { useFieldArray, 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 = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\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 {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastNotDeletable && fields.length === 0) {\n append(undefined); // TODO: Check if this breaks something\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\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\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 {showTestIdCopyButton && <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 className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}.${index}`,\n remove,\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(undefined)} // TODO: Check if this breaks something\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\n// import { 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, 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 return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\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 && 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 <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\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":["useInput","Button","jsx","jsxs","useInput","Button","FieldArray_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-YSTOLMPK.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/pixels/pixels/packages/uniform/dist/chunk-YSTOLMPK.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\n// import { useEffect } from 'react';\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 { useFieldArray, 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 = (args: {\n duplicate: (i: number) => void;\n index: number;\n insert: UseFieldArrayInsert<FieldValues, string>;\n length: number;\n move: UseFieldArrayMove;\n name: string;\n remove: UseFieldArrayRemove;\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 {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n if (lastNotDeletable && fields.length === 0) {\n append(undefined); // TODO: Check if this breaks something\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\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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} onBlur={() => trigger(`${name}`)}>\n {showLabel && (\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 {showTestIdCopyButton && <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 className=\"mb-3 mt-5 flex flex-row items-center\"\n field={field}\n fields={fields}\n hideButtons={hideButtons}\n id={field.id}\n index={index}\n insert={insert}\n key={field.id}\n lastNotDeletable={lastNotDeletable}\n move={move}\n moveField={moveField}\n name={name}\n remove={remove}\n testId={`${testId}_${index}`}\n >\n {children({\n duplicate,\n index,\n insert,\n length: fields.length,\n move,\n name: `${name}.${index}`,\n remove,\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(undefined)} // TODO: Check if this breaks something\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\n// import { 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, 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 return (\n <>\n <li\n ref={setNodeRef}\n style={style}\n className={className}\n onBlur={() => trigger(`${name}.${index}`)}\n >\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 && 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 <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\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"]}
|