react-simple-formkit 2.0.2 → 2.0.4
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/README.md +75 -13
- package/dist/react-simple-formkit.js +3 -3
- package/dist/react-simple-formkit.mjs +58 -58
- package/dist/react-simple-formkit.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# React Simple FormKit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Supports managing forms as uncontrolled. State updates only when watched. Simple and quick to configure with outstanding efficiency.
|
|
4
4
|
|
|
5
5
|
# Table of Contents
|
|
6
6
|
|
|
@@ -40,9 +40,13 @@ Support manage forms as uncontrolled. State updates only when watched. Simple an
|
|
|
40
40
|
|
|
41
41
|
# Features
|
|
42
42
|
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
43
|
+
- **Lightweight**: only ~**15KB**
|
|
44
|
+
- **Easy setup**: simple and quick configuration
|
|
45
|
+
- **Optimized for uncontrolled forms**: no unnecessary re-renders
|
|
46
|
+
- Comprehensive form management:
|
|
47
|
+
- [Values](#manage-values): get/set values, defaults, reset, ...
|
|
48
|
+
- [States](#manage-states): dirty, touched, custom states, ...
|
|
49
|
+
- [Errors](#manage-errors): form-level and field-level errors, ...
|
|
46
50
|
|
|
47
51
|
# Quick start
|
|
48
52
|
|
|
@@ -69,9 +73,67 @@ return (
|
|
|
69
73
|
|
|
70
74
|
## Modes of input field
|
|
71
75
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
### `Uncontrolled`:
|
|
77
|
+
|
|
78
|
+
Basic HTML form elements whose value is natively managed by the browser. Such as
|
|
79
|
+
`<input type="text">`, `<input type="checkbox">`, `<select>`, or `<textarea>`.
|
|
80
|
+
|
|
81
|
+
> **Note:** Or also **UI library components** that are simple wrappers around these native elements that **still follow the browser’s standard behavior**
|
|
82
|
+
|
|
83
|
+
### `Controlled`:
|
|
84
|
+
|
|
85
|
+
Advanced UI components with complex **INPUT AND OUTPUT** . For example, a multiple select component expects an array as its input/output, but your form state might need to store the value as a string.
|
|
86
|
+
|
|
87
|
+
By using `Controller`, you can transform the value in both directions:
|
|
88
|
+
|
|
89
|
+
- On `input`: split the stored string into an array to pass to the UI component.
|
|
90
|
+
- On `change`: join the selected array back into a string before updating the form state.
|
|
91
|
+
|
|
92
|
+
> **Note:** Or whenever you want to **control the value of a field** (e.g. by calling `actions.setValue`), you **must** wrap that field with a `Controller`.
|
|
93
|
+
> Without `Controller`, the field will not respond to external value changes.
|
|
94
|
+
|
|
95
|
+
Example:
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
<Controller
|
|
99
|
+
name="multipleSelect"
|
|
100
|
+
render={({ value = "", onChange, name }) => {
|
|
101
|
+
return (
|
|
102
|
+
<Select
|
|
103
|
+
multiple
|
|
104
|
+
name={name}
|
|
105
|
+
value={value.split(",")}
|
|
106
|
+
onChange={(e) => {
|
|
107
|
+
const value = e.target.value;
|
|
108
|
+
// value as array by default but on autofill value as string
|
|
109
|
+
onChange(typeof value === "string" ? value : value.join(","));
|
|
110
|
+
}}
|
|
111
|
+
>
|
|
112
|
+
<MenuItem value="10">Ten</MenuItem>
|
|
113
|
+
<MenuItem value="20">Twenty</MenuItem>
|
|
114
|
+
<MenuItem value="30">Thirty</MenuItem>
|
|
115
|
+
</Select>
|
|
116
|
+
);
|
|
117
|
+
}}
|
|
118
|
+
/>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### `Captured`
|
|
122
|
+
|
|
123
|
+
Advanced UI components with complex **OUTPUT ONLY**
|
|
124
|
+
|
|
125
|
+
In these cases, the field is **captured**:
|
|
126
|
+
|
|
127
|
+
- You only listen to its value changes through a custom `onChange`.
|
|
128
|
+
- You can sync the final value into the form when needed (via `actions.setValue`).
|
|
129
|
+
|
|
130
|
+
Example:
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
134
|
+
<DatePicker name="date" onChange={(newValue) => actions.setValue("date", newValue.format("MM/DD/YYYY"))} />
|
|
135
|
+
</LocalizationProvider>
|
|
136
|
+
```
|
|
75
137
|
|
|
76
138
|
```
|
|
77
139
|
const { control, actions } = useForm();
|
|
@@ -114,7 +176,7 @@ return (
|
|
|
114
176
|
)
|
|
115
177
|
```
|
|
116
178
|
|
|
117
|
-
|
|
179
|
+
> **Note\*:** All fields in the form must follow one of the three modes above to ensure the form works correctly
|
|
118
180
|
|
|
119
181
|
## Watching for updates
|
|
120
182
|
|
|
@@ -140,7 +202,7 @@ const values = watch("values")
|
|
|
140
202
|
// useWatch
|
|
141
203
|
useWatch({ name: "fieldName" })
|
|
142
204
|
useWatch({ name: ["fieldName", "fieldName2"] })
|
|
143
|
-
useWatch({ compute: (values) => values.number > 10
|
|
205
|
+
useWatch({ compute: (values) => values.number > 10 ? true : false })
|
|
144
206
|
|
|
145
207
|
// actions.getValues()
|
|
146
208
|
const { actions } = useForm()
|
|
@@ -241,12 +303,12 @@ const { fieldName, fieldName2 } = watch("errors")
|
|
|
241
303
|
```
|
|
242
304
|
// actions.setError()
|
|
243
305
|
const { control, actions, watch } = useForm()
|
|
244
|
-
const { isError,
|
|
306
|
+
const { isError, "errors.input1": input1Error } = watch(["isError", "errors.input1"])
|
|
245
307
|
|
|
246
308
|
return (
|
|
247
309
|
<Form control={control} onChange={console.log}>
|
|
248
310
|
<input name="input1" />
|
|
249
|
-
{
|
|
311
|
+
{input1Error && <span className="error-message">{input1Error}</span>}
|
|
250
312
|
<button type="button" onClick={() => actions.setError("number", "This is error message")}>
|
|
251
313
|
Set Error
|
|
252
314
|
</button>
|
|
@@ -288,8 +350,8 @@ Return:
|
|
|
288
350
|
Generic props:
|
|
289
351
|
|
|
290
352
|
- `control`: received from useForm()
|
|
291
|
-
- `onSubmit`: `(currentValues) => {}`
|
|
292
|
-
- `onChange`: `(name, value, currentValues) => {}`
|
|
353
|
+
- `onSubmit`: `(currentValues) => {}` called when the form is submitted via a button with `type='submit'`
|
|
354
|
+
- `onChange`: `(name, value, currentValues) => {}` called when any field value changes
|
|
293
355
|
|
|
294
356
|
## Controller
|
|
295
357
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var Re;function pe(){if(Re)return Z;Re=1;var
|
|
9
|
+
*/var Re;function pe(){if(Re)return Z;Re=1;var u=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function l(m,i,f){var C=null;if(f!==void 0&&(C=""+f),i.key!==void 0&&(C=""+i.key),"key"in i){f={};for(var b in i)b!=="key"&&(f[b]=i[b])}else f=i;return i=f.ref,{$$typeof:u,type:m,key:C,ref:i!==void 0?i:null,props:f}}return Z.Fragment=c,Z.jsx=l,Z.jsxs=l,Z}var Q={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var ge;function _e(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){function
|
|
17
|
+
*/var ge;function _e(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case j:return"Profiler";case W:return"StrictMode";case ee:return"Suspense";case re:return"SuspenseList";case V:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case D:return"Portal";case M:return(e.displayName||"Context")+".Provider";case H:return(e._context.displayName||"Context")+".Consumer";case K:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return o=e.displayName||null,o!==null?o:u(e.type)||"Memo";case B:o=e._payload,e=e._init;try{return u(e(o))}catch{}}return null}function c(e){return""+e}function l(e){try{c(e);var o=!1}catch{o=!0}if(o){o=console;var a=o.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),c(e)}}function m(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===B)return"<...>";try{var o=u(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function i(){var e=L.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function C(e){if(Y.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function b(e,o){function a(){O||(O=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function _(){var e=u(this.type);return U[e]||(U[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function A(e,o,a,g,v,p,J,z){return a=p.ref,e={$$typeof:S,type:e,key:o,props:p,_owner:v},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,o,a,g,v,p,J,z){var R=o.children;if(R!==void 0)if(g)if(ne(R)){for(g=0;g<R.length;g++)E(R[g]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(R);if(Y.call(o,"key")){R=u(e);var T=Object.keys(o).filter(function(ae){return ae!=="key"});g=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",I[R+g]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,g,R,T,R),I[R+g]=!0)}if(R=null,
|
|
22
|
+
<%s key={someKey} {...props} />`,g,R,T,R),I[R+g]=!0)}if(R=null,a!==void 0&&(l(a),R=""+a),C(o)&&(l(o.key),R=""+o.key),"key"in o){a={};for(var G in o)G!=="key"&&(a[G]=o[G])}else a=o;return R&&b(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,R,p,v,i(),a,J,z)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=t,S=Symbol.for("react.transitional.element"),D=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),M=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),B=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),L=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ne=Array.isArray,N=console.createTask?console.createTask:function(){return null};d={"react-stack-bottom-frame":function(e){return e()}};var O,U={},q=d["react-stack-bottom-frame"].bind(d,f)(),$=N(m(f)),I={};Q.Fragment=P,Q.jsx=function(e,o,a,g,v){var p=1e4>L.recentlyCreatedOwnerStacks++;return h(e,o,a,!1,g,v,p?Error("react-stack-top-frame"):q,p?N(m(e)):$)},Q.jsxs=function(e,o,a,g,v){var p=1e4>L.recentlyCreatedOwnerStacks++;return h(e,o,a,!0,g,v,p?Error("react-stack-top-frame"):q,p?N(m(e)):$)}}()),Q}var ke;function Te(){return ke||(ke=1,process.env.NODE_ENV==="production"?oe.exports=pe():oe.exports=_e()),oe.exports}var he=Te();const k=()=>{},ye=t.createContext({ref:null,watch:null,actions:{reset:k,setValue:k,getValues:k,setError:k,clearError:k,clearErrors:k,checkValidity:k,getNumberFields:k,getFieldValidity:k,getDefaultValues:k,setFieldStateProperty:k,getControlledFields:k},registerController:k,registerHookWatcher:k,lastReloadedAt:k,registerOnchange:k,loadFormValues:k,getWatchValue:k}),fe=()=>t.useContext(ye),Oe=({id:u,control:c,method:l,action:m,children:i,onSubmit:f=()=>{},onInput:C=()=>{},onChange:b=()=>{},onReset:_=()=>{},numberFields:A=[],className:h,...E})=>(t.useEffect(()=>c.registerOnchange(b),[b]),he.jsx(ye.Provider,{value:c,children:he.jsx("form",{id:u,ref:c.ref,action:m,method:l,className:h,onInput:C,onSubmit:d=>{l||d.preventDefault();const S=c.loadFormValues();f(S)},onChange:d=>{const S=d.target.name;c.actions.getControlledFields()[S]||c.actions.setValue(S,d.target.value)},onReset:d=>{c.actions.reset(),_(d)},...E,children:i},c.lastReloadedAt)})),Ce=({control:u,name:c,compute:l})=>{const{getWatchValue:m,registerHookWatcher:i}=u||fe(),f=m({name:c,compute:l}),[C,b]=t.useState(f);return t.useEffect(()=>i({name:c,compute:l,setValue:b,computeValue:f}),[]),C},ve=({name:u,defaultValue:c})=>{const{actions:l,registerController:m}=fe(),i=t.useRef(),f=l.getDefaultValues()[u]||c,[C,b]=t.useState(f),_=Ce({name:`fieldStates.${u}.customState`}),A=t.useCallback(E=>{l.setFieldStateProperty(u,"customState",E)},[]),h=t.useCallback((E,{shouldDirty:d=!0,shouldOnChange:S=!0}={})=>{l.setValue(u,E,{shouldDirty:d,shouldOnChange:S}),b(E)},[l.setValue]);return t.useEffect(()=>m(u,b),[]),{ref:i,name:u,defaultValue:f,value:C,onChange:h,customState:_,setCustomState:A}},Ae=({name:u,defaultValue:c,render:l=({ref:m,name:i,defaultValue:f,value:C,onChange:b,customState:_,setCustomState:A})=>null})=>{const m=ve({name:u,defaultValue:c});return l(m)},Pe=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],Se=u=>{typeof u.setCustomValidity=="function"&&u.setCustomValidity("");let c=u.validity;console.log(u.valid);let l=Pe.find(m=>c[m]);if(l)return{type:l,message:u.validationMessage}},je=()=>{const[,u]=t.useState({});return t.useCallback(()=>u({}),[])},Fe=()=>{const[u,c]=t.useState(),l=t.useCallback(()=>c(new Date().toString()),[]);return[u,l]},xe=[],Ve={},Ne=({numberFields:u=xe,defaultValues:c=Ve,shouldUnRegister:l=!1,shouldConvertNumber:m=!1}={})=>{const i=je(),[f,C]=Fe(),b=t.useRef(),_=t.useRef(()=>{}),A=t.useRef(!1),h=t.useRef(c),E=t.useRef(c),d=t.useRef(new Set),S=t.useRef(u),D=t.useRef({}),P=t.useRef([]),W=t.useRef([]),j=t.useRef({}),H=t.useRef(0),M=t.useRef({}),K=t.useCallback(()=>{M.current=Object.keys(E.current).reduce((r,n)=>({...r,[n]:{isDirty:!1,isTouched:!1,customState:null}}),{})},[]),ee=t.useCallback((r={})=>{E.current={...E.current,...r},h.current={...E.current},H.current=0,A.current=!1,j.current={},S.current=u,d.current=new Set,W.current=[],P.current=[],D.current={},K(),u.length>0&&(m=!0),C()},[]),re=t.useCallback(()=>!!Object.values(N()).find(r=>r.isDirty),[]),ue=t.useCallback(()=>!!Object.values(Y()).find(r=>!!r),[]),B=t.useCallback(r=>Se(r.target),[]),V=t.useCallback(r=>r?h.current[r]:h.current,[]),te=t.useCallback(()=>E.current,[]),L=t.useCallback(()=>S.current,[]),Y=t.useCallback(()=>j.current,[]),ne=t.useCallback(()=>D.current,[]),N=t.useCallback(()=>M.current,[]),O=t.useCallback(({name:r,compute:n})=>{var y;if(typeof n=="function")return n(V());if(Array.isArray(r)){const F={};return r.forEach(x=>{F[x]=O({name:x})}),F}if(r==="isDirty")return re();if(r==="isError")return ue();if(r==="values")return{...V()};if(r==="errors")return{...Y()};if(r==="fieldStates")return{...N()};const s=r.split(".");if(s.length>1){const F=s[1];if(s[0]==="errors")return s.length===2?Y()[F]:Y();if(s[0]==="fieldStates"){if(s.length===2)return{...N()[F]};const x=s[2];return(y=N()[F])==null?void 0:y[x]}}return V()[r]},[]),U=r=>{W.current.forEach(n=>{let s;if(typeof n.name=="string"?s=r(n):n.name.forEach(y=>{s||(s=r({...n,name:y}))}),s){const y=O(n);n.setValue(y)}})},q=r=>{const n=({name:s})=>s==="isError"||s==="errors"||(r?s===`errors.${r}`:s.includes("errors"));[...d.current].forEach(s=>{n({name:s})&&i()}),U(n)},$=t.useCallback((r,n)=>{j.current[r]=n,q(r)},[]),I=t.useCallback(r=>{j.current[r]&&(j.current[r]=null,q(r))},[]),e=t.useCallback(()=>{Object.keys(j.current)!==0&&(j.current={},q())},[]),o=t.useCallback(r=>{const n=Se(r.target);n?$(r.target.name,n):I(r.target.name)},[$,I]),a=t.useCallback((r,n,s)=>{const y=M.current[r];if(y[n]!==s){M.current[r]={...y,[n]:s};const x=({name:w})=>w==="fieldStates"||w===`fieldStates.${r}`||w===`fieldStates.${r}.${n}`;if([...d.current].forEach(w=>{x({name:w})&&i()}),n==="customState"){P.current.forEach(({name:w,setValue:se})=>{w.includes(r)&&se(s)});return}U(x)}}),g=t.useCallback((r,n,{shouldDirty:s=!0,shouldOnChange:y=!0}={})=>{m&&S.current.includes(r)&&(n=Number(n)||void 0);const F=h.current[r],x=M.current[r],se=D.current[r];if(a(r,"isTouched",!0),s){const X=n!==E.current[r];x.isDirty!==X&&a(r,"isDirty",X)}const ce=re(),de=A.current,me=n!==F;d.current.has(r)&&me&&i(),d.current.has("values")&&i(),d.current.has("isDirty")&&ce!==de&&i(),h.current[r]=n,se&&se(n),A.current=ce,U(X=>{const{name:le,compute:be,computeValue:Ee}=X;if(be){const ie=be(V());return ie!==Ee&&(X.computeValue=ie),ie!==Ee}if(le==="values")return!0;if(le==="isDirty")return ce!==de;if(le===r)return me}),y&&_.current(r,n,h.current)},[a]),v=t.useCallback(r=>{if(typeof r=="string")return d.current.add(r),O({name:r});if(Array.isArray(r)){const n={};return r.forEach(s=>{d.current.add(s),n[s]=O({name:s})}),n}return O({name:r})},[]),p=t.useCallback((r,n)=>{const s=D.current;return s[r]=n,()=>{l&&(delete s[r],delete h.current[r])}},[]),J=t.useCallback(r=>(_.current=r,()=>_.current=()=>{}),[]),z=t.useCallback(r=>{var s;const n=H.current;return(s=r.name)!=null&&s.includes("customState")?P.current.push({key:n,...r}):W.current.push({key:n,...r}),H.current++,()=>{W.current=W.current.filter(y=>y.key!==n),P.current=P.current.filter(y=>y.key!==n)}},[]),R=t.useCallback(()=>{const r=Object.fromEntries(new FormData(b.current)),n=D.current;return Object.keys(n).map(s=>{r[s]=h.current[s]}),m&&S.current.forEach(s=>r.hasOwnProperty(s)&&(r[s]=Number(r[s])||0)),r},[]),T=t.useMemo(()=>({reset:ee,setValue:g,getValues:V,setError:$,clearError:I,clearErrors:e,checkValidity:o,getNumberFields:L,getFieldValidity:B,getDefaultValues:te,setFieldStateProperty:a,getControlledFields:ne}),[ee,g,V,$,I,e,o,L,B,te,a,ne]),G=t.useMemo(()=>({ref:b,watch:v,actions:T,registerController:p,registerHookWatcher:z,lastReloadedAt:f,registerOnchange:J,loadFormValues:R,getWatchValue:O}),[b,v,T,p,z,f,J,R,O]),ae=t.useMemo(()=>({control:G,actions:T,watch:v}),[f,G,T,v]);return t.useLayoutEffect(()=>{if([...b.current.querySelectorAll("[name]")].forEach(n=>{!n.defaultValue&&E.current[n.name]&&(n.defaultValue=E.current[n.name]),n.type==="number"&&!S.current.includes(n.name)&&S.current.push(n.name)}),b.current){const n=R();h.current={...n},E.current={...n}}},[f]),t.useLayoutEffect(()=>{K()},[]),ae};exports.Controller=Ae;exports.Form=Oe;exports.useController=ve;exports.useForm=Ne;exports.useFormContext=fe;exports.useWatch=Ce;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import Ae, { createContext as Pe, useContext as
|
|
1
|
+
import Ae, { createContext as Pe, useContext as je, useEffect as Ee, useState as ue, useRef as k, useCallback as a, useMemo as me, useLayoutEffect as Se } from "react";
|
|
2
2
|
var ce = { exports: {} }, Q = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
@@ -10,7 +10,7 @@ var ce = { exports: {} }, Q = {};
|
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
var ye;
|
|
13
|
-
function
|
|
13
|
+
function Ce() {
|
|
14
14
|
if (ye) return Q;
|
|
15
15
|
ye = 1;
|
|
16
16
|
var s = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
|
|
@@ -50,24 +50,24 @@ function xe() {
|
|
|
50
50
|
return e.$$typeof === ne ? null : e.displayName || e.name || null;
|
|
51
51
|
if (typeof e == "string") return e;
|
|
52
52
|
switch (e) {
|
|
53
|
-
case
|
|
53
|
+
case C:
|
|
54
54
|
return "Fragment";
|
|
55
|
-
case
|
|
55
|
+
case x:
|
|
56
56
|
return "Profiler";
|
|
57
|
-
case
|
|
57
|
+
case Y:
|
|
58
58
|
return "StrictMode";
|
|
59
59
|
case re:
|
|
60
60
|
return "Suspense";
|
|
61
61
|
case te:
|
|
62
62
|
return "SuspenseList";
|
|
63
|
-
case
|
|
63
|
+
case N:
|
|
64
64
|
return "Activity";
|
|
65
65
|
}
|
|
66
66
|
if (typeof e == "object")
|
|
67
67
|
switch (typeof e.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), e.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case W:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case $:
|
|
73
73
|
return (e.displayName || "Context") + ".Provider";
|
|
@@ -108,7 +108,7 @@ function xe() {
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
function m(e) {
|
|
111
|
-
if (e ===
|
|
111
|
+
if (e === C) return "<>";
|
|
112
112
|
if (typeof e == "object" && e !== null && e.$$typeof === X)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
@@ -150,7 +150,7 @@ function xe() {
|
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
152
152
|
}
|
|
153
|
-
function
|
|
153
|
+
function j(e, o, c, b, _, T, z, G) {
|
|
154
154
|
return c = T.ref, e = {
|
|
155
155
|
$$typeof: y,
|
|
156
156
|
type: e,
|
|
@@ -221,7 +221,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
221
221
|
return R && E(
|
|
222
222
|
c,
|
|
223
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
224
|
-
),
|
|
224
|
+
), j(
|
|
225
225
|
e,
|
|
226
226
|
R,
|
|
227
227
|
T,
|
|
@@ -235,7 +235,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
235
235
|
function g(e) {
|
|
236
236
|
typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
|
|
237
237
|
}
|
|
238
|
-
var d = Ae, y = Symbol.for("react.transitional.element"),
|
|
238
|
+
var d = Ae, y = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), C = Symbol.for("react.fragment"), Y = Symbol.for("react.strict_mode"), x = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), te = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), X = Symbol.for("react.lazy"), N = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), U = d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, oe = Array.isArray, w = console.createTask ? console.createTask : function() {
|
|
239
239
|
return null;
|
|
240
240
|
};
|
|
241
241
|
d = {
|
|
@@ -246,8 +246,8 @@ React keys must be passed directly to JSX without using spread:
|
|
|
246
246
|
var P, q = {}, J = d["react-stack-bottom-frame"].bind(
|
|
247
247
|
d,
|
|
248
248
|
f
|
|
249
|
-
)(), M =
|
|
250
|
-
K.Fragment =
|
|
249
|
+
)(), M = w(m(f)), L = {};
|
|
250
|
+
K.Fragment = C, K.jsx = function(e, o, c, b, _) {
|
|
251
251
|
var T = 1e4 > U.recentlyCreatedOwnerStacks++;
|
|
252
252
|
return S(
|
|
253
253
|
e,
|
|
@@ -257,7 +257,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
257
257
|
b,
|
|
258
258
|
_,
|
|
259
259
|
T ? Error("react-stack-top-frame") : J,
|
|
260
|
-
T ?
|
|
260
|
+
T ? w(m(e)) : M
|
|
261
261
|
);
|
|
262
262
|
}, K.jsxs = function(e, o, c, b, _) {
|
|
263
263
|
var T = 1e4 > U.recentlyCreatedOwnerStacks++;
|
|
@@ -269,14 +269,14 @@ React keys must be passed directly to JSX without using spread:
|
|
|
269
269
|
b,
|
|
270
270
|
_,
|
|
271
271
|
T ? Error("react-stack-top-frame") : J,
|
|
272
|
-
T ?
|
|
272
|
+
T ? w(m(e)) : M
|
|
273
273
|
);
|
|
274
274
|
};
|
|
275
275
|
}()), K;
|
|
276
276
|
}
|
|
277
277
|
var ve;
|
|
278
278
|
function Fe() {
|
|
279
|
-
return ve || (ve = 1, process.env.NODE_ENV === "production" ? ce.exports =
|
|
279
|
+
return ve || (ve = 1, process.env.NODE_ENV === "production" ? ce.exports = Ce() : ce.exports = xe()), ce.exports;
|
|
280
280
|
}
|
|
281
281
|
var ke = Fe();
|
|
282
282
|
const h = () => {
|
|
@@ -303,7 +303,7 @@ const h = () => {
|
|
|
303
303
|
registerOnchange: h,
|
|
304
304
|
loadFormValues: h,
|
|
305
305
|
getWatchValue: h
|
|
306
|
-
}), Oe = () =>
|
|
306
|
+
}), Oe = () => je(Te), Le = ({
|
|
307
307
|
id: s,
|
|
308
308
|
control: u,
|
|
309
309
|
method: l,
|
|
@@ -317,7 +317,7 @@ const h = () => {
|
|
|
317
317
|
},
|
|
318
318
|
onReset: O = () => {
|
|
319
319
|
},
|
|
320
|
-
numberFields:
|
|
320
|
+
numberFields: j = [],
|
|
321
321
|
className: S,
|
|
322
322
|
...g
|
|
323
323
|
}) => (Ee(() => u.registerOnchange(E), [E]), /* @__PURE__ */ ke.jsx(Te.Provider, { value: u, children: /* @__PURE__ */ ke.jsx(
|
|
@@ -349,7 +349,7 @@ const h = () => {
|
|
|
349
349
|
const { getWatchValue: m, registerHookWatcher: i } = s || Oe(), f = m({ name: u, compute: l }), [v, E] = ue(f);
|
|
350
350
|
return Ee(() => i({ name: u, compute: l, setValue: E, computeValue: f }), []), v;
|
|
351
351
|
}, Ne = ({ name: s, defaultValue: u }) => {
|
|
352
|
-
const { actions: l, registerController: m } = Oe(), i = k(), f = l.getDefaultValues()[s] || u, [v, E] = ue(f), O = Ve({ name: `fieldStates.${s}.customState` }),
|
|
352
|
+
const { actions: l, registerController: m } = Oe(), i = k(), f = l.getDefaultValues()[s] || u, [v, E] = ue(f), O = Ve({ name: `fieldStates.${s}.customState` }), j = a((g) => {
|
|
353
353
|
l.setFieldStateProperty(s, "customState", g);
|
|
354
354
|
}, []), S = a(
|
|
355
355
|
(g, { shouldDirty: d = !0, shouldOnChange: y = !0 } = {}) => {
|
|
@@ -357,11 +357,11 @@ const h = () => {
|
|
|
357
357
|
},
|
|
358
358
|
[l.setValue]
|
|
359
359
|
);
|
|
360
|
-
return Ee(() => m(s, E), []), { ref: i, name: s, defaultValue: f, value: v, onChange: S, customState: O, setCustomState:
|
|
360
|
+
return Ee(() => m(s, E), []), { ref: i, name: s, defaultValue: f, value: v, onChange: S, customState: O, setCustomState: j };
|
|
361
361
|
}, Ue = ({
|
|
362
362
|
name: s,
|
|
363
363
|
defaultValue: u,
|
|
364
|
-
render: l = ({ ref: m, name: i, defaultValue: f, value: v, onChange: E, customState: O, setCustomState:
|
|
364
|
+
render: l = ({ ref: m, name: i, defaultValue: f, value: v, onChange: E, customState: O, setCustomState: j }) => null
|
|
365
365
|
}) => {
|
|
366
366
|
const m = Ne({ name: s, defaultValue: u });
|
|
367
367
|
return l(m);
|
|
@@ -395,41 +395,41 @@ const h = () => {
|
|
|
395
395
|
shouldConvertNumber: m = !1
|
|
396
396
|
} = {}) => {
|
|
397
397
|
const i = De(), [f, v] = We(), E = k(), O = k(() => {
|
|
398
|
-
}),
|
|
398
|
+
}), j = k(!1), S = k(u), g = k(u), d = k(/* @__PURE__ */ new Set()), y = k(s), W = k({}), C = k([]), Y = k([]), x = k({}), B = k(0), $ = k({}), ee = a(() => {
|
|
399
399
|
$.current = Object.keys(g.current).reduce(
|
|
400
400
|
(r, t) => ({ ...r, [t]: { isDirty: !1, isTouched: !1, customState: null } }),
|
|
401
401
|
{}
|
|
402
402
|
);
|
|
403
403
|
}, []), re = a((r = {}) => {
|
|
404
|
-
g.current = { ...g.current, ...r }, S.current = { ...g.current }, B.current = 0,
|
|
405
|
-
}, []), te = a(() => !!Object.values(
|
|
404
|
+
g.current = { ...g.current, ...r }, S.current = { ...g.current }, B.current = 0, j.current = !1, x.current = {}, y.current = s, d.current = /* @__PURE__ */ new Set(), Y.current = [], C.current = [], W.current = {}, ee(), s.length > 0 && (m = !0), v();
|
|
405
|
+
}, []), te = a(() => !!Object.values(w()).find((r) => r.isDirty), []), ae = a(() => !!Object.values(I()).find((r) => !!r), []), X = a((r) => _e(r.target), []), N = a((r) => r ? S.current[r] : S.current, []), ne = a(() => g.current, []), U = a(() => y.current, []), I = a(() => x.current, []), oe = a(() => W.current, []), w = a(() => $.current, []), P = a(({ name: r, compute: t }) => {
|
|
406
406
|
var p;
|
|
407
|
-
if (typeof t == "function") return t(
|
|
407
|
+
if (typeof t == "function") return t(N());
|
|
408
408
|
if (Array.isArray(r)) {
|
|
409
|
-
const
|
|
410
|
-
return r.forEach((
|
|
411
|
-
|
|
412
|
-
}),
|
|
409
|
+
const F = {};
|
|
410
|
+
return r.forEach((V) => {
|
|
411
|
+
F[V] = P({ name: V });
|
|
412
|
+
}), F;
|
|
413
413
|
}
|
|
414
414
|
if (r === "isDirty") return te();
|
|
415
415
|
if (r === "isError") return ae();
|
|
416
|
-
if (r === "values") return { ...
|
|
416
|
+
if (r === "values") return { ...N() };
|
|
417
417
|
if (r === "errors") return { ...I() };
|
|
418
|
-
if (r === "fieldStates") return { ...
|
|
418
|
+
if (r === "fieldStates") return { ...w() };
|
|
419
419
|
const n = r.split(".");
|
|
420
420
|
if (n.length > 1) {
|
|
421
|
-
const
|
|
421
|
+
const F = n[1];
|
|
422
422
|
if (n[0] === "errors")
|
|
423
|
-
return n.length === 2 ? I()[
|
|
423
|
+
return n.length === 2 ? I()[F] : I();
|
|
424
424
|
if (n[0] === "fieldStates") {
|
|
425
|
-
if (n.length === 2) return { ...
|
|
426
|
-
const
|
|
427
|
-
return (p =
|
|
425
|
+
if (n.length === 2) return { ...w()[F] };
|
|
426
|
+
const V = n[2];
|
|
427
|
+
return (p = w()[F]) == null ? void 0 : p[V];
|
|
428
428
|
}
|
|
429
429
|
}
|
|
430
|
-
return
|
|
430
|
+
return N()[r];
|
|
431
431
|
}, []), q = (r) => {
|
|
432
|
-
|
|
432
|
+
Y.current.forEach((t) => {
|
|
433
433
|
let n;
|
|
434
434
|
if (typeof t.name == "string" ? n = r(t) : t.name.forEach((p) => {
|
|
435
435
|
n || (n = r({ ...t, name: p }));
|
|
@@ -444,11 +444,11 @@ const h = () => {
|
|
|
444
444
|
t({ name: n }) && i();
|
|
445
445
|
}), q(t);
|
|
446
446
|
}, M = a((r, t) => {
|
|
447
|
-
|
|
447
|
+
x.current[r] = t, J(r);
|
|
448
448
|
}, []), L = a((r) => {
|
|
449
|
-
|
|
449
|
+
x.current[r] && (x.current[r] = null, J(r));
|
|
450
450
|
}, []), e = a(() => {
|
|
451
|
-
|
|
451
|
+
Object.keys(x.current) !== 0 && (x.current = {}, J());
|
|
452
452
|
}, []), o = a(
|
|
453
453
|
(r) => {
|
|
454
454
|
const t = _e(r.target);
|
|
@@ -459,30 +459,30 @@ const h = () => {
|
|
|
459
459
|
const p = $.current[r];
|
|
460
460
|
if (p[t] !== n) {
|
|
461
461
|
$.current[r] = { ...p, [t]: n };
|
|
462
|
-
const
|
|
463
|
-
if ([...d.current].forEach((
|
|
464
|
-
|
|
462
|
+
const V = ({ name: D }) => D === "fieldStates" || D === `fieldStates.${r}` || D === `fieldStates.${r}.${t}`;
|
|
463
|
+
if ([...d.current].forEach((D) => {
|
|
464
|
+
V({ name: D }) && i();
|
|
465
465
|
}), t === "customState") {
|
|
466
|
-
|
|
467
|
-
|
|
466
|
+
C.current.forEach(({ name: D, setValue: se }) => {
|
|
467
|
+
D.includes(r) && se(n);
|
|
468
468
|
});
|
|
469
469
|
return;
|
|
470
470
|
}
|
|
471
|
-
q(
|
|
471
|
+
q(V);
|
|
472
472
|
}
|
|
473
473
|
}), b = a(
|
|
474
474
|
(r, t, { shouldDirty: n = !0, shouldOnChange: p = !0 } = {}) => {
|
|
475
475
|
m && y.current.includes(r) && (t = Number(t) || void 0);
|
|
476
|
-
const
|
|
476
|
+
const F = S.current[r], V = $.current[r], se = W.current[r];
|
|
477
477
|
if (c(r, "isTouched", !0), n) {
|
|
478
478
|
const Z = t !== g.current[r];
|
|
479
|
-
|
|
479
|
+
V.isDirty !== Z && c(r, "isDirty", Z);
|
|
480
480
|
}
|
|
481
|
-
const ie = te(), ge =
|
|
482
|
-
d.current.has(r) && Re && i(), d.current.has("values") && i(), d.current.has("isDirty") && ie !== ge && i(), S.current[r] = t, se && se(t),
|
|
481
|
+
const ie = te(), ge = j.current, Re = t !== F;
|
|
482
|
+
d.current.has(r) && Re && i(), d.current.has("values") && i(), d.current.has("isDirty") && ie !== ge && i(), S.current[r] = t, se && se(t), j.current = ie, q((Z) => {
|
|
483
483
|
const { name: fe, compute: be, computeValue: he } = Z;
|
|
484
484
|
if (be) {
|
|
485
|
-
const de = be(
|
|
485
|
+
const de = be(N());
|
|
486
486
|
return de !== he && (Z.computeValue = de), de !== he;
|
|
487
487
|
}
|
|
488
488
|
if (fe === "values") return !0;
|
|
@@ -502,7 +502,7 @@ const h = () => {
|
|
|
502
502
|
}
|
|
503
503
|
return P({ name: r });
|
|
504
504
|
}, []), T = a((r, t) => {
|
|
505
|
-
const n =
|
|
505
|
+
const n = W.current;
|
|
506
506
|
return n[r] = t, () => {
|
|
507
507
|
l && (delete n[r], delete S.current[r]);
|
|
508
508
|
};
|
|
@@ -510,11 +510,11 @@ const h = () => {
|
|
|
510
510
|
}), []), G = a((r) => {
|
|
511
511
|
var n;
|
|
512
512
|
const t = B.current;
|
|
513
|
-
return (n = r.name) != null && n.includes("customState") ?
|
|
514
|
-
|
|
513
|
+
return (n = r.name) != null && n.includes("customState") ? C.current.push({ key: t, ...r }) : Y.current.push({ key: t, ...r }), B.current++, () => {
|
|
514
|
+
Y.current = Y.current.filter((p) => p.key !== t), C.current = C.current.filter((p) => p.key !== t);
|
|
515
515
|
};
|
|
516
516
|
}, []), R = a(() => {
|
|
517
|
-
const r = Object.fromEntries(new FormData(E.current)), t =
|
|
517
|
+
const r = Object.fromEntries(new FormData(E.current)), t = W.current;
|
|
518
518
|
return Object.keys(t).map((n) => {
|
|
519
519
|
r[n] = S.current[n];
|
|
520
520
|
}), m && y.current.forEach(
|
|
@@ -524,7 +524,7 @@ const h = () => {
|
|
|
524
524
|
() => ({
|
|
525
525
|
reset: re,
|
|
526
526
|
setValue: b,
|
|
527
|
-
getValues:
|
|
527
|
+
getValues: N,
|
|
528
528
|
setError: M,
|
|
529
529
|
clearError: L,
|
|
530
530
|
clearErrors: e,
|
|
@@ -538,7 +538,7 @@ const h = () => {
|
|
|
538
538
|
[
|
|
539
539
|
re,
|
|
540
540
|
b,
|
|
541
|
-
|
|
541
|
+
N,
|
|
542
542
|
M,
|
|
543
543
|
L,
|
|
544
544
|
e,
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var be;function _e(){return be||(be=1,process.env.NODE_ENV!=="production"&&function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case
|
|
17
|
+
*/var be;function _e(){return be||(be=1,process.env.NODE_ENV!=="production"&&function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case F:return"Profiler";case M:return"StrictMode";case re:return"Suspense";case ne:return"SuspenseList";case N:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case Y:return(e.displayName||"Context")+".Provider";case K:return(e._context.displayName||"Context")+".Consumer";case te:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return o=e.displayName||null,o!==null?o:a(e.type)||"Memo";case q:o=e._payload,e=e._init;try{return a(e(o))}catch{}}return null}function u(e){return""+e}function l(e){try{u(e);var o=!1}catch{o=!0}if(o){o=console;var c=o.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),u(e)}}function m(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===q)return"<...>";try{var o=a(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function f(){var e=J.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function C(e){if(I.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function b(e,o){function c(){A||(A=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function _(){var e=a(this.type);return z[e]||(z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function j(e,o,c,g,p,v,H,B){return c=v.ref,e={$$typeof:S,type:e,key:o,props:v,_owner:p},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,o,c,g,p,v,H,B){var R=o.children;if(R!==void 0)if(g)if(oe(R)){for(g=0;g<R.length;g++)E(R[g]);Object.freeze&&Object.freeze(R)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(R);if(I.call(o,"key")){R=a(e);var O=Object.keys(o).filter(function(le){return le!=="key"});g=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",U[R+g]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,g,R,O,R),U[R+g]=!0)}if(R=null,c!==void 0&&(l(c),R=""+c),C(o)&&(l(o.key),R=""+o.key),"key"in o){c={};for(var X in o)X!=="key"&&(c[X]=o[X])}else c=o;return R&&b(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),
|
|
22
|
+
<%s key={someKey} {...props} />`,g,R,O,R),U[R+g]=!0)}if(R=null,c!==void 0&&(l(c),R=""+c),C(o)&&(l(o.key),R=""+o.key),"key"in o){c={};for(var X in o)X!=="key"&&(c[X]=o[X])}else c=o;return R&&b(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,R,v,p,f(),c,H,B)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var d=r,S=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),F=Symbol.for("react.profiler"),K=Symbol.for("react.consumer"),Y=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),ne=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),se=Symbol.for("react.client.reference"),J=d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,oe=Array.isArray,w=console.createTask?console.createTask:function(){return null};d={"react-stack-bottom-frame":function(e){return e()}};var A,z={},G=d["react-stack-bottom-frame"].bind(d,i)(),L=w(m(i)),U={};Q.Fragment=P,Q.jsx=function(e,o,c,g,p){var v=1e4>J.recentlyCreatedOwnerStacks++;return h(e,o,c,!1,g,p,v?Error("react-stack-top-frame"):G,v?w(m(e)):L)},Q.jsxs=function(e,o,c,g,p){var v=1e4>J.recentlyCreatedOwnerStacks++;return h(e,o,c,!0,g,p,v?Error("react-stack-top-frame"):G,v?w(m(e)):L)}}()),Q}var Ee;function Oe(){return Ee||(Ee=1,process.env.NODE_ENV==="production"?ee.exports=Te():ee.exports=_e()),ee.exports}var Re=Oe();const k=()=>{},ge=r.createContext({ref:null,watch:null,actions:{reset:k,setValue:k,getValues:k,setError:k,clearError:k,clearErrors:k,checkValidity:k,getNumberFields:k,getFieldValidity:k,getDefaultValues:k,setFieldStateProperty:k,getControlledFields:k},registerController:k,registerHookWatcher:k,lastReloadedAt:k,registerOnchange:k,loadFormValues:k,getWatchValue:k}),ce=()=>r.useContext(ge),Ae=({id:a,control:u,method:l,action:m,children:f,onSubmit:i=()=>{},onInput:C=()=>{},onChange:b=()=>{},onReset:_=()=>{},numberFields:j=[],className:h,...E})=>(r.useEffect(()=>u.registerOnchange(b),[b]),Re.jsx(ge.Provider,{value:u,children:Re.jsx("form",{id:a,ref:u.ref,action:m,method:l,className:h,onInput:C,onSubmit:d=>{l||d.preventDefault();const S=u.loadFormValues();i(S)},onChange:d=>{const S=d.target.name;u.actions.getControlledFields()[S]||u.actions.setValue(S,d.target.value)},onReset:d=>{u.actions.reset(),_(d)},...E,children:f},u.lastReloadedAt)})),ke=({control:a,name:u,compute:l})=>{const{getWatchValue:m,registerHookWatcher:f}=a||ce(),i=m({name:u,compute:l}),[C,b]=r.useState(i);return r.useEffect(()=>f({name:u,compute:l,setValue:b,computeValue:i}),[]),C},he=({name:a,defaultValue:u})=>{const{actions:l,registerController:m}=ce(),f=r.useRef(),i=l.getDefaultValues()[a]||u,[C,b]=r.useState(i),_=ke({name:`fieldStates.${a}.customState`}),j=r.useCallback(E=>{l.setFieldStateProperty(a,"customState",E)},[]),h=r.useCallback((E,{shouldDirty:d=!0,shouldOnChange:S=!0}={})=>{l.setValue(a,E,{shouldDirty:d,shouldOnChange:S}),b(E)},[l.setValue]);return r.useEffect(()=>m(a,b),[]),{ref:f,name:a,defaultValue:i,value:C,onChange:h,customState:_,setCustomState:j}},je=({name:a,defaultValue:u,render:l=({ref:m,name:f,defaultValue:i,value:C,onChange:b,customState:_,setCustomState:j})=>null})=>{const m=he({name:a,defaultValue:u});return l(m)},Pe=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"],Se=a=>{typeof a.setCustomValidity=="function"&&a.setCustomValidity("");let u=a.validity;console.log(a.valid);let l=Pe.find(m=>u[m]);if(l)return{type:l,message:a.validationMessage}},Fe=()=>{const[,a]=r.useState({});return r.useCallback(()=>a({}),[])},Ve=()=>{const[a,u]=r.useState(),l=r.useCallback(()=>u(new Date().toString()),[]);return[a,l]},xe=[],Ne={},we=({numberFields:a=xe,defaultValues:u=Ne,shouldUnRegister:l=!1,shouldConvertNumber:m=!1}={})=>{const f=Fe(),[i,C]=Ve(),b=r.useRef(),_=r.useRef(()=>{}),j=r.useRef(!1),h=r.useRef(u),E=r.useRef(u),d=r.useRef(new Set),S=r.useRef(a),W=r.useRef({}),P=r.useRef([]),M=r.useRef([]),F=r.useRef({}),K=r.useRef(0),Y=r.useRef({}),te=r.useCallback(()=>{Y.current=Object.keys(E.current).reduce((t,n)=>({...t,[n]:{isDirty:!1,isTouched:!1,customState:null}}),{})},[]),re=r.useCallback((t={})=>{E.current={...E.current,...t},h.current={...E.current},K.current=0,j.current=!1,F.current={},S.current=a,d.current=new Set,M.current=[],P.current=[],W.current={},te(),a.length>0&&(m=!0),C()},[]),ne=r.useCallback(()=>!!Object.values(w()).find(t=>t.isDirty),[]),ue=r.useCallback(()=>!!Object.values(I()).find(t=>!!t),[]),q=r.useCallback(t=>Se(t.target),[]),N=r.useCallback(t=>t?h.current[t]:h.current,[]),se=r.useCallback(()=>E.current,[]),J=r.useCallback(()=>S.current,[]),I=r.useCallback(()=>F.current,[]),oe=r.useCallback(()=>W.current,[]),w=r.useCallback(()=>Y.current,[]),A=r.useCallback(({name:t,compute:n})=>{var y;if(typeof n=="function")return n(N());if(Array.isArray(t)){const V={};return t.forEach(x=>{V[x]=A({name:x})}),V}if(t==="isDirty")return ne();if(t==="isError")return ue();if(t==="values")return{...N()};if(t==="errors")return{...I()};if(t==="fieldStates")return{...w()};const s=t.split(".");if(s.length>1){const V=s[1];if(s[0]==="errors")return s.length===2?I()[V]:I();if(s[0]==="fieldStates"){if(s.length===2)return{...w()[V]};const x=s[2];return(y=w()[V])==null?void 0:y[x]}}return N()[t]},[]),z=t=>{M.current.forEach(n=>{let s;if(typeof n.name=="string"?s=t(n):n.name.forEach(y=>{s||(s=t({...n,name:y}))}),s){const y=A(n);n.setValue(y)}})},G=t=>{const n=({name:s})=>s==="isError"||s==="errors"||(t?s===`errors.${t}`:s.includes("errors"));[...d.current].forEach(s=>{n({name:s})&&f()}),z(n)},L=r.useCallback((t,n)=>{F.current[t]=n,G(t)},[]),U=r.useCallback(t=>{F.current[t]&&(F.current[t]=null,G(t))},[]),e=r.useCallback(()=>{Object.keys(F.current)!==0&&(F.current={},G())},[]),o=r.useCallback(t=>{const n=Se(t.target);n?L(t.target.name,n):U(t.target.name)},[L,U]),c=r.useCallback((t,n,s)=>{const y=Y.current[t];if(y[n]!==s){Y.current[t]={...y,[n]:s};const x=({name:D})=>D==="fieldStates"||D===`fieldStates.${t}`||D===`fieldStates.${t}.${n}`;if([...d.current].forEach(D=>{x({name:D})&&f()}),n==="customState"){P.current.forEach(({name:D,setValue:ae})=>{D.includes(t)&&ae(s)});return}z(x)}}),g=r.useCallback((t,n,{shouldDirty:s=!0,shouldOnChange:y=!0}={})=>{m&&S.current.includes(t)&&(n=Number(n)||void 0);const V=h.current[t],x=Y.current[t],ae=W.current[t];if(c(t,"isTouched",!0),s){const $=n!==E.current[t];x.isDirty!==$&&c(t,"isDirty",$)}const fe=ne(),ye=j.current,Ce=n!==V;d.current.has(t)&&Ce&&f(),d.current.has("values")&&f(),d.current.has("isDirty")&&fe!==ye&&f(),h.current[t]=n,ae&&ae(n),j.current=fe,z($=>{const{name:ie,compute:pe,computeValue:ve}=$;if(pe){const de=pe(N());return de!==ve&&($.computeValue=de),de!==ve}if(ie==="values")return!0;if(ie==="isDirty")return fe!==ye;if(ie===t)return Ce}),y&&_.current(t,n,h.current)},[c]),p=r.useCallback(t=>{if(typeof t=="string")return d.current.add(t),A({name:t});if(Array.isArray(t)){const n={};return t.forEach(s=>{d.current.add(s),n[s]=A({name:s})}),n}return A({name:t})},[]),v=r.useCallback((t,n)=>{const s=W.current;return s[t]=n,()=>{l&&(delete s[t],delete h.current[t])}},[]),H=r.useCallback(t=>(_.current=t,()=>_.current=()=>{}),[]),B=r.useCallback(t=>{var s;const n=K.current;return(s=t.name)!=null&&s.includes("customState")?P.current.push({key:n,...t}):M.current.push({key:n,...t}),K.current++,()=>{M.current=M.current.filter(y=>y.key!==n),P.current=P.current.filter(y=>y.key!==n)}},[]),R=r.useCallback(()=>{const t=Object.fromEntries(new FormData(b.current)),n=W.current;return Object.keys(n).map(s=>{t[s]=h.current[s]}),m&&S.current.forEach(s=>t.hasOwnProperty(s)&&(t[s]=Number(t[s])||0)),t},[]),O=r.useMemo(()=>({reset:re,setValue:g,getValues:N,setError:L,clearError:U,clearErrors:e,checkValidity:o,getNumberFields:J,getFieldValidity:q,getDefaultValues:se,setFieldStateProperty:c,getControlledFields:oe}),[re,g,N,L,U,e,o,J,q,se,c,oe]),X=r.useMemo(()=>({ref:b,watch:p,actions:O,registerController:v,registerHookWatcher:B,lastReloadedAt:i,registerOnchange:H,loadFormValues:R,getWatchValue:A}),[b,p,O,v,B,i,H,R,A]),le=r.useMemo(()=>({control:X,actions:O,watch:p}),[i,X,O,p]);return r.useLayoutEffect(()=>{if([...b.current.querySelectorAll("[name]")].forEach(n=>{!n.defaultValue&&E.current[n.name]&&(n.defaultValue=E.current[n.name]),n.type==="number"&&!S.current.includes(n.name)&&S.current.push(n.name)}),b.current){const n=R();h.current={...n},E.current={...n}}},[i]),r.useLayoutEffect(()=>{te()},[]),le};T.Controller=je,T.Form=Ae,T.useController=he,T.useForm=we,T.useFormContext=ce,T.useWatch=ke,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
|