@kbgarcia8/react-dynamic-form 1.1.36 → 1.1.37

package/dist/react-dynamic-form.cjs.js

@@ -131,7 +131,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,P=({legend:t,fieldsetIndex:s,idx:o,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(s),e.jsxs(oe,{className:"editable-option-fieldset",children:[e.jsx(se,{children:`${t} ${o+1}`}),i?.map((h,g)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${g}`,name:`editable-option-${g}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":g,"data-fieldsetindex":s,"data-key":h.info}})},`${h.name}-${g}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${o}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}})]})]})),ce=c.div`
+`,P=({legend:t,fieldsetIndex:s,idx:o,editableInformation:i,onChangeOfEditableOption:m,onClickSaveEdit:r,onClickCancelEdit:d,onClickDeleteEntry:b})=>(console.log(s),e.jsxs(oe,{className:"editable-option-fieldset",children:[e.jsxs(se,{children:[`${t} ${o+1}`,`fieldsetIndex: ${s}`]}),i?.map((h,g)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(A,{id:`editable-option-${g}`,name:`editable-option-${g}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:m,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":g,"data-fieldsetindex":s,"data-key":h.info}})},`${h.name}-${g}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${o}-submit`,buttonType:"button",text:"Save",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-cancel`,buttonType:"button",text:"Cancel",onClick:d,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}}),e.jsx(f,{id:`editable-option-${o}-delete`,buttonType:"button",text:"Delete",onClick:b,className:"editable-option-btn",dataAttributes:{"data-index":o,"data-fieldsetindex":s}})]})]})),ce=c.div`
     display: flex;
     justify-content: space-between;
     max-width: 100%;

package/dist/react-dynamic-form.es.js

@@ -83,7 +83,7 @@ const t = {
   text: d = "",
   className: h = "",
   dataAttributes: g = {},
-  ...f
+  ...$
 }) => /* @__PURE__ */ n(
   Z,
   {
@@ -91,7 +91,7 @@ const t = {
     type: o,
     onClick: e,
     className: h,
-    ...f,
+    ...$,
     ...g,
     children: /* @__PURE__ */ u(_, { className: "button-icon-text-space", children: [
       i ? /* @__PURE__ */ n(I, { src: i, alt: r }) : m || "",
@@ -221,7 +221,7 @@ const t = {
       }
     );
   }
-  const f = e, { value: N, pattern: y, placeholderText: C, ...w } = f;
+  const $ = e, { value: N, pattern: y, placeholderText: C, ...w } = $;
   return /* @__PURE__ */ n(
     W,
     {
@@ -247,7 +247,7 @@ const t = {
     $labelFlexDirection: d,
     svg: h,
     labelClass: g,
-    onChange: f,
+    onChange: $,
     isRequired: N,
     dataAttributes: y,
     inputClass: C,
@@ -264,7 +264,7 @@ const t = {
   return /* @__PURE__ */ u(te, { className: `${l} ${i.replace("#", "")}-label-input-container`, children: [
     o !== "radio" && o !== "checkbox" && /* @__PURE__ */ n(B, { htmlFor: i, textLabel: m, additionalInfo: r, $labelFlexDirection: d, svg: h, className: g }),
     o !== "radio" && o !== "checkbox" && o === "textarea" && (() => {
-      const { rows: a = 5, cols: $ = 30, value: s, ...x } = e;
+      const { rows: a = 5, cols: f = 30, value: s, ...x } = e;
       return /* @__PURE__ */ n(
         T,
         {
@@ -272,10 +272,10 @@ const t = {
           name: i,
           type: "textarea",
           isRequired: N,
-          onChange: f,
+          onChange: $,
           value: s,
           rows: a,
-          cols: $,
+          cols: f,
           dataAttributes: y,
           className: C,
           ref: w,
@@ -284,15 +284,15 @@ const t = {
       );
     })(),
     o !== "radio" && o !== "checkbox" && o !== "textarea" && (() => {
-      const a = e, { value: $, pattern: s, placeholderText: x, ...L } = a;
+      const a = e, { value: f, pattern: s, placeholderText: x, ...L } = a;
       return /* @__PURE__ */ n(
         T,
         {
           id: i,
           name: i,
           placeholderText: x,
-          onChange: f,
-          value: $,
+          onChange: $,
+          value: f,
           type: o,
           isRequired: N,
           dataAttributes: y,
@@ -304,7 +304,7 @@ const t = {
       );
     })(),
     (o === "radio" || o === "checkbox") && (() => {
-      const { checked: a, ...$ } = e;
+      const { checked: a, ...f } = e;
       return /* @__PURE__ */ u(R, { children: [
         /* @__PURE__ */ n(
           T,
@@ -315,7 +315,7 @@ const t = {
             id: i,
             isRequired: N,
             checked: a,
-            onChange: f,
+            onChange: $,
             disabled: k,
             className: C,
             dataAttributes: y
@@ -360,12 +360,15 @@ const t = {
   onClickCancelEdit: d,
   onClickDeleteEntry: h
 }) => (console.log(l), /* @__PURE__ */ u(re, { className: "editable-option-fieldset", children: [
-  /* @__PURE__ */ n(de, { children: `${e} ${o + 1}` }),
-  i?.map((g, f) => /* @__PURE__ */ n(me, { className: "editable-option-container", children: /* @__PURE__ */ n(
+  /* @__PURE__ */ u(de, { children: [
+    `${e} ${o + 1}`,
+    `fieldsetIndex: ${l}`
+  ] }),
+  i?.map((g, $) => /* @__PURE__ */ n(me, { className: "editable-option-container", children: /* @__PURE__ */ n(
     T,
     {
-      id: `editable-option-${f}`,
-      name: `editable-option-${f}`,
+      id: `editable-option-${$}`,
+      name: `editable-option-${$}`,
       placeholderText: g.name.charAt(0).toUpperCase() + g.name.slice(1),
       onChange: m,
       value: g.info,
@@ -373,12 +376,12 @@ const t = {
       isRequired: !0,
       className: "editable-option",
       dataAttributes: {
-        "data-index": f,
+        "data-index": $,
         "data-fieldsetindex": l,
         "data-key": g.info
       }
     }
-  ) }, `${g.name}-${f}`)),
+  ) }, `${g.name}-${$}`)),
   /* @__PURE__ */ u(be, { className: "editable-option-button-space", children: [
     /* @__PURE__ */ n(p, { id: `editable-option-${o}-submit`, buttonType: "button", text: "Save", onClick: r, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
     /* @__PURE__ */ n(p, { id: `editable-option-${o}-cancel`, buttonType: "button", text: "Cancel", onClick: d, className: "editable-option-btn", dataAttributes: { "data-index": o, "data-fieldsetindex": l } }),
@@ -398,11 +401,11 @@ const t = {
   handleReset: d,
   hasCancel: h,
   cancelText: g,
-  handleCancel: f
+  handleCancel: $
 }) => /* @__PURE__ */ u(he, { className: "form-main-button-container", children: [
   l && /* @__PURE__ */ n(p, { id: `form-${e}-submit`, buttonType: "submit", text: o ?? "Submit", onClick: i, className: "submit-form-btn" }),
   m && /* @__PURE__ */ n(p, { id: `form-${e}-edit`, buttonType: "button", text: r ?? "Reset", onClick: d, className: "reset-form-btn" }),
-  h && /* @__PURE__ */ n(p, { id: `form-${e}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: f, className: "cancel-form-btn" })
+  h && /* @__PURE__ */ n(p, { id: `form-${e}-cancel`, buttonType: "button", text: g ?? "Cancel", onClick: $, className: "cancel-form-btn" })
 ] }), M = c.legend`
     font-size: ${t.spacing.medium};
     font-weight: 500;
@@ -436,7 +439,7 @@ const t = {
     display: flex;
     justify-content: space-between;
     width: 100%;
-`, fe = c.div`
+`, $e = c.div`
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -452,7 +455,7 @@ const t = {
   labelClass: d,
   inputClass: h,
   onChangeOfEditableOption: g,
-  handleAddingInputEntry: f,
+  handleAddingInputEntry: $,
   hasSubmit: N = !1,
   submitText: y,
   handleSubmit: C,
@@ -465,13 +468,13 @@ const t = {
   handleSubmitForm: z,
   className: D,
   children: j
-}) => (console.log("Rendering DynamicForm", e), e?.forEach((a, $) => {
-  console.log("Fieldset index", $, "legend:", a.legend), a.inputs.forEach((s, x) => {
+}) => (console.log("Rendering DynamicForm", e), e?.forEach((a, f) => {
+  console.log("Fieldset index", f, "legend:", a.legend), a.inputs.forEach((s, x) => {
     console.log("Input", x, "type:", s.type, "editing:", s.editing);
   });
 }), /* @__PURE__ */ u(ue, { id: `${i}-form`, className: D, onSubmit: z, children: [
-  e ? e.map((a, $) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
-    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${$}`, className: `${a.legend}-fieldset`, children: [
+  e ? e.map((a, f) => /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
+    /* @__PURE__ */ u(U, { id: `${i}-form-fieldset-${f}`, className: `${a.legend}-fieldset`, children: [
       a.legend && /* @__PURE__ */ n(M, { className: `${a.legend}-legend`, children: a.legend }),
       a.inputs.length !== 0 ? a.inputs.map((s, x) => /* @__PURE__ */ u(q.Fragment, { children: [
         s.type === "textarea" && /* @__PURE__ */ n(
@@ -512,7 +515,7 @@ const t = {
             P,
             {
               legend: `${a.legend}`,
-              fieldsetIndex: $,
+              fieldsetIndex: f,
               idx: x,
               editableInformation: s?.editableInformation || [],
               onChangeOfEditableOption: g,
@@ -527,11 +530,11 @@ const t = {
         ] })
       ] }, `form-${i}-${x}`)) : a.isExpandable ? /* @__PURE__ */ n(O, { children: `No entry yet on ${a.legend}. Click "+" button to add entry.` }) : ""
     ] }),
-    a.isExpandable && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": $ } }) })
-  ] }, `${a.legend}-${$}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
+    a.isExpandable && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${a.legend}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry", dataAttributes: { "data-fieldsetindex": f } }) })
+  ] }, `${a.legend}-${f}`)) : /* @__PURE__ */ u(H, { className: `${i}-fieldset-wrapper`, children: [
     /* @__PURE__ */ u(U, { id: `${i}-form-fieldset`, className: `${l}-fieldset`, children: [
       l && /* @__PURE__ */ n(M, { className: `${l}-legend`, children: l }),
-      !e && m && m.length !== 0 ? m.map((a, $) => /* @__PURE__ */ u(q.Fragment, { children: [
+      !e && m && m.length !== 0 ? m.map((a, f) => /* @__PURE__ */ u(q.Fragment, { children: [
         a.type === "textarea" && /* @__PURE__ */ n(
           E,
           {
@@ -539,7 +542,7 @@ const t = {
             id: a.id ?? `${l}-input`,
             labelClass: d,
             inputClass: h,
-            idx: $,
+            idx: f,
             className: `${r} ${a?.uniqueClass}`
           }
         ),
@@ -550,7 +553,7 @@ const t = {
             id: a.id ?? `${l}-input`,
             labelClass: d,
             inputClass: h,
-            idx: $,
+            idx: f,
             className: `${r} ${a?.uniqueClass}`
           }
         ),
@@ -562,7 +565,7 @@ const t = {
               id: a.id ?? `${l}-input`,
               labelClass: d,
               inputClass: h,
-              idx: $,
+              idx: f,
               className: `${r} ${a?.uniqueClass}`
             }
           ),
@@ -570,7 +573,7 @@ const t = {
             P,
             {
               legend: `${l}`,
-              idx: $,
+              idx: f,
               editableInformation: a?.editableInformation,
               onChangeOfEditableOption: g,
               onClickSaveEdit: a?.onClickSave || ((s) => {
@@ -582,9 +585,9 @@ const t = {
             }
           )
         ] })
-      ] }, `form-${i}-${$}`)) : o ? /* @__PURE__ */ n(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
+      ] }, `form-${i}-${f}`)) : o ? /* @__PURE__ */ n(O, { children: `No entry yet on ${l}. Please click "+" button to add` }) : ""
     ] }),
-    o && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: f, className: "add-input-entry" }) })
+    o && /* @__PURE__ */ n(G, { className: "add-input-button-space", children: /* @__PURE__ */ n(p, { id: `expand-${l}-inputs`, buttonType: "button", text: "+", onClick: $, className: "add-input-entry" }) })
   ] }),
   /* @__PURE__ */ n(
     ge,
@@ -601,12 +604,12 @@ const t = {
       handleCancel: S
     }
   ),
-  /* @__PURE__ */ n(fe, { className: "children-container", children: j })
-] })), $e = (e) => {
+  /* @__PURE__ */ n($e, { className: "children-container", children: j })
+] })), fe = (e) => {
   const l = /^#([0-9A-Fa-f]{3}){1,2}$/, o = /^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;
   return l.test(e) || o.test(e) || CSS.supports("color", e);
 }, b = (e) => {
-  if (!$e(e)) throw new Error(`Invalid color: ${e}`);
+  if (!fe(e)) throw new Error(`Invalid color: ${e}`);
   return e;
 }, we = {
   mobile: "320px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbgarcia8/react-dynamic-form",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "description": "A form that can be nested with editable, expandable and flexible input-forms",
   "keywords": [
     "form",