form-atoms/dist/index.mjs

Form primitives for Jotai

import*as y from"react";import{Provider as ee,atom as f,useAtom as te,useAtomValue as d,useSetAtom as A,useStore as le}from"jotai";import{RESET as _,atomWithReset as D,useHydrateAtoms as se}from"jotai/utils";function H(t,e,l){if(e.length===1)return t[e[0]]=l,t;let s=t;for(let i=0;i<e.length;i++){let n=e[i];if(i===e.length-1)s[n]=l;else{let u=s[n];s=s[n]=u!=null?u:isNaN(e[i+1])?{}:[]}}}function Y(t,e){let l=t.toISOString();return e==="datetime-local"?l.slice(0,16):e==="month"?l.slice(0,7):e==="week"?Z(t):e==="time"?l.slice(11,19):(t=q(t),t.toISOString().slice(0,10))}function Z(t){t=q(t),t=new Date(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate())),t.setUTCDate(t.getUTCDate()+4-(t.getUTCDay()||7));let e=t.getUTCFullYear(),l=new Date(Date.UTC(t.getUTCFullYear(),0,1)).getTime(),s=t.getTime(),i=Math.ceil(((s-l)/$+1)/7);if(i===0){let n=e-1,u=new Date(Date.UTC(n,0,1)).getTime();i=Math.ceil(((s-u)/$+1+(e%4||!(e%100)&&e%400?365:366))/7),e=n}return e+"-W"+(""+i).padStart(2,"0")}var $=864e5;function q(t){return new Date(t.getTime()+new Date().getTimezoneOffset()*60*1e3)}import{Provider as De}from"jotai";function ve(t){return y.createElement(ee,{store:t.store},y.createElement(ie,{...t}))}function ie(t){let e=ae(t.atom);return"render"in t?t.render(e):y.createElement(t.component,e)}function Ae(t){let e=Fe(t.atom,t);return K(t,e)}function Te(t){let e=pe(t.atom,t);return K(t,e)}function Se(t){let e=ce(t.atom,t);return K(t,e)}function K(t,e){return"render"in t?t.render(e.props,e.state,e.actions):y.createElement(t.component,e.props)}function be(t){let{state:e,actions:l}=Q(t.atom,t);return"render"in t?t.render(e,l):y.createElement(t.component,{state:e,actions:l})}function Ue(t){let e=D(t),l=f(r=>{let a=r(e),o={};return g(a,(p,V)=>{if(p){let S=r(p);H(o,V,r(S.value))}else H(o,V,[])},{includeEmptyArrays:!0}),o});async function s(r,a,o){let p=r(e),V=[];g(p,S=>{async function h(I){var J,X;let v=r(I),R=r(v.value),w=r(v.dirty),C=r(v._validateCount)+1;a(v._validateCount,C),(o==="user"||o==="submit")&&a(v.touched,!0);let L=(J=v._validateCallback)==null?void 0:J.call(v,{get:r,set:a,value:R,dirty:w,touched:r(v.touched),event:o}),P;return W(L)?(a(v.validateStatus,"validating"),P=(X=await L)!=null?X:r(v.errors)):P=L!=null?L:r(v.errors),C===r(v._validateCount)&&(a(v.errors,P),a(v.validateStatus,P.length>0?"invalid":"valid")),!(P&&P.length)}V.push(h(S))}),await Promise.all(V)}let i=f(r=>{let a=r(e),o="valid";return g(a,p=>{let V=r(p),S=r(V.validateStatus);if(S==="validating")return o="validating",!1;if(S==="invalid")return o="invalid",!1}),o}),n=f(null,(r,a,o="user")=>{o&&s(r,a,o)}),u=f(r=>{let a=r(e),o={};return g(a,(p,V)=>{let S=r(p);H(o,V,r(S.errors))}),o}),m=f(0),F=f(0),c=f("idle"),x=f(null,(r,a,o)=>{async function p(){let V=r(F)+1;if(a(F,V),a(m,I=>++I),await s(r,a,"submit"),r(i)==="invalid")return V===r(F)&&a(c,"idle");let h=o(r(l));try{W(h)&&(V===r(F)&&a(c,"submitting"),await h)}catch(I){}finally{V===r(F)&&a(c,"submitted")}}p()}),b=f(r=>{let a=r(e),o=!1;return g(a,p=>{let V=r(p);if(o=r(V.dirty),o)return!1}),o}),E=f(r=>{let a=r(e),o={};return g(a,(p,V)=>{let S=r(p);H(o,V,r(S.touched))}),o}),M=f(null,(r,a)=>{a(e,_),g(r(e),o=>{let p=r(o);a(p.reset)}),a(F,o=>++o),a(c,"idle")}),U={fields:e,values:l,errors:u,dirty:b,touchedFields:E,validate:n,validateStatus:i,submit:x,submitStatus:c,submitCount:m,reset:M,_validateFields:s},T=f(U);return typeof process!="undefined"&&process.env.NODE_ENV!=="production"&&(T.debugLabel=`form/${T}`,Object.entries(U).map(([r,a])=>{k(a)&&(a.debugLabel=`${T.debugLabel}/${r}`)})),T}function ae(t,e){let l=d(t,e),s=d(l.fields,e),i=A(l.reset,e),n=A(l.validate,e),u=A(l.submit,e),[,m]=O();return y.useMemo(()=>({fieldAtoms:s,validate(){m(()=>{n("user")})},reset(F){F==null||F.preventDefault(),m(()=>{i()})},submit(F){return c=>{c==null||c.preventDefault(),m(()=>{u(F)})}}}),[s,n,i,u])}function Ee(t,e){let l=d(t,e),s=d(l.fields,e),i=d(l.submitCount,e),n=d(l.submitStatus,e),u=d(l.validateStatus,e),m=d(l.values,e),F=d(l.errors,e),c=d(l.dirty,e),x=d(l.touchedFields,e);return y.useMemo(()=>({fieldAtoms:s,values:m,errors:F,dirty:c,touchedFields:x,submitCount:i,submitStatus:n,validateStatus:u}),[s,m,F,c,x,i,n,u])}function Me(t,e){let l=d(t,e),s=A(l.fields,e),i=A(l.reset,e),n=A(l.validate,e),u=A(l.submit,e),m=y.useCallback(c=>x=>{x==null||x.preventDefault(),u(c)},[u]),[,F]=O();return y.useMemo(()=>({updateFields:s,reset:i,validate(){F(()=>{n("user")})},submit:m}),[s,i,n,m])}function ge(t,e){let l=d(t,e);return d(l.errors,e)}function Re(t,e){let l=d(t,e);return d(l.values,e)}function he(t,e){let l=d(t),s=d(l.submitStatus,e),i=d(l.validateStatus,e);return y.useMemo(()=>({submitStatus:s,validateStatus:i}),[s,i])}function Ie(t,e){let[,l]=O(),s=d(t,e),i=A(s.submit,e);return y.useCallback(n=>u=>{u==null||u.preventDefault(),l(()=>{i(n)})},[i])}function Pe(t){var T,r;let e=D(t.name),l=D(void 0),s=D(t.value),i=f(a=>a(s),(a,o,p)=>t.preprocess&&p!==_?o(s,t.preprocess(p)):o(s,p)),n=D((T=t.touched)!=null?T:!1),u=f(a=>{var p;let o=(p=a(l))!=null?p:t.value;return a(i)!==o}),m=f([]),F=f(0),c=f("valid"),x=f(null,(a,o,p="user")=>{async function V(){var w,C;if(!p)return;let S=a(F)+1;o(F,S);let h=a(u),I=a(i);(p==="user"||p==="submit")&&o(n,!0);let v=[],R=(w=t.validate)==null?void 0:w.call(t,{get:a,set:o,dirty:h,touched:a(n),value:I,event:p});W(R)?(S===a(F)&&o(c,"validating"),v=(C=await R)!=null?C:a(m)):v=R!=null?R:a(m),S===a(F)&&(o(m,v),o(c,v.length>0?"invalid":"valid"))}V()}),b=f(null),E=f(null,(a,o)=>{var p;o(m,[]),o(n,_),o(i,(p=a(l))!=null?p:t.value),o(F,V=>++V),o(c,"valid")}),M={name:e,value:i,touched:n,dirty:u,validate:x,validateStatus:c,errors:m,reset:E,ref:b,_initialValue:l,_validateCount:F,_validateCallback:t.validate},U=f(M);return typeof process!="undefined"&&process.env.NODE_ENV!=="production"&&(U.debugLabel=`field/${(r=t.name)!=null?r:`${U}`}`,Object.entries(M).map(([a,o])=>{k(o)&&(o.debugLabel=`${U.debugLabel}/${a}`)}),s.debugPrivate=!0),U}function oe(t,e){let l=d(t,e),s=A(l.value,e),i=A(l.touched,e),n=A(l.errors,e),u=A(l.validate,e),m=A(l.reset,e),F=d(l.ref,e),[,c]=O();return y.useMemo(()=>({validate(){c(()=>{u("user")})},setValue(x){s(x),c(()=>{u("change")})},setTouched(x){i(x),x&&c(()=>{u("touch")})},setErrors:n,focus(){F==null||F.focus()},reset:m}),[n,m,u,s,i,F])}function N(t,e={}){let l=d(t,e),s=d(l.name,e),[i,n]=te(l.value,e),u=A(l.touched,e),m=d(l.validateStatus,e),F=A(l.validate,e),c=A(l.ref,e),[,x]=O(),{type:b="text"}=e;return y.useMemo(()=>({name:s,value:B.has(b)?void 0:i===null?"":Array.isArray(i)?i.map(E=>E+""):i instanceof Date?Y(i,b):i,"aria-invalid":m==="invalid",type:b,ref:c,onBlur(){u(!0),x(()=>{F("blur")})},onChange(E){let M=E.currentTarget,U=n,T=b;U(T==="datetime-local"?new Date(M.valueAsNumber):M[B.has(T)?"files":re.has(T)?"valueAsDate":ne.has(T)?"valueAsNumber":"value"]),x(()=>{F("change")})}}),[s,i,m,c,u,F,n,b])}var ne=new Set(["number","range"]),re=new Set(["date","datetime-local","month","week","time"]),B=new Set(["file"]);function ue(t,e={}){let l=N(t,e);return y.useMemo(()=>{let{type:s,...i}=l;return i},[l])}function de(t,e={}){let l=d(t,e),s=A(l.value,e),i=A(l.validate,e),[,n]=O(),{multiple:u}=e,m=N(t,e);return y.useMemo(()=>{let{type:F,onChange:c,...x}=m;return{...x,multiple:u,onChange(b){if(u){let E=b.currentTarget.options,M=[];for(let U in E){let T=E[U];T.selected&&M.push(T.value)}s(M)}else s(b.currentTarget.value);n(()=>{i("change")})}}},[m,i,n,s,u])}function me(t,e){let l=d(t,e),s=d(l.value,e),i=d(l.touched,e),n=d(l.dirty,e),u=d(l.validateStatus,e),m=d(l.errors,e);return y.useMemo(()=>({value:s,touched:i,dirty:n,validateStatus:u,errors:m}),[s,i,n,u,m])}function Oe(t,e){let l=d(t,e);return d(l.value,e)}function Ce(t,e){let l=d(t,e);return d(l.errors,e)}function G(t,e,l){let s=d(t,l),i=le(l);se(e?[[s._initialValue,e],[s.value,e]]:[],l),y.useEffect(()=>{let n=l&&l.areEqual||z;e!==void 0&&(!i.get(s.dirty)&&!n(e,i.get(s.value))&&i.set(s.value,e),n(e,i.get(s._initialValue))||i.set(s._initialValue,e))})}function z(t,e){return Array.isArray(t)&&Array.isArray(e)?t.length===e.length&&(Object.is(t,e)||t.every((l,s)=>z(l,e[s]))):Object.is(t,e)}function Q(t,e){G(t,e==null?void 0:e.initialValue,e);let l=oe(t,e),s=me(t,e);return y.useMemo(()=>({actions:l,state:s}),[l,s])}function Fe(t,e){let l=N(t,e);return j(t,l,e)}function pe(t,e){let l=de(t,e);return j(t,l,e)}function ce(t,e){let l=ue(t,e);return j(t,l,e)}function j(t,e,l){let s=Q(t,l);return G(t,l==null?void 0:l.initialValue,l),y.useMemo(()=>({props:e,...s}),[e,s])}var O=typeof y.useTransition=="function"?y.useTransition:()=>[!1,t=>t()];function W(t){return typeof t=="object"&&typeof t.then=="function"}function k(t){return t!==null&&typeof t=="object"&&(typeof t.read=="function"||typeof t.write=="function")}function g(t,e,l={},s=[]){for(let i in t){s.push(i);let n=t[i];if(k(n)){if(e(n,s)===!1)return}else if(Array.isArray(n))if(!n.length&&l.includeEmptyArrays)e(null,s);else for(let u in n){s.push(u);let m=n[u];if(k(m)){if(e(m,s)===!1)return}else g(m,e,l,s);s.pop()}else typeof n=="object"&&g(n,e,l,s);s.pop()}}export{be as Field,ve as Form,Ae as InputField,De as Provider,_ as RESET,Te as SelectField,Se as TextareaField,Pe as fieldAtom,Ue as formAtom,Q as useField,oe as useFieldActions,Ce as useFieldErrors,G as useFieldInitialValue,me as useFieldState,Oe as useFieldValue,ae as useForm,Me as useFormActions,ge as useFormErrors,Ee as useFormState,he as useFormStatus,Ie as useFormSubmit,Re as useFormValues,Fe as useInputField,N as useInputFieldProps,pe as useSelectField,de as useSelectFieldProps,ce as useTextareaField,ue as useTextareaFieldProps,g as walkFields};