react-simple-formkit 1.1.4 → 1.1.6

package/README.md

@@ -39,7 +39,7 @@ return (
 
 # More kits
 
-## number fields
+## Number fields
 
 - By default form, values are string at all. So, adding numberFields will catch the number value in on submit
 
@@ -111,67 +111,117 @@ return (
 ## Validate by other field
 
 ```
-  const form = useForm();
-  const { isDirty, isError, errors, actions } = form;
+const form = useForm();
+const { isDirty, isError, errors, actions } = form;
 
-  return (
-    <Form form={form}>
-      <input required name="number" onBlur={actions.checkValidity} />
-      {errors.number && <span className="error-message">{errors.number}</span>}
+return (
+  <Form form={form}>
+    <input required name="number" onBlur={actions.checkValidity} />
+    {errors.number && <span className="error-message">{errors.number}</span>}
+
+    <input
+      required
+      name="number2"
+      onBlur={(e) => {
+        let error = null;
+        error = actions.getFieldValidity(e);
+
+        if (error) {
+          actions.changeError("number2", error);
+          return;
+        }
+
+        const value = Number(e.target.value || 0);
+        const formState = actions.getFormState();
+        const number = Number(formState.number || 0);
+
+        if (value >= number) error = "Number 2 must be less than number 1";
+        actions.changeError("number2", error);
+      }}
+    />
+    {errors.number2 && <span className="error-message">{errors.number2}</span>}
+    <button type="submit" disabled={!isDirty || isError}>
+      Submit
+    </button>
+  </Form>
+)
+```
 
-      <input
-        required
-        name="number2"
-        onBlur={(e) => {
-          let error = null;
-          error = actions.getFieldValidity(e);
+## Centralized processing with onChange
 
-          if (error) {
-            actions.changeError("number2", error);
-            return;
-          }
+```
+const handleChange = (data) => {
+  console.log(data);
 
-          const value = Number(e.target.value || 0);
-          const formState = actions.getFormState();
-          const number = Number(formState.number || 0);
+  // setValue will trigger onChange by default and recall handle change making an infinite loop
+  // That why we put shouldOnChange = false here
+  actions.setValue("email2", data.email + "2", { shouldOnChange: false });
+};
 
-          if (value >= number) error = "Number 2 must be less than number 1";
-          actions.changeError("number2", error);
-        }}
-      />
-      {errors.number2 && <span className="error-message">{errors.number2}</span>}
-      <button type="submit" disabled={!isDirty || isError}>
-        Submit
-      </button>
-    </Form>
-  )
+return (
+  <Form form={form} onChange={handleChange}>
+    <input required name="email" />
+    {/* Controller make this field assignable */}
+    <Controller
+      name="email2"
+      render={({ ref, name, value, setValue }) => (
+        <input required ref={ref} name={name} value={value} onChange={(e) => setValue(e.target.value)} />
+      )}
+    />
+    <button type="submit" disabled={!isDirty}>
+      Submit
+    </button>
+  </Form>
+);
 ```
 
-## Centralized processing with onChange
+## Default values
+
+-
 
 ```
-  const handleChange = (data) => {
-    console.log(data);
-
-    // setValue will trigger onChange by default and recall handle change making an infinite loop
-    // That why we put shouldOnChange = false here
-    actions.setValue("email2", data.email + "2", { shouldOnChange: false });
-  };
-
-  return (
-    <Form form={form} onChange={handleChange}>
-      <input required name="email" />
-      <Controller
-        name="email2"
-        render={({ ref, name, value, setValue }) => (
-          <input required ref={ref} name={name} value={value} onChange={(e) => setValue(e.target.value)} />
-        )}
-      />
-      <button type="submit" disabled={!isDirty}>
-        Submit
-      </button>
-    </Form>
-  );
+const [loading, setLoading] = useState(false);
+const [defaultValues, setDefaultValues] = useState({ email: "email@example.com", password: "123456" });
+
+const form = useForm();
+const { isDirty, actions } = form;
+
+const handleSubmit = async (data) => {
+  setLoading(true);
+  await new Promise((res) => setTimeout(res, 1500));
+  setDefaultValues(data);
+  // After update default values, reload the form
+  // Because data updating is asynchronous. Catching it's change is ineffective.
+  actions.reload();
+  setLoading(false);
+};
+
+return (
+  <Form form={form} onSubmit={handleSubmit}>
+    <input required name="email" defaultValue={defaultValues.email} />
+    <Controller
+      name="password"
+      defaultValue={defaultValues.password}
+      render={({ ref, name, defaultValue, value, setValue }) => (
+        <input
+          ref={ref}
+          required
+          name={name}
+          type="password"
+          defaultValue={defaultValue}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      )}
+    />
+    <button type="reset" disabled={!isDirty}>
+      Reset
+    </button>
+    <Button disableElevation variant="contained" type="submit" loading={loading} disabled={!isDirty}>
+      Submit
+    </Button>
+  </Form>
+);
 ```
 
 # Support for third party library
@@ -183,27 +233,27 @@ return (
 - Just put the actions.instantChange where these components onchange
 
 ```
-  const form = useForm();
-  const { isDirty, actions } = form;
+const form = useForm();
+const { isDirty, actions } = form;
 
-  return (
-    <Form form={form}>
-      <Select name="select" onChange={actions.instantChange}>
-        <MenuItem value={10}>Ten</MenuItem>
-        <MenuItem value={20}>Twenty</MenuItem>
-        <MenuItem value={30}>Thirty</MenuItem>
-      </Select>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DatePicker name="date" onChange={actions.instantChange} />
-      </LocalizationProvider>
-      <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
-        Get value
-      </button>
-      <button type="submit" disabled={!isDirty}>
-        Submit
-      </button>
-    </Form>
-  )
+return (
+  <Form form={form}>
+    <Select name="select" onChange={actions.instantChange}>
+      <MenuItem value={10}>Ten</MenuItem>
+      <MenuItem value={20}>Twenty</MenuItem>
+      <MenuItem value={30}>Thirty</MenuItem>
+    </Select>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker name="date" onChange={actions.instantChange} />
+    </LocalizationProvider>
+    <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
+      Get value
+    </button>
+    <button type="submit" disabled={!isDirty}>
+      Submit
+    </button>
+  </Form>
+)
 ```
 
 ## More control with Controller
@@ -212,79 +262,79 @@ return (
 - Make field assignable by actions.setValue
 
 ```
-  import { Controller, Form, useForm } from "react-simple-formkit";
+import { Controller, Form, useForm } from "react-simple-formkit";
 
-  const form = useForm({ numberFields: ["number1", "number2"] });
-  const { isDirty, actions } = form;
+const form = useForm({ numberFields: ["number1", "number2"] });
+const { isDirty, actions } = form;
 
-  return (
-    <Form form={form}>
-      {/* Custom value as array */}
-      <Controller
-        name="multipleSelect"
-        defaultValue={[]}
-        render={({ ref, value, setValue, name }) => (
-          <Select
-            multiple
-            ref={ref}
-            name={name}
-            labelId="demo-multiple-name-label"
-            id="demo-multiple-name"
-            value={value}
-            onChange={(e) => {
-              const value = e.target.value;
-              // On autofill we get a stringified value.
-              setValue(typeof value === "string" ? value.split(",") : value);
-              // instantChange by select
-              actions.instantChange();
-            }}
-            input={<OutlinedInput label="Name" />}
-          >
-            <MenuItem value={10}>Ten</MenuItem>
-            <MenuItem value={20}>Twenty</MenuItem>
-            <MenuItem value={30}>Thirty</MenuItem>
-          </Select>
-        )}
-      />
-      {/* actions.setValue (target field of actions.setValue must use controller)*/}
-      <input
-        name="number1"
-        placeholder="number 1"
-        onBlur={(e) => {
-          const number1 = Number(e.target.value || 0);
-          const number2 = actions.getFormState().number2 || 0;
-          actions.setValue("sum", number1 + number2);
-        }}
-      />
-      <input
-        name="number2"
-        placeholder="number 2"
-        onBlur={(e) => {
-          const number2 = Number(e.target.value || 0);
-          const number1 = actions.getFormState().number1 || 0;
-          actions.setValue("sum", number1 + number2);
-        }}
-      />
-      <Controller
-        name="sum"
-        render={({ ref, value, setValue, name }) => (
-          <input
-            ref={ref}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            name={name}
-            placeholder="sum(number1, number2)"
-          />
-        )}
-      />
-      <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
-        Get value
-      </button>
-      <button type="submit" disabled={!isDirty}>
-        Submit
-      </button>
-    </Form>
-  )
+return (
+  <Form form={form}>
+    {/* Custom value as array */}
+    <Controller
+      name="multipleSelect"
+      defaultValue={[]}
+      render={({ ref, value, setValue, name }) => (
+        <Select
+          multiple
+          ref={ref}
+          name={name}
+          labelId="demo-multiple-name-label"
+          id="demo-multiple-name"
+          value={value}
+          onChange={(e) => {
+            const value = e.target.value;
+            // On autofill we get a stringified value.
+            setValue(typeof value === "string" ? value.split(",") : value);
+            // instantChange by select
+            actions.instantChange();
+          }}
+          input={<OutlinedInput label="Name" />}
+        >
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      )}
+    />
+    {/* actions.setValue (target field of actions.setValue must use controller)*/}
+    <input
+      name="number1"
+      placeholder="number 1"
+      onBlur={(e) => {
+        const number1 = Number(e.target.value || 0);
+        const number2 = actions.getFormState().number2 || 0;
+        actions.setValue("sum", number1 + number2);
+      }}
+    />
+    <input
+      name="number2"
+      placeholder="number 2"
+      onBlur={(e) => {
+        const number2 = Number(e.target.value || 0);
+        const number1 = actions.getFormState().number1 || 0;
+        actions.setValue("sum", number1 + number2);
+      }}
+    />
+    <Controller
+      name="sum"
+      render={({ ref, value, setValue, name }) => (
+        <input
+          ref={ref}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          name={name}
+          placeholder="sum(number1, number2)"
+        />
+      )}
+    />
+    <button type="button" onClick={() => alert(JSON.stringify(actions.getFormState()))}>
+      Get value
+    </button>
+    <button type="submit" disabled={!isDirty}>
+      Submit
+    </button>
+  </Form>
+)
 ```
 
 # Examples

package/dist/react-simple-formkit.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react");var z={exports:{}},$={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");var z={exports:{}},D={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var K;function le(){if(K)return $;K=1;var s=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function f(i,u,o){var E=null;if(o!==void 0&&(E=""+o),u.key!==void 0&&(E=""+u.key),"key"in u){o={};for(var l in u)l!=="key"&&(o[l]=u[l])}else o=u;return u=o.ref,{$$typeof:s,type:i,key:E,ref:u!==void 0?u:null,props:o}}return $.Fragment=t,$.jsx=f,$.jsxs=f,$}var M={};/**
+ */var Z;function oe(){if(Z)return D;Z=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function f(b,c,s){var m=null;if(s!==void 0&&(m=""+s),c.key!==void 0&&(m=""+c.key),"key"in c){s={};for(var l in c)l!=="key"&&(s[l]=c[l])}else s=c;return c=s.ref,{$$typeof:o,type:b,key:m,ref:c!==void 0?c:null,props:s}}return D.Fragment=r,D.jsx=f,D.jsxs=f,D}var Y={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var ee;function ie(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===w?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case O:return"Profiler";case P:return"StrictMode";case G:return"Suspense";case U:return"SuspenseList";case J: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 x:return"Portal";case N:return(e.displayName||"Context")+".Provider";case L:return(e._context.displayName||"Context")+".Consumer";case W:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case q:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case V:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function t(e){return""+e}function f(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var c=r.error,k=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",k),t(e)}}function i(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===V)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=F.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function E(e){if(D.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function l(e,r){function c(){n||(n=!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)",r))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function R(){var e=s(this.type);return _[e]||(_[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 d(e,r,c,k,j,h,X,B){return c=h.ref,e={$$typeof:g,type:e,key:r,props:h,_owner:j},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):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:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,c,k,j,h,X,B){var v=r.children;if(v!==void 0)if(k)if(Y(v)){for(k=0;k<v.length;k++)m(v[k]);Object.freeze&&Object.freeze(v)}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 m(v);if(D.call(r,"key")){v=s(e);var A=Object.keys(r).filter(function(ue){return ue!=="key"});k=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",y[v+k]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var Q;function se(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===F?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case $:return"Profiler";case I:return"StrictMode";case W:return"Suspense";case U:return"SuspenseList";case q: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 P:return"Portal";case M:return(e.displayName||"Context")+".Provider";case G:return(e._context.displayName||"Context")+".Consumer";case L:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case w:return t=e.displayName||null,t!==null?t:o(e.type)||"Memo";case x:t=e._payload,e=e._init;try{return o(e(t))}catch{}}return null}function r(e){return""+e}function f(e){try{r(e);var t=!1}catch{t=!0}if(t){t=console;var i=t.error,v=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",v),r(e)}}function b(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===x)return"<...>";try{var t=o(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function c(){var e=N.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function m(e){if(n.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function l(e,t){function i(){S||(S=!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)",t))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function E(){var e=o(this.type);return y[e]||(y[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 R(e,t,i,v,O,h,X,B){return i=h.ref,e={$$typeof:j,type:e,key:t,props:h,_owner:O},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):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:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,t,i,v,O,h,X,B){var _=t.children;if(_!==void 0)if(v)if(p(_)){for(v=0;v<_.length;v++)u(_[v]);Object.freeze&&Object.freeze(_)}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 u(_);if(n.call(t,"key")){_=o(e);var A=Object.keys(t).filter(function(ae){return ae!=="key"});v=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",V[_+v]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,k,v,A,v),y[v+k]=!0)}if(v=null,c!==void 0&&(f(c),v=""+c),E(r)&&(f(r.key),v=""+r.key),"key"in r){c={};for(var H in r)H!=="key"&&(c[H]=r[H])}else c=r;return v&&l(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),d(e,v,h,j,u(),c,X,B)}function m(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var p=a,g=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),L=Symbol.for("react.consumer"),N=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),q=Symbol.for("react.memo"),V=Symbol.for("react.lazy"),J=Symbol.for("react.activity"),w=Symbol.for("react.client.reference"),F=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,Y=Array.isArray,I=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(e){return e()}};var n,_={},b=p["react-stack-bottom-frame"].bind(p,o)(),S=I(i(o)),y={};M.Fragment=C,M.jsx=function(e,r,c,k,j){var h=1e4>F.recentlyCreatedOwnerStacks++;return T(e,r,c,!1,k,j,h?Error("react-stack-top-frame"):b,h?I(i(e)):S)},M.jsxs=function(e,r,c,k,j){var h=1e4>F.recentlyCreatedOwnerStacks++;return T(e,r,c,!0,k,j,h?Error("react-stack-top-frame"):b,h?I(i(e)):S)}}()),M}var re;function fe(){return re||(re=1,process.env.NODE_ENV==="production"?z.exports=le():z.exports=ie()),z.exports}var te=fe();const ae=a.createContext({}),de=()=>a.useContext(ae),be=(s,t)=>{let f=!1;return Object.keys(t).forEach(i=>{if(!(i in s)||f)return;const u=t[i],o=s[i];(typeof u=="object"||u!==o)&&(f=!0)}),f},ne=s=>(typeof s.setCustomValidity=="function"&&s.setCustomValidity(""),!s||typeof s.checkValidity!="function"||s.checkValidity()?null:s.validationMessage),se=({id:s,form:t,method:f,action:i,children:u,onSubmit:o=()=>{},onInput:E=()=>{},onChange:l=()=>{},numberFields:R=[],className:d,...T})=>(a.useEffect(()=>t.actions.registerOnchange(l),[l]),te.jsx(ae.Provider,{value:t,children:te.jsx("form",{ref:t==null?void 0:t.ref,action:i,className:d,onSubmit:m=>{f||m.preventDefault();const p=t.actions.loadFormValues();o(p)},onInput:m=>{if(m.target.tagName==="FORM"){const p=t.actions.loadFormValues();t.actions.setFormState(p)}else E(m)},onChange:()=>{const m=t.actions.loadFormValues();t.actions.setFormState(m)},onReset:m=>{t&&(m.preventDefault(),t.actions.reset())},...T,children:u},t==null?void 0:t.lastReloadedAt)})),oe=({name:s,defaultValue:t,render:f=({ref:i,name:u,defaultValue:o,value:E,setValue:l})=>null})=>{const[i,u]=a.useState(t),o=de(),E=a.useRef(),l=a.useCallback((R,{shouldDirty:d=!1}={})=>{o.actions.setFormState(T=>({...T,[s]:R}),{shouldDirty:d}),u(R)},[u,o.actions.setFormState]);return a.useEffect(()=>(o.actions.setFormState(d=>({...d,[s]:t}),{shouldDirty:!1}),o.subscribe(s,(d,{shouldDirty:T=!0,shouldOnChange:m=!0}={})=>{u(d),o.actions.setFormState(p=>({...p,[s]:d}),{shouldDirty:T,shouldOnChange:m}),E.current&&typeof E.current.dispatchEvent=="function"&&m&&E.current.dispatchEvent(new Event("change"))})),[]),f({ref:E,name:s,defaultValue:t,value:i,setValue:l})},Q=()=>{const[s,t]=a.useState({}),f=a.useMemo(()=>Object.values(s).filter(Boolean).length>0,[s]),i=a.useCallback((l,R)=>{t(d=>d[l]===R?d:{...d,[l]:R})},[]),u=a.useCallback(l=>{t(R=>({...R,...l}))},[]),o=a.useCallback(l=>{t(R=>R[l]?{...R,[l]:""}:R)},[]),E=a.useCallback(()=>{t({})},[]);return{isError:f,errors:s,changeError:i,changeErrors:u,clearError:o,clearErrors:E}},Z={defaultValues:{},numberFields:[]},ce=(s=Z)=>{const{defaultValues:t=Z.defaultValues,numberFields:f=Z.numberFields}=s,{changeError:i,errors:u,changeErrors:o,clearError:E,clearErrors:l,isError:R}=Q(),[d,T]=a.useState(!1),[m,p]=a.useState(null),g=a.useRef({}),x=a.useRef(t),C=a.useRef({}),P=a.useRef(()=>{}),O=a.useRef(),L=a.useCallback((n,{shouldDirty:_=!0,shouldOnChange:b=!0}={})=>{let S=n;typeof n=="function"&&(S=n(g.current)),g.current=S;let y=d;_&&(y=be(g.current,x.current),y!==d&&T(y)),b&&P.current(g.current)},[d]),N=a.useCallback(()=>p(new Date().toString()),[]),W=a.useCallback(()=>{T(!1),l();const n=C.current;Object.values(n).forEach(b=>b("",{shouldDirty:!1,shouldOnChange:!1})),O.current&&O.current.reset(),N()},[l]),G=a.useCallback((n,_)=>{const b=C.current;return b[n]=_,()=>b[n]=null},[]),U=a.useCallback(n=>(P.current=n,()=>P.current=()=>{})),q=a.useCallback(n=>ne(n.target),[]),V=a.useCallback(n=>n?g.current[n]:g.current,[]),J=a.useCallback(()=>x.current,[]),w=a.useCallback(()=>{setTimeout(()=>O.current.dispatchEvent(new Event("input",{bubbles:!0})))},[]),F=a.useCallback(n=>{const _=ne(n.target);_?i(n.target.name,_):i(n.target.name,null)},[i]),D=a.useCallback((n,_,{shouldDirty:b=!0,shouldOnChange:S=!0}={})=>{const y=C.current;switch(typeof n){case"string":{const e=y[n];if(!e)throw new Error(`${n} is uncontrolled, please use Controller for it!`);e(_,{shouldDirty:b,shouldOnChange:S}),S&&w()}break;case"object":Object.entries(n).forEach(([e,r])=>{const c=y[e];if(!c)throw new Error(`${e} is uncontrolled, please use Controller for it!`);c(r,{shouldDirty:b,shouldOnChange:S})}),S&&w();default:return}},[w]),Y=a.useCallback(()=>{const n=Object.fromEntries(new FormData(O.current)),_=C.current;return Object.keys(_).map(b=>{n[b]=g.current[b]}),f.forEach(b=>n.hasOwnProperty(b)&&(n[b]=+n[b])),n},[]),I=a.useMemo(()=>({setValue:D,instantChange:w,getDefaultValues:J,getFormState:V,setFormState:L,changeError:i,changeErrors:o,clearError:E,clearErrors:l,loadFormValues:Y,checkValidity:F,getFieldValidity:q,registerOnchange:U,reload:N,reset:W}),[D,w,J,V,L,i,o,E,Y,q,F,U,N,W]);return a.useEffect(()=>{if(O.current){const n=Y();x.current={...n,...t},g.current={...n,...t}}},[m]),{ref:O,lastReloadedAt:m,isDirty:d,isError:R,errors:u,numberFields:f,subscribe:G,actions:I}},Ee={Form:se,Controller:oe,useForm:ce,useValidateForm:Q};exports.Controller=oe;exports.Form=se;exports.default=Ee;exports.useForm=ce;exports.useValidateForm=Q;
+  <%s key={someKey} {...props} />`,v,_,A,_),V[_+v]=!0)}if(_=null,i!==void 0&&(f(i),_=""+i),m(t)&&(f(t.key),_=""+t.key),"key"in t){i={};for(var H in t)H!=="key"&&(i[H]=t[H])}else i=t;return _&&l(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,_,h,O,c(),i,X,B)}function u(e){typeof e=="object"&&e!==null&&e.$$typeof===j&&e._store&&(e._store.validated=1)}var k=a,j=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),I=Symbol.for("react.strict_mode"),$=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),M=Symbol.for("react.context"),L=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),x=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),F=Symbol.for("react.client.reference"),N=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,n=Object.prototype.hasOwnProperty,p=Array.isArray,d=console.createTask?console.createTask:function(){return null};k={"react-stack-bottom-frame":function(e){return e()}};var S,y={},C=k["react-stack-bottom-frame"].bind(k,s)(),J=d(b(s)),V={};Y.Fragment=g,Y.jsx=function(e,t,i,v,O){var h=1e4>N.recentlyCreatedOwnerStacks++;return T(e,t,i,!1,v,O,h?Error("react-stack-top-frame"):C,h?d(b(e)):J)},Y.jsxs=function(e,t,i,v,O){var h=1e4>N.recentlyCreatedOwnerStacks++;return T(e,t,i,!0,v,O,h?Error("react-stack-top-frame"):C,h?d(b(e)):J)}}()),Y}var K;function ce(){return K||(K=1,process.env.NODE_ENV==="production"?z.exports=oe():z.exports=se()),z.exports}var ee=ce();const te=a.createContext({}),ue=()=>a.useContext(te),le=({id:o,form:r,method:f,action:b,children:c,onSubmit:s=()=>{},onInput:m=()=>{},onChange:l=()=>{},numberFields:E=[],className:R,...T})=>(a.useEffect(()=>r.actions.registerOnchange(l),[l]),ee.jsx(te.Provider,{value:r,children:ee.jsx("form",{ref:r==null?void 0:r.ref,action:b,className:R,onSubmit:u=>{f||u.preventDefault();const k=r.actions.loadFormValues();s(k)},onInput:u=>{if(u.target.tagName==="FORM"){const k=r.actions.loadFormValues();r.actions.setFormState(k)}else m(u)},onChange:()=>{const u=r.actions.loadFormValues();r.actions.setFormState(u)},onReset:u=>{r&&(u.preventDefault(),r.actions.reset())},...T,children:c},r==null?void 0:r.lastReloadedAt)})),ie=({name:o,defaultValue:r,render:f=({ref:b,name:c,defaultValue:s,value:m,setValue:l})=>null})=>{const[b,c]=a.useState(r),s=ue(),m=a.useRef(),l=a.useCallback((E,{shouldDirty:R=!1}={})=>{s.actions.setFormState(T=>({...T,[o]:E}),{shouldDirty:R}),c(E)},[c,s.actions.setFormState]);return a.useEffect(()=>(s.actions.setFormState(R=>({...R,[o]:r}),{shouldDirty:!1}),s.subscribe(o,(R,{shouldDirty:T=!0,shouldOnChange:u=!0}={})=>{c(R),s.actions.setFormState(k=>({...k,[o]:R}),{shouldDirty:T,shouldOnChange:u}),m.current&&typeof m.current.dispatchEvent=="function"&&u&&m.current.dispatchEvent(new Event("change"))})),[]),f({ref:m,name:o,defaultValue:r,value:b,setValue:l})},fe=(o,r)=>{let f=!1;return Object.keys(r).forEach(b=>{if(!(b in o)||f)return;const c=r[b],s=o[b];(typeof c=="object"||c!==s)&&(f=!0)}),f},re=o=>(typeof o.setCustomValidity=="function"&&o.setCustomValidity(""),!o||typeof o.checkValidity!="function"||o.checkValidity()?null:o.validationMessage),ne=()=>{const[o,r]=a.useState({}),f=a.useMemo(()=>Object.values(o).filter(Boolean).length>0,[o]),b=a.useCallback((l,E)=>{r(R=>R[l]===E?R:{...R,[l]:E})},[]),c=a.useCallback(l=>{r(E=>({...E,...l}))},[]),s=a.useCallback(l=>{r(E=>E[l]?{...E,[l]:""}:E)},[]),m=a.useCallback(()=>{r({})},[]);return{isError:f,errors:o,changeError:b,changeErrors:c,clearError:s,clearErrors:m}},de=()=>{const[o,r]=a.useState(),f=a.useCallback(()=>r(new Date().toString()),[]);return[o,f]},be=[],Ee=({numberFields:o=be}={})=>{const{changeError:r,errors:f,changeErrors:b,clearError:c,clearErrors:s,isError:m}=ne(),[l,E]=a.useState(!1),[R,T]=de(),u=a.useRef({}),k=a.useRef({}),j=a.useRef({}),P=a.useRef(()=>{}),g=a.useRef(),I=a.useCallback((n,{shouldDirty:p=!0,shouldOnChange:d=!0}={})=>{let S=n;typeof n=="function"&&(S=n(u.current)),u.current=S;let y=l;p&&(y=fe(u.current,k.current),y!==l&&E(y)),d&&P.current(u.current)},[l]),$=a.useCallback(()=>{E(!1),s();const n=j.current;Object.keys(n).forEach(p=>{const d=n[p];d(k.current[p],{shouldDirty:!1,shouldOnChange:!1})}),g.current&&g.current.reset(),T()},[s]),G=a.useCallback((n,p)=>{const d=j.current;return d[n]=p,()=>d[n]=null},[]),M=a.useCallback(n=>(P.current=n,()=>P.current=()=>{})),L=a.useCallback(n=>re(n.target),[]),W=a.useCallback(n=>n?u.current[n]:u.current,[]),U=a.useCallback(()=>k.current,[]),w=a.useCallback(()=>{setTimeout(()=>g.current.dispatchEvent(new Event("input",{bubbles:!0})))},[]),x=a.useCallback(n=>{const p=re(n.target);p?r(n.target.name,p):r(n.target.name,null)},[r]),q=a.useCallback((n,p,{shouldDirty:d=!0,shouldOnChange:S=!0}={})=>{const y=j.current;switch(typeof n){case"string":{const C=y[n];if(!C)throw new Error(`${n} is uncontrolled, please use Controller for it!`);C(p,{shouldDirty:d,shouldOnChange:S}),S&&w()}break;case"object":Object.entries(n).forEach(([C,J])=>{const V=y[C];if(!V)throw new Error(`${C} is uncontrolled, please use Controller for it!`);V(J,{shouldDirty:d,shouldOnChange:S})}),S&&w();default:return}},[w]),F=a.useCallback(()=>{const n=Object.fromEntries(new FormData(g.current)),p=j.current;return Object.keys(p).map(d=>{n[d]=u.current[d]}),o.forEach(d=>n.hasOwnProperty(d)&&(n[d]=+n[d])),n},[]),N=a.useMemo(()=>({setValue:q,instantChange:w,getDefaultValues:U,getFormState:W,setFormState:I,changeError:r,changeErrors:b,clearError:c,clearErrors:s,loadFormValues:F,checkValidity:x,getFieldValidity:L,registerOnchange:M,reload:T,reset:$}),[q,w,U,W,I,r,b,c,F,L,x,M,T,$]);return a.useEffect(()=>{if(g.current){const n=F();k.current=n,u.current=n}return()=>{k.current={},u.current={},E(!1),s()}},[R]),{ref:g,lastReloadedAt:R,isDirty:l,isError:m,errors:f,numberFields:o,subscribe:G,actions:N}};exports.Controller=ie;exports.Form=le;exports.useForm=Ee;exports.useValidateForm=ne;