@bgscore/react-form 1.0.13 → 1.0.14

package/dist/index.cjs

@@ -1 +1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var J=require('react'),jsxRuntime=require('react/jsx-runtime'),reactCore=require('@bgscore/react-core'),reactHookForm=require('react-hook-form');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var J__default=/*#__PURE__*/_interopDefault(J);var M=J.createContext(void 0);function h(){let e=J.useContext(M);return e||{}}function v({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=J.useRef([]),o=J.useCallback(a=>{let d=n.current.findIndex(m=>m.id===a.id);if(d>-1){let m=[...n.current];m[d]=a,n.current=[...m];}else n.current.push(a);},[n]),l=J.useCallback(a=>{n.current=n.current.filter(d=>d.id!==a);},[]),u=async(a,d)=>{r.setIsSubmit(true);let m=d?await r.formControl.trigger():true,f=r.getData();m&&t&&t({...f,...a},{...r});},s={...r,registerItem:o,unregisterItem:l,items:n.current,triggerSubmit:u,onFieldChange:p};return jsxRuntime.jsx(M.Provider,{value:s,children:e})}var w=new WeakMap;function N(e){return w.has(e)||w.set(e,reactCore.createStore({})),w.get(e)}function A(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),o=r;for(let l=0;l<n.length;l++){let u=n[l];l===n.length-1?o[u]=A(p):((!o[u]||typeof o[u]!="object")&&(o[u]={}),o=o[u]);}}else r[t]=A(p);return r}var D=(e,r)=>{e||(e={}),e=A(e);let t=J.useRef(null),[p,n]=J.useState(false),o=reactHookForm.useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),l=N(o),u=J.useMemo(()=>reactCore.generateUUID(),[]),s=m=>m?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(o.getValues()),m):reactCore.mappingUndefinedtoNull(o.getValues()),d={...o,ref:t,reset:m=>{m?typeof m=="string"?o.resetField(m,{}):typeof m=="object"&&reactCore.isArray(m,0)&&m.forEach(f=>o.resetField(f)):o.reset();},updateData:m=>{let f=s();o.reset(A({...f,...m}));},getData:s,formControl:o,useFieldArray:m=>reactHookForm.useFieldArray({control:o.control,name:m}),useWatch:m=>reactHookForm.useWatch({control:o.control,name:m}),isSubmit:p,formId:u,setIsSubmit:n,useSelected:m=>l.useStore(f=>reactCore.getFieldValue(f,m)),setSelected:l.setState};return [d,d]};var Pe=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:o,children:l,...u})=>{n&&(n=A(n));let s=o??D(),[a]=Array.isArray(s)?s:[s],d=J.useRef(void 0),m=async f=>{f.preventDefault(),f.stopPropagation(),a.setIsSubmit(true);let g=await a.formControl.trigger(),y=a.getData();g?e&&e({...y},{...a}):t&&t(a.formControl.formState.errors);};return J.useEffect(()=>{n&&reactCore.diffJson(d.current||{},n)&&(a.formControl.reset(n),d.current=n);},[n,a.formControl.reset]),J.useEffect(()=>{if(!r)return;let f=a.formControl.watch((g,y)=>r(g,y,a));return ()=>f.unsubscribe()},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(v,{controller:{...a,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:p,children:jsxRuntime.jsx("form",{...u,id:a.formId,ref:a.ref,onSubmit:m,children:l})})})},z=Pe;var j=J.createContext(void 0);function O(){let e=J.useContext(j);return e||{}}function G({children:e,...r}){return jsxRuntime.jsx(j.Provider,{value:r,children:e})}var Z=e=>{let r=h(),t=reactHookForm.useFieldArray({control:r.control,name:e}),n={formArrayId:J.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [n,n]};var X=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??Z(e),[o]=Array.isArray(n)?n:[n];return J.useEffect(()=>{typeof r=="boolean"&&r?o.append({}):typeof r=="number"&&r>0?o.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&o.append(r);},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:o.fields.map((l,u)=>{let s=`${e}.${u}.`,a={...o,index:u,fieldId:l.id,name:s,countFields:o.fields.length,removeItem:()=>o.remove(u),watchItem:d=>o.watch(d?`${s}${d}`:s.slice(0,-1)),setValueItem:(d,m)=>o.setValue(`${s}${d}`,m),useSelectedItem:d=>o.useSelected(`${s}${d}`)};return jsxRuntime.jsx(J__default.default.Fragment,{children:jsxRuntime.jsx(G,{...a,children:reactCore.renderChildren(p,a)})},l.id)})})};X.displayName="BgsFormArray";var ke=X;J__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var Q=J.createContext(void 0);function W(){let e=J.useContext(Q);return e||{}}function E({children:e,...r}){return jsxRuntime.jsx(Q.Provider,{value:r,children:e})}var ee=({children:e,...r})=>{let t=h(),p=J.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(E,{...t,...r,formGroupId:p,children:e})})};ee.displayName="BgsFormGroup";var De=ee;var re=J.createContext(void 0);function te(){let e=J.useContext(re);return e||{}}function oe({children:e,...r}){return jsxRuntime.jsx(re.Provider,{value:r,children:e})}var Je=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function k({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?ne(e,true,r,t,p,{}).forEach(o=>n.push(o)):typeof e=="object"&&Object.keys(e).forEach(o=>{let{validate:l}=n.find(s=>s.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(o)){let s=e[o],a="";["match","diff"].includes(o)&&typeof s=="object"&&(s=e[o].dataField,a=e[o].label),s!=null&&ne(o,s,r,t,p,l,a).forEach(d=>n.push(d));}else if(typeof e[o]=="object"){let s=e[o];n.push({validate:{...l,[o]:a=>s.validation(a)||s.message&&(typeof s.message=="string"?s.message:s.message(r))}});}})),Object.assign({},...n)}var ne=(e,r,t,p,n,o,l)=>{let u=[],{validationMessage:s}=te(),{required:a,minLength:d,maxLength:m,min:f,max:g,email:y,match:T,diff:U,pattern:c}=s||{},F={required:i=>{if(!r)return  true;let x=a?a(t):`${t} is required`;return typeof i=="string"&&!i.trim()||i==null?x:true},minLength:{value:r,message:d?d(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:m?m(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:f?f(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:g?g(t,r):`${t} should be at most ${r}`},regexp:(i="")=>i?new RegExp(r.regexp).test(i)||`${t} ${r.message}`:true,email:(i="")=>!r||!i?true:Je.test(i)||(y?y(t):`${t} must be type email`),match:(i="")=>i?i===(n&&n(r))||(T?T(t,l||reactCore.labelFormatter.changeAll(r)):`${t} must be same with ${l||reactCore.labelFormatter.changeAll(r)}`):true,diff:(i="")=>i?i!==(n&&n(r))||(U?U(t,l||reactCore.labelFormatter.changeAll(r)):`${t} must be different with ${l||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(i="")=>!!i&&new RegExp("^[A-Za-z ]*$").test(i)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(i="")=>!!i&&new RegExp("^[A-Za-z0-9 ]*$").test(i)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(i="")=>!!i&&new RegExp("^[0-9]*$").test(i)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(i="")=>!!i&&new RegExp("^[a-z0-9 ]*$").test(i)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(i="")=>!!i&&/^(ftp|http|https):\/\/[^ "]+$/.test(i)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(i="")=>!!i&&new RegExp("^[A-Z0-9 ]*$").test(i)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(i="")=>!!i&&/[a-z]/.test(i)&&/[A-Z]/.test(i)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(i="")=>!!i&&/[^a-zA-Z0-9\s]/.test(i)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(F){let{validate:i}=u.find(x=>x.validate)||{};typeof F=="function"?u.push({validate:{...i,...o,[e]:F}}):e==="pattern"?u.push({validate:{...i,...o,[`${e}${r}`]:F[r]}}):u.push({[e]:F});}return u};var pt=e=>{let r=J.useMemo(()=>reactCore.generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:o,disabled:l,readOnly:u,formId:s,setSelected:a,useSelected:d,onFieldChange:m}=t,{name:f,formId:g,...y}=W(),{name:T,formId:U}=O(),c=J.useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(T&&s===U&&(b=`${T}${b}`),f&&s===g&&(b=`${f}${b}`)),b},[T,s,U,e.dataField,f,g,e.disabledHierarchy]),C=J.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);J.useEffect(()=>(p({id:r,...e,dataField:c,label:C}),()=>{n(r);}),[r,e,c,C]);let F=false;typeof e.disabled=="boolean"?F=e.disabled:typeof y.disabled=="boolean"?F=y.disabled:F=!!l;let i=false;typeof e.readOnly=="boolean"?i=e.readOnly:typeof y.readOnly=="boolean"?i=y.readOnly:i=!!u;let x=false;typeof e.hidden=="boolean"&&(x=e.hidden);let R=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?R={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?R={email:true,required:e.required}:typeof e.validationRules=="object"&&(R={...e.validationRules,required:e.required}));let se=F||i||x?{required:false}:k({...e,validationRules:R,label:C}),I=reactHookForm.useController({name:c,control:o,disabled:F,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:se}),ie=I.fieldState.invalid,ae=I.fieldState.error?.message,me=reactHookForm.useWatch({name:c,control:o,defaultValue:e.defaultValue}),le=J.useMemo(()=>reactCore.debounce(b=>a(ce=>({...ce,[c]:b||null}))),[a,c]),de=d(c),ue=R?.required;return {...e,setSelectedField:le,label:C,dataField:c,controller:I,invalid:ie,messageError:ae,selectedField:de,value:me,required:ue,onChange:b=>{I.field.onChange(b),m?.(c,b,t);}}};var Ft=()=>{let{formControl:e,items:r}=h(),t=(n,o,l,u=0)=>{let s=[];if(Array.isArray(l))l.forEach((a,d)=>{let m=Object.entries(a||{}).map(([f,g])=>t(`${n}.${d}.${f}`,`${o}[]${f}`,g,l.length>1?d+1:0)).flat();s=[...s,...m];});else if(l&&typeof l=="object"&&!Array.isArray(l)&&!l?.ref)Object.entries(l).map(([a,d])=>{let m=t(`${n}.${a}`,`${n}.${a}`,d);s=[...s,...m];});else {let a=l?.message||"",d=r.find(m=>m.dataField===o)?.label;s.push({label:`${d||""}${u>0?` ${u}`:""}`,message:a,dataField:n});}return s};return Object.entries(e.formState.errors||{}).map(([n,o])=>t(n,n,o)).flat()};var rr=(s=>(s.alphabet="alphabet",s.alphaNumber="alphanumber",s.number="number",s.lowercase="lowercase",s.url="url",s.uppercase="uppercase",s.mixedCase="mixedcase",s.specialCharacters="specialcharacters",s))(rr||{});var At=z;exports.BgsFormArray=ke;exports.BgsFormGroup=De;exports.BgsReactFormProvider=oe;exports.PatternTypeEnum=rr;exports.default=At;exports.useBgsController=pt;exports.useBgsForm=h;exports.useBgsFormArray=O;exports.useBgsFormArrayInit=Z;exports.useBgsFormGroup=W;exports.useBgsFormInit=D;exports.useSummaryValidation=Ft;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Q=require('react'),jsxRuntime=require('react/jsx-runtime'),reactCore=require('@bgscore/react-core'),reactHookForm=require('react-hook-form');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var Q__default=/*#__PURE__*/_interopDefault(Q);var k=Q.createContext(void 0);function b(){let e=Q.useContext(k);return e||{}}function D({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let o=Q.useRef([]),n=Q.useCallback(l=>{let s=o.current.findIndex(c=>c.id===l.id);if(s>-1){let c=[...o.current];c[s]=l,o.current=[...c];}else o.current.push(l);},[o]),m=Q.useCallback(l=>{o.current=o.current.filter(s=>s.id!==l);},[]),f=async(l,s)=>{r.setIsSubmit(true);let c=s?await r.formControl.trigger():true,d=r.getData();c&&t&&t({...d,...l},{...r});},i={...r,registerItem:n,unregisterItem:m,items:o.current,triggerSubmit:f,onFieldChange:p};return jsxRuntime.jsx(k.Provider,{value:i,children:e})}var $=new WeakMap;function q(e){return $.has(e)||$.set(e,reactCore.createStore({})),$.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let o=t.split("."),n=r;for(let m=0;m<o.length;m++){let f=o[m];m===o.length-1?n[f]=C(p):((!n[f]||typeof n[f]!="object")&&(n[f]={}),n=n[f]);}}else r[t]=C(p);return r}function w(){return reactCore.createTable({name:"draft",primaryKey:"id"})}function B(){return reactCore.createDatabase({dbName:"bgs-react-form",table:{draft:w()}})}function V(e){let r=B(),t=reactCore.useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,f)=>{let l={...await n(),...m};Object.keys(l).forEach(d=>{reactCore.isNotEmpty(l[d])||delete l[d];});let s=Object.keys(l);if(s.length===1&&s[0]==="id")return o();s.some(d=>d!=="id"&&l[d]!==reactCore.getFieldValue(f,d))?await r.draft.put(e,l):await o();},o=async()=>{await r.draft.remove(e);},n=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:o,getDataDraft:n}}var z=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=Q.useRef(null),[t,p]=Q.useState(false),o=e?.draftKey,n=o?V(o):void 0,m=reactHookForm.useForm({reValidateMode:"onSubmit",mode:"all",...e}),f=q(m),i=Q.useMemo(()=>reactCore.generateUUID(),[]),l=d=>d?reactCore.getFieldValue(reactCore.mappingUndefinedtoNull(m.getValues()),d):reactCore.mappingUndefinedtoNull(m.getValues()),s=d=>{d?typeof d=="string"?m.resetField(d,{}):typeof d=="object"&&reactCore.isArray(d,0)&&d.forEach(y=>m.resetField(y)):m.reset();},c={...m,ref:r,reset:s,updateData:d=>{let y=l();m.reset(C({...y,...d}));},getData:l,formControl:m,useFieldArray:d=>reactHookForm.useFieldArray({control:m.control,name:d}),useWatch:d=>reactHookForm.useWatch({control:m.control,name:d}),isSubmit:t,formId:i,setIsSubmit:p,useSelected:d=>f.useStore(y=>reactCore.getFieldValue(y,d)),setSelected:f.setState,isDraft:!!n?.isDraft,removeDraft:()=>{n?.removeDraft?.();},resetDraft:()=>{n?.removeDraft?.(),s();},saveDraft:(...d)=>n?.saveDraft?.(...d),getDataDraft:()=>n?.getDataDraft?.(),draftKey:o};return [c,c]};var Ge=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:o,controller:n,children:m,...f})=>{o&&(o=C(o));let i=f.draftKey,l=n??z({draftKey:i}),[s]=Array.isArray(l)?l:[l],c=Q.useRef(true),d=Q.useRef(void 0),y=async g=>{g.preventDefault(),g.stopPropagation(),s.setIsSubmit(true);let u=await s.formControl.trigger(),F=s.getData();u?e&&e({...F},{...s}):t&&t(s.formControl.formState.errors);};Q.useEffect(()=>{o&&reactCore.diffJson(d.current||{},o)&&(s.formControl.reset(o),d.current=o);},[o,s.formControl.reset]),Q.useEffect(()=>{if(!r)return;let g=s.formControl.watch((u,F)=>r(u,F,s));return ()=>g.unsubscribe()},[]);let x=async()=>{if(s?.isDraft){c.current=false;let g=await s.getData();g&&Object.entries(g).forEach(([u,F])=>{u!=="id"&&(s.setValue(u,F),s.trigger(u));});}};Q.useEffect(()=>{c.current&&x();},[s,s.isDraft,c.current]);let A=async(g,u,F)=>{p?.(g,u,F),F?.saveDraft?.({[g]:u},o);};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(D,{controller:{...s,disabled:f?.disabled,readOnly:f?.readOnly},onSubmit:e,onFieldChange:A,children:jsxRuntime.jsx("form",{...f,id:s.formId,ref:s.ref,onSubmit:y,children:m})})})},J=Ge;var X=Q.createContext(void 0);function G(){let e=Q.useContext(X);return e||{}}function E({children:e,...r}){return jsxRuntime.jsx(X.Provider,{value:r,children:e})}var _=e=>{let r=b(),t=reactHookForm.useFieldArray({control:r.control,name:e}),o={formArrayId:Q.useMemo(()=>reactCore.generateUUID(),[]),...t,...r};return [o,o]};var ee=({name:e,defaultData:r,controller:t,children:p})=>{let o=t??_(e),[n]=Array.isArray(o)?o:[o];return Q.useEffect(()=>{typeof r=="boolean"&&r?n.append({}):typeof r=="number"&&r>0?n.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&n.append(r);},[]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:n.fields.map((m,f)=>{let i=`${e}.${f}.`,l={...n,index:f,fieldId:m.id,name:i,countFields:n.fields.length,removeItem:()=>n.remove(f),watchItem:s=>n.watch(s?`${i}${s}`:i.slice(0,-1)),setValueItem:(s,c)=>n.setValue(`${i}${s}`,c),useSelectedItem:s=>n.useSelected(`${i}${s}`)};return jsxRuntime.jsx(Q__default.default.Fragment,{children:jsxRuntime.jsx(E,{...l,children:reactCore.renderChildren(p,l)})},m.id)})})};ee.displayName="BgsFormArray";var He=ee;Q__default.default.memo(({children:e,props:r})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:reactCore.renderChildren(e,r)}));var te=Q.createContext(void 0);function K(){let e=Q.useContext(te);return e||{}}function L({children:e,...r}){return jsxRuntime.jsx(te.Provider,{value:r,children:e})}var ne=({children:e,...r})=>{let t=b(),p=Q.useMemo(()=>reactCore.generateUUID(),[]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(L,{...t,...r,formGroupId:p,children:e})})};ne.displayName="BgsFormGroup";var _e=ne;var se=Q.createContext(void 0);function ae(){let e=Q.useContext(se);return e||{}}function ie({children:e,...r}){return jsxRuntime.jsx(se.Provider,{value:r,children:e})}var tr=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function N({validationRules:e,label:r}){let{formControl:t,getData:p}=b(),o=[];return e&&(typeof e=="string"?me(e,true,r,t,p,{}).forEach(n=>o.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:m}=o.find(i=>i.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let i=e[n],l="";["match","diff"].includes(n)&&typeof i=="object"&&(i=e[n].dataField,l=e[n].label),i!=null&&me(n,i,r,t,p,m,l).forEach(s=>o.push(s));}else if(typeof e[n]=="object"){let i=e[n];o.push({validate:{...m,[n]:l=>i.validation(l)||i.message&&(typeof i.message=="string"?i.message:i.message(r))}});}})),Object.assign({},...o)}var me=(e,r,t,p,o,n,m)=>{let f=[],{validationMessage:i}=ae(),{required:l,minLength:s,maxLength:c,min:d,max:y,email:x,match:A,diff:g,pattern:u}=i||{},h={required:a=>{if(!r)return  true;let U=l?l(t):`${t} is required`;return typeof a=="string"&&!a.trim()||a==null?U:true},minLength:{value:r,message:s?s(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:c?c(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:d?d(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:y?y(t,r):`${t} should be at most ${r}`},regexp:(a="")=>a?new RegExp(r.regexp).test(a)||`${t} ${r.message}`:true,email:(a="")=>!r||!a?true:tr.test(a)||(x?x(t):`${t} must be type email`),match:(a="")=>a?a===(o&&o(r))||(A?A(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be same with ${m||reactCore.labelFormatter.changeAll(r)}`):true,diff:(a="")=>a?a!==(o&&o(r))||(g?g(t,m||reactCore.labelFormatter.changeAll(r)):`${t} must be different with ${m||reactCore.labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(a="")=>!!a&&new RegExp("^[A-Za-z ]*$").test(a)||(u?.alphabet?u?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(a="")=>!!a&&new RegExp("^[A-Za-z0-9 ]*$").test(a)||(u?.alphanumber?u?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(a="")=>!!a&&new RegExp("^[0-9]*$").test(a)||(u?.number?u?.number(t):`${t} must be format Number`),lowercase:(a="")=>!!a&&new RegExp("^[a-z0-9 ]*$").test(a)||(u?.lowercase?u?.lowercase(t):`${t} must be format Lowercase`),url:(a="")=>!!a&&/^(ftp|http|https):\/\/[^ "]+$/.test(a)||(u?.url?u?.url(t):`${t} must be a valid URL`),uppercase:(a="")=>!!a&&new RegExp("^[A-Z0-9 ]*$").test(a)||(u?.uppercase?u?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(a="")=>!!a&&/[a-z]/.test(a)&&/[A-Z]/.test(a)||(u?.mixedcase?u?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(a="")=>!!a&&/[^a-zA-Z0-9\s]/.test(a)||(u?.specialcharacters?u?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(h){let{validate:a}=f.find(U=>U.validate)||{};typeof h=="function"?f.push({validate:{...a,...n,[e]:h}}):e==="pattern"?f.push({validate:{...a,...n,[`${e}${r}`]:h[r]}}):f.push({[e]:h});}return f};var $t=e=>{let r=Q.useMemo(()=>reactCore.generateUUID(),[]),t=b(),{registerItem:p,unregisterItem:o,control:n,disabled:m,readOnly:f,formId:i,setSelected:l,useSelected:s,onFieldChange:c}=t,{name:d,formId:y,...x}=K(),{name:A,formId:g}=G(),u=Q.useMemo(()=>{let T=e.dataField;return e.disabledHierarchy||(A&&i===g&&(T=`${A}${T}`),d&&i===y&&(T=`${d}${T}`)),T},[A,i,g,e.dataField,d,y,e.disabledHierarchy]),F=Q.useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return reactCore.labelFormatter.changeAll(u)},[e.label,e.noLabel,u]);Q.useEffect(()=>(p({id:r,...e,dataField:u,label:F}),()=>{o(r);}),[r,e,u,F]);let h=false;typeof e.disabled=="boolean"?h=e.disabled:typeof x.disabled=="boolean"?h=x.disabled:h=!!m;let a=false;typeof e.readOnly=="boolean"?a=e.readOnly:typeof x.readOnly=="boolean"?a=x.readOnly:a=!!f;let U=false;typeof e.hidden=="boolean"&&(U=e.hidden);let R=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?R={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?R={email:true,required:e.required}:typeof e.validationRules=="object"&&(R={...e.validationRules,required:e.required}));let le=h||a||U?{required:false}:N({...e,validationRules:R,label:F}),I=reactHookForm.useController({name:u,control:n,disabled:h,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),de=I.fieldState.invalid,ue=I.fieldState.error?.message,fe=reactHookForm.useWatch({name:u,control:n,defaultValue:e.defaultValue}),ce=Q.useMemo(()=>reactCore.debounce(T=>l(ye=>({...ye,[u]:T||null}))),[l,u]),pe=s(u),ge=R?.required;return {...e,setSelectedField:ce,label:F,dataField:u,controller:I,invalid:de,messageError:ue,selectedField:pe,value:fe,required:ge,onChange:T=>{I.field.onChange(T),c?.(u,T,t);}}};var Ot=()=>{let{formControl:e,items:r}=b(),t=(o,n,m,f=0)=>{let i=[];if(Array.isArray(m))m.forEach((l,s)=>{let c=Object.entries(l||{}).map(([d,y])=>t(`${o}.${s}.${d}`,`${n}[]${d}`,y,m.length>1?s+1:0)).flat();i=[...i,...c];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([l,s])=>{let c=t(`${o}.${l}`,`${o}.${l}`,s);i=[...i,...c];});else {let l=m?.message||"",s=r.find(c=>c.dataField===n)?.label;i.push({label:`${s||""}${f>0?` ${f}`:""}`,message:l,dataField:o});}return i};return Object.entries(e.formState.errors||{}).map(([o,n])=>t(o,o,n)).flat()};var lr=(i=>(i.alphabet="alphabet",i.alphaNumber="alphanumber",i.number="number",i.lowercase="lowercase",i.url="url",i.uppercase="uppercase",i.mixedCase="mixedcase",i.specialCharacters="specialcharacters",i))(lr||{});var Kt=J;exports.BgsFormArray=He;exports.BgsFormGroup=_e;exports.BgsReactFormProvider=ie;exports.PatternTypeEnum=lr;exports.default=Kt;exports.useBgsController=$t;exports.useBgsForm=b;exports.useBgsFormArray=G;exports.useBgsFormArrayInit=_;exports.useBgsFormGroup=K;exports.useBgsFormInit=z;exports.useSummaryValidation=Ot;

package/dist/index.d.cts

@@ -21,25 +21,39 @@ type NestedKeyOf<T> = T extends object ? T extends Array<infer U> ? `${number}`
     [K in keyof T]: T[K] extends Array<infer U> ? `${K & string}` | `${K & string}[${number}]` | `${K & string}[${number}].${NestedKeyOf<U>}` : T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : `${K & string}`;
 }[keyof T] : never;
 
+type UseDraftReturn<T> = {
+    saveDraft: (values: T, compareData: T) => void;
+    removeDraft: () => void;
+    isDraft: boolean;
+    getDataDraft: () => Promise<T | undefined>;
+};
+
 type OnSubmit<T = any> = (values: T, options: UseFormInitReturn<T>) => void;
 type TriggerSubmit<T = unknown> = (addValues?: T, validate?: boolean) => void;
 type UseSelected<T> = <K>(key: NestedKeyOf<T>) => K | undefined;
 type SelectedNested<T> = Partial<Record<NestedKeyOf<T>, any>>;
-type FormProps<T = unknown> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> & FormDefaultProps & {
+type WithDraftKey<T> = T & {
+    draftKey?: string;
+};
+type FormPropsBase<T> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> & FormDefaultProps & {
     formData?: Partial<T> | null;
-    controller?: UseFormInitReturn<T> | UseFormInitReturn<T>[];
     onSubmit?: OnSubmit<T>;
     onChange?: OnChange<T>;
     onFieldChange?: OnFieldChange<T>;
     onInvalid?: (errors: FieldErrors) => void;
 };
+type FormProps<T = unknown> = (FormPropsBase<T> & {
+    controller: UseFormInitReturn<T> | UseFormInitReturn<T>[];
+}) | (FormPropsBase<T> & {
+    controller?: undefined;
+}) & WithDraftKey<{}>;
 type OnChange<T = unknown> = (values: T, event: {
     name?: string | undefined;
     type?: EventType | undefined;
 }, controller: UseFormInitReturn<T>) => void;
 type OnFieldChange<T = unknown> = (dataField: string, value: T, controller: UseFormInitReturn<T>) => void;
 type SetSelectedFn<T> = (newState: SelectedNested<T> | ((prev: SelectedNested<T>) => SelectedNested<T>)) => void;
-interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormReturn, "reset"> {
+interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormReturn, "reset">, UseDraftReturn<T> {
     reset: (field?: string | string[]) => void;
     updateData: (values: Partial<T>) => void;
     getData: (field?: string) => T;
@@ -53,6 +67,8 @@ interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormR
     ref: React.RefObject<HTMLFormElement | null>;
     setSelected: SetSelectedFn<T>;
     useSelected: UseSelected<T>;
+    resetDraft: () => void;
+    draftKey?: string;
 }
 interface FormArrayProps<T = unknown> {
     name: string;
@@ -63,7 +79,7 @@ interface FormArrayProps<T = unknown> {
 type UseFormArrayInitReturn<T> = UseFieldArrayReturn & UseBgsForm<T> & {
     formArrayId: string;
 };
-type UseBgsForm<T = unknown> = UseFormInitReturn<T> & {
+type UseBgsForm<T = unknown> = UseFormInitReturn<T> & UseDraftReturn<T> & {
     registerItem: (ref: ControllerWithKey) => void;
     unregisterItem: (id: string) => void;
     items: ControllerWithKey[];
@@ -202,7 +218,11 @@ interface BgsReactFormContextData {
 }
 declare function BgsReactFormProvider({ children, ...value }: PropsWithChildren<BgsReactFormContextData>): react_jsx_runtime.JSX.Element;
 
-declare const useBgsFormInit: <T = unknown>(defaultValues?: Partial<T> | undefined, options?: UseFormProps) => UseFormInitReturn<T>[];
+type OptionsInit<T> = Omit<UseFormProps, "defaultValues"> & {
+    draftKey?: string;
+    defaultValues?: Partial<T> | undefined;
+};
+declare const useBgsFormInit: <T = unknown>(options?: OptionsInit<T>) => UseFormInitReturn<T>[];
 
 declare const useBgsFormArrayInit: <T = unknown>(name: string) => UseFormArrayInitReturn<T>[];
 
@@ -215,4 +235,4 @@ interface SummaryValidation {
 }
 declare const useSummaryValidation: () => SummaryValidation[];
 
-export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useSummaryValidation };
+export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type OptionsInit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useSummaryValidation };

package/dist/index.d.ts

@@ -21,25 +21,39 @@ type NestedKeyOf<T> = T extends object ? T extends Array<infer U> ? `${number}`
     [K in keyof T]: T[K] extends Array<infer U> ? `${K & string}` | `${K & string}[${number}]` | `${K & string}[${number}].${NestedKeyOf<U>}` : T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : `${K & string}`;
 }[keyof T] : never;
 
+type UseDraftReturn<T> = {
+    saveDraft: (values: T, compareData: T) => void;
+    removeDraft: () => void;
+    isDraft: boolean;
+    getDataDraft: () => Promise<T | undefined>;
+};
+
 type OnSubmit<T = any> = (values: T, options: UseFormInitReturn<T>) => void;
 type TriggerSubmit<T = unknown> = (addValues?: T, validate?: boolean) => void;
 type UseSelected<T> = <K>(key: NestedKeyOf<T>) => K | undefined;
 type SelectedNested<T> = Partial<Record<NestedKeyOf<T>, any>>;
-type FormProps<T = unknown> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> & FormDefaultProps & {
+type WithDraftKey<T> = T & {
+    draftKey?: string;
+};
+type FormPropsBase<T> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onChange"> & FormDefaultProps & {
     formData?: Partial<T> | null;
-    controller?: UseFormInitReturn<T> | UseFormInitReturn<T>[];
     onSubmit?: OnSubmit<T>;
     onChange?: OnChange<T>;
     onFieldChange?: OnFieldChange<T>;
     onInvalid?: (errors: FieldErrors) => void;
 };
+type FormProps<T = unknown> = (FormPropsBase<T> & {
+    controller: UseFormInitReturn<T> | UseFormInitReturn<T>[];
+}) | (FormPropsBase<T> & {
+    controller?: undefined;
+}) & WithDraftKey<{}>;
 type OnChange<T = unknown> = (values: T, event: {
     name?: string | undefined;
     type?: EventType | undefined;
 }, controller: UseFormInitReturn<T>) => void;
 type OnFieldChange<T = unknown> = (dataField: string, value: T, controller: UseFormInitReturn<T>) => void;
 type SetSelectedFn<T> = (newState: SelectedNested<T> | ((prev: SelectedNested<T>) => SelectedNested<T>)) => void;
-interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormReturn, "reset"> {
+interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormReturn, "reset">, UseDraftReturn<T> {
     reset: (field?: string | string[]) => void;
     updateData: (values: Partial<T>) => void;
     getData: (field?: string) => T;
@@ -53,6 +67,8 @@ interface UseFormInitReturn<T = unknown> extends FormDefaultProps, Omit<UseFormR
     ref: React.RefObject<HTMLFormElement | null>;
     setSelected: SetSelectedFn<T>;
     useSelected: UseSelected<T>;
+    resetDraft: () => void;
+    draftKey?: string;
 }
 interface FormArrayProps<T = unknown> {
     name: string;
@@ -63,7 +79,7 @@ interface FormArrayProps<T = unknown> {
 type UseFormArrayInitReturn<T> = UseFieldArrayReturn & UseBgsForm<T> & {
     formArrayId: string;
 };
-type UseBgsForm<T = unknown> = UseFormInitReturn<T> & {
+type UseBgsForm<T = unknown> = UseFormInitReturn<T> & UseDraftReturn<T> & {
     registerItem: (ref: ControllerWithKey) => void;
     unregisterItem: (id: string) => void;
     items: ControllerWithKey[];
@@ -202,7 +218,11 @@ interface BgsReactFormContextData {
 }
 declare function BgsReactFormProvider({ children, ...value }: PropsWithChildren<BgsReactFormContextData>): react_jsx_runtime.JSX.Element;
 
-declare const useBgsFormInit: <T = unknown>(defaultValues?: Partial<T> | undefined, options?: UseFormProps) => UseFormInitReturn<T>[];
+type OptionsInit<T> = Omit<UseFormProps, "defaultValues"> & {
+    draftKey?: string;
+    defaultValues?: Partial<T> | undefined;
+};
+declare const useBgsFormInit: <T = unknown>(options?: OptionsInit<T>) => UseFormInitReturn<T>[];
 
 declare const useBgsFormArrayInit: <T = unknown>(name: string) => UseFormArrayInitReturn<T>[];
 
@@ -215,4 +235,4 @@ interface SummaryValidation {
 }
 declare const useSummaryValidation: () => SummaryValidation[];
 
-export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useSummaryValidation };
+export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, BgsReactFormProvider, type ControllerProps, type FormArrayProps, type FormGroupProps, type FormProps, type OnChange, type OnFieldChange, type OnSubmit, type OptionsInit, type PatternType, PatternTypeEnum, type SelectedNested, type TriggerSubmit, type UseBgsForm, type UseController, type UseFormArray, type UseFormArrayInitReturn, type UseFormInitReturn, type UseSelected, type ValidationCallback, type ValidationOptions, type ValidationRules, BgsForm as default, useBgsController, useForm as useBgsForm, useFormArray as useBgsFormArray, useBgsFormArrayInit, useFormGroup as useBgsFormGroup, useBgsFormInit, useSummaryValidation };

package/dist/index.js

@@ -1 +1 @@
-import J,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,diffJson,labelFormatter,debounce,isArray,createStore}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var M=createContext(void 0);function h(){let e=useContext(M);return e||{}}function v({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let n=useRef([]),o=useCallback(a=>{let d=n.current.findIndex(m=>m.id===a.id);if(d>-1){let m=[...n.current];m[d]=a,n.current=[...m];}else n.current.push(a);},[n]),l=useCallback(a=>{n.current=n.current.filter(d=>d.id!==a);},[]),u=async(a,d)=>{r.setIsSubmit(true);let m=d?await r.formControl.trigger():true,f=r.getData();m&&t&&t({...f,...a},{...r});},s={...r,registerItem:o,unregisterItem:l,items:n.current,triggerSubmit:u,onFieldChange:p};return jsx(M.Provider,{value:s,children:e})}var w=new WeakMap;function N(e){return w.has(e)||w.set(e,createStore({})),w.get(e)}function A(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let n=t.split("."),o=r;for(let l=0;l<n.length;l++){let u=n[l];l===n.length-1?o[u]=A(p):((!o[u]||typeof o[u]!="object")&&(o[u]={}),o=o[u]);}}else r[t]=A(p);return r}var D=(e,r)=>{e||(e={}),e=A(e);let t=useRef(null),[p,n]=useState(false),o=useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),l=N(o),u=useMemo(()=>generateUUID(),[]),s=m=>m?getFieldValue(mappingUndefinedtoNull(o.getValues()),m):mappingUndefinedtoNull(o.getValues()),d={...o,ref:t,reset:m=>{m?typeof m=="string"?o.resetField(m,{}):typeof m=="object"&&isArray(m,0)&&m.forEach(f=>o.resetField(f)):o.reset();},updateData:m=>{let f=s();o.reset(A({...f,...m}));},getData:s,formControl:o,useFieldArray:m=>useFieldArray({control:o.control,name:m}),useWatch:m=>useWatch({control:o.control,name:m}),isSubmit:p,formId:u,setIsSubmit:n,useSelected:m=>l.useStore(f=>getFieldValue(f,m)),setSelected:l.setState};return [d,d]};var Pe=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:n,controller:o,children:l,...u})=>{n&&(n=A(n));let s=o??D(),[a]=Array.isArray(s)?s:[s],d=useRef(void 0),m=async f=>{f.preventDefault(),f.stopPropagation(),a.setIsSubmit(true);let g=await a.formControl.trigger(),y=a.getData();g?e&&e({...y},{...a}):t&&t(a.formControl.formState.errors);};return useEffect(()=>{n&&diffJson(d.current||{},n)&&(a.formControl.reset(n),d.current=n);},[n,a.formControl.reset]),useEffect(()=>{if(!r)return;let f=a.formControl.watch((g,y)=>r(g,y,a));return ()=>f.unsubscribe()},[]),jsx(Fragment,{children:jsx(v,{controller:{...a,disabled:u?.disabled,readOnly:u?.readOnly},onSubmit:e,onFieldChange:p,children:jsx("form",{...u,id:a.formId,ref:a.ref,onSubmit:m,children:l})})})},z=Pe;var j=createContext(void 0);function O(){let e=useContext(j);return e||{}}function G({children:e,...r}){return jsx(j.Provider,{value:r,children:e})}var Z=e=>{let r=h(),t=useFieldArray({control:r.control,name:e}),n={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [n,n]};var X=({name:e,defaultData:r,controller:t,children:p})=>{let n=t??Z(e),[o]=Array.isArray(n)?n:[n];return useEffect(()=>{typeof r=="boolean"&&r?o.append({}):typeof r=="number"&&r>0?o.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&o.append(r);},[]),jsx(Fragment,{children:o.fields.map((l,u)=>{let s=`${e}.${u}.`,a={...o,index:u,fieldId:l.id,name:s,countFields:o.fields.length,removeItem:()=>o.remove(u),watchItem:d=>o.watch(d?`${s}${d}`:s.slice(0,-1)),setValueItem:(d,m)=>o.setValue(`${s}${d}`,m),useSelectedItem:d=>o.useSelected(`${s}${d}`)};return jsx(J.Fragment,{children:jsx(G,{...a,children:renderChildren(p,a)})},l.id)})})};X.displayName="BgsFormArray";var ke=X;J.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var Q=createContext(void 0);function W(){let e=useContext(Q);return e||{}}function E({children:e,...r}){return jsx(Q.Provider,{value:r,children:e})}var ee=({children:e,...r})=>{let t=h(),p=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(E,{...t,...r,formGroupId:p,children:e})})};ee.displayName="BgsFormGroup";var De=ee;var re=createContext(void 0);function te(){let e=useContext(re);return e||{}}function oe({children:e,...r}){return jsx(re.Provider,{value:r,children:e})}var Je=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function k({validationRules:e,label:r}){let{formControl:t,getData:p}=h(),n=[];return e&&(typeof e=="string"?ne(e,true,r,t,p,{}).forEach(o=>n.push(o)):typeof e=="object"&&Object.keys(e).forEach(o=>{let{validate:l}=n.find(s=>s.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(o)){let s=e[o],a="";["match","diff"].includes(o)&&typeof s=="object"&&(s=e[o].dataField,a=e[o].label),s!=null&&ne(o,s,r,t,p,l,a).forEach(d=>n.push(d));}else if(typeof e[o]=="object"){let s=e[o];n.push({validate:{...l,[o]:a=>s.validation(a)||s.message&&(typeof s.message=="string"?s.message:s.message(r))}});}})),Object.assign({},...n)}var ne=(e,r,t,p,n,o,l)=>{let u=[],{validationMessage:s}=te(),{required:a,minLength:d,maxLength:m,min:f,max:g,email:y,match:T,diff:U,pattern:c}=s||{},F={required:i=>{if(!r)return  true;let x=a?a(t):`${t} is required`;return typeof i=="string"&&!i.trim()||i==null?x:true},minLength:{value:r,message:d?d(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:m?m(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:f?f(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:g?g(t,r):`${t} should be at most ${r}`},regexp:(i="")=>i?new RegExp(r.regexp).test(i)||`${t} ${r.message}`:true,email:(i="")=>!r||!i?true:Je.test(i)||(y?y(t):`${t} must be type email`),match:(i="")=>i?i===(n&&n(r))||(T?T(t,l||labelFormatter.changeAll(r)):`${t} must be same with ${l||labelFormatter.changeAll(r)}`):true,diff:(i="")=>i?i!==(n&&n(r))||(U?U(t,l||labelFormatter.changeAll(r)):`${t} must be different with ${l||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(i="")=>!!i&&new RegExp("^[A-Za-z ]*$").test(i)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(i="")=>!!i&&new RegExp("^[A-Za-z0-9 ]*$").test(i)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(i="")=>!!i&&new RegExp("^[0-9]*$").test(i)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(i="")=>!!i&&new RegExp("^[a-z0-9 ]*$").test(i)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(i="")=>!!i&&/^(ftp|http|https):\/\/[^ "]+$/.test(i)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(i="")=>!!i&&new RegExp("^[A-Z0-9 ]*$").test(i)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(i="")=>!!i&&/[a-z]/.test(i)&&/[A-Z]/.test(i)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(i="")=>!!i&&/[^a-zA-Z0-9\s]/.test(i)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(F){let{validate:i}=u.find(x=>x.validate)||{};typeof F=="function"?u.push({validate:{...i,...o,[e]:F}}):e==="pattern"?u.push({validate:{...i,...o,[`${e}${r}`]:F[r]}}):u.push({[e]:F});}return u};var pt=e=>{let r=useMemo(()=>generateUUID(),[]),t=h(),{registerItem:p,unregisterItem:n,control:o,disabled:l,readOnly:u,formId:s,setSelected:a,useSelected:d,onFieldChange:m}=t,{name:f,formId:g,...y}=W(),{name:T,formId:U}=O(),c=useMemo(()=>{let b=e.dataField;return e.disabledHierarchy||(T&&s===U&&(b=`${T}${b}`),f&&s===g&&(b=`${f}${b}`)),b},[T,s,U,e.dataField,f,g,e.disabledHierarchy]),C=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);useEffect(()=>(p({id:r,...e,dataField:c,label:C}),()=>{n(r);}),[r,e,c,C]);let F=false;typeof e.disabled=="boolean"?F=e.disabled:typeof y.disabled=="boolean"?F=y.disabled:F=!!l;let i=false;typeof e.readOnly=="boolean"?i=e.readOnly:typeof y.readOnly=="boolean"?i=y.readOnly:i=!!u;let x=false;typeof e.hidden=="boolean"&&(x=e.hidden);let R=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?R={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?R={email:true,required:e.required}:typeof e.validationRules=="object"&&(R={...e.validationRules,required:e.required}));let se=F||i||x?{required:false}:k({...e,validationRules:R,label:C}),I=useController({name:c,control:o,disabled:F,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:se}),ie=I.fieldState.invalid,ae=I.fieldState.error?.message,me=useWatch({name:c,control:o,defaultValue:e.defaultValue}),le=useMemo(()=>debounce(b=>a(ce=>({...ce,[c]:b||null}))),[a,c]),de=d(c),ue=R?.required;return {...e,setSelectedField:le,label:C,dataField:c,controller:I,invalid:ie,messageError:ae,selectedField:de,value:me,required:ue,onChange:b=>{I.field.onChange(b),m?.(c,b,t);}}};var Ft=()=>{let{formControl:e,items:r}=h(),t=(n,o,l,u=0)=>{let s=[];if(Array.isArray(l))l.forEach((a,d)=>{let m=Object.entries(a||{}).map(([f,g])=>t(`${n}.${d}.${f}`,`${o}[]${f}`,g,l.length>1?d+1:0)).flat();s=[...s,...m];});else if(l&&typeof l=="object"&&!Array.isArray(l)&&!l?.ref)Object.entries(l).map(([a,d])=>{let m=t(`${n}.${a}`,`${n}.${a}`,d);s=[...s,...m];});else {let a=l?.message||"",d=r.find(m=>m.dataField===o)?.label;s.push({label:`${d||""}${u>0?` ${u}`:""}`,message:a,dataField:n});}return s};return Object.entries(e.formState.errors||{}).map(([n,o])=>t(n,n,o)).flat()};var rr=(s=>(s.alphabet="alphabet",s.alphaNumber="alphanumber",s.number="number",s.lowercase="lowercase",s.url="url",s.uppercase="uppercase",s.mixedCase="mixedcase",s.specialCharacters="specialcharacters",s))(rr||{});var At=z;export{ke as BgsFormArray,De as BgsFormGroup,oe as BgsReactFormProvider,rr as PatternTypeEnum,At as default,pt as useBgsController,h as useBgsForm,O as useBgsFormArray,Z as useBgsFormArrayInit,W as useBgsFormGroup,D as useBgsFormInit,Ft as useSummaryValidation};
+import Q,{createContext,useContext,useRef,useState,useMemo,useEffect,useCallback}from'react';import {jsx,Fragment}from'react/jsx-runtime';import {renderChildren,generateUUID,getFieldValue,mappingUndefinedtoNull,diffJson,labelFormatter,debounce,isArray,useDbLiveFlag,createStore,createDatabase,isNotEmpty,createTable}from'@bgscore/react-core';import {useForm,useWatch,useFieldArray,useController}from'react-hook-form';var k=createContext(void 0);function b(){let e=useContext(k);return e||{}}function D({children:e,controller:r,onSubmit:t,onFieldChange:p=()=>{}}){let o=useRef([]),n=useCallback(l=>{let s=o.current.findIndex(c=>c.id===l.id);if(s>-1){let c=[...o.current];c[s]=l,o.current=[...c];}else o.current.push(l);},[o]),m=useCallback(l=>{o.current=o.current.filter(s=>s.id!==l);},[]),f=async(l,s)=>{r.setIsSubmit(true);let c=s?await r.formControl.trigger():true,d=r.getData();c&&t&&t({...d,...l},{...r});},i={...r,registerItem:n,unregisterItem:m,items:o.current,triggerSubmit:f,onFieldChange:p};return jsx(k.Provider,{value:i,children:e})}var $=new WeakMap;function q(e){return $.has(e)||$.set(e,createStore({})),$.get(e)}function C(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[t,p]of Object.entries(e))if(t.includes(".")){let o=t.split("."),n=r;for(let m=0;m<o.length;m++){let f=o[m];m===o.length-1?n[f]=C(p):((!n[f]||typeof n[f]!="object")&&(n[f]={}),n=n[f]);}}else r[t]=C(p);return r}function w(){return createTable({name:"draft",primaryKey:"id"})}function B(){return createDatabase({dbName:"bgs-react-form",table:{draft:w()}})}function V(e){let r=B(),t=useDbLiveFlag(r.draft.detail,{key:e}),p=async(m,f)=>{let l={...await n(),...m};Object.keys(l).forEach(d=>{isNotEmpty(l[d])||delete l[d];});let s=Object.keys(l);if(s.length===1&&s[0]==="id")return o();s.some(d=>d!=="id"&&l[d]!==getFieldValue(f,d))?await r.draft.put(e,l):await o();},o=async()=>{await r.draft.remove(e);},n=async()=>await r.draft.detail(e);return {isDraft:t,saveDraft:p,removeDraft:o,getDataDraft:n}}var z=(e={})=>{e.defaultValues||(e.defaultValues={}),e.defaultValues=C(e.defaultValues);let r=useRef(null),[t,p]=useState(false),o=e?.draftKey,n=o?V(o):void 0,m=useForm({reValidateMode:"onSubmit",mode:"all",...e}),f=q(m),i=useMemo(()=>generateUUID(),[]),l=d=>d?getFieldValue(mappingUndefinedtoNull(m.getValues()),d):mappingUndefinedtoNull(m.getValues()),s=d=>{d?typeof d=="string"?m.resetField(d,{}):typeof d=="object"&&isArray(d,0)&&d.forEach(y=>m.resetField(y)):m.reset();},c={...m,ref:r,reset:s,updateData:d=>{let y=l();m.reset(C({...y,...d}));},getData:l,formControl:m,useFieldArray:d=>useFieldArray({control:m.control,name:d}),useWatch:d=>useWatch({control:m.control,name:d}),isSubmit:t,formId:i,setIsSubmit:p,useSelected:d=>f.useStore(y=>getFieldValue(y,d)),setSelected:f.setState,isDraft:!!n?.isDraft,removeDraft:()=>{n?.removeDraft?.();},resetDraft:()=>{n?.removeDraft?.(),s();},saveDraft:(...d)=>n?.saveDraft?.(...d),getDataDraft:()=>n?.getDataDraft?.(),draftKey:o};return [c,c]};var Ge=({onSubmit:e,onChange:r,onInvalid:t,onFieldChange:p,formData:o,controller:n,children:m,...f})=>{o&&(o=C(o));let i=f.draftKey,l=n??z({draftKey:i}),[s]=Array.isArray(l)?l:[l],c=useRef(true),d=useRef(void 0),y=async g=>{g.preventDefault(),g.stopPropagation(),s.setIsSubmit(true);let u=await s.formControl.trigger(),F=s.getData();u?e&&e({...F},{...s}):t&&t(s.formControl.formState.errors);};useEffect(()=>{o&&diffJson(d.current||{},o)&&(s.formControl.reset(o),d.current=o);},[o,s.formControl.reset]),useEffect(()=>{if(!r)return;let g=s.formControl.watch((u,F)=>r(u,F,s));return ()=>g.unsubscribe()},[]);let x=async()=>{if(s?.isDraft){c.current=false;let g=await s.getData();g&&Object.entries(g).forEach(([u,F])=>{u!=="id"&&(s.setValue(u,F),s.trigger(u));});}};useEffect(()=>{c.current&&x();},[s,s.isDraft,c.current]);let A=async(g,u,F)=>{p?.(g,u,F),F?.saveDraft?.({[g]:u},o);};return jsx(Fragment,{children:jsx(D,{controller:{...s,disabled:f?.disabled,readOnly:f?.readOnly},onSubmit:e,onFieldChange:A,children:jsx("form",{...f,id:s.formId,ref:s.ref,onSubmit:y,children:m})})})},J=Ge;var X=createContext(void 0);function G(){let e=useContext(X);return e||{}}function E({children:e,...r}){return jsx(X.Provider,{value:r,children:e})}var _=e=>{let r=b(),t=useFieldArray({control:r.control,name:e}),o={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [o,o]};var ee=({name:e,defaultData:r,controller:t,children:p})=>{let o=t??_(e),[n]=Array.isArray(o)?o:[o];return useEffect(()=>{typeof r=="boolean"&&r?n.append({}):typeof r=="number"&&r>0?n.append([...Array(r).fill(null).map(()=>({}))]):typeof r=="object"&&r&&n.append(r);},[]),jsx(Fragment,{children:n.fields.map((m,f)=>{let i=`${e}.${f}.`,l={...n,index:f,fieldId:m.id,name:i,countFields:n.fields.length,removeItem:()=>n.remove(f),watchItem:s=>n.watch(s?`${i}${s}`:i.slice(0,-1)),setValueItem:(s,c)=>n.setValue(`${i}${s}`,c),useSelectedItem:s=>n.useSelected(`${i}${s}`)};return jsx(Q.Fragment,{children:jsx(E,{...l,children:renderChildren(p,l)})},m.id)})})};ee.displayName="BgsFormArray";var He=ee;Q.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var te=createContext(void 0);function K(){let e=useContext(te);return e||{}}function L({children:e,...r}){return jsx(te.Provider,{value:r,children:e})}var ne=({children:e,...r})=>{let t=b(),p=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(L,{...t,...r,formGroupId:p,children:e})})};ne.displayName="BgsFormGroup";var _e=ne;var se=createContext(void 0);function ae(){let e=useContext(se);return e||{}}function ie({children:e,...r}){return jsx(se.Provider,{value:r,children:e})}var tr=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;function N({validationRules:e,label:r}){let{formControl:t,getData:p}=b(),o=[];return e&&(typeof e=="string"?me(e,true,r,t,p,{}).forEach(n=>o.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:m}=o.find(i=>i.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let i=e[n],l="";["match","diff"].includes(n)&&typeof i=="object"&&(i=e[n].dataField,l=e[n].label),i!=null&&me(n,i,r,t,p,m,l).forEach(s=>o.push(s));}else if(typeof e[n]=="object"){let i=e[n];o.push({validate:{...m,[n]:l=>i.validation(l)||i.message&&(typeof i.message=="string"?i.message:i.message(r))}});}})),Object.assign({},...o)}var me=(e,r,t,p,o,n,m)=>{let f=[],{validationMessage:i}=ae(),{required:l,minLength:s,maxLength:c,min:d,max:y,email:x,match:A,diff:g,pattern:u}=i||{},h={required:a=>{if(!r)return  true;let U=l?l(t):`${t} is required`;return typeof a=="string"&&!a.trim()||a==null?U:true},minLength:{value:r,message:s?s(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:c?c(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:d?d(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:y?y(t,r):`${t} should be at most ${r}`},regexp:(a="")=>a?new RegExp(r.regexp).test(a)||`${t} ${r.message}`:true,email:(a="")=>!r||!a?true:tr.test(a)||(x?x(t):`${t} must be type email`),match:(a="")=>a?a===(o&&o(r))||(A?A(t,m||labelFormatter.changeAll(r)):`${t} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(a="")=>a?a!==(o&&o(r))||(g?g(t,m||labelFormatter.changeAll(r)):`${t} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(a="")=>!!a&&new RegExp("^[A-Za-z ]*$").test(a)||(u?.alphabet?u?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(a="")=>!!a&&new RegExp("^[A-Za-z0-9 ]*$").test(a)||(u?.alphanumber?u?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(a="")=>!!a&&new RegExp("^[0-9]*$").test(a)||(u?.number?u?.number(t):`${t} must be format Number`),lowercase:(a="")=>!!a&&new RegExp("^[a-z0-9 ]*$").test(a)||(u?.lowercase?u?.lowercase(t):`${t} must be format Lowercase`),url:(a="")=>!!a&&/^(ftp|http|https):\/\/[^ "]+$/.test(a)||(u?.url?u?.url(t):`${t} must be a valid URL`),uppercase:(a="")=>!!a&&new RegExp("^[A-Z0-9 ]*$").test(a)||(u?.uppercase?u?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(a="")=>!!a&&/[a-z]/.test(a)&&/[A-Z]/.test(a)||(u?.mixedcase?u?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(a="")=>!!a&&/[^a-zA-Z0-9\s]/.test(a)||(u?.specialcharacters?u?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(h){let{validate:a}=f.find(U=>U.validate)||{};typeof h=="function"?f.push({validate:{...a,...n,[e]:h}}):e==="pattern"?f.push({validate:{...a,...n,[`${e}${r}`]:h[r]}}):f.push({[e]:h});}return f};var $t=e=>{let r=useMemo(()=>generateUUID(),[]),t=b(),{registerItem:p,unregisterItem:o,control:n,disabled:m,readOnly:f,formId:i,setSelected:l,useSelected:s,onFieldChange:c}=t,{name:d,formId:y,...x}=K(),{name:A,formId:g}=G(),u=useMemo(()=>{let T=e.dataField;return e.disabledHierarchy||(A&&i===g&&(T=`${A}${T}`),d&&i===y&&(T=`${d}${T}`)),T},[A,i,g,e.dataField,d,y,e.disabledHierarchy]),F=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(u)},[e.label,e.noLabel,u]);useEffect(()=>(p({id:r,...e,dataField:u,label:F}),()=>{o(r);}),[r,e,u,F]);let h=false;typeof e.disabled=="boolean"?h=e.disabled:typeof x.disabled=="boolean"?h=x.disabled:h=!!m;let a=false;typeof e.readOnly=="boolean"?a=e.readOnly:typeof x.readOnly=="boolean"?a=x.readOnly:a=!!f;let U=false;typeof e.hidden=="boolean"&&(U=e.hidden);let R=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?R={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?R={email:true,required:e.required}:typeof e.validationRules=="object"&&(R={...e.validationRules,required:e.required}));let le=h||a||U?{required:false}:N({...e,validationRules:R,label:F}),I=useController({name:u,control:n,disabled:h,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:le}),de=I.fieldState.invalid,ue=I.fieldState.error?.message,fe=useWatch({name:u,control:n,defaultValue:e.defaultValue}),ce=useMemo(()=>debounce(T=>l(ye=>({...ye,[u]:T||null}))),[l,u]),pe=s(u),ge=R?.required;return {...e,setSelectedField:ce,label:F,dataField:u,controller:I,invalid:de,messageError:ue,selectedField:pe,value:fe,required:ge,onChange:T=>{I.field.onChange(T),c?.(u,T,t);}}};var Ot=()=>{let{formControl:e,items:r}=b(),t=(o,n,m,f=0)=>{let i=[];if(Array.isArray(m))m.forEach((l,s)=>{let c=Object.entries(l||{}).map(([d,y])=>t(`${o}.${s}.${d}`,`${n}[]${d}`,y,m.length>1?s+1:0)).flat();i=[...i,...c];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([l,s])=>{let c=t(`${o}.${l}`,`${o}.${l}`,s);i=[...i,...c];});else {let l=m?.message||"",s=r.find(c=>c.dataField===n)?.label;i.push({label:`${s||""}${f>0?` ${f}`:""}`,message:l,dataField:o});}return i};return Object.entries(e.formState.errors||{}).map(([o,n])=>t(o,o,n)).flat()};var lr=(i=>(i.alphabet="alphabet",i.alphaNumber="alphanumber",i.number="number",i.lowercase="lowercase",i.url="url",i.uppercase="uppercase",i.mixedCase="mixedcase",i.specialCharacters="specialcharacters",i))(lr||{});var Kt=J;export{He as BgsFormArray,_e as BgsFormGroup,ie as BgsReactFormProvider,lr as PatternTypeEnum,Kt as default,$t as useBgsController,b as useBgsForm,G as useBgsFormArray,_ as useBgsFormArrayInit,K as useBgsFormGroup,z as useBgsFormInit,Ot as useSummaryValidation};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bgscore/react-form",
-    "version": "1.0.13",
+    "version": "1.0.14",
     "description": "React form component library using context and react-hook-form with dynamic arrays, groups, and validations.",
     "main": "dist/index.cjs",
     "module": "dist/index.js",
@@ -28,7 +28,7 @@
     "author": "Andry Bagus Dharmawan",
     "license": "MIT",
     "peerDependencies": {
-        "@bgscore/react-core": ">=0.0.11",
+        "@bgscore/react-core": ">=1.0.17",
         "react": ">=17.0.0",
         "react-dom": ">=17.0.0"
     },