ynotsoft-dynamic-form 1.0.38 → 1.0.39

package/dist/dynamic-form.js

@@ -8223,12 +8223,15 @@ const Md = ({
     const B = {};
     o.fields.forEach((D) => {
       const $ = typeof D.disabled == "function" ? D.disabled(c) : !!D.disabled;
-      if ((!D.showIf || D.showIf(c)) && // 2. Use the safely calculated state
-      !$) {
+      if (
+        // Check if the field is shown
+        (!D.showIf || D.showIf(c)) && // Check if the field is NOT disabled
+        !$
+      ) {
         const z = x(D, c[D.name], c);
         z && (B[D.name] = z);
       }
-    }), m(B);
+    }), m(B), m(B);
   }, P = (E) => {
     h({ ...g, [E]: !0 });
   }, k = (E) => {

package/dist/dynamic-form.umd.cjs

@@ -87,4 +87,4 @@
                   `,children:"AM"}),l.jsx("button",{type:"button",onClick:()=>g("PM"),className:`
                     px-3 py-1 text-sm font-medium rounded
                     ${m==="PM"?"bg-blue-600 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200"}
-                  `,children:"PM"})]})]}),l.jsxs("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 pt-3",children:[l.jsx("button",{type:"button",onClick:p,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),l.jsx("button",{type:"button",onClick:b,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})})]}),r&&l.jsx("p",{className:"mt-1 text-sm text-red-500",children:r})]})}function au({message:e}){return l.jsx("div",{className:"rounded-lg bg-red-50 border border-red-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(el,{"aria-hidden":"true",className:"size-5 text-red-500 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-red-900",children:e})]})})}function iu({message:e}){return l.jsx("div",{className:"rounded-lg bg-amber-50 border border-amber-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(Qc,{"aria-hidden":"true",className:"size-5 text-amber-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-amber-900",children:e})]})})}function cu({message:e}){return l.jsx("div",{className:"rounded-lg bg-green-50 border border-green-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(Jc,{"aria-hidden":"true",className:"size-5 text-green-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-green-900",children:e})]})})}function lu({message:e}){return l.jsx("div",{className:"rounded-lg bg-blue-50 border border-blue-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(ol,{"aria-hidden":"true",className:"size-5 text-blue-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-blue-900",children:e})]})})}function du({field:e}){const{variant:t="info",message:o,content:n}=e,r=o||n||"";switch(t.toLowerCase()){case"error":case"danger":return l.jsx(au,{message:r});case"success":return l.jsx(cu,{message:r});case"warning":case"warn":return l.jsx(iu,{message:r});case"info":case"information":default:return l.jsx(lu,{message:r})}}const Ps=({apiClient:e,api_URL:t,footerMode:o="normal",formDefinition:n,sendFormValues:r,children:s,defaultValues:a={},onFieldsChange:i=()=>{}})=>{const[c,d]=V.useState({...a}),[f,m]=V.useState({}),[g,h]=V.useState({}),[b,p]=V.useState({}),v=["hidden","html","linebreak","header","alert"],y=V.useMemo(()=>({file:rs,multifile:rs,dateRange:fd,date:ru,dayTimePicker:md,time:su,hidden:Os,multiselect:Is,select:nl,email:rl,litertext:sl,checkbox:al,radiogroup:ou,input:Or,textarea:pd,header:nu,alert:du,linebreak:Od}),[]),w=async(E,O=null)=>{if(!e){const I=`apiClient prop is required when using fields with optionsUrl. Field "${E.name}" requires optionsUrl but no apiClient was provided.`;console.error(I),st.toast.error(I);return}try{const I=await e(`/${E.optionsUrl}`);let L=[];E.type==="select"?L=[{value:"",label:`Select ${E.label.toLowerCase()}`},...I.data]:L=[...I.data.map(R=>({value:R.value,label:R.label}))],n.fields.forEach(R=>{R.name===E.name&&(R.options=L)})}catch(I){console.error(`Failed to load options for ${E.name}:`,I)}finally{}};V.useEffect(()=>{if(n?.fields&&n.fields.length>0){if(!n.fields.some(I=>I.value))return;n.fields.forEach(I=>{I.optionsUrl&&w(I)});const O={};n.fields.forEach(I=>{O[I.name]=a[I.name]??I.value??(I.type==="multiselect"?[]:"")}),d(O)}},[n]);const x=(E,O,I)=>{if(typeof E.disabled=="function"&&E.disabled(I)||E.disabled===!0)return null;const L=typeof O=="object"&&O!==null&&!Array.isArray(O)&&!(O instanceof Date),R=O==null||typeof O=="string"&&O.trim()===""||Array.isArray(O)&&O.length===0||E.type==="checkbox"&&O===!1||L&&Object.keys(O).length===0;if(E.required&&R)return`${E.label} is required`;if(R&&!E.required)return null;if(E.validate){const D=E.validate(O,I);if(D)return D}if(E.type==="email"&&O&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(O))return"Please enter a valid email address";if(E.type==="number"){if(E.min!==void 0&&O<E.min)return`${E.label} must be at least ${E.min}`;if(E.max!==void 0&&O>E.max)return`${E.label} must be no more than ${E.max}`}return E.type==="date"&&O&&!Do(O).isValid()?`${E.label} must be a valid date`:E.maxLength&&O&&O.length>E.maxLength?`${E.label} must not exceed ${E.maxLength} characters`:null},S=(E,O)=>{const I=n.fields.find(D=>D.name===E);if(!I)return;const L={...c};I.type==="multiselect"?L[E]=Array.isArray(O)?O:Array.from(O.target.selectedOptions).map(D=>D.value):I.type==="dateRange"?L[E]=[{startDate:O[0].from,endDate:O[0].to,key:"selection"}]:I.type==="dayTimePicker"?L[E]=O?Do(O).format("YYYY-MM-DD HH:mm:ss"):"":L[E]=O,I.type==="select"&&n.fields.forEach(D=>{D.showIf&&!D.showIf(L)&&(L[D.name]=D.type==="multiselect"?[]:"")}),n.fields.forEach(D=>{typeof D.disabled=="function"&&D.disabled(L)&&(L[D.name]=D.type==="multiselect"?[]:"")}),d(L);const R={};n.fields.forEach(D=>{const $=typeof D.disabled=="function"?D.disabled(c):!!D.disabled;if((!D.showIf||D.showIf(c))&&!$){const B=x(D,c[D.name],c);B&&(R[D.name]=B)}}),m(R)},N=E=>{h({...g,[E]:!0})},P=E=>{E.preventDefault();const O={};n.fields.forEach(L=>{O[L.name]=!0}),h(O);const I={};n.fields.forEach(L=>{if((!L.showIf||L.showIf(c))&&(!L.disabled||!L.disabled(c))){const R=x(L,c[L.name],c);R&&(I[L.name]=R)}}),m(I),Object.keys(I).length===0?r(c):st.toast.error("Please correct the errors in the form")};V.useEffect(()=>{i(c)},[c,i]);const k={green:"border-green-500 bg-green-50",blue:"border-blue-500 bg-blue-50",red:"border-red-500 bg-red-50",yellow:"border-yellow-500 bg-yellow-50",purple:"border-purple-500 bg-purple-50",indigo:"border-indigo-500 bg-indigo-50",gray:"border-gray-500 bg-gray-50",pink:"border-pink-500 bg-pink-50",orange:"border-orange-500 bg-orange-50"};function C(E,O,I){if(v.includes(O.type))return l.jsx("div",{className:O.fieldClass||"col-span-full",children:E});const L=O.containerStyle,R=O.color||"blue",D=L==="card"?`rounded-lg border text-card-foreground shadow-sm p-4 ${O.containerClassName||k[R]||k.blue}`:"",$=l.jsxs(l.Fragment,{children:[O.label&&l.jsxs("label",{htmlFor:O.name,className:"block text-sm font-medium mb-1",children:[O.label,O.required&&l.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),l.jsx("div",{children:E})]});return l.jsx("div",{className:`mb-4 ${O.fieldClass||"col-span-8"}`,children:L==="card"?l.jsx("div",{className:D,children:$}):$})}const F=E=>{if(E.showIf&&!E.showIf(c))return null;const O=y[E.type]||Or;c[E.name]===void 0&&(c[E.name]=E.value!==void 0?E.value:E.type==="multiselect"?[]:"");const I=g[E.name]&&f[E.name]?f[E.name]:null;return C(l.jsx(O,{field:E,formValues:c,handleChange:S,handleBlur:()=>N(E.name),setCharCounts:p,charCount:b[E.name]||0,api_URL:t,error:I}),E)};return l.jsxs("form",{onSubmit:P,className:"grid grid-cols-12 gap-x-4 mx-auto w-full  ",children:[n?n.fields.map(E=>l.jsx("div",{className:"col-span-full",children:F(E)},E.name)):l.jsx("div",{children:"Loading..."}),l.jsx("div",{className:o==="sticky"?"absolute col-span-full w-full bottom-0  bg-white py-4 flex justify-end gap-2 z-50":"col-span-full mt-4 flex justify-end gap-2",children:s})]})};oe.DynamicForm=Ps,oe.default=Ps,Object.defineProperties(oe,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+                  `,children:"PM"})]})]}),l.jsxs("div",{className:"flex items-center justify-between gap-2 border-t border-gray-200 pt-3",children:[l.jsx("button",{type:"button",onClick:p,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-4 py-2",children:"Clear"}),l.jsx("button",{type:"button",onClick:b,className:"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue-600 text-white hover:bg-blue-700 h-9 px-4 py-2",children:"Done"})]})]})})]}),r&&l.jsx("p",{className:"mt-1 text-sm text-red-500",children:r})]})}function au({message:e}){return l.jsx("div",{className:"rounded-lg bg-red-50 border border-red-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(el,{"aria-hidden":"true",className:"size-5 text-red-500 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-red-900",children:e})]})})}function iu({message:e}){return l.jsx("div",{className:"rounded-lg bg-amber-50 border border-amber-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(Qc,{"aria-hidden":"true",className:"size-5 text-amber-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-amber-900",children:e})]})})}function cu({message:e}){return l.jsx("div",{className:"rounded-lg bg-green-50 border border-green-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(Jc,{"aria-hidden":"true",className:"size-5 text-green-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-green-900",children:e})]})})}function lu({message:e}){return l.jsx("div",{className:"rounded-lg bg-blue-50 border border-blue-100 p-4 shadow-sm",children:l.jsxs("div",{className:"flex items-center gap-3",children:[l.jsx(ol,{"aria-hidden":"true",className:"size-5 text-blue-600 shrink-0"}),l.jsx("span",{className:"text-sm font-medium text-blue-900",children:e})]})})}function du({field:e}){const{variant:t="info",message:o,content:n}=e,r=o||n||"";switch(t.toLowerCase()){case"error":case"danger":return l.jsx(au,{message:r});case"success":return l.jsx(cu,{message:r});case"warning":case"warn":return l.jsx(iu,{message:r});case"info":case"information":default:return l.jsx(lu,{message:r})}}const Ps=({apiClient:e,api_URL:t,footerMode:o="normal",formDefinition:n,sendFormValues:r,children:s,defaultValues:a={},onFieldsChange:i=()=>{}})=>{const[c,d]=V.useState({...a}),[f,m]=V.useState({}),[g,h]=V.useState({}),[b,p]=V.useState({}),v=["hidden","html","linebreak","header","alert"],y=V.useMemo(()=>({file:rs,multifile:rs,dateRange:fd,date:ru,dayTimePicker:md,time:su,hidden:Os,multiselect:Is,select:nl,email:rl,litertext:sl,checkbox:al,radiogroup:ou,input:Or,textarea:pd,header:nu,alert:du,linebreak:Od}),[]),w=async(E,O=null)=>{if(!e){const I=`apiClient prop is required when using fields with optionsUrl. Field "${E.name}" requires optionsUrl but no apiClient was provided.`;console.error(I),st.toast.error(I);return}try{const I=await e(`/${E.optionsUrl}`);let L=[];E.type==="select"?L=[{value:"",label:`Select ${E.label.toLowerCase()}`},...I.data]:L=[...I.data.map(R=>({value:R.value,label:R.label}))],n.fields.forEach(R=>{R.name===E.name&&(R.options=L)})}catch(I){console.error(`Failed to load options for ${E.name}:`,I)}finally{}};V.useEffect(()=>{if(n?.fields&&n.fields.length>0){if(!n.fields.some(I=>I.value))return;n.fields.forEach(I=>{I.optionsUrl&&w(I)});const O={};n.fields.forEach(I=>{O[I.name]=a[I.name]??I.value??(I.type==="multiselect"?[]:"")}),d(O)}},[n]);const x=(E,O,I)=>{if(typeof E.disabled=="function"&&E.disabled(I)||E.disabled===!0)return null;const L=typeof O=="object"&&O!==null&&!Array.isArray(O)&&!(O instanceof Date),R=O==null||typeof O=="string"&&O.trim()===""||Array.isArray(O)&&O.length===0||E.type==="checkbox"&&O===!1||L&&Object.keys(O).length===0;if(E.required&&R)return`${E.label} is required`;if(R&&!E.required)return null;if(E.validate){const D=E.validate(O,I);if(D)return D}if(E.type==="email"&&O&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(O))return"Please enter a valid email address";if(E.type==="number"){if(E.min!==void 0&&O<E.min)return`${E.label} must be at least ${E.min}`;if(E.max!==void 0&&O>E.max)return`${E.label} must be no more than ${E.max}`}return E.type==="date"&&O&&!Do(O).isValid()?`${E.label} must be a valid date`:E.maxLength&&O&&O.length>E.maxLength?`${E.label} must not exceed ${E.maxLength} characters`:null},S=(E,O)=>{const I=n.fields.find(D=>D.name===E);if(!I)return;const L={...c};I.type==="multiselect"?L[E]=Array.isArray(O)?O:Array.from(O.target.selectedOptions).map(D=>D.value):I.type==="dateRange"?L[E]=[{startDate:O[0].from,endDate:O[0].to,key:"selection"}]:I.type==="dayTimePicker"?L[E]=O?Do(O).format("YYYY-MM-DD HH:mm:ss"):"":L[E]=O,I.type==="select"&&n.fields.forEach(D=>{D.showIf&&!D.showIf(L)&&(L[D.name]=D.type==="multiselect"?[]:"")}),n.fields.forEach(D=>{typeof D.disabled=="function"&&D.disabled(L)&&(L[D.name]=D.type==="multiselect"?[]:"")}),d(L);const R={};n.fields.forEach(D=>{const $=typeof D.disabled=="function"?D.disabled(c):!!D.disabled;if((!D.showIf||D.showIf(c))&&!$){const B=x(D,c[D.name],c);B&&(R[D.name]=B)}}),m(R),m(R)},N=E=>{h({...g,[E]:!0})},P=E=>{E.preventDefault();const O={};n.fields.forEach(L=>{O[L.name]=!0}),h(O);const I={};n.fields.forEach(L=>{if((!L.showIf||L.showIf(c))&&(!L.disabled||!L.disabled(c))){const R=x(L,c[L.name],c);R&&(I[L.name]=R)}}),m(I),Object.keys(I).length===0?r(c):st.toast.error("Please correct the errors in the form")};V.useEffect(()=>{i(c)},[c,i]);const k={green:"border-green-500 bg-green-50",blue:"border-blue-500 bg-blue-50",red:"border-red-500 bg-red-50",yellow:"border-yellow-500 bg-yellow-50",purple:"border-purple-500 bg-purple-50",indigo:"border-indigo-500 bg-indigo-50",gray:"border-gray-500 bg-gray-50",pink:"border-pink-500 bg-pink-50",orange:"border-orange-500 bg-orange-50"};function C(E,O,I){if(v.includes(O.type))return l.jsx("div",{className:O.fieldClass||"col-span-full",children:E});const L=O.containerStyle,R=O.color||"blue",D=L==="card"?`rounded-lg border text-card-foreground shadow-sm p-4 ${O.containerClassName||k[R]||k.blue}`:"",$=l.jsxs(l.Fragment,{children:[O.label&&l.jsxs("label",{htmlFor:O.name,className:"block text-sm font-medium mb-1",children:[O.label,O.required&&l.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),l.jsx("div",{children:E})]});return l.jsx("div",{className:`mb-4 ${O.fieldClass||"col-span-8"}`,children:L==="card"?l.jsx("div",{className:D,children:$}):$})}const F=E=>{if(E.showIf&&!E.showIf(c))return null;const O=y[E.type]||Or;c[E.name]===void 0&&(c[E.name]=E.value!==void 0?E.value:E.type==="multiselect"?[]:"");const I=g[E.name]&&f[E.name]?f[E.name]:null;return C(l.jsx(O,{field:E,formValues:c,handleChange:S,handleBlur:()=>N(E.name),setCharCounts:p,charCount:b[E.name]||0,api_URL:t,error:I}),E)};return l.jsxs("form",{onSubmit:P,className:"grid grid-cols-12 gap-x-4 mx-auto w-full  ",children:[n?n.fields.map(E=>l.jsx("div",{className:"col-span-full",children:F(E)},E.name)):l.jsx("div",{children:"Loading..."}),l.jsx("div",{className:o==="sticky"?"absolute col-span-full w-full bottom-0  bg-white py-4 flex justify-end gap-2 z-50":"col-span-full mt-4 flex justify-end gap-2",children:s})]})};oe.DynamicForm=Ps,oe.default=Ps,Object.defineProperties(oe,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ynotsoft-dynamic-form",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "DynamicForm React component library",
   "type": "module",
   "main": "./dist/dynamic-form.umd.cjs",