@bgscore/react-form 1.0.7 → 1.0.8

package/dist/index.cjs

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

package/dist/index.d.cts

@@ -30,12 +30,14 @@ type FormProps<T = unknown> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "o
     controller?: UseFormInitReturn<T> | UseFormInitReturn<T>[];
     onSubmit?: OnSubmit<T>;
     onChange?: OnChange<T>;
+    onFieldChange?: OnFieldChange<T>;
     onInvalid?: (errors: FieldErrors) => void;
 };
 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"> {
     reset: (field?: string | string[]) => void;
@@ -66,6 +68,7 @@ type UseBgsForm<T = unknown> = UseFormInitReturn<T> & {
     unregisterItem: (id: string) => void;
     items: ControllerWithKey[];
     triggerSubmit: TriggerSubmit<T>;
+    onFieldChange: OnFieldChange<T>;
 };
 interface ControllerProps {
     dataField: string;
@@ -211,4 +214,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 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 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

@@ -30,12 +30,14 @@ type FormProps<T = unknown> = Omit<React.FormHTMLAttributes<HTMLFormElement>, "o
     controller?: UseFormInitReturn<T> | UseFormInitReturn<T>[];
     onSubmit?: OnSubmit<T>;
     onChange?: OnChange<T>;
+    onFieldChange?: OnFieldChange<T>;
     onInvalid?: (errors: FieldErrors) => void;
 };
 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"> {
     reset: (field?: string | string[]) => void;
@@ -66,6 +68,7 @@ type UseBgsForm<T = unknown> = UseFormInitReturn<T> & {
     unregisterItem: (id: string) => void;
     items: ControllerWithKey[];
     triggerSubmit: TriggerSubmit<T>;
+    onFieldChange: OnFieldChange<T>;
 };
 interface ControllerProps {
     dataField: string;
@@ -211,4 +214,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 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 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 Z,{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 k=createContext(void 0);function F(){let e=useContext(k);return e||{}}function $({children:e,controller:r,onSubmit:o}){let l=useRef([]),a=useCallback(t=>{let c=l.current.findIndex(d=>d.id===t.id);if(c>-1){let d=[...l.current];d[c]=t,l.current=[...d];}else l.current.push(t);},[l]),n=useCallback(t=>{l.current=l.current.filter(c=>c.id!==t);},[]),m=async(t,c)=>{r.setIsSubmit(true);let d=c?await r.formControl.trigger():true,i=r.getData();d&&o&&o({...i,...t},{...r});},u={...r,registerItem:a,unregisterItem:n,items:l.current,triggerSubmit:m};return jsx(k.Provider,{value:u,children:e})}var v=new WeakMap;function M(e){return v.has(e)||v.set(e,createStore({})),v.get(e)}function A(e){if(typeof e!="object"||e===null||Array.isArray(e))return e;let r={};for(let[o,l]of Object.entries(e))if(o.includes(".")){let a=o.split("."),n=r;for(let m=0;m<a.length;m++){let u=a[m];m===a.length-1?n[u]=A(l):((!n[u]||typeof n[u]!="object")&&(n[u]={}),n=n[u]);}}else r[o]=A(l);return r}var K=(e,r)=>{e||(e={}),e=A(e);let o=useRef(null),[l,a]=useState(false),n=useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),m=M(n),u=useMemo(()=>generateUUID(),[]),t=i=>i?getFieldValue(mappingUndefinedtoNull(n.getValues()),i):mappingUndefinedtoNull(n.getValues()),d={...n,ref:o,reset:i=>{i?typeof i=="string"?n.resetField(i,{}):typeof i=="object"&&isArray(i,0)&&i.forEach(p=>n.resetField(p)):n.reset();},updateData:i=>{let p=t();n.reset(A({...p,...i}));},getData:t,formControl:n,useFieldArray:i=>useFieldArray({control:n.control,name:i}),useWatch:i=>useWatch({control:n.control,name:i}),isSubmit:l,formId:u,setIsSubmit:a,useSelected:i=>m.useStore(p=>getFieldValue(p,i)),setSelected:m.setState};return [d,d]};var Ie=({onSubmit:e,onChange:r,onInvalid:o,formData:l,controller:a,children:n,...m})=>{l&&(l=A(l));let u=a??K(),[t]=Array.isArray(u)?u:[u],c=useRef(void 0),d=async i=>{i.preventDefault(),i.stopPropagation(),t.setIsSubmit(true);let p=await t.formControl.trigger(),y=t.getData();p?e&&e({...y},{...t}):o&&o(t.formControl.formState.errors);};return useEffect(()=>{l&&diffJson(c.current||{},l)&&(t.formControl.reset(l),c.current=l);},[l,t.formControl.reset]),useEffect(()=>{if(!r)return;let i=t.formControl.watch((p,y)=>r(p,y,t));return ()=>i.unsubscribe()},[]),jsx(Fragment,{children:jsx($,{controller:{...t,disabled:m?.disabled,readOnly:m?.readOnly},onSubmit:e,children:jsx("form",{...m,id:t.formId,ref:t.ref,onSubmit:d,children:n})})})},H=Ie;var z=createContext(void 0);function B(){let e=useContext(z);return e||{}}function O({children:e,...r}){return jsx(z.Provider,{value:r,children:e})}var j=e=>{let r=F(),o=useFieldArray({control:r.control,name:e}),a={formArrayId:useMemo(()=>generateUUID(),[]),...o,...r};return [a,a]};var V=({name:e,defaultData:r,controller:o,children:l})=>{let a=o??j(e),[n]=Array.isArray(a)?a:[a];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,u)=>{let t=`${e}.${u}.`,c={...n,index:u,fieldId:m.id,name:t,countFields:n.fields.length,removeItem:()=>n.remove(u),watchItem:d=>n.watch(d?`${t}${d}`:t.slice(0,-1)),setValueItem:(d,i)=>n.setValue(`${t}${d}`,i),useSelectedItem:d=>n.useSelected(`${t}${d}`)};return jsx(Z.Fragment,{children:jsx(O,{...c,children:renderChildren(l,c)})},m.id)})})};V.displayName="BgsFormArray";var We=V;Z.memo(({children:e,props:r})=>jsx(Fragment,{children:renderChildren(e,r)}));var _=createContext(void 0);function G(){let e=useContext(_);return e||{}}function W({children:e,...r}){return jsx(_.Provider,{value:r,children:e})}var Y=({children:e,...r})=>{let o=F(),l=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(W,{...o,...r,formGroupId:l,children:e})})};Y.displayName="BgsFormGroup";var qe=Y;var ee=createContext(void 0);function re(){let e=useContext(ee);return e||{}}function te({children:e,...r}){return jsx(ee.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 E({validationRules:e,label:r}){let{formControl:o,getData:l}=F(),a=[];return e&&(typeof e=="string"?oe(e,true,r,o,l,{}).forEach(n=>a.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:m}=a.find(t=>t.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let t=e[n],c="";["match","diff"].includes(n)&&typeof t=="object"&&(t=e[n].dataField,c=e[n].label),t!=null&&oe(n,t,r,o,l,m,c).forEach(d=>a.push(d));}else if(typeof e[n]=="object"){let t=e[n];a.push({validate:{...m,[n]:c=>t.validation(c)||t.message&&(typeof t.message=="string"?t.message:t.message(r))}});}})),Object.assign({},...a)}var oe=(e,r,o,l,a,n,m)=>{let u=[],{validationMessage:t}=re(),{required:c,minLength:d,maxLength:i,min:p,max:y,email:T,match:g,diff:b,pattern:f}=t||{},h={required:s=>{if(!r)return  true;let U=c?c(o):`${o} is required`;return typeof s=="string"&&!s.trim()||s==null?U:true},minLength:{value:r,message:d?d(o,r):`${o} must be at least ${r} characters long`},maxLength:{value:r,message:i?i(o,r):`${o} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(o,r):`${o} should be at least ${r}`},max:{value:Number(r),message:y?y(o,r):`${o} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${o} ${r.message}`:true,email:(s="")=>!r||!s?true:je.test(s)||(T?T(o):`${o} must be type email`),match:(s="")=>s?s===(a&&a(r))||(g?g(o,m||labelFormatter.changeAll(r)):`${o} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(a&&a(r))||(b?b(o,m||labelFormatter.changeAll(r)):`${o} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(f?.alphabet?f?.alphabet(o):`${o} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(f?.alphanumber?f?.alphanumber(o):`${o} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(f?.number?f?.number(o):`${o} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(f?.lowercase?f?.lowercase(o):`${o} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(f?.url?f?.url(o):`${o} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(f?.uppercase?f?.uppercase(o):`${o} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(f?.mixedcase?f?.mixedcase(o):`${o} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(f?.specialcharacters?f?.specialcharacters(o):`${o} must contain special characters`)}}[e];if(h){let{validate:s}=u.find(U=>U.validate)||{};typeof h=="function"?u.push({validate:{...s,...n,[e]:h}}):e==="pattern"?u.push({validate:{...s,...n,[`${e}${r}`]:h[r]}}):u.push({[e]:h});}return u};var ct=e=>{let r=useMemo(()=>generateUUID(),[]),{registerItem:o,unregisterItem:l,control:a,disabled:n,readOnly:m,formId:u,setSelected:t,useSelected:c}=F(),{name:d,formId:i,...p}=G(),{name:y,formId:T}=B(),g=useMemo(()=>{let x=e.dataField;return e.disabledHierarchy||(y&&u===T&&(x=`${y}${x}`),d&&u===i&&(x=`${d}${x}`)),x},[y,u,T,e.dataField,d,i,e.disabledHierarchy]),b=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(g)},[e.label,e.noLabel,g]);useEffect(()=>(o({id:r,...e,dataField:g,label:b}),()=>{l(r);}),[r,e,g,b]);let f=false;typeof e.disabled=="boolean"?f=e.disabled:typeof p.disabled=="boolean"?f=p.disabled:f=!!n;let R=false;typeof e.readOnly=="boolean"?R=e.readOnly:typeof p.readOnly=="boolean"?R=p.readOnly:R=!!m;let h=false;typeof e.hidden=="boolean"&&(h=e.hidden);let s=e.validationRules;typeof e.required=="boolean"&&(typeof e.validationRules>"u"?s={required:e.required}:typeof e.validationRules=="string"&&e.validationRules==="email"?s={email:true,required:e.required}:typeof e.validationRules=="object"&&(s={...e.validationRules,required:e.required}));let U=f||R||h?{required:false}:E({...e,validationRules:s,label:b}),P=useController({name:g,control:a,disabled:f,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:U}),ne=P.fieldState.invalid,se=P.fieldState.error?.message,ie=useWatch({name:g,control:a,defaultValue:e.defaultValue}),ae=useMemo(()=>debounce(x=>t(de=>({...de,[g]:x||null}))),[t,g]),me=c(g),le=s?.required;return {...e,setSelectedField:ae,label:b,dataField:g,controller:P,invalid:ne,messageError:se,selectedField:me,value:ie,required:le}};var gt=()=>{let{formControl:e,items:r}=F(),o=(a,n,m,u=0)=>{let t=[];if(Array.isArray(m))m.forEach((c,d)=>{let i=Object.entries(c||{}).map(([p,y])=>o(`${a}.${d}.${p}`,`${n}[]${p}`,y,m.length>1?d+1:0)).flat();t=[...t,...i];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([c,d])=>{let i=o(`${a}.${c}`,`${a}.${c}`,d);t=[...t,...i];});else {let c=m?.message||"",d=r.find(i=>i.dataField===n)?.label;t.push({label:`${d||""}${u>0?` ${u}`:""}`,message:c,dataField:a});}return t};return Object.entries(e.formState.errors||{}).map(([a,n])=>o(a,a,n)).flat()};var Ye=(t=>(t.alphabet="alphabet",t.alphaNumber="alphanumber",t.number="number",t.lowercase="lowercase",t.url="url",t.uppercase="uppercase",t.mixedCase="mixedcase",t.specialCharacters="specialcharacters",t))(Ye||{});var bt=H;export{We as BgsFormArray,qe as BgsFormGroup,te as BgsReactFormProvider,Ye as PatternTypeEnum,bt as default,ct as useBgsController,F as useBgsForm,B as useBgsFormArray,j as useBgsFormArrayInit,G as useBgsFormGroup,K as useBgsFormInit,gt as useSummaryValidation};
+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 F(){let e=useContext(M);return e||{}}function v({children:e,controller:r,onSubmit:t,onFieldChange:f=()=>{}}){let i=useRef([]),n=useCallback(l=>{let d=i.current.findIndex(a=>a.id===l.id);if(d>-1){let a=[...i.current];a[d]=l,i.current=[...a];}else i.current.push(l);},[i]),m=useCallback(l=>{i.current=i.current.filter(d=>d.id!==l);},[]),u=async(l,d)=>{r.setIsSubmit(true);let a=d?await r.formControl.trigger():true,p=r.getData();a&&t&&t({...p,...l},{...r});},o={...r,registerItem:n,unregisterItem:m,items:i.current,triggerSubmit:u,onFieldChange:f};return jsx(M.Provider,{value:o,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,f]of Object.entries(e))if(t.includes(".")){let i=t.split("."),n=r;for(let m=0;m<i.length;m++){let u=i[m];m===i.length-1?n[u]=A(f):((!n[u]||typeof n[u]!="object")&&(n[u]={}),n=n[u]);}}else r[t]=A(f);return r}var D=(e,r)=>{e||(e={}),e=A(e);let t=useRef(null),[f,i]=useState(false),n=useForm({...r,reValidateMode:"onSubmit",mode:"all",defaultValues:e}),m=N(n),u=useMemo(()=>generateUUID(),[]),o=a=>a?getFieldValue(mappingUndefinedtoNull(n.getValues()),a):mappingUndefinedtoNull(n.getValues()),d={...n,ref:t,reset:a=>{a?typeof a=="string"?n.resetField(a,{}):typeof a=="object"&&isArray(a,0)&&a.forEach(p=>n.resetField(p)):n.reset();},updateData:a=>{let p=o();n.reset(A({...p,...a}));},getData:o,formControl:n,useFieldArray:a=>useFieldArray({control:n.control,name:a}),useWatch:a=>useWatch({control:n.control,name:a}),isSubmit:f,formId:u,setIsSubmit:i,useSelected:a=>m.useStore(p=>getFieldValue(p,a)),setSelected:m.setState};return [d,d]};var $e=({onSubmit:e,onChange:r,onInvalid:t,formData:f,controller:i,children:n,...m})=>{f&&(f=A(f));let u=i??D(),[o]=Array.isArray(u)?u:[u],l=useRef(void 0),d=async a=>{a.preventDefault(),a.stopPropagation(),o.setIsSubmit(true);let p=await o.formControl.trigger(),g=o.getData();p?e&&e({...g},{...o}):t&&t(o.formControl.formState.errors);};return useEffect(()=>{f&&diffJson(l.current||{},f)&&(o.formControl.reset(f),l.current=f);},[f,o.formControl.reset]),useEffect(()=>{if(!r)return;let a=o.formControl.watch((p,g)=>r(p,g,o));return ()=>a.unsubscribe()},[]),jsx(Fragment,{children:jsx(v,{controller:{...o,disabled:m?.disabled,readOnly:m?.readOnly},onSubmit:e,children:jsx("form",{...m,id:o.formId,ref:o.ref,onSubmit:d,children:n})})})},z=$e;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=F(),t=useFieldArray({control:r.control,name:e}),i={formArrayId:useMemo(()=>generateUUID(),[]),...t,...r};return [i,i]};var X=({name:e,defaultData:r,controller:t,children:f})=>{let i=t??Z(e),[n]=Array.isArray(i)?i:[i];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,u)=>{let o=`${e}.${u}.`,l={...n,index:u,fieldId:m.id,name:o,countFields:n.fields.length,removeItem:()=>n.remove(u),watchItem:d=>n.watch(d?`${o}${d}`:o.slice(0,-1)),setValueItem:(d,a)=>n.setValue(`${o}${d}`,a),useSelectedItem:d=>n.useSelected(`${o}${d}`)};return jsx(J.Fragment,{children:jsx(G,{...l,children:renderChildren(f,l)})},m.id)})})};X.displayName="BgsFormArray";var Le=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=F(),f=useMemo(()=>generateUUID(),[]);return jsx(Fragment,{children:jsx(E,{...t,...r,formGroupId:f,children:e})})};ee.displayName="BgsFormGroup";var He=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 Ve=/^(([^<>()[\]\\.,;:\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:f}=F(),i=[];return e&&(typeof e=="string"?ne(e,true,r,t,f,{}).forEach(n=>i.push(n)):typeof e=="object"&&Object.keys(e).forEach(n=>{let{validate:m}=i.find(o=>o.validate)||{};if(["minLength","maxLength","min","max","match","diff","regexp","pattern","required","email"].includes(n)){let o=e[n],l="";["match","diff"].includes(n)&&typeof o=="object"&&(o=e[n].dataField,l=e[n].label),o!=null&&ne(n,o,r,t,f,m,l).forEach(d=>i.push(d));}else if(typeof e[n]=="object"){let o=e[n];i.push({validate:{...m,[n]:l=>o.validation(l)||o.message&&(typeof o.message=="string"?o.message:o.message(r))}});}})),Object.assign({},...i)}var ne=(e,r,t,f,i,n,m)=>{let u=[],{validationMessage:o}=te(),{required:l,minLength:d,maxLength:a,min:p,max:g,email:b,match:T,diff:U,pattern:c}=o||{},y={required:s=>{if(!r)return  true;let x=l?l(t):`${t} is required`;return typeof s=="string"&&!s.trim()||s==null?x:true},minLength:{value:r,message:d?d(t,r):`${t} must be at least ${r} characters long`},maxLength:{value:r,message:a?a(t,r):`${t} cannot be more than ${r} characters long`},min:{value:Number(r),message:p?p(t,r):`${t} should be at least ${r}`},max:{value:Number(r),message:g?g(t,r):`${t} should be at most ${r}`},regexp:(s="")=>s?new RegExp(r.regexp).test(s)||`${t} ${r.message}`:true,email:(s="")=>!r||!s?true:Ve.test(s)||(b?b(t):`${t} must be type email`),match:(s="")=>s?s===(i&&i(r))||(T?T(t,m||labelFormatter.changeAll(r)):`${t} must be same with ${m||labelFormatter.changeAll(r)}`):true,diff:(s="")=>s?s!==(i&&i(r))||(U?U(t,m||labelFormatter.changeAll(r)):`${t} must be different with ${m||labelFormatter.changeAll(r)}`):true,pattern:{alphabet:(s="")=>!!s&&new RegExp("^[A-Za-z ]*$").test(s)||(c?.alphabet?c?.alphabet(t):`${t} must be format Alphabet`),alphanumber:(s="")=>!!s&&new RegExp("^[A-Za-z0-9 ]*$").test(s)||(c?.alphanumber?c?.alphanumber(t):`${t} must be format Alphabet or Number`),number:(s="")=>!!s&&new RegExp("^[0-9]*$").test(s)||(c?.number?c?.number(t):`${t} must be format Number`),lowercase:(s="")=>!!s&&new RegExp("^[a-z0-9 ]*$").test(s)||(c?.lowercase?c?.lowercase(t):`${t} must be format Lowercase`),url:(s="")=>!!s&&/^(ftp|http|https):\/\/[^ "]+$/.test(s)||(c?.url?c?.url(t):`${t} must be a valid URL`),uppercase:(s="")=>!!s&&new RegExp("^[A-Z0-9 ]*$").test(s)||(c?.uppercase?c?.uppercase(t):`${t} must be format Uppercase`),mixedcase:(s="")=>!!s&&/[a-z]/.test(s)&&/[A-Z]/.test(s)||(c?.mixedcase?c?.mixedcase(t):`${t} must be mixed case`),specialcharacters:(s="")=>!!s&&/[^a-zA-Z0-9\s]/.test(s)||(c?.specialcharacters?c?.specialcharacters(t):`${t} must contain special characters`)}}[e];if(y){let{validate:s}=u.find(x=>x.validate)||{};typeof y=="function"?u.push({validate:{...s,...n,[e]:y}}):e==="pattern"?u.push({validate:{...s,...n,[`${e}${r}`]:y[r]}}):u.push({[e]:y});}return u};var gt=e=>{let r=useMemo(()=>generateUUID(),[]),t=F(),{registerItem:f,unregisterItem:i,control:n,disabled:m,readOnly:u,formId:o,setSelected:l,useSelected:d,onFieldChange:a}=t,{name:p,formId:g,...b}=W(),{name:T,formId:U}=O(),c=useMemo(()=>{let h=e.dataField;return e.disabledHierarchy||(T&&o===U&&(h=`${T}${h}`),p&&o===g&&(h=`${p}${h}`)),h},[T,o,U,e.dataField,p,g,e.disabledHierarchy]),C=useMemo(()=>{if(e.label)return e.label;if(!e.noLabel)return labelFormatter.changeAll(c)},[e.label,e.noLabel,c]);useEffect(()=>(f({id:r,...e,dataField:c,label:C}),()=>{i(r);}),[r,e,c,C]);let y=false;typeof e.disabled=="boolean"?y=e.disabled:typeof b.disabled=="boolean"?y=b.disabled:y=!!m;let s=false;typeof e.readOnly=="boolean"?s=e.readOnly:typeof b.readOnly=="boolean"?s=b.readOnly:s=!!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=y||s||x?{required:false}:k({...e,validationRules:R,label:C}),I=useController({name:c,control:n,disabled:y,defaultValue:e.defaultValue,shouldUnregister:e.shouldUnregister,rules:se}),ie=I.fieldState.invalid,ae=I.fieldState.error?.message,me=useWatch({name:c,control:n,defaultValue:e.defaultValue}),le=useMemo(()=>debounce(h=>l(fe=>({...fe,[c]:h||null}))),[l,c]),de=d(c),ue=R?.required,ce=I.field.onChange;return I.field.onChange=h=>{ce(h),a?.(c,h,t);},{...e,setSelectedField:le,label:C,dataField:c,controller:I,invalid:ie,messageError:ae,selectedField:de,value:me,required:ue}};var ht=()=>{let{formControl:e,items:r}=F(),t=(i,n,m,u=0)=>{let o=[];if(Array.isArray(m))m.forEach((l,d)=>{let a=Object.entries(l||{}).map(([p,g])=>t(`${i}.${d}.${p}`,`${n}[]${p}`,g,m.length>1?d+1:0)).flat();o=[...o,...a];});else if(m&&typeof m=="object"&&!Array.isArray(m)&&!m?.ref)Object.entries(m).map(([l,d])=>{let a=t(`${i}.${l}`,`${i}.${l}`,d);o=[...o,...a];});else {let l=m?.message||"",d=r.find(a=>a.dataField===n)?.label;o.push({label:`${d||""}${u>0?` ${u}`:""}`,message:l,dataField:i});}return o};return Object.entries(e.formState.errors||{}).map(([i,n])=>t(i,i,n)).flat()};var tr=(o=>(o.alphabet="alphabet",o.alphaNumber="alphanumber",o.number="number",o.lowercase="lowercase",o.url="url",o.uppercase="uppercase",o.mixedCase="mixedcase",o.specialCharacters="specialcharacters",o))(tr||{});var Tt=z;export{Le as BgsFormArray,He as BgsFormGroup,oe as BgsReactFormProvider,tr as PatternTypeEnum,Tt as default,gt as useBgsController,F as useBgsForm,O as useBgsFormArray,Z as useBgsFormArrayInit,W as useBgsFormGroup,D as useBgsFormInit,ht as useSummaryValidation};

package/package.json

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