@fuf-stack/uniform 1.8.7 → 1.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Checkboxes/index.cjs +4 -4
- package/dist/Checkboxes/index.js +3 -3
- package/dist/FieldArray/index.cjs +4 -4
- package/dist/FieldArray/index.js +3 -3
- package/dist/Form/index.cjs +2 -2
- package/dist/Form/index.js +2 -2
- package/dist/Input/index.cjs +4 -4
- package/dist/Input/index.js +3 -3
- package/dist/RadioBoxes/index.cjs +4 -4
- package/dist/RadioBoxes/index.js +3 -3
- package/dist/RadioTabs/index.cjs +4 -4
- package/dist/RadioTabs/index.js +3 -3
- package/dist/Radios/index.cjs +4 -4
- package/dist/Radios/index.js +3 -3
- package/dist/Select/index.cjs +4 -4
- package/dist/Select/index.js +3 -3
- package/dist/SubmitButton/index.cjs +2 -2
- package/dist/SubmitButton/index.js +2 -2
- package/dist/Switch/index.cjs +2 -2
- package/dist/Switch/index.js +2 -2
- package/dist/TextArea/index.cjs +4 -4
- package/dist/TextArea/index.js +3 -3
- package/dist/{chunk-GVKSBFOS.cjs → chunk-27MWGFXR.cjs} +6 -8
- package/dist/chunk-27MWGFXR.cjs.map +1 -0
- package/dist/{chunk-RPIKHV7T.js → chunk-77OMBV7C.js} +2 -2
- package/dist/{chunk-CZPUJAT5.js → chunk-F3WXUKZG.js} +2 -2
- package/dist/{chunk-GCI4MWZX.cjs → chunk-F5DISGJ4.cjs} +6 -6
- package/dist/{chunk-GCI4MWZX.cjs.map → chunk-F5DISGJ4.cjs.map} +1 -1
- package/dist/{chunk-S5SRNIJH.cjs → chunk-H2PPUEUO.cjs} +3 -3
- package/dist/{chunk-S5SRNIJH.cjs.map → chunk-H2PPUEUO.cjs.map} +1 -1
- package/dist/{chunk-UJTJFODD.cjs → chunk-HUDJU756.cjs} +3 -3
- package/dist/{chunk-UJTJFODD.cjs.map → chunk-HUDJU756.cjs.map} +1 -1
- package/dist/{chunk-MXWGFGIB.cjs → chunk-JG7S3DEH.cjs} +3 -3
- package/dist/{chunk-MXWGFGIB.cjs.map → chunk-JG7S3DEH.cjs.map} +1 -1
- package/dist/{chunk-4KSXHKK2.js → chunk-KE5DB3DZ.js} +2 -2
- package/dist/{chunk-ACEV2KCD.cjs → chunk-LIW7KW2L.cjs} +3 -3
- package/dist/{chunk-ACEV2KCD.cjs.map → chunk-LIW7KW2L.cjs.map} +1 -1
- package/dist/{chunk-LOAKVTW4.cjs → chunk-NQ3KBYW6.cjs} +3 -3
- package/dist/{chunk-LOAKVTW4.cjs.map → chunk-NQ3KBYW6.cjs.map} +1 -1
- package/dist/{chunk-TZ4SEUOI.js → chunk-OZQQSTVH.js} +6 -8
- package/dist/chunk-OZQQSTVH.js.map +1 -0
- package/dist/{chunk-7V7P7AXS.js → chunk-PHMEYG5F.js} +2 -2
- package/dist/{chunk-FF2R6BBI.cjs → chunk-QLMUUXQO.cjs} +3 -3
- package/dist/{chunk-FF2R6BBI.cjs.map → chunk-QLMUUXQO.cjs.map} +1 -1
- package/dist/{chunk-WK73IUDJ.js → chunk-REVHYI2O.js} +3 -3
- package/dist/{chunk-PQICMI5J.cjs → chunk-SG3JI5R3.cjs} +3 -3
- package/dist/{chunk-PQICMI5J.cjs.map → chunk-SG3JI5R3.cjs.map} +1 -1
- package/dist/{chunk-GOHZCOGM.js → chunk-T6G6NGLL.js} +2 -2
- package/dist/{chunk-JE4HEKYF.js → chunk-U4D6YJ6Z.js} +2 -2
- package/dist/{chunk-A5GVXO7N.js → chunk-VIK6VTAZ.js} +2 -2
- package/dist/{chunk-3YISBVVN.js → chunk-YBLDWOOG.js} +2 -2
- package/dist/{chunk-PIF2KRMD.cjs → chunk-YYLTLVIF.cjs} +3 -3
- package/dist/{chunk-PIF2KRMD.cjs.map → chunk-YYLTLVIF.cjs.map} +1 -1
- package/dist/hooks/index.cjs +3 -3
- package/dist/hooks/index.d.cts +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +2 -2
- package/dist/hooks/useClientValidation/index.d.cts +2 -2
- package/dist/hooks/useClientValidation/index.d.ts +2 -2
- package/dist/hooks/useUniformField/index.cjs +2 -2
- package/dist/hooks/useUniformField/index.js +1 -1
- package/dist/hooks/useUniformFieldArray/index.cjs +3 -3
- package/dist/hooks/useUniformFieldArray/index.js +2 -2
- package/dist/index.cjs +11 -11
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +12 -12
- package/package.json +3 -3
- package/dist/chunk-GVKSBFOS.cjs.map +0 -1
- package/dist/chunk-TZ4SEUOI.js.map +0 -1
- /package/dist/{chunk-RPIKHV7T.js.map → chunk-77OMBV7C.js.map} +0 -0
- /package/dist/{chunk-CZPUJAT5.js.map → chunk-F3WXUKZG.js.map} +0 -0
- /package/dist/{chunk-4KSXHKK2.js.map → chunk-KE5DB3DZ.js.map} +0 -0
- /package/dist/{chunk-7V7P7AXS.js.map → chunk-PHMEYG5F.js.map} +0 -0
- /package/dist/{chunk-WK73IUDJ.js.map → chunk-REVHYI2O.js.map} +0 -0
- /package/dist/{chunk-GOHZCOGM.js.map → chunk-T6G6NGLL.js.map} +0 -0
- /package/dist/{chunk-JE4HEKYF.js.map → chunk-U4D6YJ6Z.js.map} +0 -0
- /package/dist/{chunk-A5GVXO7N.js.map → chunk-VIK6VTAZ.js.map} +0 -0
- /package/dist/{chunk-3YISBVVN.js.map → chunk-YBLDWOOG.js.map} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -29,7 +29,7 @@ import 'react';
|
|
|
29
29
|
import '@fuf-stack/veto';
|
|
30
30
|
import 'react-hook-form';
|
|
31
31
|
import './FormContext-9Firwt4k.js';
|
|
32
|
-
import '@fuf-stack/veto/dist/types.d-
|
|
32
|
+
import '@fuf-stack/veto/dist/types.d-BDYR8HZ3';
|
|
33
33
|
import '@fuf-stack/pixels';
|
|
34
34
|
import 'react-select';
|
|
35
35
|
import '@heroui/switch';
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Radios_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-T6G6NGLL.js";
|
|
4
4
|
import {
|
|
5
5
|
Select_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-VIK6VTAZ.js";
|
|
7
7
|
import {
|
|
8
8
|
SubmitButton_default
|
|
9
9
|
} from "./chunk-RCLQ6NFK.js";
|
|
@@ -12,38 +12,38 @@ import {
|
|
|
12
12
|
} from "./chunk-DJKC3SR6.js";
|
|
13
13
|
import {
|
|
14
14
|
TextArea_default
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-F3WXUKZG.js";
|
|
16
16
|
import {
|
|
17
17
|
Checkboxes_default
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-YBLDWOOG.js";
|
|
19
19
|
import {
|
|
20
20
|
FieldArray_default
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-REVHYI2O.js";
|
|
22
22
|
import {
|
|
23
23
|
Form_default
|
|
24
24
|
} from "./chunk-4UR2T76K.js";
|
|
25
25
|
import {
|
|
26
26
|
Grid_default
|
|
27
27
|
} from "./chunk-B62HKKMS.js";
|
|
28
|
-
import {
|
|
29
|
-
Input_default
|
|
30
|
-
} from "./chunk-4KSXHKK2.js";
|
|
31
28
|
import {
|
|
32
29
|
RadioBoxes_default
|
|
33
|
-
} from "./chunk-
|
|
30
|
+
} from "./chunk-U4D6YJ6Z.js";
|
|
31
|
+
import {
|
|
32
|
+
Input_default
|
|
33
|
+
} from "./chunk-KE5DB3DZ.js";
|
|
34
34
|
import {
|
|
35
35
|
RadioTabs_default
|
|
36
|
-
} from "./chunk-
|
|
36
|
+
} from "./chunk-PHMEYG5F.js";
|
|
37
37
|
import "./chunk-V3GDAELU.js";
|
|
38
38
|
import {
|
|
39
39
|
useInputValueDebounce
|
|
40
40
|
} from "./chunk-ZJDU5EPE.js";
|
|
41
41
|
import {
|
|
42
42
|
useUniformFieldArray
|
|
43
|
-
} from "./chunk-
|
|
43
|
+
} from "./chunk-77OMBV7C.js";
|
|
44
44
|
import {
|
|
45
45
|
useUniformField
|
|
46
|
-
} from "./chunk-
|
|
46
|
+
} from "./chunk-OZQQSTVH.js";
|
|
47
47
|
import {
|
|
48
48
|
FieldCopyTestIdButton_default
|
|
49
49
|
} from "./chunk-NTDKZW4E.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.9",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Fröhlich ∧ Frei",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
"@dnd-kit/utilities": "3.2.2",
|
|
173
173
|
"@fuf-stack/pixel-motion": "1.0.26",
|
|
174
174
|
"@fuf-stack/pixel-utils": "1.0.5",
|
|
175
|
-
"@fuf-stack/pixels": "1.5.
|
|
175
|
+
"@fuf-stack/pixels": "1.5.1",
|
|
176
176
|
"@fuf-stack/veto": "0.12.6",
|
|
177
177
|
"@heroui/button": "2.2.24",
|
|
178
178
|
"@heroui/checkbox": "2.3.24",
|
|
@@ -197,5 +197,5 @@
|
|
|
197
197
|
"react": "19.1.1",
|
|
198
198
|
"react-dom": "19.1.1"
|
|
199
199
|
},
|
|
200
|
-
"gitHead": "
|
|
200
|
+
"gitHead": "db83f6b00158276195f617c4a4ece21985a03ce5"
|
|
201
201
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-GVKSBFOS.cjs","../src/hooks/useUniformField/useUniformField.tsx"],"names":["_a"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-GVKSBFOS.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\nimport type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport React from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { FieldCopyTestIdButton } from '../../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport { useController } from '../useController/useController';\nimport { useFormContext } from '../useFormContext/useFormContext';\nimport { useInput } from '../useInput/useInput';\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\n/**\n * Debounce invalid state changes for smooth UI transitions while respecting accessibility.\n *\n * Behavior:\n * - Specifically intended for validation invalid flags: debounces both\n * true → false and false → true transitions by `delayMs` to prevent\n * flicker and allow enter/exit animations to complete.\n * - If the user prefers reduced motion (via `useReducedMotion` from\n * `@fuf-stack/pixel-motion`), updates apply immediately with no delay.\n */\nconst useDebouncedInvalid = (invalid: boolean, delayMs: number) => {\n const prefersReducedMotion = useReducedMotion();\n const debouncedInvalid = useDebounce(\n invalid,\n delayMs,\n !!prefersReducedMotion,\n );\n\n return debouncedInvalid;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n> {\n /** Form field name */\n name: Path<TFieldValues> & string;\n /** Disable the field */\n disabled?: boolean;\n /** Optional explicit test id used to build stable test ids */\n testId?: string;\n /** Optional label content; pass false to suppress label entirely */\n label?: ReactNode | false;\n /** Input type for special number handling */\n type?: 'text' | 'number' | 'password';\n /** Optional value transformation between form and display values */\n transform?: InputValueTransform<TDisplay>;\n}\n\nexport interface UseUniformFieldReturn<\n TFieldValues extends FieldValues = FieldValues,\n> {\n /** react-hook-form control instance for advanced integrations */\n control: ReturnType<typeof useFormContext<TFieldValues>>['control'];\n /** Debug mode from Uniform provider */\n debugMode: ReturnType<typeof useFormContext<TFieldValues>>['debugMode'];\n /** Current value used to initialize uncontrolled components */\n defaultValue: unknown;\n /** Whether the field is currently disabled (from RHF) */\n disabled: boolean | undefined;\n /** Validation error(s) for the field */\n error: FieldError[] | undefined;\n /** Pre-built errorMessage node to plug into components */\n errorMessage: ReactNode | null;\n /** RHF controller field with transformed value/onChange (use this for simple components) */\n field: ReturnType<typeof useController<TFieldValues>>['field'];\n /** Helper to spread standardized error message props to underlying components */\n getErrorMessageProps: ReturnType<typeof useInput>['getErrorMessageProps'];\n /** Helper to spread standardized helper wrapper props (for spacing/animation) */\n getHelperWrapperProps: ReturnType<typeof useInput>['getHelperWrapperProps'];\n /** Helper to spread standardized label props to underlying components */\n getLabelProps: ReturnType<typeof useInput>['getLabelProps'];\n /** Access current form values (converted to validation-friendly format) */\n getValues: ReturnType<typeof useFormContext<TFieldValues>>['getValues'];\n /** Whether the field should show invalid state (debounced for smooth animations). True when field is invalid AND (dirty OR touched OR submitted) */\n invalid: boolean;\n /** Computed label node including optional test id copy button */\n label: ReactNode | null;\n /** onBlur handler from controller */\n onBlur: ReturnType<typeof useController<TFieldValues>>['field']['onBlur'];\n /** onChange handler from controller (with transform applied) */\n onChange: ReturnType<typeof useController<TFieldValues>>['field']['onChange'];\n /** Ref to forward to underlying control */\n ref: ReturnType<typeof useController<TFieldValues>>['field']['ref'];\n /** Whether the field is required according to validation schema */\n required: boolean;\n /** Reset a specific field in the form */\n resetField: ReturnType<typeof useFormContext<TFieldValues>>['resetField'];\n /** Generated HTML data-testid for the field */\n testId: string;\n}\n\n/**\n * Combines frequently used form field logic into a single hook.\n *\n * Provides:\n * - Enhanced form context (validation-aware state, `testId`, value transforms)\n * - Controller field with nullish conversion handling\n * - Value transformation via `transform` prop:\n * • Allows disentangled display and form values (e.g., string ↔ object, boolean ↔ array)\n * • Automatically applies `toDisplayValue` to field value for components\n * • Automatically applies `toFormValue` to display value when onChange is called\n * • Works with `type` prop for automatic number/string conversion\n * • Examples: storing objects while displaying strings, storing booleans as arrays, enriching values with metadata\n * - Debounced `invalid` state with smart timing:\n * • `true` (field becomes invalid): applies immediately so errors show right away\n * • `false` (field becomes valid): delayed 200ms to allow smooth exit animations\n * • Respects `prefers-reduced-motion` by skipping delays when user prefers reduced motion\n * - Smart `invalid` visibility (via `showInvalid`):\n * • Shows errors when field is dirty OR touched OR form has been submitted\n * • Prevents showing errors on pristine/untouched fields for better UX\n * • Works well for all field types (text inputs, checkboxes, radios, arrays)\n * - Prebuilt `errorMessage` React node using `FieldValidationError`\n * - Computed `label` node which appends a `FieldCopyTestIdButton` in\n * `debug-testids` mode\n * - `defaultValue` for uncontrolled defaults and all usual field handlers\n * - Access to form utilities: `control`, `getValues`, `resetField`\n * - Presentation helpers: `getLabelProps`, `getErrorMessageProps`,\n * `getHelperWrapperProps` for consistent wiring to underlying UI components\n */\nexport function useUniformField<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n>(\n params: UseUniformFieldParams<TFieldValues, TDisplay>,\n): UseUniformFieldReturn<TFieldValues> {\n const {\n name,\n disabled = false,\n testId: explicitTestId,\n label,\n type,\n transform,\n } = params;\n\n const {\n control,\n debugMode,\n formState: { submitCount },\n getFieldState,\n getValues,\n resetField,\n } = useFormContext<TFieldValues>();\n\n const {\n error,\n invalid: rawInvalid,\n isDirty,\n isTouched,\n required,\n testId,\n } = getFieldState(name, explicitTestId);\n\n const { field } = useController<TFieldValues>({\n control,\n disabled,\n name,\n });\n const {\n onChange: fieldOnChange,\n value: fieldValue,\n disabled: isDisabled,\n onBlur,\n ref,\n } = field;\n\n // Get transform utilities (but don't apply them automatically)\n // Components can choose how to use them (directly or via useInputValueDebounce)\n const { toDisplayValue, toFormValue } = useInputValueTransform<TDisplay>({\n type,\n transform,\n });\n\n // For components without special needs: apply transform to value and onChange\n const transformedValue = toDisplayValue(fieldValue);\n const transformedOnChange = (eventOrValue: TDisplay | React.ChangeEvent) => {\n // Extract value from event or use value directly\n const displayValue =\n (eventOrValue as React.ChangeEvent<HTMLInputElement>)?.target?.value ??\n eventOrValue;\n const formValue = toFormValue(displayValue as TDisplay);\n fieldOnChange(formValue as typeof fieldValue);\n };\n\n const defaultValue = (getValues() as Record<string, unknown>)?.[\n name as string\n ];\n\n /**\n * Determine when to show the invalid state to the user.\n *\n * Show errors when the field is invalid AND any of these conditions are met:\n * - Field is dirty (value changed from initial) - good for checkboxes/radios/arrays\n * - Field is touched (focused and blurred) - good for text inputs\n * - Form has been submitted - shows all errors after submit attempt\n *\n * This prevents showing errors on pristine/untouched fields for better UX.\n * Examples:\n * - Text input: User loads form with empty required field → no error shown yet\n * - Text input: User focuses and blurs → error shows (via isTouched)\n * - Checkbox group: User clicks first checkbox → error shows immediately (via isDirty)\n * - Any field: User submits form → all errors show (via submitCount)\n *\n * The entire condition is debounced to prevent flickering and allow smooth animations\n * when any of the states (invalid, isDirty, isTouched, submitCount) change.\n */\n const showInvalid = rawInvalid && (isDirty || isTouched || submitCount > 0);\n const invalid = useDebouncedInvalid(showInvalid, 200);\n\n // Build a label node that:\n // - shows the provided label (unless explicitly set to false)\n // - appends a copy-to-clipboard button for the test id in `debug-testids` mode\n // Consumers can pass this directly to component `label` props\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const labelNode: ReactNode | null =\n !!label || showTestIdCopyButton ? (\n <>\n {label !== false ? label : null}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null;\n\n // Ready-to-render error message; consumers can drop this into their\n // component `errorMessage` prop without repeating mapping/markup\n const errorMessage = <FieldValidationError error={error} testId={testId} />;\n\n // Generate standardized props for label, helper wrapper and error message\n // so consumers can spread them directly into UI components (e.g. HeroUI),\n // keeping animations/spacing consistent across fields\n const { getErrorMessageProps, getLabelProps, getHelperWrapperProps } =\n useInput({\n ref,\n classNames: {\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return {\n control,\n debugMode,\n defaultValue,\n disabled: isDisabled,\n error,\n errorMessage,\n field: {\n ...field,\n value: transformedValue as typeof field.value,\n onChange: transformedOnChange as typeof field.onChange,\n },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange: transformedOnChange as typeof field.onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useUniformField/useUniformField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\nimport type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport React from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { FieldCopyTestIdButton } from '../../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport { useController } from '../useController/useController';\nimport { useFormContext } from '../useFormContext/useFormContext';\nimport { useInput } from '../useInput/useInput';\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\n/**\n * Debounce invalid state changes for smooth UI transitions while respecting accessibility.\n *\n * Behavior:\n * - Specifically intended for validation invalid flags: debounces both\n * true → false and false → true transitions by `delayMs` to prevent\n * flicker and allow enter/exit animations to complete.\n * - If the user prefers reduced motion (via `useReducedMotion` from\n * `@fuf-stack/pixel-motion`), updates apply immediately with no delay.\n */\nconst useDebouncedInvalid = (invalid: boolean, delayMs: number) => {\n const prefersReducedMotion = useReducedMotion();\n const debouncedInvalid = useDebounce(\n invalid,\n delayMs,\n !!prefersReducedMotion,\n );\n\n return debouncedInvalid;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n> {\n /** Form field name */\n name: Path<TFieldValues> & string;\n /** Disable the field */\n disabled?: boolean;\n /** Optional explicit test id used to build stable test ids */\n testId?: string;\n /** Optional label content; pass false to suppress label entirely */\n label?: ReactNode | false;\n /** Input type for special number handling */\n type?: 'text' | 'number' | 'password';\n /** Optional value transformation between form and display values */\n transform?: InputValueTransform<TDisplay>;\n}\n\nexport interface UseUniformFieldReturn<\n TFieldValues extends FieldValues = FieldValues,\n> {\n /** react-hook-form control instance for advanced integrations */\n control: ReturnType<typeof useFormContext<TFieldValues>>['control'];\n /** Debug mode from Uniform provider */\n debugMode: ReturnType<typeof useFormContext<TFieldValues>>['debugMode'];\n /** Current value used to initialize uncontrolled components */\n defaultValue: unknown;\n /** Whether the field is currently disabled (from RHF) */\n disabled: boolean | undefined;\n /** Validation error(s) for the field */\n error: FieldError[] | undefined;\n /** Pre-built errorMessage node to plug into components */\n errorMessage: ReactNode | null;\n /** RHF controller field with transformed value/onChange (use this for simple components) */\n field: ReturnType<typeof useController<TFieldValues>>['field'];\n /** Helper to spread standardized error message props to underlying components */\n getErrorMessageProps: ReturnType<typeof useInput>['getErrorMessageProps'];\n /** Helper to spread standardized helper wrapper props (for spacing/animation) */\n getHelperWrapperProps: ReturnType<typeof useInput>['getHelperWrapperProps'];\n /** Helper to spread standardized label props to underlying components */\n getLabelProps: ReturnType<typeof useInput>['getLabelProps'];\n /** Access current form values (converted to validation-friendly format) */\n getValues: ReturnType<typeof useFormContext<TFieldValues>>['getValues'];\n /** Whether the field should show invalid state (debounced for smooth animations). True when field is invalid AND (dirty OR touched OR submitted) */\n invalid: boolean;\n /** Computed label node including optional test id copy button */\n label: ReactNode | null;\n /** onBlur handler from controller */\n onBlur: ReturnType<typeof useController<TFieldValues>>['field']['onBlur'];\n /** onChange handler from controller (with transform applied) */\n onChange: ReturnType<typeof useController<TFieldValues>>['field']['onChange'];\n /** Ref to forward to underlying control */\n ref: ReturnType<typeof useController<TFieldValues>>['field']['ref'];\n /** Whether the field is required according to validation schema */\n required: boolean;\n /** Reset a specific field in the form */\n resetField: ReturnType<typeof useFormContext<TFieldValues>>['resetField'];\n /** Generated HTML data-testid for the field */\n testId: string;\n}\n\n/**\n * Combines frequently used form field logic into a single hook.\n *\n * Provides:\n * - Enhanced form context (validation-aware state, `testId`, value transforms)\n * - Controller field with nullish conversion handling\n * - Value transformation via `transform` prop:\n * • Allows disentangled display and form values (e.g., string ↔ object, boolean ↔ array)\n * • Automatically applies `toDisplayValue` to field value for components\n * • Automatically applies `toFormValue` to display value when onChange is called\n * • Works with `type` prop for automatic number/string conversion\n * • Examples: storing objects while displaying strings, storing booleans as arrays, enriching values with metadata\n * - Debounced `invalid` state with smart timing:\n * • `true` (field becomes invalid): applies immediately so errors show right away\n * • `false` (field becomes valid): delayed 200ms to allow smooth exit animations\n * • Respects `prefers-reduced-motion` by skipping delays when user prefers reduced motion\n * - Smart `invalid` visibility (via `showInvalid`):\n * • Shows errors when field is dirty OR touched OR form has been submitted\n * • Prevents showing errors on pristine/untouched fields for better UX\n * • Works well for all field types (text inputs, checkboxes, radios, arrays)\n * - Prebuilt `errorMessage` React node using `FieldValidationError`\n * - Computed `label` node which appends a `FieldCopyTestIdButton` in\n * `debug-testids` mode\n * - `defaultValue` for uncontrolled defaults and all usual field handlers\n * - Access to form utilities: `control`, `getValues`, `resetField`\n * - Presentation helpers: `getLabelProps`, `getErrorMessageProps`,\n * `getHelperWrapperProps` for consistent wiring to underlying UI components\n */\nexport function useUniformField<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n>(\n params: UseUniformFieldParams<TFieldValues, TDisplay>,\n): UseUniformFieldReturn<TFieldValues> {\n const {\n name,\n disabled = false,\n testId: explicitTestId,\n label,\n type,\n transform,\n } = params;\n\n const {\n control,\n debugMode,\n formState: { submitCount },\n getFieldState,\n getValues,\n resetField,\n } = useFormContext<TFieldValues>();\n\n const {\n error,\n invalid: rawInvalid,\n isDirty,\n isTouched,\n required,\n testId,\n } = getFieldState(name, explicitTestId);\n\n const { field } = useController<TFieldValues>({\n control,\n disabled,\n name,\n });\n const {\n onChange: fieldOnChange,\n value: fieldValue,\n disabled: isDisabled,\n onBlur,\n ref,\n } = field;\n\n // Get transform utilities (but don't apply them automatically)\n // Components can choose how to use them (directly or via useInputValueDebounce)\n const { toDisplayValue, toFormValue } = useInputValueTransform<TDisplay>({\n type,\n transform,\n });\n\n // For components without special needs: apply transform to value and onChange\n const transformedValue = toDisplayValue(fieldValue);\n const transformedOnChange = (eventOrValue: TDisplay | React.ChangeEvent) => {\n // Extract value from event or use value directly\n const displayValue =\n (eventOrValue as React.ChangeEvent<HTMLInputElement>)?.target?.value ??\n eventOrValue;\n const formValue = toFormValue(displayValue as TDisplay);\n fieldOnChange(formValue as typeof fieldValue);\n };\n\n const defaultValue = (getValues() as Record<string, unknown>)?.[\n name as string\n ];\n\n /**\n * Determine when to show the invalid state to the user.\n *\n * Show errors when the field is invalid AND any of these conditions are met:\n * - Field is dirty (value changed from initial) - good for checkboxes/radios/arrays\n * - Field is touched (focused and blurred) - good for text inputs\n * - Form has been submitted - shows all errors after submit attempt\n *\n * This prevents showing errors on pristine/untouched fields for better UX.\n * Examples:\n * - Text input: User loads form with empty required field → no error shown yet\n * - Text input: User focuses and blurs → error shows (via isTouched)\n * - Checkbox group: User clicks first checkbox → error shows immediately (via isDirty)\n * - Any field: User submits form → all errors show (via submitCount)\n *\n * The entire condition is debounced to prevent flickering and allow smooth animations\n * when any of the states (invalid, isDirty, isTouched, submitCount) change.\n */\n const showInvalid = rawInvalid && (isDirty || isTouched || submitCount > 0);\n const invalid = useDebouncedInvalid(showInvalid, 200);\n\n // Build a label node that:\n // - shows the provided label (unless explicitly set to false)\n // - appends a copy-to-clipboard button for the test id in `debug-testids` mode\n // Consumers can pass this directly to component `label` props\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const labelNode: ReactNode | null =\n !!label || showTestIdCopyButton ? (\n <>\n {label !== false ? label : null}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null;\n\n // Ready-to-render error message; consumers can drop this into their\n // component `errorMessage` prop without repeating mapping/markup\n const errorMessage = <FieldValidationError error={error} testId={testId} />;\n\n // Generate standardized props for label, helper wrapper and error message\n // so consumers can spread them directly into UI components (e.g. HeroUI),\n // keeping animations/spacing consistent across fields\n const { getErrorMessageProps, getLabelProps, getHelperWrapperProps } =\n useInput({\n ref,\n classNames: {\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return {\n control,\n debugMode,\n defaultValue,\n disabled: isDisabled,\n error,\n errorMessage,\n field: {\n ...field,\n value: transformedValue as typeof field.value,\n onChange: transformedOnChange as typeof field.onChange,\n },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange: transformedOnChange as typeof field.onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAuNtB,mBAGI,KAHJ;AApMN,IAAM,sBAAsB,CAAC,SAAkB,YAAoB;AACjE,QAAM,uBAAuB,iBAAiB;AAC9C,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA,CAAC,CAAC;AAAA,EACJ;AAEA,SAAO;AACT;AA2FO,SAAS,gBAId,QACqC;AAnIvC;AAoIE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW,EAAE,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAA6B;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,MAAM,cAAc;AAEtC,QAAM,EAAE,MAAM,IAAI,cAA4B;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,IAAI;AAIJ,QAAM,EAAE,gBAAgB,YAAY,IAAI,uBAAiC;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,mBAAmB,eAAe,UAAU;AAClD,QAAM,sBAAsB,CAAC,iBAA+C;AArL9E,QAAAA,KAAA;AAuLI,UAAM,gBACH,MAAAA,MAAA,6CAAsD,WAAtD,gBAAAA,IAA8D,UAA9D,YACD;AACF,UAAM,YAAY,YAAY,YAAwB;AACtD,kBAAc,SAA8B;AAAA,EAC9C;AAEA,QAAM,gBAAgB,eAAU,MAAV,mBACpB;AAqBF,QAAM,cAAc,eAAe,WAAW,aAAa,cAAc;AACzE,QAAM,UAAU,oBAAoB,aAAa,GAAG;AAMpD,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YACJ,CAAC,CAAC,SAAS,uBACT,iCACG;AAAA,cAAU,QAAQ,QAAQ;AAAA,IAC1B,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,KACN,IACE;AAIN,QAAM,eAAe,oBAAC,gCAAqB,OAAc,QAAgB;AAKzE,QAAM,EAAE,sBAAsB,eAAe,sBAAsB,IACjE,SAAS;AAAA,IACP;AAAA,IACA,YAAY;AAAA;AAAA,MAEV,eAAe;AAAA,IACjB;AAAA,IACA,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAEH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO,iCACF,QADE;AAAA,MAEL,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["_a"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|