@bgscore/react-form 1.0.16 → 1.0.18

package/dist/index.cjs

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

package/dist/index.d.cts

@@ -194,7 +194,9 @@ type UseFormGroup = FormGroupProps & UseFormInitReturn & {
 };
 declare function useFormGroup(): UseFormGroup;
 
-interface BgsReactFormContextData {
+interface BgsFormProviderProps {
+    dbName?: string;
+    autoSaveDelay?: number;
     validationMessage?: {
         required?: (label: string) => string;
         minLength?: (label: string, value: string) => string;
@@ -216,7 +218,10 @@ interface BgsReactFormContextData {
         };
     };
 }
-declare function BgsReactFormProvider({ children, ...value }: PropsWithChildren<BgsReactFormContextData>): react_jsx_runtime.JSX.Element;
+interface BgsCoreProviderProps {
+    value: BgsFormProviderProps;
+}
+declare function BgsReactFormProvider({ children, value }: PropsWithChildren<BgsCoreProviderProps>): react_jsx_runtime.JSX.Element;
 
 type OptionsInit<T> = Omit<UseFormProps, "defaultValues"> & {
     draftKey?: string;
@@ -235,4 +240,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 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 };
+export { FormArray as BgsFormArray, FormGroup as BgsFormGroup, type BgsFormProviderProps, 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bgscore/react-form",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "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",