@fuf-stack/uniform 1.6.0 → 1.6.1
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 +12 -6
- package/dist/Checkboxes/index.cjs.map +1 -1
- package/dist/Checkboxes/index.js +11 -5
- package/dist/FieldArray/index.cjs +12 -6
- package/dist/FieldArray/index.cjs.map +1 -1
- package/dist/FieldArray/index.js +11 -5
- package/dist/Form/index.cjs +12 -6
- package/dist/Form/index.cjs.map +1 -1
- package/dist/Form/index.js +11 -5
- package/dist/Input/index.cjs +12 -6
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.js +11 -5
- package/dist/RadioBoxes/index.cjs +12 -6
- package/dist/RadioBoxes/index.cjs.map +1 -1
- package/dist/RadioBoxes/index.js +11 -5
- package/dist/RadioTabs/index.cjs +12 -6
- package/dist/RadioTabs/index.cjs.map +1 -1
- package/dist/RadioTabs/index.js +11 -5
- package/dist/Radios/index.cjs +12 -6
- package/dist/Radios/index.cjs.map +1 -1
- package/dist/Radios/index.js +11 -5
- package/dist/Select/index.cjs +12 -6
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.js +11 -5
- package/dist/SubmitButton/index.cjs +12 -6
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.js +11 -5
- package/dist/Switch/index.cjs +12 -6
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.js +11 -5
- package/dist/TextArea/index.cjs +12 -6
- package/dist/TextArea/index.cjs.map +1 -1
- package/dist/TextArea/index.js +11 -5
- package/dist/{chunk-GBPAALJG.cjs → chunk-345LYO4H.cjs} +3 -3
- package/dist/{chunk-GBPAALJG.cjs.map → chunk-345LYO4H.cjs.map} +1 -1
- package/dist/chunk-35V726MB.js +1 -0
- package/dist/chunk-35V726MB.js.map +1 -0
- package/dist/{chunk-SLLZPY7M.js → chunk-6C6YW5TM.js} +2 -2
- package/dist/{chunk-ATRA4SVX.cjs → chunk-A5Z75X7M.cjs} +3 -3
- package/dist/{chunk-ATRA4SVX.cjs.map → chunk-A5Z75X7M.cjs.map} +1 -1
- package/dist/chunk-AACO4OEK.cjs +100 -0
- package/dist/chunk-AACO4OEK.cjs.map +1 -0
- package/dist/chunk-AHJJIANM.js +7 -0
- package/dist/chunk-AHJJIANM.js.map +1 -0
- package/dist/{chunk-5OX4LSPF.js → chunk-BXGILW5C.js} +4 -4
- package/dist/chunk-CHNYQVWO.js +59 -0
- package/dist/chunk-CHNYQVWO.js.map +1 -0
- package/dist/chunk-CK362NWK.js +34 -0
- package/dist/chunk-CK362NWK.js.map +1 -0
- package/dist/chunk-D3NAUOYG.js +122 -0
- package/dist/chunk-D3NAUOYG.js.map +1 -0
- package/dist/{chunk-MTMVQAN3.cjs → chunk-E4DCVJS5.cjs} +3 -3
- package/dist/{chunk-MTMVQAN3.cjs.map → chunk-E4DCVJS5.cjs.map} +1 -1
- package/dist/{chunk-D5ZZGT4Z.cjs → chunk-F6JQYB53.cjs} +4 -4
- package/dist/{chunk-D5ZZGT4Z.cjs.map → chunk-F6JQYB53.cjs.map} +1 -1
- package/dist/{chunk-HW4B6QID.js → chunk-GUPJNFEX.js} +10 -6
- package/dist/{chunk-HW4B6QID.js.map → chunk-GUPJNFEX.js.map} +1 -1
- package/dist/{chunk-GNBMDY5Q.js → chunk-H24QXVUI.js} +2 -2
- package/dist/{chunk-YJE5OZJ5.js → chunk-HQGTCSHK.js} +2 -2
- package/dist/{chunk-XCYA4ZBY.cjs → chunk-IYULWK4H.cjs} +7 -5
- package/dist/chunk-IYULWK4H.cjs.map +1 -0
- package/dist/{chunk-CVSFT7PV.js → chunk-JKWNYLNS.js} +4 -4
- package/dist/chunk-JMFDNTVC.cjs +34 -0
- package/dist/chunk-JMFDNTVC.cjs.map +1 -0
- package/dist/chunk-LTKRK3OS.cjs +1 -0
- package/dist/chunk-LTKRK3OS.cjs.map +1 -0
- package/dist/{chunk-MVZIOCAW.js → chunk-MXUKW3PZ.js} +2 -2
- package/dist/{chunk-3SZ2UKFA.cjs → chunk-NZBO4N3S.cjs} +4 -280
- package/dist/chunk-NZBO4N3S.cjs.map +1 -0
- package/dist/{chunk-XNAXMUTF.cjs → chunk-NZIAIYPS.cjs} +4 -4
- package/dist/{chunk-XNAXMUTF.cjs.map → chunk-NZIAIYPS.cjs.map} +1 -1
- package/dist/{chunk-JF437QVX.cjs → chunk-OJHD2XHD.cjs} +3 -3
- package/dist/{chunk-JF437QVX.cjs.map → chunk-OJHD2XHD.cjs.map} +1 -1
- package/dist/chunk-PCTYJUY7.cjs +7 -0
- package/dist/chunk-PCTYJUY7.cjs.map +1 -0
- package/dist/{chunk-2K6FWC4H.js → chunk-PO5UQAU6.js} +2 -278
- package/dist/chunk-PO5UQAU6.js.map +1 -0
- package/dist/{chunk-FNRALO75.js → chunk-QRCV7JVB.js} +2 -2
- package/dist/{chunk-3OFR3TO6.cjs → chunk-RMCPVDAC.cjs} +3 -3
- package/dist/{chunk-3OFR3TO6.cjs.map → chunk-RMCPVDAC.cjs.map} +1 -1
- package/dist/{chunk-NAN6QRAS.js → chunk-SJZ7UUEE.js} +5 -3
- package/dist/{chunk-NAN6QRAS.js.map → chunk-SJZ7UUEE.js.map} +1 -1
- package/dist/chunk-TEIXBRF5.cjs +59 -0
- package/dist/chunk-TEIXBRF5.cjs.map +1 -0
- package/dist/chunk-TGJJZEHB.cjs +122 -0
- package/dist/chunk-TGJJZEHB.cjs.map +1 -0
- package/dist/{chunk-IRWIEND4.js → chunk-TKFODQWI.js} +2 -2
- package/dist/{chunk-4HTB52DX.cjs → chunk-VPUMTPD3.cjs} +3 -3
- package/dist/{chunk-4HTB52DX.cjs.map → chunk-VPUMTPD3.cjs.map} +1 -1
- package/dist/{chunk-D537ZGNE.cjs → chunk-WFO4XPA3.cjs} +4 -4
- package/dist/{chunk-D537ZGNE.cjs.map → chunk-WFO4XPA3.cjs.map} +1 -1
- package/dist/{chunk-JEXF6TLO.cjs → chunk-XJBGXFVX.cjs} +10 -6
- package/dist/chunk-XJBGXFVX.cjs.map +1 -0
- package/dist/chunk-Z7FVILDT.js +100 -0
- package/dist/chunk-Z7FVILDT.js.map +1 -0
- package/dist/{chunk-MLPLWUXZ.js → chunk-Z7NI5347.js} +2 -2
- package/dist/hooks/index.cjs +18 -7
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +10 -287
- package/dist/hooks/index.d.ts +10 -287
- package/dist/hooks/index.js +24 -13
- package/dist/hooks/useClientValidation/index.cjs +12 -0
- package/dist/hooks/useClientValidation/index.cjs.map +1 -0
- package/dist/hooks/useClientValidation/index.d.cts +78 -0
- package/dist/hooks/useClientValidation/index.d.ts +78 -0
- package/dist/hooks/useClientValidation/index.js +12 -0
- package/dist/hooks/useClientValidation/index.js.map +1 -0
- package/dist/hooks/useController/index.cjs +9 -0
- package/dist/hooks/useController/index.cjs.map +1 -0
- package/dist/hooks/useController/index.d.cts +28 -0
- package/dist/hooks/useController/index.d.ts +28 -0
- package/dist/hooks/useController/index.js +9 -0
- package/dist/hooks/useController/index.js.map +1 -0
- package/dist/hooks/useFormContext/index.cjs +11 -0
- package/dist/hooks/useFormContext/index.cjs.map +1 -0
- package/dist/hooks/useFormContext/index.d.cts +50 -0
- package/dist/hooks/useFormContext/index.d.ts +50 -0
- package/dist/hooks/useFormContext/index.js +11 -0
- package/dist/hooks/useFormContext/index.js.map +1 -0
- package/dist/hooks/useInput/index.cjs +8 -0
- package/dist/hooks/useInput/index.cjs.map +1 -0
- package/dist/hooks/useInput/index.d.cts +1 -0
- package/dist/hooks/useInput/index.d.ts +1 -0
- package/dist/hooks/useInput/index.js +8 -0
- package/dist/hooks/useInput/index.js.map +1 -0
- package/dist/hooks/useUniformField/index.cjs +14 -0
- package/dist/hooks/useUniformField/index.cjs.map +1 -0
- package/dist/hooks/useUniformField/index.d.cts +83 -0
- package/dist/hooks/useUniformField/index.d.ts +83 -0
- package/dist/hooks/useUniformField/index.js +14 -0
- package/dist/hooks/useUniformField/index.js.map +1 -0
- package/dist/hooks/useUniformFieldArray/index.cjs +15 -0
- package/dist/hooks/useUniformFieldArray/index.cjs.map +1 -0
- package/dist/hooks/useUniformFieldArray/index.d.cts +70 -0
- package/dist/hooks/useUniformFieldArray/index.d.ts +70 -0
- package/dist/hooks/useUniformFieldArray/index.js +15 -0
- package/dist/hooks/useUniformFieldArray/index.js.map +1 -0
- package/dist/index.cjs +28 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +38 -27
- package/package.json +31 -1
- package/dist/chunk-2K6FWC4H.js.map +0 -1
- package/dist/chunk-3SZ2UKFA.cjs.map +0 -1
- package/dist/chunk-JEXF6TLO.cjs.map +0 -1
- package/dist/chunk-XCYA4ZBY.cjs.map +0 -1
- /package/dist/{chunk-SLLZPY7M.js.map → chunk-6C6YW5TM.js.map} +0 -0
- /package/dist/{chunk-5OX4LSPF.js.map → chunk-BXGILW5C.js.map} +0 -0
- /package/dist/{chunk-GNBMDY5Q.js.map → chunk-H24QXVUI.js.map} +0 -0
- /package/dist/{chunk-YJE5OZJ5.js.map → chunk-HQGTCSHK.js.map} +0 -0
- /package/dist/{chunk-CVSFT7PV.js.map → chunk-JKWNYLNS.js.map} +0 -0
- /package/dist/{chunk-MVZIOCAW.js.map → chunk-MXUKW3PZ.js.map} +0 -0
- /package/dist/{chunk-FNRALO75.js.map → chunk-QRCV7JVB.js.map} +0 -0
- /package/dist/{chunk-IRWIEND4.js.map → chunk-TKFODQWI.js.map} +0 -0
- /package/dist/{chunk-MLPLWUXZ.js.map → chunk-Z7NI5347.js.map} +0 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import {
|
|
2
|
+
FieldValidationError_default
|
|
3
|
+
} from "./chunk-ELYGQTXB.js";
|
|
4
|
+
import {
|
|
5
|
+
useController
|
|
6
|
+
} from "./chunk-CK362NWK.js";
|
|
7
|
+
import {
|
|
8
|
+
useInput
|
|
9
|
+
} from "./chunk-AHJJIANM.js";
|
|
10
|
+
import {
|
|
11
|
+
FieldCopyTestIdButton_default
|
|
12
|
+
} from "./chunk-NTDKZW4E.js";
|
|
13
|
+
import {
|
|
14
|
+
useFormContext
|
|
15
|
+
} from "./chunk-PO5UQAU6.js";
|
|
16
|
+
|
|
17
|
+
// src/hooks/useUniformField/useUniformField.tsx
|
|
18
|
+
import { useEffect, useRef, useState } from "react";
|
|
19
|
+
import { useReducedMotion } from "@fuf-stack/pixel-motion";
|
|
20
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
var useDebouncedInvalid = (value, delayMs) => {
|
|
22
|
+
const [state, setState] = useState(value);
|
|
23
|
+
const timeoutRef = useRef(null);
|
|
24
|
+
const prefersReducedMotion = useReducedMotion();
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (prefersReducedMotion) {
|
|
27
|
+
if (timeoutRef.current) {
|
|
28
|
+
clearTimeout(timeoutRef.current);
|
|
29
|
+
timeoutRef.current = null;
|
|
30
|
+
}
|
|
31
|
+
setState(value);
|
|
32
|
+
return void 0;
|
|
33
|
+
}
|
|
34
|
+
if (timeoutRef.current) {
|
|
35
|
+
clearTimeout(timeoutRef.current);
|
|
36
|
+
}
|
|
37
|
+
timeoutRef.current = setTimeout(() => {
|
|
38
|
+
setState(value);
|
|
39
|
+
timeoutRef.current = null;
|
|
40
|
+
}, delayMs);
|
|
41
|
+
return () => {
|
|
42
|
+
if (timeoutRef.current) {
|
|
43
|
+
clearTimeout(timeoutRef.current);
|
|
44
|
+
timeoutRef.current = null;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}, [value, delayMs, prefersReducedMotion]);
|
|
48
|
+
return state;
|
|
49
|
+
};
|
|
50
|
+
function useUniformField(params) {
|
|
51
|
+
var _a;
|
|
52
|
+
const { name, disabled = false, testId: explicitTestId, label } = params;
|
|
53
|
+
const {
|
|
54
|
+
control,
|
|
55
|
+
debugMode,
|
|
56
|
+
formState: { submitCount },
|
|
57
|
+
getFieldState,
|
|
58
|
+
getValues,
|
|
59
|
+
resetField
|
|
60
|
+
} = useFormContext();
|
|
61
|
+
const {
|
|
62
|
+
error,
|
|
63
|
+
invalid: rawInvalid,
|
|
64
|
+
isDirty,
|
|
65
|
+
isTouched,
|
|
66
|
+
required,
|
|
67
|
+
testId
|
|
68
|
+
} = getFieldState(name, explicitTestId);
|
|
69
|
+
const { field } = useController({
|
|
70
|
+
control,
|
|
71
|
+
disabled,
|
|
72
|
+
name
|
|
73
|
+
});
|
|
74
|
+
const { onChange, disabled: isDisabled, onBlur, ref } = field;
|
|
75
|
+
const defaultValue = (_a = getValues()) == null ? void 0 : _a[name];
|
|
76
|
+
const showInvalid = rawInvalid && (isDirty || isTouched || submitCount > 0);
|
|
77
|
+
const invalid = useDebouncedInvalid(showInvalid, 200);
|
|
78
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
79
|
+
const labelNode = !!label || showTestIdCopyButton ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
80
|
+
label !== false ? label : null,
|
|
81
|
+
showTestIdCopyButton ? /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId }) : null
|
|
82
|
+
] }) : null;
|
|
83
|
+
const errorMessage = /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId });
|
|
84
|
+
const { getErrorMessageProps, getLabelProps, getHelperWrapperProps } = useInput({
|
|
85
|
+
ref,
|
|
86
|
+
classNames: {
|
|
87
|
+
// set padding to 0 for error message exit animation
|
|
88
|
+
helperWrapper: "p-0"
|
|
89
|
+
},
|
|
90
|
+
errorMessage: JSON.stringify(error),
|
|
91
|
+
isInvalid: invalid,
|
|
92
|
+
isRequired: required,
|
|
93
|
+
label,
|
|
94
|
+
labelPlacement: "outside"
|
|
95
|
+
});
|
|
96
|
+
return {
|
|
97
|
+
control,
|
|
98
|
+
debugMode,
|
|
99
|
+
defaultValue,
|
|
100
|
+
disabled: isDisabled,
|
|
101
|
+
error,
|
|
102
|
+
errorMessage,
|
|
103
|
+
field,
|
|
104
|
+
getErrorMessageProps,
|
|
105
|
+
getHelperWrapperProps,
|
|
106
|
+
getLabelProps,
|
|
107
|
+
getValues,
|
|
108
|
+
invalid,
|
|
109
|
+
label: labelNode,
|
|
110
|
+
onBlur,
|
|
111
|
+
onChange,
|
|
112
|
+
ref,
|
|
113
|
+
required,
|
|
114
|
+
resetField,
|
|
115
|
+
testId
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export {
|
|
120
|
+
useUniformField
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=chunk-D3NAUOYG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useUniformField/useUniformField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\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';\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 = (value: boolean, delayMs: number) => {\n const [state, setState] = useState(value);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const prefersReducedMotion = useReducedMotion();\n\n useEffect(() => {\n if (prefersReducedMotion) {\n // Respect reduced motion: apply immediately\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n setState(value);\n return undefined;\n }\n\n // Debounce any change (true or false) by delayMs\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setState(value);\n timeoutRef.current = null;\n }, delayMs);\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n }, [value, delayMs, prefersReducedMotion]);\n\n return state;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\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}\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 nullish conversions applied */\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 nullish handling) */\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 * - 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<TFieldValues extends FieldValues = FieldValues>(\n params: UseUniformFieldParams<TFieldValues>,\n): UseUniformFieldReturn<TFieldValues> {\n const { name, disabled = false, testId: explicitTestId, label } = 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 { onChange, disabled: isDisabled, onBlur, ref } = field;\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 getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"],"mappings":";;;;;;;;;;;;;;;;;AAGA,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,wBAAwB;AAiM3B,mBAGI,KAHJ;AA/KN,IAAM,sBAAsB,CAAC,OAAgB,YAAoB;AAC/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,aAAa,OAA6C,IAAI;AACpE,QAAM,uBAAuB,iBAAiB;AAE9C,YAAU,MAAM;AACd,QAAI,sBAAsB;AAExB,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAC/B,mBAAW,UAAU;AAAA,MACvB;AACA,eAAS,KAAK;AACd,aAAO;AAAA,IACT;AAGA,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAAA,IACjC;AACA,eAAW,UAAU,WAAW,MAAM;AACpC,eAAS,KAAK;AACd,iBAAW,UAAU;AAAA,IACvB,GAAG,OAAO;AACV,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAC/B,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,oBAAoB,CAAC;AAEzC,SAAO;AACT;AAgFO,SAAS,gBACd,QACqC;AA1IvC;AA2IE,QAAM,EAAE,MAAM,WAAW,OAAO,QAAQ,gBAAgB,MAAM,IAAI;AAElE,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,EAAE,UAAU,UAAU,YAAY,QAAQ,IAAI,IAAI;AAExD,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;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkTGJJZEHBcjs = require('./chunk-TGJJZEHB.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -49,7 +49,7 @@ var Radios = (_a) => {
|
|
|
49
49
|
required,
|
|
50
50
|
defaultValue,
|
|
51
51
|
testId
|
|
52
|
-
} =
|
|
52
|
+
} = _chunkTGJJZEHBcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
53
53
|
name
|
|
54
54
|
}, uniformFieldProps));
|
|
55
55
|
const variants = radiosVariants();
|
|
@@ -113,4 +113,4 @@ var Radios_default2 = Radios_default;
|
|
|
113
113
|
|
|
114
114
|
|
|
115
115
|
exports.Radios_default = Radios_default; exports.Radios_default2 = Radios_default2;
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
116
|
+
//# sourceMappingURL=chunk-E4DCVJS5.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-E4DCVJS5.cjs","../src/Radios/Radios.tsx","../src/Radios/index.ts"],"names":["_a","_b","Radios_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-E4DCVJS5.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadiosProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref },\n invalid,\n label,\n required,\n defaultValue,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radiosVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={defaultValue as string | undefined}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId ?? option.value}`,\n { replaceDots: true },\n );\n return (\n <HeroRadio\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkBZ5OMN4Ycjs = require('./chunk-BZ5OMN4Y.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkTGJJZEHBcjs = require('./chunk-TGJJZEHB.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
@@ -65,7 +65,7 @@ var Input = (_a) => {
|
|
|
65
65
|
required,
|
|
66
66
|
testId,
|
|
67
67
|
resetField
|
|
68
|
-
} =
|
|
68
|
+
} = _chunkTGJJZEHBcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, { name }, uniformFieldProps));
|
|
69
69
|
const { onChange, onBlur, value } = _chunkBZ5OMN4Ycjs.useInputValueDebounce.call(void 0, {
|
|
70
70
|
debounceDelay,
|
|
71
71
|
onBlur: fieldOnBlur,
|
|
@@ -128,4 +128,4 @@ var Input_default2 = Input_default;
|
|
|
128
128
|
|
|
129
129
|
|
|
130
130
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
131
|
+
//# sourceMappingURL=chunk-F6JQYB53.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-F6JQYB53.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACNA,sCAAmC;AAEnC,oDAAyC;AAqHrC,+CAAA;AAhHG,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AAuCD,IAAM,MAAA,EAAQ,CAAC,EAAA,EAAA,GAaG;AAbH,EAAA,IAAA,GAAA,EAAA,EAAA,EACb;AAAA,IAAA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,IACxB,UAAA,EAAY,KAAA;AAAA,IACZ,cAAA,EAAgB,GAAA;AAAA,IAChB,WAAA,EAAa,KAAA,CAAA;AAAA,IACb,IAAA;AAAA,IACA,QAAA,EAAU,KAAA,CAAA;AAAA,IACV,YAAA,EAAc,GAAA;AAAA,IACd,KAAA,EAAO,KAAA,CAAA;AAAA,IACP,aAAA,EAAe,KAAA,CAAA;AAAA,IACf,UAAA,EAAY,KAAA,CAAA;AAAA,IACZ,KAAA,EAAO,KAAA;AAAA,EAzET,EAAA,EA8De,EAAA,EAYV,kBAAA,EAAA,yCAAA,EAZU,EAYV;AAAA,IAXH,WAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,aAAA;AAAA,MACV,MAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAO,UAAA;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,+CAAA,8CAAgB,EAAE,KAAA,CAAA,EAAS,iBAAA,CAAmB,CAAA;AAGlD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,MAAM,eAAA,EACJ,UAAA,EACI;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,OAAA,EAAS,CAAA,EAAA,GAAM;AAGb,MAAA,UAAA,CAAW,IAAA,EAAM,EAAE,YAAA,EAAc,KAAK,CAAC,CAAA;AAEvC,MAAA,GAAA,CAAI,OAAA,EAAS;AACX,QAAA,OAAA,CAAQ,CAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF,EAAA,EACA,CAAC,CAAA;AAGP,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,CAAA;AAC/B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA,8CAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,UAAA;AAAA,MACA,YAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,cAAA,EAAe,SAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA,EAAO,IAAA;AAAA,MACP,IAAA;AAAA,MACA,YAAA;AAAA,MACA,IAAA;AAAA,MAEA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA;AAAA,QAExB,aAAA,EAAe,KAAA;AAAA,QACf,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B;AAAA,IAAA,CAAA,EACI,cAAA;AAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,EAAQ,KAAA;ADrCf;AACA;AErHA,IAAOA,eAAAA,EAAQ,aAAA;AFuHf;AACA;AACE;AACA;AACF,+EAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-F6JQYB53.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce, useUniformField } from '../hooks';\n\n// input variants\nexport const inputVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** shows clear button when input has value */\n clearable?: boolean;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\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 /** callback that is fired when the value is cleared */\n onClear?: () => void;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\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 transform?: InputValueTransform;\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: _className = undefined,\n clearable = false,\n debounceDelay = 300,\n endContent = undefined,\n name,\n onClear = undefined,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n transform = undefined,\n type = undefined,\n ...uniformFieldProps\n}: InputProps) => {\n const {\n disabled,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n errorMessage,\n invalid,\n label,\n required,\n testId,\n resetField,\n } = useUniformField({ name, ...uniformFieldProps });\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n // If input is clearable add props for clearing input value\n const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n clearable\n ? {\n isClearable: true,\n onClear: () => {\n // if field had initial value we do not reset it\n // to that value, but clear it instead\n resetField(name, { defaultValue: null });\n // if onClear cb provided we call it\n if (onClear) {\n onClear();\n }\n },\n }\n : {};\n\n // classNames from slots\n const variants = inputVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n return (\n <HeroInput\n ref={ref}\n data-testid={testId}\n endContent={endContent}\n errorMessage={errorMessage}\n id={testId}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\n variant=\"bordered\"\n classNames={{\n base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\n }}\n {...clearableProps}\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"]}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
FieldValidationError_default
|
|
3
|
+
} from "./chunk-ELYGQTXB.js";
|
|
4
|
+
import {
|
|
5
|
+
useController
|
|
6
|
+
} from "./chunk-CK362NWK.js";
|
|
7
|
+
import {
|
|
4
8
|
useInput
|
|
5
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-AHJJIANM.js";
|
|
6
10
|
import {
|
|
7
11
|
FieldCopyTestIdButton_default
|
|
8
12
|
} from "./chunk-NTDKZW4E.js";
|
|
9
13
|
import {
|
|
10
|
-
|
|
11
|
-
} from "./chunk-
|
|
14
|
+
useFormContext
|
|
15
|
+
} from "./chunk-PO5UQAU6.js";
|
|
12
16
|
import {
|
|
13
17
|
__spreadProps,
|
|
14
18
|
__spreadValues
|
|
@@ -98,4 +102,4 @@ export {
|
|
|
98
102
|
Switch_default,
|
|
99
103
|
Switch_default2
|
|
100
104
|
};
|
|
101
|
-
//# sourceMappingURL=chunk-
|
|
105
|
+
//# sourceMappingURL=chunk-GUPJNFEX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Switch/Switch.tsx","../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n slots: {\n base: '',\n endContent: '',\n errorMessage: 'ml-1 mt-1',\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n outerWrapper: 'place-content-center',\n startContent: '',\n thumb: '',\n thumbIcon: '',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** whether the select should be disabled */\n disabled?: boolean;\n /** Icon to be displayed at the end of the switch (when enabled) */\n endContent?: ReactNode;\n /** component displayed next to the switch */\n label?: ReactNode;\n /** name the field is registered under */\n name: string;\n /* Size of the switch */\n size?: 'sm' | 'md' | 'lg';\n /** Icon to be displayed at the start of the switch (when disabled) */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Icon to be displayed inside the thumb */\n thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n * Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label: _label = undefined,\n name,\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n thumbIcon = undefined,\n}: SwitchProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n const { field } = useController<FieldValues>({ name, control, disabled });\n const { disabled: isDisabled, value, ref, onBlur, onChange } = field;\n\n const { label, getInputProps, getErrorMessageProps } = useInput({\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n\n // classNames from slots\n const variants = switchVariants();\n const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n return (\n <div className={classNames.outerWrapper}>\n <HeroSwitch\n ref={ref}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n aria-describedby={getInputProps()['aria-describedby']}\n classNames={classNames}\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n endContent={endContent}\n isDisabled={isDisabled}\n isSelected={!!value}\n name={name}\n onBlur={onBlur}\n onValueChange={onChange}\n required={required}\n size={size}\n startContent={startContent}\n thumbIcon={thumbIcon}\n value={value}\n >\n {label}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </HeroSwitch>\n {error ? (\n <div className={classNames.errorMessage}>\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Switch/Switch.tsx","../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { SwitchProps as HeroSwitchProps } from '@heroui/switch';\nimport type { ReactNode } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n slots: {\n base: '',\n endContent: '',\n errorMessage: 'ml-1 mt-1',\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n outerWrapper: 'place-content-center',\n startContent: '',\n thumb: '',\n thumbIcon: '',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** whether the select should be disabled */\n disabled?: boolean;\n /** Icon to be displayed at the end of the switch (when enabled) */\n endContent?: ReactNode;\n /** component displayed next to the switch */\n label?: ReactNode;\n /** name the field is registered under */\n name: string;\n /* Size of the switch */\n size?: 'sm' | 'md' | 'lg';\n /** Icon to be displayed at the start of the switch (when disabled) */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** Icon to be displayed inside the thumb */\n thumbIcon?: HeroSwitchProps['thumbIcon'];\n}\n\n/**\n * Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label: _label = undefined,\n name,\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n thumbIcon = undefined,\n}: SwitchProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n const { field } = useController<FieldValues>({ name, control, disabled });\n const { disabled: isDisabled, value, ref, onBlur, onChange } = field;\n\n const { label, getInputProps, getErrorMessageProps } = useInput({\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n\n // classNames from slots\n const variants = switchVariants();\n const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n return (\n <div className={classNames.outerWrapper}>\n <HeroSwitch\n ref={ref}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n aria-describedby={getInputProps()['aria-describedby']}\n classNames={classNames}\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n endContent={endContent}\n isDisabled={isDisabled}\n isSelected={!!value}\n name={name}\n onBlur={onBlur}\n onValueChange={onChange}\n required={required}\n size={size}\n startContent={startContent}\n thumbIcon={thumbIcon}\n value={value}\n >\n {label}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </HeroSwitch>\n {error ? (\n <div className={classNames.errorMessage}>\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,SAAS,UAAU,kBAAkB;AAErC,SAAS,IAAI,4BAA4B;AAoFnC,SAuBI,KAvBJ;AA9EC,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc;AAAA;AAAA;AAAA,IAGd,OACE;AAAA,IACF,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AA6BD,IAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO,SAAS;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AACd,MAAmB;AACjB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,UAAU,QAAQ,QAAQ,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAA2B,EAAE,MAAM,SAAS,SAAS,CAAC;AACxE,QAAM,EAAE,UAAU,YAAY,OAAO,KAAK,QAAQ,SAAS,IAAI;AAE/D,QAAM,EAAE,OAAO,eAAe,qBAAqB,IAAI,SAAS;AAAA,IAC9D,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf,CAAC;AAED,QAAM,uBAAuB,cAAc;AAG3C,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,cAAc;AAE3E,SACE,qBAAC,SAAI,WAAW,WAAW,cACzB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAGA,oBAAkB,cAAc,EAAE,kBAAkB;AAAA,QACpD;AAAA,QACA,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,YAAY,CAAC,CAAC;AAAA,QACd;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA;AAAA;AAAA,IACN;AAAA,IACC,QACC,oBAAC,SAAI,WAAW,WAAW,cACzB,8BAAC,wCAAQ,qBAAqB,IAA7B,EACC,8BAAC,gCAAqB,OAAc,QAAgB,IACtD,GACF,IACE;AAAA,KACN;AAEJ;AAEA,IAAO,iBAAQ;;;AC1Hf,IAAOA,kBAAQ;","names":["Switch_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-D3NAUOYG.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadProps,
|
|
@@ -167,4 +167,4 @@ export {
|
|
|
167
167
|
RadioBoxes_default,
|
|
168
168
|
RadioBoxes_default2
|
|
169
169
|
};
|
|
170
|
-
//# sourceMappingURL=chunk-
|
|
170
|
+
//# sourceMappingURL=chunk-H24QXVUI.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-PO5UQAU6.js";
|
|
4
4
|
|
|
5
5
|
// src/SubmitButton/SubmitButton.tsx
|
|
6
6
|
import { cn, slugify } from "@fuf-stack/pixel-utils";
|
|
@@ -46,4 +46,4 @@ export {
|
|
|
46
46
|
SubmitButton_default,
|
|
47
47
|
SubmitButton_default2
|
|
48
48
|
};
|
|
49
|
-
//# sourceMappingURL=chunk-
|
|
49
|
+
//# sourceMappingURL=chunk-HQGTCSHK.js.map
|
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
var _chunkAACO4OEKcjs = require('./chunk-AACO4OEK.cjs');
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
|
|
9
|
+
var _chunkTGJJZEHBcjs = require('./chunk-TGJJZEHB.cjs');
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
var _chunkNHEZXA4Hcjs = require('./chunk-NHEZXA4H.cjs');
|
|
@@ -324,7 +326,7 @@ var FieldArrayLabel = ({
|
|
|
324
326
|
name
|
|
325
327
|
}) => {
|
|
326
328
|
var _a;
|
|
327
|
-
const { error, getLabelProps, invalid, label } =
|
|
329
|
+
const { error, getLabelProps, invalid, label } = _chunkTGJJZEHBcjs.useUniformField.call(void 0, {
|
|
328
330
|
name,
|
|
329
331
|
label: _label
|
|
330
332
|
});
|
|
@@ -365,7 +367,7 @@ var FieldArrayValidationError = ({
|
|
|
365
367
|
getHelperWrapperProps,
|
|
366
368
|
invalid,
|
|
367
369
|
testId
|
|
368
|
-
} =
|
|
370
|
+
} = _chunkTGJJZEHBcjs.useUniformField.call(void 0, {
|
|
369
371
|
name
|
|
370
372
|
});
|
|
371
373
|
const disableAnimation = _pixelmotion.useReducedMotion.call(void 0, );
|
|
@@ -596,7 +598,7 @@ var FieldArray = (_a) => {
|
|
|
596
598
|
elementInitialValue,
|
|
597
599
|
getValues,
|
|
598
600
|
testId
|
|
599
|
-
} =
|
|
601
|
+
} = _chunkAACO4OEKcjs.useUniformFieldArray.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
600
602
|
name,
|
|
601
603
|
flat,
|
|
602
604
|
elementInitialValue: _elementInitialValue,
|
|
@@ -694,4 +696,4 @@ var FieldArray_default2 = FieldArray_default;
|
|
|
694
696
|
|
|
695
697
|
|
|
696
698
|
exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
|
|
697
|
-
//# sourceMappingURL=chunk-
|
|
699
|
+
//# sourceMappingURL=chunk-IYULWK4H.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IYULWK4H.cjs","../src/FieldArray/FieldArray.tsx","../src/FieldArray/subcomponents/ElementAppendButton.tsx","../src/FieldArray/subcomponents/FieldArrayElement.tsx","../src/FieldArray/subcomponents/ElementActionsMenu.tsx","../src/FieldArray/subcomponents/ElementRemoveButton.tsx","../src/FieldArray/subcomponents/SortDragHandle.tsx","../src/FieldArray/subcomponents/FieldArrayLabel.tsx","../src/FieldArray/subcomponents/FieldArrayValidationError.tsx","../src/FieldArray/subcomponents/SortContext.tsx","../src/FieldArray/index.ts"],"names":["jsx","cn","Button","FaTimes","useSortable","motion","AnimatePresence","jsxs"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IYULWK4H.cjs","sourcesContent":[null,"import type { FieldArrayElementMethods } from './subcomponents/FieldArrayElement';\nimport type { FieldArrayProps } from './types';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { flatArrayKey } from '../helpers';\nimport { useUniformFieldArray } from '../hooks/useUniformFieldArray/useUniformFieldArray';\nimport ElementAppendButton from './subcomponents/ElementAppendButton';\nimport FieldArrayElement from './subcomponents/FieldArrayElement';\nimport FieldArrayLabel from './subcomponents/FieldArrayLabel';\nimport FieldArrayValidationError from './subcomponents/FieldArrayValidationError';\nimport SortContext from './subcomponents/SortContext';\n\nexport const fieldArrayVariants = tv({\n slots: {\n /** base class for the field array wrapper */\n base: [\n // base styles\n 'overflow-hidden rounded-small border border-divider bg-content1',\n // divider between items\n 'divide-y divide-divider',\n ],\n /** class for the actions menu button */\n actionsMenuButton: [\n // base styles\n 'flex items-center justify-center text-default-600',\n // fixed height/no round corners/center align\n 'h-full rounded-none',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the append button */\n appendButton: [\n // base styles\n 'w-full justify-start rounded-b-small rounded-t-none font-semibold',\n // match label height (p-3 = 12px vertical padding + text-base line height)\n '!h-[48px] !min-h-0',\n // focus styles - inset ring with rounded bottom corners to match container\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the element fields grid */\n elementFieldsGrid: ['w-full grow p-3'],\n /** class for the label */\n label: [\n // override HeroUI label positioning and display\n 'pointer-events-auto! static! z-auto! block! w-full!',\n // reset any transforms or translations\n 'translate-x-0! translate-y-0! transform-none!',\n // card header styling - use text-medium (16px) instead of text-base for correct 48px height\n 'rounded-t-small p-3 font-semibold text-medium',\n ],\n /** class for the list */\n list: ['overflow-hidden'],\n /** class for the list wrapper */\n listWrapper: ['overflow-hidden'],\n /** class for the list item (performs motion animations) */\n listItem: [\n // base styles\n 'group relative flex flex-row',\n // overlap borders by shifting first item up 1px (similar to how last item overlaps with append button)\n 'first:-mt-px',\n ],\n /** class for the list item inner */\n listItemInner: [\n // base styles\n 'flex w-full flex-row items-stretch divide-divider bg-content1',\n // x division and borders\n 'divide-x divide-solid border-b border-t border-divider',\n ],\n /** class for the remove button */\n removeButton: [\n // base styles\n 'flex items-center justify-center',\n // fixed height/no round corners\n '!h-full !min-h-0 !rounded-none px-3',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n /** class for the sort drag handle */\n sortDragHandle: [\n // base styles\n 'flex cursor-grab items-center justify-center px-2 text-default-600 transition-colors',\n // hover and dragging state\n 'hover:bg-default-100 active:cursor-grabbing group-data-[dragging=true]:bg-default-100',\n // focus styles - inset ring\n 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus',\n ],\n },\n variants: {\n hasLabel: {\n false: {\n // focus styles - when there is no label, the first item actions menu button should have rounded top right corners\n actionsMenuButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item remove button focus ring should have rounded top right corners\n removeButton:\n 'group-[:first-child]:!rounded-tr-small group-[:first-child]:group-data-[dragging=true]:!rounded-tr-none',\n // focus styles - when there is no label, the first item sort drag handle focus ring should have rounded top left corners\n sortDragHandle:\n 'group-[:first-child]:rounded-tl-small group-[:first-child]:group-data-[dragging=true]:rounded-tl-none',\n },\n },\n },\n});\n\n/**\n * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)\n */\nconst FieldArray = ({\n appendButtonText = 'Add Element',\n children,\n className: _className = undefined,\n duplicate = false,\n elementInitialValue: _elementInitialValue = null,\n elementMarginBottom = undefined,\n flat = false,\n insertAfter = false,\n lastElementNotRemovable = false,\n name,\n sortable = false,\n ...uniformFieldProps\n}: FieldArrayProps) => {\n const {\n fields,\n append,\n remove,\n insert,\n move,\n disableAnimation,\n elementInitialValue,\n getValues,\n testId,\n } = useUniformFieldArray({\n name,\n flat,\n elementInitialValue: _elementInitialValue,\n lastElementNotRemovable,\n ...uniformFieldProps,\n });\n\n // className from slots\n const variants = fieldArrayVariants({ hasLabel: !!uniformFieldProps.label });\n const className = variantsToClassNames(variants, _className, 'base');\n\n return (\n <div className={className.base}>\n {/* field array label */}\n <FieldArrayLabel\n className={className.label}\n label={uniformFieldProps.label}\n name={name}\n />\n\n {fields.length ? (\n /* list wrapper */\n <div className={cn(className.listWrapper)}>\n {/* sortable context */}\n <SortContext\n fields={fields}\n move={move}\n name={name}\n sortable={sortable}\n >\n {/* list container */}\n <ul className={className.list} data-testid={testId}>\n {/* fields / list elements */}\n {fields.map((field, index) => {\n const elementName = flat\n ? `${name}.${index}.${flatArrayKey}`\n : `${name}.${index}`;\n const elementTestId = `${testId}_${index}`;\n\n // create methods for element\n const elementMethods: FieldArrayElementMethods = {\n append: () => {\n append(elementInitialValue);\n },\n duplicate: () => {\n const values = getValues(name);\n const currentValue = (values as unknown[])[index];\n const nextValue = flat\n ? { [flatArrayKey]: currentValue }\n : currentValue;\n insert(index + 1, nextValue);\n },\n insert: () => {\n insert(index + 1, elementInitialValue);\n },\n remove: () => {\n remove(index);\n },\n };\n\n return (\n <FieldArrayElement\n key={field.id}\n className={className}\n disableAnimation={disableAnimation}\n duplicate={duplicate}\n elementMarginBottom={elementMarginBottom}\n fields={fields}\n id={field.id}\n index={index}\n insertAfter={insertAfter}\n lastNotDeletable={lastElementNotRemovable}\n methods={elementMethods}\n sortable={sortable}\n testId={elementTestId}\n >\n {children({\n index,\n length: fields.length,\n methods: elementMethods,\n name: elementName,\n testId: elementTestId,\n })}\n </FieldArrayElement>\n );\n })}\n </ul>\n </SortContext>\n </div>\n ) : null}\n\n {/* top level field array errors */}\n <FieldArrayValidationError name={name} />\n\n {/* append elements button */}\n <ElementAppendButton\n appendButtonText={appendButtonText}\n className={className.appendButton}\n testId={`${testId}_append_button`}\n onClick={() => {\n append(elementInitialValue);\n }}\n />\n </div>\n );\n};\n\nexport default FieldArray;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaPlus } from 'react-icons/fa';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementAppendButtonProps {\n /** text of the append element button */\n appendButtonText?: string;\n /** CSS class name */\n className?: ClassValue;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementAppendButton = ({\n appendButtonText = 'Add Element',\n className = undefined,\n onClick,\n testId = undefined,\n}: ElementAppendButtonProps) => {\n return (\n <Button\n disableAnimation\n className={cn(className)}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n >\n <FaPlus />\n <span>{appendButtonText}</span>\n </Button>\n );\n};\n\nexport default ElementAppendButton;\n","import type { Variants as MotionVariants } from '@fuf-stack/pixel-motion';\nimport type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { FieldArrayFeatures } from '../types';\n\nimport { useState } from 'react';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { AnimatePresence, motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { Grid } from '../../Grid';\nimport ElementActionsMenu from './ElementActionsMenu';\nimport ElementRemoveButton from './ElementRemoveButton';\nimport SortDragHandle from './SortDragHandle';\n\nexport interface FieldArrayElementMethods {\n /** Add new element at end */\n append: () => void;\n /** Clone current element */\n duplicate: () => void;\n /** Add new element after current */\n insert: () => void;\n /** Remove current element */\n remove: () => void;\n}\n\ninterface FieldArrayElementProps extends FieldArrayFeatures {\n /** Form elements to render inside array element */\n children: React.ReactNode;\n /** CSS class names for component parts */\n className: {\n /** Class of wrapper grid inside the li that wraps the rendered element fields directly */\n elementFieldsGrid?: ClassValue;\n /** Class for the li (performs motion animations) */\n listItem?: ClassValue;\n /** Class for the li inner div (wraps the rendered element fields) */\n listItemInner?: ClassValue;\n /** Class for the actions menu button */\n actionsMenuButton?: ClassValue;\n /** Class for the remove element button (when menu is not used) */\n removeButton?: ClassValue;\n /** Class for the drag handle when sorting enabled */\n sortDragHandle?: ClassValue;\n };\n /** Globally disable animations for this item (used for first render or prefers-reduced-motion) */\n disableAnimation?: boolean;\n /** Bottom margin for elements (for backwards compatibility) */\n elementMarginBottom?: React.CSSProperties['marginBottom'];\n /** All fields in the form array */\n fields: Record<'id', string>[];\n /** Unique identifier for drag/drop */\n id: string | number;\n /** Field index in array */\n index: number;\n /** Prevent deletion of last remaining element */\n lastNotDeletable?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid of the element */\n testId?: string;\n}\n\n/**\n * Form array element component using react-hook-form with drag-drop sorting\n * and validation capabilities. Animations when elements are added or removed\n * improve the user experience and provide a better visual feedback.\n */\nconst FieldArrayElement = ({\n children,\n className,\n disableAnimation = false,\n duplicate = false,\n elementMarginBottom: _elementMarginBottom = undefined,\n fields,\n id,\n index: _index,\n insertAfter = false,\n lastNotDeletable = true,\n methods,\n sortable = false,\n testId = undefined,\n}: FieldArrayElementProps) => {\n // Apply transform styles when sortable is enabled for smooth drag animations\n // transform: handles the item's position during drag\n // transition: controls the animation timing when dropping\n const { setNodeRef, transform, transition, isDragging } = useSortable({ id });\n const sortingStyle = sortable\n ? {\n transform: CSS.Translate.toString(transform),\n transition,\n zIndex: isDragging ? 50 : undefined,\n }\n : undefined;\n\n // Local visibility to allow exit animation before removing from RHF state\n const [isVisible, setIsVisible] = useState(true);\n\n // Motion variants for the list item\n const listItemMotionVariants: MotionVariants = {\n hidden: { opacity: 0, height: 0, marginBottom: 0 },\n visible: {\n opacity: 1,\n height: 'auto',\n transition: { duration: 0.2, ease: 'circOut' },\n // push last visible item down to overlap with append button (hide double border)\n marginBottom: '-1px',\n },\n exit: {\n opacity: 0,\n height: 0,\n marginBottom: 0,\n transition: {\n // on exit first fade out, then shrink\n opacity: { duration: 0.1, ease: 'circOut' },\n height: { delay: 0.1, duration: 0.2, ease: 'circOut' },\n },\n },\n };\n\n // Height animation handled on <motion.li> using overflow hidden\n return (\n <AnimatePresence\n mode=\"wait\"\n // remove from RHF state after exit animation\n onExitComplete={() => {\n methods.remove();\n }}\n >\n {isVisible ? (\n <motion.li\n key={id}\n ref={setNodeRef}\n animate={disableAnimation ? undefined : 'visible'}\n className={cn(className.listItem)}\n data-dragging={isDragging}\n data-testid={`${testId}_element`}\n exit={disableAnimation ? undefined : 'exit'}\n initial={disableAnimation ? false : 'hidden'}\n style={sortingStyle}\n variants={disableAnimation ? undefined : listItemMotionVariants}\n >\n <div className={cn(className.listItemInner)}>\n {/** sorting drag handle */}\n {sortable ? (\n <SortDragHandle\n className={className.sortDragHandle}\n id={id}\n testId={`${testId}_sort_drag_handle`}\n />\n ) : null}\n\n {/** render element fields in Grid component */}\n <Grid\n className={cn(className.elementFieldsGrid)}\n testId={`${testId}_element_fields_grid`}\n >\n {/* render actual fields */}\n {children}\n </Grid>\n\n {/** actions menu when duplicate or insertAfter is enabled */}\n {duplicate || insertAfter ? (\n <ElementActionsMenu\n className={className.actionsMenuButton}\n duplicate={duplicate}\n insertAfter={insertAfter}\n showRemove={!(lastNotDeletable && fields.length === 1)}\n testId={`${testId}_actions_menu`}\n methods={{\n ...methods,\n remove: () => {\n if (disableAnimation) {\n methods.remove();\n } else {\n setIsVisible(false);\n }\n },\n }}\n />\n ) : (\n <>\n {/** remove element button (when menu is not used) */}\n <AnimatePresence initial={false}>\n {lastNotDeletable && fields.length === 1 ? null : (\n <ElementRemoveButton\n key=\"remove-button\"\n className={className.removeButton}\n disableAnimation={disableAnimation}\n testId={`${testId}_remove_button`}\n onClick={() => {\n if (disableAnimation) {\n methods.remove();\n } else {\n setIsVisible(false);\n }\n }}\n />\n )}\n </AnimatePresence>\n </>\n )}\n </div>\n </motion.li>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayElement;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\nimport type { MenuItem } from '@fuf-stack/pixels';\nimport type { Key } from 'react';\nimport type { FieldArrayElementMethods } from './FieldArrayElement';\n\nimport { FaCopy, FaTimes } from 'react-icons/fa';\nimport { VscInsert } from 'react-icons/vsc';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Menu } from '@fuf-stack/pixels';\n\nexport interface ElementActionsMenuProps {\n /** CSS class name */\n className?: ClassValue;\n /** Whether duplicate action is available */\n duplicate?: boolean;\n /** Whether insert after action is available */\n insertAfter?: boolean;\n /** Whether to show remove button (false when last element is not deletable) */\n showRemove?: boolean;\n /** Field array operation methods */\n methods: FieldArrayElementMethods;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Menu component for field array element actions (remove, duplicate, insert after)\n */\nconst ElementActionsMenu = ({\n className = undefined,\n duplicate = false,\n insertAfter = false,\n showRemove = true,\n methods,\n testId = undefined,\n}: ElementActionsMenuProps) => {\n const handleAction = (key: Key) => {\n switch (key) {\n case 'remove':\n methods.remove();\n break;\n case 'duplicate':\n methods.duplicate();\n break;\n case 'insertAfter':\n methods.insert();\n break;\n default:\n break;\n }\n };\n\n // Build menu items based on available actions\n const menuItems: MenuItem[] = [];\n\n if (duplicate) {\n menuItems.push({\n key: 'duplicate',\n label: 'Duplicate',\n icon: <FaCopy />,\n });\n }\n\n if (insertAfter) {\n menuItems.push({\n key: 'insertAfter',\n label: 'Insert After',\n icon: <VscInsert />,\n });\n }\n\n if (showRemove) {\n menuItems.push({\n key: 'remove',\n className: 'text-danger',\n label: 'Remove',\n icon: <FaTimes />,\n });\n }\n\n return (\n <Menu\n ariaLabel=\"Element actions\"\n items={menuItems}\n onAction={handleAction}\n placement=\"right\"\n testId={testId}\n triggerButtonProps={{\n className: cn(className),\n disableRipple: true,\n size: 'md',\n variant: 'light',\n }}\n />\n );\n};\n\nexport default ElementActionsMenu;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaTimes } from 'react-icons/fa';\n\nimport { motion } from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\ninterface ElementRemoveButtonProps {\n /** CSS class name */\n className?: ClassValue;\n /** Globally disable animations (used for first render or prefers-reduced-motion) */\n disableAnimation?: boolean;\n /** click handler */\n onClick: () => void;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst ElementRemoveButton = ({\n className = undefined,\n disableAnimation = false,\n onClick,\n testId = undefined,\n}: ElementRemoveButtonProps) => {\n const button = (\n <Button\n ariaLabel=\"remove element\"\n className={cn(className)}\n color=\"danger\"\n icon={<FaTimes />}\n onClick={onClick}\n size=\"sm\"\n testId={testId}\n variant=\"light\"\n />\n );\n\n if (disableAnimation) {\n return button;\n }\n\n return (\n <motion.div\n animate={{ opacity: 1, width: 'auto' }}\n className=\"flex\"\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n transition={{ duration: 0.2 }}\n >\n {button}\n </motion.div>\n );\n};\n\nexport default ElementRemoveButton;\n","import type { ClassValue } from '@fuf-stack/pixel-utils';\n\nimport { FaGripVertical } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface SortDragHandleProps {\n /** Optional CSS class name */\n className?: ClassValue;\n /** Unique identifier for sortable item */\n id: string | number;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Drag handle component that integrates with dnd-kit sortable functionality.\n * Renders a vertical grip icon that can be used to reorder items.\n */\nconst SortDragHandle = ({\n className = undefined,\n id,\n testId = undefined,\n}: SortDragHandleProps) => {\n // Get dnd-kit sortable attributes and listeners\n const { attributes, listeners } = useSortable({ id });\n\n return (\n <div\n className={cn(className)}\n data-testid={testId}\n {...attributes}\n {...listeners}\n >\n <FaGripVertical />\n </div>\n );\n};\n\nexport default SortDragHandle;\n","import type { ReactNode } from 'react';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks';\n\nexport interface FieldArrayLabelProps {\n /** CSS class name */\n className?: string;\n /** Label content */\n label: ReactNode;\n /** Field name */\n name: string;\n}\n\n/**\n * Renders the label for a FieldArray component.\n *\n * This component handles displaying the array label with proper accessibility\n * attributes using the label props from useUniformField.\n */\nconst FieldArrayLabel = ({\n className = undefined,\n label: _label,\n name,\n}: FieldArrayLabelProps) => {\n const { error, getLabelProps, invalid, label } = useUniformField({\n name,\n label: _label,\n });\n\n // when no label is provided, don't render anything\n if (!_label) {\n return null;\n }\n\n // @ts-expect-error - error._errors exists but not typed\n const hasErrors = invalid && error?._errors;\n\n return (\n <div\n {...getLabelProps()}\n aria-level={3}\n role=\"heading\"\n className={cn(getLabelProps()?.className, className, {\n // when there are no array level errors, the label should have foreground color\n 'text-foreground!': !hasErrors,\n })}\n >\n {label}\n </div>\n );\n};\n\nexport default FieldArrayLabel;\n","import {\n AnimatePresence,\n motion,\n useReducedMotion,\n} from '@fuf-stack/pixel-motion';\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../../hooks';\nimport FieldValidationError from '../../partials/FieldValidationError/FieldValidationError';\n\nexport interface FieldArrayValidationErrorProps {\n /** Field name */\n name: string;\n}\n\n/**\n * Renders array-level validation errors for FieldArray.\n *\n * This component handles validation errors that apply to the entire array\n * (e.g., \"Array must contain at least 3 elements\", \"Array elements are not unique\"),\n * as opposed to field-level errors which apply to individual array elements.\n *\n * The component wraps errors in the proper accessibility markup and animates\n * them in/out using Framer Motion when they appear or are resolved.\n */\nconst FieldArrayValidationError = ({\n name,\n}: FieldArrayValidationErrorProps) => {\n const {\n error,\n getErrorMessageProps,\n getHelperWrapperProps,\n invalid,\n testId,\n } = useUniformField({\n name,\n });\n\n // disable all animation if user prefers reduced motion\n const disableAnimation = useReducedMotion();\n\n // @ts-expect-error - error._errors exists but not typed\n const hasErrors = invalid && error?._errors;\n\n return (\n <AnimatePresence initial={!disableAnimation}>\n {hasErrors ? (\n <motion.div\n key=\"field-array-errors\"\n exit={disableAnimation ? undefined : { opacity: 0, height: 0 }}\n initial={disableAnimation ? false : { height: 0, opacity: 0 }}\n style={{ overflow: 'hidden' }}\n transition={{ duration: 0.2, ease: 'circOut' }}\n animate={\n disableAnimation ? undefined : { opacity: 1, height: 'auto' }\n }\n >\n <div\n {...getHelperWrapperProps()}\n className={cn(\n getHelperWrapperProps()?.className,\n // force helper to be visible (for some reason it's hidden by default) and add padding\n 'block px-3 py-2',\n )}\n >\n <div {...getErrorMessageProps()}>\n <FieldValidationError\n // @ts-expect-error - error._errors exists but not typed\n error={error._errors}\n testId={testId}\n />\n </div>\n </div>\n </motion.div>\n ) : null}\n </AnimatePresence>\n );\n};\n\nexport default FieldArrayValidationError;\n","import type { DragEndEvent } from '@dnd-kit/core';\nimport type { ReactNode } from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\n\nimport { useFormContext } from 'react-hook-form';\n\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport {\n restrictToVerticalAxis,\n restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\n\ninterface SortContextProps {\n /** child components */\n children: ReactNode;\n /** Array of objects containing unique IDs for sortable items */\n fields: Record<'id', string>[];\n /** name of the field array */\n name: string;\n /** react-hook-form's move function to update field array indices */\n move: UseFieldArrayMove;\n /** enable/disable sorting functionality */\n sortable: boolean;\n}\n\n/**\n * A wrapper component that provides drag-and-drop sorting functionality for field arrays\n * using dnd-kit and react-hook-form.\n *\n * This component integrates with react-hook-form's field arrays to enable vertical\n * drag-and-drop reordering of form fields. It supports both pointer (mouse/touch)\n * and keyboard interactions for accessibility.\n */\nconst SortContext = ({\n children,\n fields,\n move,\n name,\n sortable,\n}: SortContextProps): ReactNode => {\n const { trigger } = useFormContext();\n\n // Initialize sensors for both pointer (mouse/touch) and keyboard interactions\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor),\n );\n\n // Early return if sorting is disabled\n if (!sortable) {\n return children;\n }\n\n /**\n * Handles the end of a drag operation by updating field positions\n * @param event - The drag end event containing active and over elements\n */\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n\n // Only move if dropping over a different item\n if (active.id !== over?.id) {\n // Find the indices of the dragged item and drop target\n const oldIndex = fields.findIndex((field) => {\n return field.id === active.id;\n });\n const newIndex = fields.findIndex((field) => {\n return field.id === over?.id;\n });\n // Update the field array order using react-hook-form's move function\n move(oldIndex, newIndex);\n\n // Finally trigger validation for the array field,\n // so validation errors are updated for the new order\n trigger(name);\n }\n };\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext\n strategy={verticalListSortingStrategy}\n items={fields.map((field) => {\n return field.id;\n })}\n >\n {children}\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default SortContext;\n","import FieldArray from './FieldArray';\n\nexport type * from './types';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useUniformField
|
|
3
|
-
} from "./chunk-2K6FWC4H.js";
|
|
4
1
|
import {
|
|
5
2
|
useInputValueDebounce
|
|
6
3
|
} from "./chunk-MODD3TFE.js";
|
|
4
|
+
import {
|
|
5
|
+
useUniformField
|
|
6
|
+
} from "./chunk-D3NAUOYG.js";
|
|
7
7
|
import {
|
|
8
8
|
__objRest,
|
|
9
9
|
__spreadValues
|
|
@@ -100,4 +100,4 @@ export {
|
|
|
100
100
|
TextArea_default,
|
|
101
101
|
TextArea_default2
|
|
102
102
|
};
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
103
|
+
//# sourceMappingURL=chunk-JKWNYLNS.js.map
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _chunkZ353BLWIcjs = require('./chunk-Z353BLWI.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
|
|
9
|
+
|
|
10
|
+
// src/hooks/useController/useController.ts
|
|
11
|
+
var _reacthookform = require('react-hook-form');
|
|
12
|
+
var useController = (props) => {
|
|
13
|
+
const { field, formState, fieldState } = _reacthookform.useController.call(void 0, props);
|
|
14
|
+
return {
|
|
15
|
+
field: _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, field), {
|
|
16
|
+
// Handles both direct values (onChange("value")) and events (onChange(event))
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
18
|
+
onChange: (...event) => {
|
|
19
|
+
var _a, _b, _c;
|
|
20
|
+
const value = (_c = (_b = (_a = event[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.value) != null ? _c : event[0];
|
|
21
|
+
field.onChange(value === "" ? "" : _chunkZ353BLWIcjs.toNullishString.call(void 0, value));
|
|
22
|
+
},
|
|
23
|
+
// Convert null/undefined to empty string for UI display
|
|
24
|
+
value: _chunkZ353BLWIcjs.fromNullishString.call(void 0, field.value)
|
|
25
|
+
}),
|
|
26
|
+
formState,
|
|
27
|
+
fieldState
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
exports.useController = useController;
|
|
34
|
+
//# sourceMappingURL=chunk-JMFDNTVC.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JMFDNTVC.cjs","../src/hooks/useController/useController.ts"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACFA,gDAAkD;AAgC3C,IAAM,cAAA,EAAgB,CAC3B,KAAA,EAAA,GACsC;AACtC,EAAA,MAAM,EAAE,KAAA,EAAO,SAAA,EAAW,WAAW,EAAA,EAAI,0CAAA,KAAsB,CAAA;AAE/D,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,6CAAA,8CAAA,CAAA,CAAA,EACF,KAAA,CAAA,EADE;AAAA;AAAA;AAAA,MAIL,QAAA,EAAU,CAAA,GAAI,KAAA,EAAA,GAAiB;AAjDrC,QAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAkDQ,QAAA,MAAM,MAAA,EAAA,CAAQ,GAAA,EAAA,CAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,CAAM,CAAC,CAAA,EAAA,GAAP,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAU,MAAA,EAAA,GAAV,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAkB,KAAA,EAAA,GAAlB,KAAA,EAAA,GAAA,EAA2B,KAAA,CAAM,CAAC,CAAA;AAGhD,QAAA,KAAA,CAAM,QAAA,CAAS,MAAA,IAAU,GAAA,EAAK,GAAA,EAAK,+CAAA,KAAqB,CAAC,CAAA;AAAA,MAC3D,CAAA;AAAA;AAAA,MAEA,KAAA,EAAO,iDAAA,KAAkB,CAAM,KAAK;AAAA,IACtC,CAAA,CAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,EACF,CAAA;AACF,CAAA;ADhCA;AACA;AACE;AACF,sCAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-JMFDNTVC.cjs","sourcesContent":[null,"import type {\n ControllerFieldState,\n ControllerRenderProps,\n UseControllerProps as RHFUseControllerProps,\n UseFormStateReturn,\n} from 'react-hook-form';\n\nimport { useController as useRHFController } from 'react-hook-form';\n\nimport { fromNullishString, toNullishString } from '../../helpers';\n\nexport type UseControllerProps<TFieldValues extends object = object> =\n RHFUseControllerProps<TFieldValues>;\n\nexport interface UseControllerReturn<TFieldValues extends object = object> {\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}\n\n/**\n * A wrapper around react-hook-form's useController 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 useController\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\n */\nexport const useController = <TFieldValues extends object = object>(\n props: UseControllerProps<TFieldValues>,\n): UseControllerReturn<TFieldValues> => {\n const { field, formState, fieldState } = useRHFController(props);\n\n return {\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 // Preserve empty strings for required field validation\n // Only convert non-empty values to nullish strings\n field.onChange(value === '' ? '' : toNullishString(value));\n },\n // Convert null/undefined to empty string for UI display\n value: fromNullishString(field.value) as string,\n },\n formState,\n fieldState,\n };\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";//# sourceMappingURL=chunk-LTKRK3OS.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-LTKRK3OS.cjs"],"names":[],"mappings":"AAAA","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-LTKRK3OS.cjs"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-D3NAUOYG.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadValues
|
|
@@ -113,4 +113,4 @@ export {
|
|
|
113
113
|
Radios_default,
|
|
114
114
|
Radios_default2
|
|
115
115
|
};
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
116
|
+
//# sourceMappingURL=chunk-MXUKW3PZ.js.map
|