@fuf-stack/uniform 0.14.5 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CheckboxGroup/index.cjs +7 -6
- package/dist/CheckboxGroup/index.cjs.map +1 -1
- package/dist/CheckboxGroup/index.d.cts +2 -2
- package/dist/CheckboxGroup/index.d.ts +2 -2
- package/dist/CheckboxGroup/index.js +6 -5
- package/dist/{CheckboxGroup-o-qWkWe1.d.cts → CheckboxGroup-fAdey3Td.d.cts} +1 -1
- package/dist/{CheckboxGroup-o-qWkWe1.d.ts → CheckboxGroup-fAdey3Td.d.ts} +1 -1
- package/dist/Controller/index.cjs +4 -2
- package/dist/Controller/index.cjs.map +1 -1
- package/dist/Controller/index.d.cts +7 -3
- package/dist/Controller/index.d.ts +7 -3
- package/dist/Controller/index.js +7 -5
- package/dist/Controller-8Nqugui5.d.cts +37 -0
- package/dist/Controller-8Nqugui5.d.ts +37 -0
- package/dist/FieldArray/index.cjs +6 -5
- package/dist/FieldArray/index.cjs.map +1 -1
- package/dist/FieldArray/index.d.cts +5 -3
- package/dist/FieldArray/index.d.ts +5 -3
- package/dist/FieldArray/index.js +5 -4
- package/dist/FieldArray-AqM2XKIh.d.cts +151 -0
- package/dist/FieldArray-AqM2XKIh.d.ts +151 -0
- package/dist/Form/index.cjs +5 -4
- package/dist/Form/index.cjs.map +1 -1
- package/dist/Form/index.js +4 -3
- package/dist/Grid/index.cjs +1 -0
- package/dist/Grid/index.cjs.map +1 -1
- package/dist/Grid/index.js +1 -0
- package/dist/Input/index.cjs +7 -6
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.d.cts +2 -2
- package/dist/Input/index.d.ts +2 -2
- package/dist/Input/index.js +6 -5
- package/dist/{Input-IkWP4cWg.d.cts → Input-B_wjhY9e.d.cts} +1 -1
- package/dist/{Input-IkWP4cWg.d.ts → Input-B_wjhY9e.d.ts} +1 -1
- package/dist/RadioGroup/index.cjs +7 -6
- package/dist/RadioGroup/index.cjs.map +1 -1
- package/dist/RadioGroup/index.d.cts +2 -2
- package/dist/RadioGroup/index.d.ts +2 -2
- package/dist/RadioGroup/index.js +6 -5
- package/dist/{RadioGroup-1J39ASHa.d.cts → RadioGroup-Dxd2FPQj.d.cts} +1 -1
- package/dist/{RadioGroup-1J39ASHa.d.ts → RadioGroup-Dxd2FPQj.d.ts} +1 -1
- package/dist/Select/index.cjs +7 -6
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.d.cts +2 -2
- package/dist/Select/index.d.ts +2 -2
- package/dist/Select/index.js +6 -5
- package/dist/{Select-BhS4z0Pj.d.cts → Select-JRwrSDew.d.cts} +1 -1
- package/dist/{Select-BhS4z0Pj.d.ts → Select-JRwrSDew.d.ts} +1 -1
- package/dist/SubmitButton/index.cjs +5 -4
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.js +4 -3
- package/dist/Switch/index.cjs +7 -6
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.d.cts +2 -2
- package/dist/Switch/index.d.ts +2 -2
- package/dist/Switch/index.js +6 -5
- package/dist/{Switch-Fdldj8LV.d.cts → Switch-mdolzzEc.d.cts} +1 -1
- package/dist/{Switch-Fdldj8LV.d.ts → Switch-mdolzzEc.d.ts} +1 -1
- package/dist/TextArea/index.cjs +7 -6
- package/dist/TextArea/index.cjs.map +1 -1
- package/dist/TextArea/index.d.cts +2 -2
- package/dist/TextArea/index.d.ts +2 -2
- package/dist/TextArea/index.js +6 -5
- package/dist/{TextArea-B-sKvTkd.d.cts → TextArea-DNpInDsW.d.cts} +1 -1
- package/dist/{TextArea-B-sKvTkd.d.ts → TextArea-DNpInDsW.d.ts} +1 -1
- package/dist/{chunk-QCVTB2NI.js → chunk-3QBYSFDX.js} +10 -9
- package/dist/chunk-3QBYSFDX.js.map +1 -0
- package/dist/chunk-4DAZAO6Y.cjs +59 -0
- package/dist/chunk-4DAZAO6Y.cjs.map +1 -0
- package/dist/{chunk-BS52M4SZ.js → chunk-5YDNHSEU.js} +47 -41
- package/dist/chunk-5YDNHSEU.js.map +1 -0
- package/dist/chunk-7ROOJK7G.cjs +110 -0
- package/dist/chunk-7ROOJK7G.cjs.map +1 -0
- package/dist/{chunk-WKM2D7LF.js → chunk-ASPOGQPS.js} +2 -5
- package/dist/chunk-ASPOGQPS.js.map +1 -0
- package/dist/{chunk-XCZKNTFT.cjs → chunk-BDVAK232.cjs} +23 -24
- package/dist/chunk-BDVAK232.cjs.map +1 -0
- package/dist/chunk-CESGUF6F.cjs +63 -0
- package/dist/chunk-CESGUF6F.cjs.map +1 -0
- package/dist/chunk-CRTRMMJ7.js +59 -0
- package/dist/chunk-CRTRMMJ7.js.map +1 -0
- package/dist/{chunk-VP7WDLJM.js → chunk-DS7GUNDT.js} +17 -14
- package/dist/chunk-DS7GUNDT.js.map +1 -0
- package/dist/chunk-ECDLVJLZ.js +246 -0
- package/dist/chunk-ECDLVJLZ.js.map +1 -0
- package/dist/{chunk-GN5NJ6ZU.js → chunk-GNDW3TAU.js} +3 -6
- package/dist/chunk-GNDW3TAU.js.map +1 -0
- package/dist/{chunk-VZ5MMFIF.cjs → chunk-H65I56SI.cjs} +4 -7
- package/dist/chunk-H65I56SI.cjs.map +1 -0
- package/dist/chunk-HCQJGNWT.cjs +246 -0
- package/dist/chunk-HCQJGNWT.cjs.map +1 -0
- package/dist/chunk-IBQCNI5H.js +372 -0
- package/dist/chunk-IBQCNI5H.js.map +1 -0
- package/dist/chunk-IUVEFLF3.cjs +133 -0
- package/dist/chunk-IUVEFLF3.cjs.map +1 -0
- package/dist/{chunk-Y3SFF6RN.cjs → chunk-KIAIGPG7.cjs} +11 -10
- package/dist/chunk-KIAIGPG7.cjs.map +1 -0
- package/dist/{chunk-QW44EUAH.js → chunk-MEK7YR46.js} +10 -10
- package/dist/chunk-MEK7YR46.js.map +1 -0
- package/dist/{chunk-OHJYXA6R.cjs → chunk-OE5IW4ZG.cjs} +4 -7
- package/dist/chunk-OE5IW4ZG.cjs.map +1 -0
- package/dist/chunk-PHGFXKPU.cjs +51 -0
- package/dist/chunk-PHGFXKPU.cjs.map +1 -0
- package/dist/{chunk-PZ4LZQI4.cjs → chunk-Q23XGBJ5.cjs} +18 -15
- package/dist/chunk-Q23XGBJ5.cjs.map +1 -0
- package/dist/{chunk-DDZMDOSG.js → chunk-STU7SBQX.js} +25 -23
- package/dist/chunk-STU7SBQX.js.map +1 -0
- package/dist/{chunk-BZAPTLMC.js → chunk-T4N6TMUL.js} +49 -49
- package/dist/chunk-T4N6TMUL.js.map +1 -0
- package/dist/chunk-TJESSWIB.cjs +372 -0
- package/dist/chunk-TJESSWIB.cjs.map +1 -0
- package/dist/chunk-UAV6PVB4.js +63 -0
- package/dist/chunk-UAV6PVB4.js.map +1 -0
- package/dist/{chunk-BYKOCVCK.js → chunk-WKJN5A2E.js} +22 -23
- package/dist/chunk-WKJN5A2E.js.map +1 -0
- package/dist/{chunk-XJZAS7NG.cjs → chunk-WRIXKFKW.cjs} +25 -23
- package/dist/chunk-WRIXKFKW.cjs.map +1 -0
- package/dist/{chunk-RBIX6EWU.cjs → chunk-Y7MJBI4A.cjs} +11 -11
- package/dist/chunk-Y7MJBI4A.cjs.map +1 -0
- package/dist/chunk-ZI22WT2P.js +51 -0
- package/dist/chunk-ZI22WT2P.js.map +1 -0
- package/dist/helpers/index.cjs +9 -2
- package/dist/helpers/index.cjs.map +1 -1
- package/dist/helpers/index.d.cts +67 -4
- package/dist/helpers/index.d.ts +67 -4
- package/dist/helpers/index.js +10 -3
- package/dist/hooks/index.cjs +6 -3
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +3 -2
- package/dist/hooks/index.d.ts +3 -2
- package/dist/hooks/index.js +7 -4
- package/dist/index.cjs +25 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -10
- package/dist/index.d.ts +11 -10
- package/dist/index.js +31 -22
- package/dist/partials/FieldCopyTestIdButton/index.cjs +1 -0
- package/dist/partials/FieldCopyTestIdButton/index.cjs.map +1 -1
- package/dist/partials/FieldCopyTestIdButton/index.js +1 -0
- package/dist/partials/FieldValidationError/index.cjs +3 -3
- package/dist/partials/FieldValidationError/index.js +2 -2
- package/package.json +18 -20
- package/dist/FieldArray-DD9z-xZ3.d.cts +0 -37
- package/dist/FieldArray-DD9z-xZ3.d.ts +0 -37
- package/dist/chunk-BBB4FEY6.cjs +0 -22
- package/dist/chunk-BBB4FEY6.cjs.map +0 -1
- package/dist/chunk-BS52M4SZ.js.map +0 -1
- package/dist/chunk-BYKOCVCK.js.map +0 -1
- package/dist/chunk-BZAPTLMC.js.map +0 -1
- package/dist/chunk-DDZMDOSG.js.map +0 -1
- package/dist/chunk-EKE5URXQ.cjs +0 -104
- package/dist/chunk-EKE5URXQ.cjs.map +0 -1
- package/dist/chunk-GN5NJ6ZU.js.map +0 -1
- package/dist/chunk-HOETR36J.cjs +0 -299
- package/dist/chunk-HOETR36J.cjs.map +0 -1
- package/dist/chunk-HZP3EXGR.cjs +0 -241
- package/dist/chunk-HZP3EXGR.cjs.map +0 -1
- package/dist/chunk-IUNDGVMC.js +0 -241
- package/dist/chunk-IUNDGVMC.js.map +0 -1
- package/dist/chunk-KOKIM2ND.js +0 -9
- package/dist/chunk-KOKIM2ND.js.map +0 -1
- package/dist/chunk-OHJYXA6R.cjs.map +0 -1
- package/dist/chunk-PZ4LZQI4.cjs.map +0 -1
- package/dist/chunk-QCVTB2NI.js.map +0 -1
- package/dist/chunk-QW44EUAH.js.map +0 -1
- package/dist/chunk-RBIX6EWU.cjs.map +0 -1
- package/dist/chunk-V46BHM2U.js +0 -22
- package/dist/chunk-V46BHM2U.js.map +0 -1
- package/dist/chunk-VP7WDLJM.js.map +0 -1
- package/dist/chunk-VQWKXSHW.cjs +0 -9
- package/dist/chunk-VQWKXSHW.cjs.map +0 -1
- package/dist/chunk-VZ5MMFIF.cjs.map +0 -1
- package/dist/chunk-WKM2D7LF.js.map +0 -1
- package/dist/chunk-XCZKNTFT.cjs.map +0 -1
- package/dist/chunk-XJWEUCV3.cjs +0 -133
- package/dist/chunk-XJWEUCV3.cjs.map +0 -1
- package/dist/chunk-XJZAS7NG.cjs.map +0 -1
- package/dist/chunk-Y3SFF6RN.cjs.map +0 -1
- package/dist/chunk-Y53IHK6B.js +0 -299
- package/dist/chunk-Y53IHK6B.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementInsertAfterButton.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { toNullishString } from '../helpers';\nimport { useFieldArray, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n appendButton: 'w-full',\n elementContent: 'flex-grow',\n insertAfterButton: 'text-xs font-medium',\n label: '!pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block',\n list: 'm-0 w-full list-none',\n listItem: 'mb-4 flex w-full flex-row items-center',\n removeButton: 'ml-1',\n sortDragHandle: 'mr-2 text-base text-xl',\n },\n});\n\n/**\n * FieldArray component using TODO\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n insertAfter = false,\n label: _label = undefined,\n lastElementNotDeletable = true,\n name,\n sortable = false,\n testId: _testId = undefined,\n}: FieldArrayProps) => {\n // className from slots\n const variants = fieldArrayVariants();\n const className = variantsToClassNames(variants, _className, 'list');\n\n const {\n control,\n debugMode,\n getValues,\n getFieldState,\n trigger,\n // watch\n } = useFormContext();\n\n const { fields, append, remove, insert, move } = useFieldArray({\n control,\n name,\n });\n\n const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n // TODO: what about input props?\n const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n useInput({\n isInvalid: invalid,\n isRequired: required,\n errorMessage: JSON.stringify(error),\n label: _label,\n labelPlacement: 'inside',\n placeholder: ' ',\n classNames: { helperWrapper: 'block' },\n });\n\n // TODO: add info\n const elementInitialValue = toNullishString(_elementInitialValue);\n\n if (lastElementNotDeletable && fields.length === 0) {\n append(elementInitialValue);\n }\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <SortContext sortable={sortable} move={move} fields={fields}>\n <ul\n className={className.list}\n data-testid={testId}\n /**\n * TODO: this trigger causes the field array (not element)\n * are shown immediately, but this will cause additional\n * render cycles, not sure if we should do this...\n */\n onBlur={() => trigger(`${name}`)}\n >\n {/* field array label */}\n {showLabel && (\n <>\n {label && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n {...getLabelProps()}\n className={cn(getLabelProps()?.className, className.label)}\n >\n {label}\n </label>\n )}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )}\n\n {fields.map((field, index) => {\n // create methods for element\n const methods: FieldArrayElementMethods = {\n append: () => append(elementInitialValue),\n duplicate: () => {\n const values = getValues(name);\n insert(index + 1, values[index]);\n },\n insert: () => insert(index + 1, elementInitialValue),\n remove: () => remove(index),\n };\n\n return (\n <FieldArrayElement\n className={className}\n fields={fields}\n id={field.id}\n index={index}\n duplicate={duplicate}\n insertAfter={insertAfter}\n key={field.id}\n lastNotDeletable={lastElementNotDeletable}\n methods={methods}\n name={name}\n sortable={sortable}\n testId={`${testId}_${index}`}\n >\n {children({\n index,\n length: fields.length,\n methods,\n name: `${name}.${index}`,\n testId: `${testId}_${index}`,\n })}\n </FieldArrayElement>\n );\n })}\n\n {/* append elements */}\n <Button\n className={className.appendButton}\n onClick={() => append(elementInitialValue)}\n size=\"sm\"\n testId={`${testId}_append_button`}\n >\n {appendButtonText}\n </Button>\n\n {/* top level field array errors */}\n {/* @ts-expect-error rhf incompatibility */}\n {error?._errors && (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n {/* @ts-expect-error rhf incompatibility */}\n <FieldValidationError error={error?._errors} />\n </div>\n </div>\n )}\n </ul>\n </SortContext>\n );\n};\n\nexport default FieldArray;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext, useInput } from '../../hooks';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport ElementInsertAfterButton from './ElementInsertAfterButton';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport type FieldArrayElementMethods = {\n /** Add new element at end */\n append: () => void;\n /** Clone current element */\n duplicate: () => void;\n /** Add new element after current */\n insert: () => void;\n /** Remove current element */\n remove: () => void;\n};\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of the content of the li */\n elementContent?: ClassValue;\n /** Class for the li */\n listItem?: ClassValue;\n /** Class for the insert button between elements */\n insertAfterButton?: ClassValue;\n /** Class for the remove element button */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** All fields in the form array */\n fields: Record<'id', string>[];\n /** Unique identifier for drag/drop */\n id: string | number;\n /** Field index in array */\n index: number;\n /** Prevent deletion of last remaining element */\n lastNotDeletable?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** Base field name for form context */\n name: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities\n */\nconst FieldArrayElement = ({\n children,\n className,\n fields,\n id,\n index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n name,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n const { getFieldState } = useFormContext();\n const { error, invalid } = getFieldState(`${name}`, undefined);\n\n // TODO: what about input props? and label props? Do we need a label?\n const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n classNames: { helperWrapper: 'block' },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n labelPlacement: 'inside',\n placeholder: ' ',\n });\n\n // Apply transform styles when sortable is enabled for smooth drag animations\n // transform: handles the item's position during drag\n // transition: controls the animation timing when dropping\n const { setNodeRef, transform, transition } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n }\n : undefined;\n\n return (\n <>\n <li\n className={cn(className.listItem)}\n ref={setNodeRef}\n style={sortingStyle}\n >\n {/** sorting drag handle */}\n {sortable && (\n <SortDragHandle\n className={className.sortDragHandle}\n id={id}\n testId={`${testId}_sort_drag_handle`}\n />\n )}\n\n {/** render element fields */}\n <div className={cn(className.elementContent)} data-testid={testId}>\n {children}\n </div>\n\n {/** remove element */}\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n className={className.removeButton}\n onClick={() => methods.remove()}\n testId={`${testId}_remove_button`}\n />\n )}\n\n {/** insertAfter feature when not last element */}\n {insertAfter && index !== fields.length - 1 && (\n <ElementInsertAfterButton\n className={className.insertAfterButton}\n onClick={() => methods.insert()}\n testId={`${testId}_insert_after_button`}\n />\n )}\n </li>\n\n {/** element error */}\n {error && typeof error[index] !== 'undefined' && (\n <div {...getHelperWrapperProps()}>\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n /* @ts-expect-error rhf incompatibility */\n error={error[Number(index)]?._errors}\n />\n </div>\n </div>\n )}\n </>\n );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementInsertAfterButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementInsertAfterButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementInsertAfterButtonProps) => {\n return (\n <Button\n className={cn(className)}\n color=\"success\"\n icon={<FaPlus />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementInsertAfterButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementRemoveButton = ({\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n return (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n testId={testId}\n variant=\"light\"\n />\n );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n /** Optional CSS class name */\n className?: ClassValue;\n /** Unique identifier for sortable item */\n id: string | number;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n className = undefined,\n id,\n testId = undefined,\n}: SortDragHandleProps) => {\n // Get dnd-kit sortable attributes and listeners\n const { attributes, listeners } = useSortable({ id });\n\n return (\n <div\n className={cn(className)}\n data-testid={testId}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...attributes}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...listeners}\n >\n <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","/* eslint-disable react/jsx-props-no-spreading */\n\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** enable/disable sorting functionality */\n sortable: boolean;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n sortable,\n fields,\n move,\n}: SortContextProps) => {\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => field.id === active.id);\n const newIndex = fields.findIndex((field) => field.id === over?.id);\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n items={fields.map((field) => field.id)}\n strategy={verticalListSortingStrategy}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["cn","Button","useSortable","cn","cn","Button","jsx","cn","jsx","cn","jsx","useSortable","cn","jsx","Fragment","jsx","jsxs","cn","Button","FieldArray_default"]}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
10
|
+
|
|
11
|
+
// src/hooks/useFieldArray/useFieldArray.ts
|
|
12
|
+
var _reacthookform = require('react-hook-form');
|
|
13
|
+
|
|
14
|
+
// src/hooks/useFormContext/useFormContext.ts
|
|
15
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
16
|
+
|
|
17
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
18
|
+
|
|
19
|
+
// src/Form/subcomponents/FormContext.tsx
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
var _pixels = require('@fuf-stack/pixels');
|
|
23
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
24
|
+
var DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = "uniform:debug-mode";
|
|
25
|
+
var UniformContext = _react2.default.createContext({
|
|
26
|
+
debugMode: "off",
|
|
27
|
+
preventSubmit: () => void 0,
|
|
28
|
+
setDebugMode: () => void 0,
|
|
29
|
+
validation: void 0
|
|
30
|
+
});
|
|
31
|
+
var FormProvider = ({
|
|
32
|
+
children,
|
|
33
|
+
debugModeSettings = void 0,
|
|
34
|
+
initialValues = void 0,
|
|
35
|
+
onSubmit,
|
|
36
|
+
validation = void 0,
|
|
37
|
+
validationTrigger
|
|
38
|
+
}) => {
|
|
39
|
+
const [preventSubmit, setPreventSubmit] = _react.useState.call(void 0, false);
|
|
40
|
+
const [debugMode, setDebugMode] = _pixels.useLocalStorage.call(void 0,
|
|
41
|
+
(debugModeSettings == null ? void 0 : debugModeSettings.localStorageKey) || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,
|
|
42
|
+
"off"
|
|
43
|
+
);
|
|
44
|
+
const contextValue = _react.useMemo.call(void 0,
|
|
45
|
+
() => ({
|
|
46
|
+
// set debugMode to disabled when debugModeSettings.disable is true
|
|
47
|
+
// otherwise use current debug mode from localStorage
|
|
48
|
+
debugMode: (debugModeSettings == null ? void 0 : debugModeSettings.disable) ? "disabled" : debugMode,
|
|
49
|
+
preventSubmit: (prevent) => {
|
|
50
|
+
setPreventSubmit(prevent);
|
|
51
|
+
},
|
|
52
|
+
setDebugMode,
|
|
53
|
+
validation
|
|
54
|
+
}),
|
|
55
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
|
+
[debugMode, debugModeSettings == null ? void 0 : debugModeSettings.disable]
|
|
57
|
+
);
|
|
58
|
+
const methods = _reacthookform.useForm.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
|
|
59
|
+
defaultValues: initialValues
|
|
60
|
+
}, validation ? {
|
|
61
|
+
// set rhf mode
|
|
62
|
+
// see: https://react-hook-form.com/docs/useform#mode
|
|
63
|
+
mode: validationTrigger,
|
|
64
|
+
resolver: (values) => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
|
|
65
|
+
const _a = yield validation.validateAsync(
|
|
66
|
+
_chunkCESGUF6Fcjs.toValidationFormat.call(void 0, values)
|
|
67
|
+
), { data, errors } = _a, rest = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _a, ["data", "errors"]);
|
|
68
|
+
return _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, { values: data || {}, errors: errors || {} }, rest);
|
|
69
|
+
})
|
|
70
|
+
} : {}));
|
|
71
|
+
const handleSubmit = (e) => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
|
|
72
|
+
if (methods.formState.isValid && preventSubmit) {
|
|
73
|
+
console.warn(
|
|
74
|
+
"[FormProvider] form submit was prevented because preventSubmit is true..."
|
|
75
|
+
);
|
|
76
|
+
e == null ? void 0 : e.preventDefault();
|
|
77
|
+
return Promise.resolve();
|
|
78
|
+
}
|
|
79
|
+
yield methods.handleSubmit(onSubmit)(e);
|
|
80
|
+
});
|
|
81
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UniformContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, methods), { children: children({ handleSubmit }) })) });
|
|
82
|
+
};
|
|
83
|
+
var FormContext_default = FormProvider;
|
|
84
|
+
|
|
85
|
+
// src/hooks/useFormContext/useFormContext.ts
|
|
86
|
+
var checkFieldIsRequired = (validation, path) => {
|
|
87
|
+
const checkRequired = (schema) => {
|
|
88
|
+
if (schema.type === "array" && (schema == null ? void 0 : schema.minLength)) {
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
return !schema.isOptional && !schema.isNullable;
|
|
92
|
+
};
|
|
93
|
+
return validation.checkSchemaPath(checkRequired, path);
|
|
94
|
+
};
|
|
95
|
+
var useFormContext = () => {
|
|
96
|
+
const _a = _reacthookform.useFormContext.call(void 0, ), {
|
|
97
|
+
formState,
|
|
98
|
+
getFieldState: getFieldStateOrig
|
|
99
|
+
} = _a, otherMethods = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _a, [
|
|
100
|
+
"formState",
|
|
101
|
+
// https://react-hook-form.com/docs/useform/getfieldstate
|
|
102
|
+
// for getFieldState a subscription to formState properties is needed!
|
|
103
|
+
"getFieldState"
|
|
104
|
+
]);
|
|
105
|
+
const uniformContext = _react.useContext.call(void 0, UniformContext);
|
|
106
|
+
const getFieldState = (name, testId) => {
|
|
107
|
+
const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
|
|
108
|
+
const required = (uniformContext == null ? void 0 : uniformContext.validation) ? checkFieldIsRequired(uniformContext.validation, fieldPath) : false;
|
|
109
|
+
const _a2 = getFieldStateOrig(name, formState), { error } = _a2, rest = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _a2, ["error"]);
|
|
110
|
+
return _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, rest), {
|
|
111
|
+
error,
|
|
112
|
+
// Ensure correct type for error
|
|
113
|
+
required,
|
|
114
|
+
testId: _pixelutils.slugify.call(void 0, testId || name)
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
return _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, otherMethods), uniformContext), {
|
|
118
|
+
getFieldState,
|
|
119
|
+
formState
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// src/hooks/useInput/useInput.ts
|
|
124
|
+
var _input = require('@heroui/input');
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
exports.useFieldArray = _reacthookform.useFieldArray; exports.FormContext_default = FormContext_default; exports.checkFieldIsRequired = checkFieldIsRequired; exports.useFormContext = useFormContext; exports.useInput = _input.useInput;
|
|
133
|
+
//# sourceMappingURL=chunk-IUVEFLF3.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IUVEFLF3.cjs","../src/hooks/useFieldArray/useFieldArray.ts","../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx","../src/hooks/useInput/useInput.ts"],"names":["_a"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IUVEFLF3.cjs","sourcesContent":[null,"/* eslint-disable import/prefer-default-export */\n\n/** @see https://react-hook-form.com/docs/usefieldarray */\nexport { useFieldArray } from 'react-hook-form';\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\n\n/** Schema check whether a field is required or optional */\nexport const checkFieldIsRequired = (\n validation: VetoInstance,\n path: string[],\n): boolean => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const checkRequired = (schema: any) => {\n // arrays with minLength are required\n if (schema.type === 'array' && schema?.minLength) {\n return true;\n }\n // all other fields are required if they are\n // not optional and not nullable\n return !schema.isOptional && !schema.isNullable;\n };\n\n return validation.checkSchemaPath(checkRequired, path);\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n const {\n formState,\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n\n const uniformContext = useContext(UniformContext);\n\n /**\n * Updated getFieldState method which returns:\n * - Whether the field is required by checking the validation schema\n * - Existing field state information (errors, etc.)\n */\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n // Check if the field is required using the validation schema\n const required = uniformContext?.validation\n ? checkFieldIsRequired(uniformContext.validation, fieldPath)\n : false;\n\n // Get the original field state (errors, etc.) from react-hook-form\n const { error, ...rest } = getFieldStateOrig(name, formState);\n\n return {\n ...rest,\n error: error as FieldError[] | undefined, // Ensure correct type for error\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n ...uniformContext,\n getFieldState,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport type DebugModeSettings = {\n /** disable form debug completely */\n disable?: boolean;\n /** custom localStorage key to save debug mode state */\n localStorageKey?: string;\n};\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Optional Veto validation schema instance for form validation */\n validation?: VetoInstance;\n}>({\n debugMode: 'off',\n preventSubmit: () => undefined,\n setDebugMode: () => undefined,\n validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n }) => ReactNode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n debugModeSettings = undefined,\n initialValues = undefined,\n onSubmit,\n validation = undefined,\n validationTrigger,\n}) => {\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n debugModeSettings?.localStorageKey || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n 'off',\n );\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => ({\n // set debugMode to disabled when debugModeSettings.disable is true\n // otherwise use current debug mode from localStorage\n debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n preventSubmit: (prevent: boolean) => {\n setPreventSubmit(prevent);\n },\n setDebugMode,\n validation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode, debugModeSettings?.disable],\n );\n\n // Initialize react hook form\n const methods = useForm({\n defaultValues: initialValues,\n // add validation config when validation schema provided\n ...(validation\n ? {\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n toValidationFormat(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n }\n : {}),\n });\n\n // Create submit handler\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n await methods.handleSubmit(onSubmit)(e);\n };\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n","/* eslint-disable import/prefer-default-export */\nexport { useInput } from '@heroui/input';\n"]}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPHGFXKPUcjs = require('./chunk-PHGFXKPU.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
13
13
|
|
|
14
14
|
// src/TextArea/TextArea.tsx
|
|
15
|
-
var _input = require('@
|
|
15
|
+
var _input = require('@heroui/input');
|
|
16
16
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
17
17
|
var _jsxruntime = require('react/jsx-runtime');
|
|
18
18
|
var TextArea = ({
|
|
@@ -24,12 +24,12 @@ var TextArea = ({
|
|
|
24
24
|
placeholder = " ",
|
|
25
25
|
testId: _testId = void 0
|
|
26
26
|
}) => {
|
|
27
|
-
const { control, debugMode, getFieldState } =
|
|
27
|
+
const { control, debugMode, getFieldState } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
28
28
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
29
29
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
30
30
|
const showLabel = label || showTestIdCopyButton;
|
|
31
31
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
32
|
-
|
|
32
|
+
_chunkPHGFXKPUcjs.Controller_default,
|
|
33
33
|
{
|
|
34
34
|
control,
|
|
35
35
|
name,
|
|
@@ -37,7 +37,8 @@ var TextArea = ({
|
|
|
37
37
|
render: ({
|
|
38
38
|
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
39
39
|
}) => {
|
|
40
|
-
|
|
40
|
+
var _a;
|
|
41
|
+
const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
|
|
41
42
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
42
43
|
_input.Textarea,
|
|
43
44
|
{
|
|
@@ -46,7 +47,7 @@ var TextArea = ({
|
|
|
46
47
|
inputWrapper: "group-data-[focus=true]:border-focus"
|
|
47
48
|
},
|
|
48
49
|
"data-testid": testId,
|
|
49
|
-
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
50
|
+
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
|
|
50
51
|
isDisabled,
|
|
51
52
|
isRequired: required,
|
|
52
53
|
isInvalid: invalid,
|
|
@@ -78,4 +79,4 @@ var TextArea_default2 = TextArea_default;
|
|
|
78
79
|
|
|
79
80
|
|
|
80
81
|
exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
|
|
81
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-KIAIGPG7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KIAIGPG7.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACXA,sCAAyC;AAEzC,oDAAmB;AAmFgB,+CAAA;AAxDnC,IAAM,SAAA,EAAW,CAAC;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,IAAA;AAAA,EACA,YAAA,EAAc,GAAA;AAAA,EACd,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAAqB;AACnB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,EAAA,uBACE,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA,EAAQ,CAAC;AAAA,QACP,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,MAAA,EAAQ,EAAA,EAAI,IAAI;AAAA,MACnE,CAAA,EAAA,GAAM;AArDZ,QAAA,IAAA,EAAA;AA8EQ,QAAA,MAAM,aAAA,EAAA,CAAe,GAAA,EAAA,MAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,KAAA,CAAO,QAAA,CAAA,CAAA,EAAA,GAAP,KAAA,EAAA,GAAA,EAAqB,EAAA;AAE1C,QAAA,uBACE,6BAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,YACvB,UAAA,EAAY;AAAA,cACV,YAAA,EAAc;AAAA,YAChB,CAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAc,MAAA,mBAAS,6BAAA,8CAAC,EAAA,EAAqB,MAAA,CAAc,CAAA;AAAA,YAC3D,UAAA;AAAA,YACA,UAAA,EAAY,QAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,KAAA,EACE,UAAA,mBACE,8BAAA,oBAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,qBAAA,mBACC,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,YAAA,EAAA,CAE3C,CAAA;AAAA,YAGJ,cAAA,EAAe,SAAA;AAAA,YACf,WAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA,EAAO,YAAA;AAAA,YACP,QAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA,EAAQ,UAAA;AAAA,YAEP;AAAA,UAAA;AAAA,QACH,CAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;AD7Cf;AACA;AEpEA,IAAOA,kBAAAA,EAAQ,gBAAA;AFsEf;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KIAIGPG7.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\n disabled = false,\n label = undefined,\n name,\n placeholder = ' ',\n testId: _testId = undefined,\n}: TextAreaProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n name={name}\n disabled={disabled}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Ensures the textarea always has a defined string value to prevent uncontrolled to\n * controlled component warnings:\n *\n * 1. Warning Prevention:\n * - Sets default value to '' in field destructuring\n * - Guarantees the value prop is never undefined/null\n * - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n *\n * 2. Value Handling:\n * - Converts undefined/null to empty string\n * - Converts non-string values to strings\n * - Maintains existing string values\n *\n * Examples:\n * - undefined → \"\" (prevents uncontrolled warning)\n * - null → \"\" (prevents uncontrolled warning)\n * - \"hello\" → \"hello\" (maintains string value)\n * - 123 → \"123\" (converts to string)\n *\n * Without this handling, the textarea could switch between controlled/uncontrolled\n * states when the form value changes from undefined to defined, causing React warnings\n * and potential rendering issues.\n */\n const displayValue = value?.toString() ?? '';\n\n return (\n <HeroTextArea\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isRequired={required}\n isInvalid={invalid}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n placeholder={placeholder}\n name={name}\n value={displayValue}\n onChange={onChange}\n onBlur={onBlur}\n ref={ref}\n variant=\"bordered\"\n >\n {children}\n </HeroTextArea>\n );\n }}\n />\n );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"]}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-
|
|
2
|
+
Controller_default
|
|
3
|
+
} from "./chunk-ZI22WT2P.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldCopyTestIdButton_default
|
|
6
6
|
} from "./chunk-2CRY7VDQ.js";
|
|
7
7
|
import {
|
|
8
8
|
FieldValidationError_default
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-ASPOGQPS.js";
|
|
10
10
|
import {
|
|
11
11
|
useFormContext
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-T4N6TMUL.js";
|
|
13
13
|
|
|
14
14
|
// src/Input/Input.tsx
|
|
15
|
-
import { Input as
|
|
15
|
+
import { Input as HeroInput } from "@heroui/input";
|
|
16
16
|
import { cn } from "@fuf-stack/pixel-utils";
|
|
17
17
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
18
|
var Input = ({
|
|
@@ -32,7 +32,7 @@ var Input = ({
|
|
|
32
32
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
33
33
|
const showLabel = label || showTestIdCopyButton;
|
|
34
34
|
return /* @__PURE__ */ jsx(
|
|
35
|
-
|
|
35
|
+
Controller_default,
|
|
36
36
|
{
|
|
37
37
|
control,
|
|
38
38
|
disabled,
|
|
@@ -40,19 +40,19 @@ var Input = ({
|
|
|
40
40
|
render: ({
|
|
41
41
|
field: { disabled: isDisabled, onChange, onBlur, value = "", ref }
|
|
42
42
|
}) => {
|
|
43
|
-
const displayValue = transformValue
|
|
43
|
+
const displayValue = (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
|
|
44
44
|
const handleChange = (e) => {
|
|
45
45
|
const inputValue = e.target.value;
|
|
46
46
|
if (type === "number") {
|
|
47
47
|
onChange(inputValue === "" ? "" : Number(inputValue));
|
|
48
48
|
} else {
|
|
49
49
|
onChange(
|
|
50
|
-
transformValue
|
|
50
|
+
(transformValue == null ? void 0 : transformValue.formValue) ? transformValue.formValue(inputValue) : inputValue
|
|
51
51
|
);
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
return /* @__PURE__ */ jsx(
|
|
55
|
-
|
|
55
|
+
HeroInput,
|
|
56
56
|
{
|
|
57
57
|
className: cn(className),
|
|
58
58
|
classNames: {
|
|
@@ -94,4 +94,4 @@ export {
|
|
|
94
94
|
Input_default,
|
|
95
95
|
Input_default2
|
|
96
96
|
};
|
|
97
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-MEK7YR46.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({\n field: { disabled: isDisabled, onChange, onBlur, value = '', ref },\n }) => {\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n // @ts-expect-error number is ok here\n value={displayValue}\n variant=\"bordered\"\n />\n );\n }}\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;AAEA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAwHgB,SAMnB,UANmB,KAMnB,YANmB;AAlFnC,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,UAAU,QAAQ,QAAQ,IAAI,IAAI;AAAA,MACnE,MAAM;AAaJ,cAAM,gBAAe,iDAAgB,gBACjC,eAAe,aAAa,wBAAS,EAAE,IACtC,wBAAS;AAqBd,cAAM,eAAe,CAAC,MAA2C;AAC/D,gBAAM,aAAa,EAAE,OAAO;AAC5B,cAAI,SAAS,UAAU;AACrB,qBAAS,eAAe,KAAK,KAAK,OAAO,UAAU,CAAC;AAAA,UACtD,OAAO;AACL;AAAA,eACE,iDAAgB,aACZ,eAAe,UAAU,UAAU,IACnC;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,SAAS;AAAA,YACvB,YAAY;AAAA,cACV,cAAc;AAAA,YAChB;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE,aACE,iCACG;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,QAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YAEA,OAAO;AAAA,YACP,SAAQ;AAAA;AAAA,QACV;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;;;ACvJf,IAAOA,iBAAQ;","names":["Input_default"]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true})
|
|
2
|
-
|
|
3
|
-
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
4
|
-
|
|
5
|
-
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
2
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
6
3
|
var _jsxruntime = require('react/jsx-runtime');
|
|
7
4
|
var FieldValidationError = ({
|
|
8
5
|
className = void 0,
|
|
@@ -25,7 +22,7 @@ var FieldValidationError = ({
|
|
|
25
22
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
26
23
|
"ul",
|
|
27
24
|
{
|
|
28
|
-
"data-testid":
|
|
25
|
+
"data-testid": _pixelutils.slugify.call(void 0, testId || errorStrings.join()),
|
|
29
26
|
"aria-label": ariaString,
|
|
30
27
|
className,
|
|
31
28
|
children: errorStrings.map((errorString, i) => (
|
|
@@ -44,4 +41,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
|
|
|
44
41
|
|
|
45
42
|
|
|
46
43
|
exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
|
|
47
|
-
//# sourceMappingURL=chunk-
|
|
44
|
+
//# sourceMappingURL=chunk-OE5IW4ZG.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-OE5IW4ZG.cjs","../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"names":[],"mappings":"AAAA;ACEA,oDAAwB;AA2Cd,+CAAA;AAhCV,IAAM,qBAAA,EAAuB,CAAC;AAAA,EAC5B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,KAAA;AAAA,EACA,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAiC;AAC/B,EAAA,GAAA,CAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,UAAA,EAA0B,CAAC,CAAA;AAE/B,EAAA,GAAA,CAAI,OAAO,MAAA,IAAU,SAAA,GAAY,CAAA,CAAE,MAAA,WAAiB,KAAA,CAAA,EAAQ;AAC1D,IAAA,MAAM,YAAA,EAAc,KAAA;AACpB,IAAA,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,EAAA,GAAQ;AAClC,MAAA,UAAA,EAAY,CAAC,GAAG,SAAA,EAAW,GAAG,WAAA,CAAY,GAAG,CAAC,CAAA;AAAA,IAChD,CAAC,CAAA;AAAA,EACH;AAEA,EAAA,MAAM,WAAA,EACJ,IAAA,CAAK,SAAA,CAAU,SAAS,EAAA,IAAM,KAAA,EAAO,UAAA,EAAa,KAAA;AACpD,EAAA,MAAM,aAAA,EAAyB,UAAA,CAAW,GAAA,CAAI,CAAC,CAAA,EAAA,GAAM,CAAA,CAAE,OAAO,CAAA;AAC9D,EAAA,MAAM,WAAA,EAAa,CAAA,OAAA,EAAU,YAAA,CAAa,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAGlD,EAAA;AAAC,IAAA;AAAA,IAAA;AAC6C,MAAA;AAChC,MAAA;AACZ,MAAA;AAEwC,MAAA;AAAA;AAGpC,wBAAA;AAEH,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;AAEe;ADjBwC;AACA;AE9BxC;AFgCwC;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-OE5IW4ZG.cjs","sourcesContent":[null,"import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n className?: string;\n error: FieldError[] | Record<string, FieldError[]>;\n testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n className = undefined,\n error,\n testId = undefined,\n}: FieldValidationErrorProps) => {\n if (!error) {\n return null;\n }\n\n let tmpErrors: FieldError[] = [];\n\n if (typeof error === 'object' && !(error instanceof Array)) {\n const errorObject = error as Record<string, FieldError[]>;\n Object.keys(error).forEach((key) => {\n tmpErrors = [...tmpErrors, ...errorObject[key]];\n });\n }\n\n const errorArray: FieldError[] =\n JSON.stringify(tmpErrors) !== '[]' ? tmpErrors : (error as FieldError[]);\n const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n return (\n <ul\n data-testid={slugify(testId || errorStrings.join())}\n aria-label={ariaString} // TODO: ist das richtig @Hannes?\n className={className}\n >\n {errorStrings.map((errorString: string, i: number) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{errorString}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
10
|
+
|
|
11
|
+
// src/Controller/Controller.tsx
|
|
12
|
+
var _reacthookform = require('react-hook-form');
|
|
13
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
14
|
+
var Controller = (_a) => {
|
|
15
|
+
var _b = _a, {
|
|
16
|
+
render
|
|
17
|
+
} = _b, props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _b, [
|
|
18
|
+
"render"
|
|
19
|
+
]);
|
|
20
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
21
|
+
_reacthookform.Controller,
|
|
22
|
+
_chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, props), {
|
|
23
|
+
render: (_a2) => {
|
|
24
|
+
var _b2 = _a2, { field } = _b2, rest = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _b2, ["field"]);
|
|
25
|
+
return render(_chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
|
|
26
|
+
field: _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, field), {
|
|
27
|
+
// Handles both direct values (onChange("value")) and events (onChange(event))
|
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
29
|
+
onChange: (...event) => {
|
|
30
|
+
var _a3, _b3, _c;
|
|
31
|
+
const value = (_c = (_b3 = (_a3 = event[0]) == null ? void 0 : _a3.target) == null ? void 0 : _b3.value) != null ? _c : event[0];
|
|
32
|
+
field.onChange(_chunkCESGUF6Fcjs.toNullishString.call(void 0, value));
|
|
33
|
+
},
|
|
34
|
+
// Convert null/undefined to empty string for UI display
|
|
35
|
+
value: _chunkCESGUF6Fcjs.fromNullishString.call(void 0, field.value)
|
|
36
|
+
})
|
|
37
|
+
}, rest));
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
var Controller_default = Controller;
|
|
43
|
+
|
|
44
|
+
// src/Controller/index.ts
|
|
45
|
+
var Controller_default2 = Controller_default;
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
exports.Controller_default = Controller_default; exports.Controller_default2 = Controller_default2;
|
|
51
|
+
//# sourceMappingURL=chunk-PHGFXKPU.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PHGFXKPU.cjs","../src/Controller/Controller.tsx","../src/Controller/index.ts"],"names":["_a","_b","Controller_default"],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACHA,gDAA4C;AA8CxC,+CAAA;AALJ,IAAM,WAAA,EAAa,CAAuC,EAAA,EAAA,GAGrB;AAHqB,EAAA,IAAA,GAAA,EAAA,EAAA,EACxD;AAAA,IAAA;AAAA,EAjDF,EAAA,EAgD0D,EAAA,EAErD,MAAA,EAAA,yCAAA,EAFqD,EAErD;AAAA,IADH;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,uBACE,6BAAA;AAAA,IAAC,yBAAA;AAAA,IAAA,6CAAA,8CAAA,CAAA,CAAA,EAEK,KAAA,CAAA,EAFL;AAAA,MAGC,MAAA,EAAQ,CAACA,GAAAA,EAAAA,GAAuB;AAAvB,QAAA,IAAAC,IAAAA,EAAAD,GAAAA,EAAE,EAAA,MAxDjB,EAAA,EAwDeC,GAAAA,EAAY,KAAA,EAAA,yCAAA,GAAZA,EAAY,CAAV,OAAA,CAAA,CAAA;AACT,QAAA,OAAO,MAAA,CAAO,8CAAA;AAAA,UACZ,KAAA,EAAO,6CAAA,8CAAA,CAAA,CAAA,EACF,KAAA,CAAA,EADE;AAAA;AAAA;AAAA,YAIL,QAAA,EAAU,CAAA,GAAI,KAAA,EAAA,GAAiB;AA9D3C,cAAA,IAAAD,GAAAA,EAAAC,GAAAA,EAAA,EAAA;AA+Dc,cAAA,MAAM,MAAA,EAAA,CAAQ,GAAA,EAAA,CAAAA,IAAAA,EAAAA,CAAAD,IAAAA,EAAA,KAAA,CAAM,CAAC,CAAA,EAAA,GAAP,KAAA,EAAA,KAAA,EAAA,EAAAA,GAAAA,CAAU,MAAA,EAAA,GAAV,KAAA,EAAA,KAAA,EAAA,EAAAC,GAAAA,CAAkB,KAAA,EAAA,GAAlB,KAAA,EAAA,GAAA,EAA2B,KAAA,CAAM,CAAC,CAAA;AAChD,cAAA,KAAA,CAAM,QAAA,CAAS,+CAAA,KAAqB,CAAC,CAAA;AAAA,YACvC,CAAA;AAAA;AAAA,YAEA,KAAA,EAAO,iDAAA,KAAkB,CAAM,KAAK;AAAA,UACtC,CAAA;AAAA,QAAA,CAAA,EACG,IAAA,CACJ,CAAA;AAAA,MACH;AAAA,IAAA,CAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,mBAAA,EAAQ,UAAA;ADlCf;AACA;AErCA,IAAOC,oBAAAA,EAAQ,kBAAA;AFuCf;AACA;AACE;AACA;AACF,mGAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PHGFXKPU.cjs","sourcesContent":[null,"import type {\n ControllerFieldState,\n ControllerRenderProps,\n ControllerProps as RHFControllerProps,\n UseFormStateReturn,\n} from 'react-hook-form';\n\nimport { Controller as RHFController } from 'react-hook-form';\n\nimport { fromNullishString, toNullishString } from '../helpers';\n\nexport type ControllerProps<TFieldValues extends object = object> = Omit<\n RHFControllerProps<TFieldValues>,\n 'render'\n> & {\n /**\n * Render prop that receives the form control props with nullish string handling.\n * The field object contains all the properties needed to control an input:\n * - onChange: Handles both direct value changes and event objects\n * - value: Always provides a string value, converting null/undefined to empty string\n * - name, ref, etc: Other standard field properties from react-hook-form\n */\n render: (props: {\n field: Omit<ControllerRenderProps<TFieldValues>, 'onChange' | 'value'> & {\n // Using any[] to support both direct value changes and React synthetic events\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => void;\n value: string;\n };\n formState: UseFormStateReturn<TFieldValues>;\n fieldState: ControllerFieldState;\n }) => React.ReactElement;\n};\n\n/**\n * A wrapper around react-hook-form's Controller that transparently handles nullish string conversions.\n *\n * Key features:\n * 1. Empty strings ('') in the UI are stored as null in form state\n * 2. Null/undefined values in form state are displayed as empty strings in the UI\n * 3. Handles both direct value changes and React synthetic events\n * 4. Maintains the same API as react-hook-form's Controller\n *\n * This enables consistent handling of empty/null values while keeping a clean API\n * for form inputs that expect string values.\n *\n * @see https://react-hook-form.com/docs/usecontroller/controller\n */\nconst Controller = <TFieldValues extends object = object>({\n render,\n ...props\n}: ControllerProps<TFieldValues>) => {\n return (\n <RHFController<TFieldValues>\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n render={({ field, ...rest }) => {\n return render({\n field: {\n ...field,\n // Handles both direct values (onChange(\"value\")) and events (onChange(event))\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => {\n const value = event[0]?.target?.value ?? event[0];\n field.onChange(toNullishString(value));\n },\n // Convert null/undefined to empty string for UI display\n value: fromNullishString(field.value) as string,\n },\n ...rest,\n });\n }}\n />\n );\n};\n\nexport default Controller;\n","import Controller from './Controller';\n\nexport type { ControllerProps } from './Controller';\n\nexport { Controller };\n\nexport default Controller;\n"]}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
4
5
|
|
|
5
|
-
var _chunkXJWEUCV3cjs = require('./chunk-XJWEUCV3.cjs');
|
|
6
6
|
|
|
7
|
+
var _chunkCESGUF6Fcjs = require('./chunk-CESGUF6F.cjs');
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
|
|
10
|
+
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
9
11
|
|
|
10
12
|
// src/Form/Form.tsx
|
|
11
13
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
@@ -24,22 +26,22 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
24
26
|
setDebugMode,
|
|
25
27
|
validation,
|
|
26
28
|
watch
|
|
27
|
-
} =
|
|
29
|
+
} = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
28
30
|
const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
|
|
29
|
-
const
|
|
31
|
+
const validationValues = _chunkCESGUF6Fcjs.toValidationFormat.call(void 0, watch());
|
|
30
32
|
const debugTestIdsEnabled = debugMode === "debug-testids";
|
|
31
33
|
_react.useEffect.call(void 0,
|
|
32
34
|
() => {
|
|
33
|
-
const updateValidationErrors =
|
|
35
|
+
const updateValidationErrors = () => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
|
|
34
36
|
if (validation) {
|
|
35
|
-
const validateResult =
|
|
36
|
-
setValidationErrors(
|
|
37
|
+
const validateResult = yield validation == null ? void 0 : validation.validateAsync(validationValues);
|
|
38
|
+
setValidationErrors(validateResult == null ? void 0 : validateResult.errors);
|
|
37
39
|
}
|
|
38
|
-
};
|
|
40
|
+
});
|
|
39
41
|
updateValidationErrors();
|
|
40
42
|
},
|
|
41
43
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
|
-
[JSON.stringify(
|
|
44
|
+
[JSON.stringify(validationValues)]
|
|
43
45
|
);
|
|
44
46
|
if (!debugMode || debugMode === "off") {
|
|
45
47
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -84,7 +86,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
84
86
|
_pixels.Json,
|
|
85
87
|
{
|
|
86
88
|
value: {
|
|
87
|
-
values:
|
|
89
|
+
values: validationValues,
|
|
88
90
|
errors: validationErrors,
|
|
89
91
|
dirtyFields,
|
|
90
92
|
isValid,
|
|
@@ -100,6 +102,7 @@ var FormDebugViewer_default = FormDebugViewer;
|
|
|
100
102
|
|
|
101
103
|
// src/Form/Form.tsx
|
|
102
104
|
|
|
105
|
+
var IS_TEST = process.env.NODE_ENV === "test";
|
|
103
106
|
var Form = ({
|
|
104
107
|
children,
|
|
105
108
|
className = void 0,
|
|
@@ -112,7 +115,7 @@ var Form = ({
|
|
|
112
115
|
validationTrigger = "all"
|
|
113
116
|
}) => {
|
|
114
117
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
115
|
-
|
|
118
|
+
_chunkIUVEFLF3cjs.FormContext_default,
|
|
116
119
|
{
|
|
117
120
|
debugModeSettings: debug,
|
|
118
121
|
initialValues,
|
|
@@ -124,13 +127,13 @@ var Form = ({
|
|
|
124
127
|
"form",
|
|
125
128
|
{
|
|
126
129
|
className: _pixelutils.cn.call(void 0, "flex-grow", className),
|
|
127
|
-
"data-testid":
|
|
130
|
+
"data-testid": _pixelutils.slugify.call(void 0, testId || name || ""),
|
|
128
131
|
name,
|
|
129
132
|
onSubmit: handleSubmit,
|
|
130
133
|
children
|
|
131
134
|
}
|
|
132
135
|
),
|
|
133
|
-
!
|
|
136
|
+
!IS_TEST && !(debug == null ? void 0 : debug.disable) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
|
|
134
137
|
] })
|
|
135
138
|
}
|
|
136
139
|
);
|
|
@@ -144,4 +147,4 @@ var Form_default2 = Form_default;
|
|
|
144
147
|
|
|
145
148
|
|
|
146
149
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
147
|
-
//# sourceMappingURL=chunk-
|
|
150
|
+
//# sourceMappingURL=chunk-Q23XGBJ5.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-Q23XGBJ5.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-Q23XGBJ5.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit }) => (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {/* render debug viewer when not in test environment and debug not disabled */}\n {!IS_TEST && !debug?.disable && (\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n )}\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { toValidationFormat } from '../../helpers';\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { dirtyFields, isValid, isSubmitting },\n setDebugMode,\n validation,\n watch,\n } = useFormContext();\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const validationValues = toValidationFormat(watch());\n const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult =\n await validation?.validateAsync(validationValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(validationValues)],\n );\n\n if (!debugMode || debugMode === 'off') {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebugMode('debug')}\n className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Button\n variant={debugTestIdsEnabled ? 'solid' : 'light'}\n icon={<FaBullseye />}\n className=\"mb-4 ml-auto mr-auto\"\n onClick={() =>\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n }\n >\n {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: validationValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|