react-form-dto 1.0.2 → 1.0.3

package/dist/components/FormBuilder.d.ts

@@ -25,6 +25,7 @@ type FormBuilderProps = {
     renderers?: Record<string, React.ComponentType<any>>;
     /** Current locale for i18n string resolution (default: 'en') */
     locale?: string;
+    handleChangeCallback?: (id: string, val: any) => void;
 };
 /**
  * FormBuilder component that dynamically renders a form based on a FormDTO definition.

package/dist/hooks/useFormBuilder.d.ts

@@ -12,7 +12,7 @@ type Errors = Record<string, string | null>;
  * form.handleChange('email', 'user@example.com');
  * const errors = form.validateAll();
  */
-export declare function useFormBuilder(dto: FormDTO, locale?: string): {
+export declare function useFormBuilder(dto: FormDTO, locale?: string, handleChangeCallback?: (id: string, val: any) => void): {
     /** Current form values for all fields */
     values: Record<string, any>;
     /** Function to update a field value */

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

@@ -1,12 +1,12 @@
-import J, { useState as V, useImperativeHandle as pe } from "react";
-import { FormControl as X, InputLabel as fe, Select as be, MenuItem as he, Typography as _, TextField as A, FormControlLabel as H, Checkbox as ve, FormHelperText as Z, Autocomplete as Q, FormLabel as xe, RadioGroup as ge, Radio as Ee, Box as je, Grid as M } from "@mui/material";
-var S = { exports: {} }, j = {};
-var B;
-function ye() {
-  if (B) return j;
-  B = 1;
-  var e = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-  function t(a, o, s) {
+import X, { useState as M, useImperativeHandle as de } from "react";
+import { FormControl as H, InputLabel as fe, Select as be, MenuItem as he, Typography as T, TextField as k, FormControlLabel as Z, Checkbox as xe, FormHelperText as Q, Autocomplete as K, FormLabel as ve, RadioGroup as ge, Radio as Ee, Box as ye, Grid as B } from "@mui/material";
+var S = { exports: {} }, _ = {};
+var U;
+function je() {
+  if (U) return _;
+  U = 1;
+  var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function n(a, o, s) {
     var u = null;
     if (s !== void 0 && (u = "" + s), o.key !== void 0 && (u = "" + o.key), "key" in o) {
       s = {};
@@ -21,19 +21,19 @@ function ye() {
       props: s
     };
   }
-  return j.Fragment = n, j.jsx = t, j.jsxs = t, j;
+  return _.Fragment = t, _.jsx = n, _.jsxs = n, _;
 }
-var y = {};
-var U;
+var R = {};
+var G;
 function _e() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
+  return G || (G = 1, process.env.NODE_ENV !== "production" && (function() {
     function e(r) {
       if (r == null) return null;
       if (typeof r == "function")
         return r.$$typeof === ce ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
-        case $:
+        case O:
           return "Fragment";
         case te:
           return "Profiler";
@@ -50,7 +50,7 @@ function _e() {
         switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), r.$$typeof) {
-          case ee:
+          case w:
             return "Portal";
           case ae:
             return r.displayName || "Context";
@@ -61,7 +61,7 @@ function _e() {
             return r = r.displayName, r || (r = i.displayName || i.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
           case le:
             return i = r.displayName || null, i !== null ? i : e(r.type) || "Memo";
-          case w:
+          case F:
             i = r._payload, r = r._init;
             try {
               return e(r(i));
@@ -70,29 +70,29 @@ function _e() {
         }
       return null;
     }
-    function n(r) {
+    function t(r) {
       return "" + r;
     }
-    function t(r) {
+    function n(r) {
       try {
-        n(r);
+        t(r);
         var i = !1;
       } catch {
         i = !0;
       }
       if (i) {
         i = console;
-        var m = i.error, d = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        var m = i.error, p = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
         return m.call(
           i,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), n(r);
+          p
+        ), t(r);
       }
     }
     function a(r) {
-      if (r === $) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === w)
+      if (r === O) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === F)
         return "<...>";
       try {
         var i = e(r);
@@ -102,14 +102,14 @@ function _e() {
       }
     }
     function o() {
-      var r = O.A;
+      var r = P.A;
       return r === null ? null : r.getOwner();
     }
     function s() {
       return Error("react-stack-top-frame");
     }
     function u(r) {
-      if (N.call(r, "key")) {
+      if (D.call(r, "key")) {
         var i = Object.getOwnPropertyDescriptor(r, "key").get;
         if (i && i.isReactWarning) return !1;
       }
@@ -117,7 +117,7 @@ function _e() {
     }
     function c(r, i) {
       function m() {
-        D || (D = !0, console.error(
+        q || (q = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           i
         ));
@@ -129,19 +129,19 @@ function _e() {
     }
     function h() {
       var r = e(this.type);
-      return q[r] || (q[r] = !0, console.error(
+      return z[r] || (z[r] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function b(r, i, m, d, T, P) {
-      var p = m.ref;
+    function x(r, i, m, p, A, I) {
+      var d = m.ref;
       return r = {
-        $$typeof: L,
+        $$typeof: v,
         type: r,
         key: i,
         props: m,
-        _owner: d
-      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(r, "ref", {
+        _owner: p
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
         get: h
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
@@ -158,159 +158,159 @@ function _e() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: T
+        value: A
       }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: P
+        value: I
       }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function g(r, i, m, d, T, P) {
-      var p = i.children;
-      if (p !== void 0)
-        if (d)
-          if (me(p)) {
-            for (d = 0; d < p.length; d++)
-              x(p[d]);
-            Object.freeze && Object.freeze(p);
+    function E(r, i, m, p, A, I) {
+      var d = i.children;
+      if (d !== void 0)
+        if (p)
+          if (me(d)) {
+            for (p = 0; p < d.length; p++)
+              y(d[p]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else x(p);
-      if (N.call(i, "key")) {
-        p = e(r);
-        var E = Object.keys(i).filter(function(de) {
-          return de !== "key";
+        else y(d);
+      if (D.call(i, "key")) {
+        d = e(r);
+        var j = Object.keys(i).filter(function(pe) {
+          return pe !== "key";
         });
-        d = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", W[p + d] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+        p = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", V[d + p] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          d,
           p,
-          E,
-          p
-        ), W[p + d] = !0);
+          d,
+          j,
+          d
+        ), V[d + p] = !0);
       }
-      if (p = null, m !== void 0 && (t(m), p = "" + m), u(i) && (t(i.key), p = "" + i.key), "key" in i) {
+      if (d = null, m !== void 0 && (n(m), d = "" + m), u(i) && (n(i.key), d = "" + i.key), "key" in i) {
         m = {};
-        for (var C in i)
-          C !== "key" && (m[C] = i[C]);
+        for (var L in i)
+          L !== "key" && (m[L] = i[L]);
       } else m = i;
-      return p && c(
+      return d && c(
         m,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), b(
+      ), x(
         r,
-        p,
+        d,
         m,
         o(),
-        T,
-        P
+        A,
+        I
       );
     }
-    function x(r) {
-      R(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === w && (r._payload.status === "fulfilled" ? R(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    function y(r) {
+      g(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === F && (r._payload.status === "fulfilled" ? g(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function R(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === L;
+    function g(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === v;
     }
-    var v = J, L = Symbol.for("react.transitional.element"), ee = Symbol.for("react.portal"), $ = Symbol.for("react.fragment"), re = Symbol.for("react.strict_mode"), te = Symbol.for("react.profiler"), ne = Symbol.for("react.consumer"), ae = Symbol.for("react.context"), se = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), le = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), ie = Symbol.for("react.activity"), ce = Symbol.for("react.client.reference"), O = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, me = Array.isArray, F = console.createTask ? console.createTask : function() {
+    var b = X, v = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), re = Symbol.for("react.strict_mode"), te = Symbol.for("react.profiler"), ne = Symbol.for("react.consumer"), ae = Symbol.for("react.context"), se = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), ue = Symbol.for("react.suspense_list"), le = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), ie = Symbol.for("react.activity"), ce = Symbol.for("react.client.reference"), P = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, me = Array.isArray, C = console.createTask ? console.createTask : function() {
       return null;
     };
-    v = {
+    b = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var D, q = {}, z = v.react_stack_bottom_frame.bind(
-      v,
+    var q, z = {}, Y = b.react_stack_bottom_frame.bind(
+      b,
       s
-    )(), Y = F(a(s)), W = {};
-    y.Fragment = $, y.jsx = function(r, i, m) {
-      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return g(
+    )(), W = C(a(s)), V = {};
+    R.Fragment = O, R.jsx = function(r, i, m) {
+      var p = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return E(
         r,
         i,
         m,
         !1,
-        d ? Error("react-stack-top-frame") : z,
-        d ? F(a(r)) : Y
+        p ? Error("react-stack-top-frame") : Y,
+        p ? C(a(r)) : W
       );
-    }, y.jsxs = function(r, i, m) {
-      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return g(
+    }, R.jsxs = function(r, i, m) {
+      var p = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return E(
         r,
         i,
         m,
         !0,
-        d ? Error("react-stack-top-frame") : z,
-        d ? F(a(r)) : Y
+        p ? Error("react-stack-top-frame") : Y,
+        p ? C(a(r)) : W
       );
     };
-  })()), y;
+  })()), R;
 }
-var G;
+var J;
 function Re() {
-  return G || (G = 1, process.env.NODE_ENV === "production" ? S.exports = ye() : S.exports = _e()), S.exports;
+  return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = je() : S.exports = _e()), S.exports;
 }
 var l = Re();
-function f(e, n = "en") {
-  return e ? typeof e == "string" ? e : e[n] || e.en || Object.values(e)[0] || "" : "";
+function f(e, t = "en") {
+  return e ? typeof e == "string" ? e : e[t] || e.en || Object.values(e)[0] || "" : "";
 }
-function k(e, n = "en") {
-  return e ? e.map((t) => typeof t == "string" ? { value: t, label: t } : {
-    value: t.value,
-    label: f(t.label, n)
+function $(e, t = "en") {
+  return e ? e.map((n) => typeof n == "string" ? { value: n, label: n } : {
+    value: n.value,
+    label: f(n.label, t)
   }) : [];
 }
 function Te({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o = "en"
 }) {
-  const s = k(e.options || [], o);
-  return /* @__PURE__ */ l.jsxs(X, { fullWidth: !0, children: [
+  const s = $(e.options || [], o);
+  return /* @__PURE__ */ l.jsxs(H, { fullWidth: !0, children: [
     /* @__PURE__ */ l.jsx(fe, { id: `${e.id}-label`, children: f(e.label, o) }),
     /* @__PURE__ */ l.jsx(
       be,
       {
         labelId: `${e.id}-label`,
-        value: n,
+        value: t,
         id: e.id,
         name: e.id,
-        onChange: (u) => t(u.target.value),
+        onChange: (u) => n(u.target.value),
         label: f(e.label, o),
         error: !!a,
         children: s?.map((u) => /* @__PURE__ */ l.jsx(he, { value: u.value, children: u.label }, u.label))
       }
     ),
-    a && /* @__PURE__ */ l.jsx(_, { variant: "caption", color: "error", children: a })
+    a && /* @__PURE__ */ l.jsx(T, { variant: "caption", color: "error", children: a })
   ] });
 }
-function Se({
+function Ae({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o
 }) {
   return console.log("error", a), /* @__PURE__ */ l.jsx(
-    A,
+    k,
     {
       fullWidth: !0,
       label: f(e.label, o),
       placeholder: f(e.placeholder || "", o),
-      value: n || "",
+      value: t || "",
       name: e.id,
-      onChange: (s) => t(s.target.value),
+      onChange: (s) => n(s.target.value),
       disabled: e.disabled,
       type: e.type,
       slotProps: {
@@ -323,49 +323,49 @@ function Se({
     }
   );
 }
-function Ae({
+function Se({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o
 }) {
   return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     /* @__PURE__ */ l.jsx(
-      H,
+      Z,
       {
         name: e.id,
         control: /* @__PURE__ */ l.jsx(
-          ve,
+          xe,
           {
-            checked: !!n,
-            onChange: (s) => t(s.target.checked),
+            checked: !!t,
+            onChange: (s) => n(s.target.checked),
             disabled: e.disabled
           }
         ),
         label: f(e.label, o)
       }
     ),
-    a && /* @__PURE__ */ l.jsx(Z, { children: a })
+    a && /* @__PURE__ */ l.jsx(Q, { children: a })
   ] });
 }
 const ke = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o
 }) => {
-  const s = k(e.options || [], o);
+  const s = $(e.options || [], o);
   return /* @__PURE__ */ l.jsx(
-    Q,
+    K,
     {
       fullWidth: !0,
       options: s || [],
-      value: n || null,
-      onChange: (u, c) => t(c),
+      value: t || null,
+      onChange: (u, c) => n(c),
       renderInput: (u) => /* @__PURE__ */ l.jsx(
-        A,
+        k,
         {
           ...u,
           name: e.id,
@@ -383,22 +383,22 @@ const ke = ({
   );
 }, $e = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o
 }) => {
-  const s = k(e.options || [], o);
+  const s = $(e.options || [], o);
   return /* @__PURE__ */ l.jsx(
-    Q,
+    K,
     {
       multiple: !0,
       fullWidth: !0,
       options: s || [],
-      value: n || [],
-      onChange: (u, c) => t(c),
+      value: t || [],
+      onChange: (u, c) => n(c),
       renderInput: (u) => /* @__PURE__ */ l.jsx(
-        A,
+        k,
         {
           ...u,
           name: e.id,
@@ -416,20 +416,20 @@ const ke = ({
   );
 }, we = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o = "en"
 }) => /* @__PURE__ */ l.jsx(
-  A,
+  k,
   {
     fullWidth: !0,
     multiline: !0,
     rows: e.rows || 4,
     label: f(e.label, o),
     placeholder: f(e.placeholder || "", o),
-    value: n || "",
-    onChange: (s) => t(s.target.value),
+    value: t || "",
+    onChange: (s) => n(s.target.value),
     required: !!e.validations?.required,
     disabled: e.disabled,
     error: !!a,
@@ -437,14 +437,14 @@ const ke = ({
   }
 ), Oe = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o = "en"
 }) => {
-  const s = k(e.options || [], o);
-  return /* @__PURE__ */ l.jsxs(X, { component: "fieldset", fullWidth: !0, error: !!a, children: [
-    /* @__PURE__ */ l.jsxs(xe, { component: "legend", children: [
+  const s = $(e.options || [], o);
+  return /* @__PURE__ */ l.jsxs(H, { component: "fieldset", fullWidth: !0, error: !!a, children: [
+    /* @__PURE__ */ l.jsxs(ve, { component: "legend", children: [
       f(e.label, o),
       e.validations?.required ? " *" : ""
     ] }),
@@ -452,12 +452,12 @@ const ke = ({
       ge,
       {
         row: e.layout?.direction === "row" || !1,
-        value: n || "",
-        onChange: (u) => t(u.target.value),
+        value: t || "",
+        onChange: (u) => n(u.target.value),
         children: (s || []).map((u) => /* @__PURE__ */ l.jsx(
-          H,
+          Z,
           {
-            value: u,
+            value: u.value,
             control: /* @__PURE__ */ l.jsx(Ee, {}),
             label: u.label,
             disabled: e.disabled
@@ -466,12 +466,12 @@ const ke = ({
         ))
       }
     ),
-    a && /* @__PURE__ */ l.jsx(Z, { children: a })
+    a && /* @__PURE__ */ l.jsx(Q, { children: a })
   ] });
 }, Fe = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   locale: o = "en"
 }) => {
@@ -482,11 +482,11 @@ const ke = ({
     case "password":
     case "number":
       return /* @__PURE__ */ l.jsx(
-        Se,
+        Ae,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -496,8 +496,8 @@ const ke = ({
         Te,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -507,8 +507,8 @@ const ke = ({
         ke,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -518,19 +518,19 @@ const ke = ({
         $e,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
       );
     case "checkbox":
       return /* @__PURE__ */ l.jsx(
-        Ae,
+        Se,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -540,8 +540,8 @@ const ke = ({
         we,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -551,8 +551,8 @@ const ke = ({
         Oe,
         {
           field: e,
-          value: n,
-          onChange: t,
+          value: t,
+          onChange: n,
           error: a,
           locale: o
         }
@@ -565,8 +565,8 @@ const ke = ({
   }
 }, Pe = ({
   field: e,
-  value: n,
-  onChange: t,
+  value: t,
+  onChange: n,
   error: a,
   renderers: o = {},
   locale: s = "en"
@@ -576,25 +576,25 @@ const ke = ({
     u,
     {
       field: e,
-      value: n,
-      onChange: t,
+      value: t,
+      onChange: n,
       error: a,
       locale: s
     }
   );
 };
 function Ce(e) {
-  const n = e ?? 12;
+  const t = e ?? 12;
   return {
     xs: 12,
     // always full width on mobile
-    sm: n,
+    sm: t,
     // use span for tablet
-    md: n,
+    md: t,
     // use span for desktop
-    lg: n,
+    lg: t,
     // use span for large screens
-    xl: n
+    xl: t
   };
 }
 const ze = {
@@ -604,61 +604,61 @@ const ze = {
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  required: (e, n) => e.required && (n == null || n === "") ? `${e.label} is required` : null,
+  required: (e, t) => e.required && (t == null || t === "") ? `${e.label} is required` : null,
   /**
    * Validates that a number field meets the minimum value requirement.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  min: (e, n) => e.type === "number" && e.min !== void 0 && n < e.min ? `${e.label} must be at least ${e.min}` : null,
+  min: (e, t) => e.type === "number" && e.min !== void 0 && t < e.min ? `${e.label} must be at least ${e.min}` : null,
   /**
    * Validates that a number field does not exceed the maximum value.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  max: (e, n) => e.type === "number" && e.max !== void 0 && n > e.max ? `${e.label} must be at most ${e.max}` : null,
+  max: (e, t) => e.type === "number" && e.max !== void 0 && t > e.max ? `${e.label} must be at most ${e.max}` : null,
   /**
    * Validates that a string field meets the minimum length requirement.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  minLength: (e, n) => typeof n == "string" && e.minLength !== void 0 && n.length < e.minLength ? `${e.label} must be at least ${e.minLength} characters` : null,
+  minLength: (e, t) => typeof t == "string" && e.minLength !== void 0 && t.length < e.minLength ? `${e.label} must be at least ${e.minLength} characters` : null,
   /**
    * Validates that a string field does not exceed the maximum length.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  maxLength: (e, n) => typeof n == "string" && e.maxLength !== void 0 && n.length > e.maxLength ? `${e.label} must be at most ${e.maxLength} characters` : null,
+  maxLength: (e, t) => typeof t == "string" && e.maxLength !== void 0 && t.length > e.maxLength ? `${e.label} must be at most ${e.maxLength} characters` : null,
   /**
    * Validates that a string field matches the specified regex pattern.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  pattern: (e, n) => e.pattern && typeof n == "string" && !e.pattern.test(n) ? `${e.label} is invalid` : null,
+  pattern: (e, t) => e.pattern && typeof t == "string" && !e.pattern.test(t) ? `${e.label} is invalid` : null,
   /**
    * Validates that a select field value is one of the allowed options.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  options: (e, n) => e.type === "select" && e.options && !e.options.includes(n) ? `${e.label} must be one of: ${e.options.join(", ")}` : null,
+  options: (e, t) => e.type === "select" && e.options && !e.options.includes(t) ? `${e.label} must be one of: ${e.options.join(", ")}` : null,
   /**
    * Validates that a date field falls within the specified date range.
    * @param field - The field definition
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  dateRange: (e, n) => {
-    if (e.type === "date" && n) {
-      const t = new Date(n);
-      if (e.minDate && t < new Date(e.minDate))
+  dateRange: (e, t) => {
+    if (e.type === "date" && t) {
+      const n = new Date(t);
+      if (e.minDate && n < new Date(e.minDate))
         return `${e.label} must be after ${e.minDate}`;
-      if (e.maxDate && t > new Date(e.maxDate))
+      if (e.maxDate && n > new Date(e.maxDate))
         return `${e.label} must be before ${e.maxDate}`;
     }
     return null;
@@ -669,63 +669,63 @@ const ze = {
    * @param value - The field value to validate
    * @returns Error message if validation fails, null otherwise
    */
-  customValidator: (e, n) => {
+  customValidator: (e, t) => {
     if (e.customValidator && typeof e.customValidator == "function") {
-      const t = e.customValidator(n);
-      if (typeof t == "string")
-        return t;
+      const n = e.customValidator(t);
+      if (typeof n == "string")
+        return n;
     }
     return null;
   }
-}, Ie = (e, n, t = "en") => {
+}, Ie = (e, t, n = "en") => {
   const a = {};
   return e.sections.forEach((o) => {
     o.fields.forEach((s) => {
-      const u = K(e, n, s.id);
+      const u = ee(e, t, s.id);
       u.length > 0 && (a[s.id] = u);
     });
   }), a;
-}, K = (e, n, t, a = "en") => {
-  const o = e.sections.flatMap((b) => b.fields).find((b) => b.id === t);
+}, ee = (e, t, n, a = "en") => {
+  const o = e.sections.flatMap((x) => x.fields).find((x) => x.id === n);
   if (!o) return [];
-  const s = o.validations || {}, u = n[t], c = [], h = f(o.label, a);
+  const s = o.validations || {}, u = t[n], c = [], h = f(o.label, a);
   if (s.required && (u == null || u === "") && c.push(
     typeof s.required == "string" ? s.required : `${h} is required`
   ), s.min !== void 0 && typeof u == "number" && u < s.min && c.push(`${h} must be at least ${s.min}`), s.max !== void 0 && typeof u == "number" && u > s.max && c.push(`${h} must be at most ${s.max}`), s.minLength !== void 0 && typeof u == "string" && u.length < s.minLength && c.push(`${h} must be at least ${s.minLength} characters`), s.maxLength !== void 0 && typeof u == "string" && u.length > s.maxLength && c.push(`${h} must be at most ${s.maxLength} characters`), s.pattern && typeof u == "string" && !s.pattern.test(u) && c.push(`${h} is invalid`), s.validate) {
-    const b = s.validate(u);
-    b && c.push(f(b, a));
+    const x = s.validate(u);
+    x && c.push(f(x, a));
   }
   return c;
 };
-function I(e, n) {
+function N(e, t) {
   if (!e)
     return !0;
   if ("field" in e) {
-    let t = n[e.field] ?? "";
-    return Array.isArray(t) ? t = t.map((a) => a.value ?? "") : typeof t == "object" && t !== null && (t = t.value ?? ""), e.equals !== void 0 ? t === e.equals : e.notEquals !== void 0 ? t !== e.notEquals : e.in !== void 0 ? Array.isArray(t) ? e.in ? t.some((a) => e.in.includes(a)) : !1 : e.in.includes(t) : e.notIn !== void 0 ? Array.isArray(t) ? t.every((a) => !e.notIn.includes(a)) : !e.notIn.includes(t) : e.greaterThan !== void 0 ? t > e.greaterThan : e.lessThan !== void 0 ? t < e.lessThan : !0;
+    let n = t[e.field] ?? "";
+    return Array.isArray(n) ? n = n.map((a) => a.value ?? "") : typeof n == "object" && n !== null && (n = n.value ?? ""), e.equals !== void 0 ? n === e.equals : e.notEquals !== void 0 ? n !== e.notEquals : e.in !== void 0 ? Array.isArray(n) ? e.in ? n.some((a) => e.in.includes(a)) : !1 : e.in.includes(n) : e.notIn !== void 0 ? Array.isArray(n) ? n.every((a) => !e.notIn.includes(a)) : !e.notIn.includes(n) : e.greaterThan !== void 0 ? n > e.greaterThan : e.lessThan !== void 0 ? n < e.lessThan : !0;
   }
   if ("operator" in e) {
     if (e.operator === "AND")
       return e.conditions.every(
-        (a) => I(a, n)
+        (a) => N(a, t)
       );
     if (e.operator === "OR")
       return e.conditions.some(
-        (t) => I(t, n)
+        (n) => N(n, t)
       );
   }
   return !1;
 }
 const Le = ({
   section: e,
-  values: n,
-  onChange: t,
+  values: t,
+  onChange: n,
   renderers: a,
   validateField: o,
   locale: s = "en"
-}) => /* @__PURE__ */ l.jsxs(je, { mb: 2, children: [
+}) => /* @__PURE__ */ l.jsxs(ye, { mb: 2, children: [
   e.heading && /* @__PURE__ */ l.jsx(
-    _,
+    T,
     {
       variant: "h6",
       sx: {
@@ -737,7 +737,7 @@ const Le = ({
     }
   ),
   e.description && /* @__PURE__ */ l.jsx(
-    _,
+    T,
     {
       variant: "body2",
       sx: {
@@ -748,17 +748,17 @@ const Le = ({
       children: f(e.description, s)
     }
   ),
-  /* @__PURE__ */ l.jsx(M, { container: !0, spacing: 2, children: e.fields.map(
-    (u) => I(u.visibleWhen, n) && /* @__PURE__ */ l.jsx(
-      M,
+  /* @__PURE__ */ l.jsx(B, { container: !0, spacing: 2, children: e.fields.map(
+    (u) => N(u.visibleWhen, t) && /* @__PURE__ */ l.jsx(
+      B,
       {
         size: Ce(u.layout?.cols),
         children: /* @__PURE__ */ l.jsx(
           Pe,
           {
             field: u,
-            value: n[u.id],
-            onChange: (c) => t(u.id, c),
+            value: t[u.id],
+            onChange: (c) => n(u.id, c),
             renderers: a,
             error: o(u.id)?.join(","),
             locale: s
@@ -769,42 +769,45 @@ const Le = ({
     )
   ) })
 ] });
-function Ne(e, n = "en") {
-  const [t, a] = V({}), [o, s] = V({});
+function Ne(e, t = "en", n) {
+  const [a, o] = M({}), [s, u] = M({});
   return {
     /** Current form values for all fields */
-    values: t,
+    values: a,
     /** Function to update a field value */
-    handleChange: (x, R) => {
-      a((v) => ({ ...v, [x]: R })), s((v) => ({ ...v, [x]: null }));
+    handleChange: (g, b) => {
+      if (o((v) => ({ ...v, [g]: b })), u((v) => ({ ...v, [g]: null })), n) {
+        let v = b;
+        Array.isArray(b) ? v = b.map((w) => w.value ?? "") : typeof b == "object" && b !== null && (v = b.value ?? ""), n(g, v);
+      }
     },
     /** Function to validate all fields */
-    validateAll: () => Ie(e, t, n),
+    validateAll: () => Ie(e, a, t),
     /** Function to get all current form values */
-    getValues: () => t,
+    getValues: () => a,
     /** Function to get all current form errors */
-    getErrors: () => o,
+    getErrors: () => s,
     /** Function to validate a specific field */
-    validateField: (x) => K(e, t, x, n)
+    validateField: (g) => ee(e, a, g, t)
   };
 }
-const Ye = J.forwardRef(({ dto: e, renderers: n, locale: t = "en" }, a) => {
+const Ye = X.forwardRef(({ dto: e, renderers: t, locale: n = "en", handleChangeCallback: a }, o) => {
   const {
-    values: o,
-    handleChange: s,
-    getValues: u,
-    getErrors: c,
-    validateAll: h,
-    validateField: b
-  } = Ne(e, t);
-  return pe(a, () => ({
-    getValues: u,
-    getErrors: c,
-    validateAll: h,
-    validateField: b
+    values: s,
+    handleChange: u,
+    getValues: c,
+    getErrors: h,
+    validateAll: x,
+    validateField: E
+  } = Ne(e, n, a);
+  return de(o, () => ({
+    getValues: c,
+    getErrors: h,
+    validateAll: x,
+    validateField: E
   })), /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     e.title && /* @__PURE__ */ l.jsx(
-      _,
+      T,
       {
         variant: "h5",
         color: "black",
@@ -813,11 +816,11 @@ const Ye = J.forwardRef(({ dto: e, renderers: n, locale: t = "en" }, a) => {
           fontWeight: "bold"
         },
         gutterBottom: !0,
-        children: f(e.title, t)
+        children: f(e.title, n)
       }
     ),
     e.description && /* @__PURE__ */ l.jsx(
-      _,
+      T,
       {
         component: "p",
         sx: {
@@ -825,26 +828,26 @@ const Ye = J.forwardRef(({ dto: e, renderers: n, locale: t = "en" }, a) => {
         },
         color: "textSecondary",
         gutterBottom: !0,
-        children: f(e.description, t)
+        children: f(e.description, n)
       }
     ),
-    e.sections.map((g) => /* @__PURE__ */ l.jsx(
+    e.sections.map((y) => /* @__PURE__ */ l.jsx(
       Le,
       {
-        section: g,
-        values: o,
-        onChange: s,
-        renderers: n,
-        validateField: b,
-        locale: t
+        section: y,
+        values: s,
+        onChange: u,
+        renderers: t,
+        validateField: E,
+        locale: n
       },
-      g.id
+      y.id
     ))
   ] });
 });
 export {
   ke as AutoCompleteField,
-  Ae as CheckBoxInput,
+  Se as CheckBoxInput,
   Pe as Field,
   Ye as FormBuilder,
   $e as MultiAutoCompleteField,
@@ -852,9 +855,9 @@ export {
   Le as Section,
   Te as SelectInput,
   we as TextAreaInput,
-  Se as TextInput,
+  Ae as TextInput,
   Ne as useFormBuilder,
   Ie as validateAll,
-  K as validateField,
+  ee as validateField,
   ze as validationRules
 };

package/dist/react-form-dto.umd.js

@@ -1,6 +1,6 @@
-(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.ReactFormDTO={},m.React,m.MaterialUI))})(this,(function(m,g,c){"use strict";var S={exports:{}},R={};var D;function se(){if(D)return R;D=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(a,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:e,type:a,key:u,ref:o!==void 0?o:null,props:s}}return R.Fragment=n,R.jsx=t,R.jsxs=t,R}var _={};var z;function oe(){return z||(z=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===Te?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case C:return"Fragment";case fe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ge:return"SuspenseList";case Ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case pe:return"Portal";case he:return r.displayName||"Context";case be:return(r._context.displayName||"Context")+".Consumer";case ve:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case ye:return i=r.displayName||null,i!==null?i:e(r.type)||"Memo";case P:i=r._payload,r=r._init;try{return e(r(i))}catch{}}return null}function n(r){return""+r}function t(r){try{n(r);var i=!1}catch{i=!0}if(i){i=console;var p=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),n(r)}}function a(r){if(r===C)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===P)return"<...>";try{var i=e(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=$.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function u(r){if(K.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function d(r,i){function p(){ee||(ee=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function x(){var r=e(this.type);return re[r]||(re[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function v(r,i,p,b,F,L){var h=p.ref;return r={$$typeof:Q,type:r,key:i,props:p,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function T(r,i,p,b,F,L){var h=i.children;if(h!==void 0)if(b)if(je(h)){for(b=0;b<h.length;b++)E(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else E(h);if(K.call(i,"key")){h=e(r);var j=Object.keys(i).filter(function(Re){return Re!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ae[h+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(m,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],E):(m=typeof globalThis<"u"?globalThis:m||self,E(m.ReactFormDTO={},m.React,m.MaterialUI))})(this,(function(m,E,c){"use strict";var k={exports:{}},A={};var Y;function oe(){if(Y)return A;Y=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(a,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:e,type:a,key:u,ref:o!==void 0?o:null,props:s}}return A.Fragment=t,A.jsx=n,A.jsxs=n,A}var S={};var q;function ue(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===Te?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case $:return"Fragment";case fe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ge:return"SuspenseList";case Ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case C:return"Portal";case he:return r.displayName||"Context";case be:return(r._context.displayName||"Context")+".Consumer";case ve:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case ye:return i=r.displayName||null,i!==null?i:e(r.type)||"Memo";case I:i=r._payload,r=r._init;try{return e(r(i))}catch{}}return null}function t(r){return""+r}function n(r){try{t(r);var i=!1}catch{i=!0}if(i){i=console;var p=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),t(r)}}function a(r){if(r===$)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===I)return"<...>";try{var i=e(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=L.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function u(r){if(ee.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function d(r,i){function p(){re||(re=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function x(){var r=e(this.type);return te[r]||(te[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function g(r,i,p,b,O,D){var h=p.ref;return r={$$typeof:y,type:r,key:i,props:p,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function j(r,i,p,b,O,D){var h=i.children;if(h!==void 0)if(b)if(je(h)){for(b=0;b<h.length;b++)R(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(h);if(ee.call(i,"key")){h=e(r);var _=Object.keys(i).filter(function(Re){return Re!=="key"});b=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",se[h+b]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,h,j,h),ae[h+b]=!0)}if(h=null,p!==void 0&&(t(p),h=""+p),u(i)&&(t(i.key),h=""+i.key),"key"in i){p={};for(var N in i)N!=="key"&&(p[N]=i[N])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),v(r,h,p,o(),F,L)}function E(r){k(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===P&&(r._payload.status==="fulfilled"?k(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function k(r){return typeof r=="object"&&r!==null&&r.$$typeof===Q}var y=g,Q=Symbol.for("react.transitional.element"),pe=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),$=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,je=Array.isArray,I=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(r){return r()}};var ee,re={},te=y.react_stack_bottom_frame.bind(y,s)(),ne=I(a(s)),ae={};_.Fragment=C,_.jsx=function(r,i,p){var b=1e4>$.recentlyCreatedOwnerStacks++;return T(r,i,p,!1,b?Error("react-stack-top-frame"):te,b?I(a(r)):ne)},_.jsxs=function(r,i,p){var b=1e4>$.recentlyCreatedOwnerStacks++;return T(r,i,p,!0,b?Error("react-stack-top-frame"):te,b?I(a(r)):ne)}})()),_}var Y;function ue(){return Y||(Y=1,process.env.NODE_ENV==="production"?S.exports=se():S.exports=oe()),S.exports}var l=ue();function f(e,n="en"){return e?typeof e=="string"?e:e[n]||e.en||Object.values(e)[0]||"":""}function A(e,n="en"){return e?e.map(t=>typeof t=="string"?{value:t,label:t}:{value:t.value,label:f(t.label,n)}):[]}function q({field:e,value:n,onChange:t,error:a,locale:o="en"}){const s=A(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:n,id:e.id,name:e.id,onChange:u=>t(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function W({field:e,value:n,onChange:t,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:n||"",name:e.id,onChange:s=>t(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function M({field:e,value:n,onChange:t,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!n,onChange:s=>t(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const V=({field:e,value:n,onChange:t,error:a,locale:o})=>{const s=A(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:n||null,onChange:(u,d)=>t(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},B=({field:e,value:n,onChange:t,error:a,locale:o})=>{const s=A(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:n||[],onChange:(u,d)=>t(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},U=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:n||"",onChange:s=>t(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),G=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>{const s=A(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:n||"",onChange:u=>t(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},le=({field:e,value:n,onChange:t,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(W,{field:e,value:n,onChange:t,error:a,locale:o});case"select":return l.jsx(q,{field:e,value:n,onChange:t,error:a,locale:o});case"autocomplete":return l.jsx(V,{field:e,value:n,onChange:t,error:a,locale:o});case"multi-autocomplete":return l.jsx(B,{field:e,value:n,onChange:t,error:a,locale:o});case"checkbox":return l.jsx(M,{field:e,value:n,onChange:t,error:a,locale:o});case"textarea":return l.jsx(U,{field:e,value:n,onChange:t,error:a,locale:o});case"radio":return l.jsx(G,{field:e,value:n,onChange:t,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},J=({field:e,value:n,onChange:t,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||le;return l.jsx(u,{field:e,value:n,onChange:t,error:a,locale:s})};function ie(e){const n=e??12;return{xs:12,sm:n,md:n,lg:n,xl:n}}const ce={required:(e,n)=>e.required&&(n==null||n==="")?`${e.label} is required`:null,min:(e,n)=>e.type==="number"&&e.min!==void 0&&n<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,n)=>e.type==="number"&&e.max!==void 0&&n>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,n)=>typeof n=="string"&&e.minLength!==void 0&&n.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,n)=>typeof n=="string"&&e.maxLength!==void 0&&n.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,n)=>e.pattern&&typeof n=="string"&&!e.pattern.test(n)?`${e.label} is invalid`:null,options:(e,n)=>e.type==="select"&&e.options&&!e.options.includes(n)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,n)=>{if(e.type==="date"&&n){const t=new Date(n);if(e.minDate&&t<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&t>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,n)=>{if(e.customValidator&&typeof e.customValidator=="function"){const t=e.customValidator(n);if(typeof t=="string")return t}return null}},H=(e,n,t="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=O(e,n,s.id);u.length>0&&(a[s.id]=u)})}),a},O=(e,n,t,a="en")=>{const o=e.sections.flatMap(v=>v.fields).find(v=>v.id===t);if(!o)return[];const s=o.validations||{},u=n[t],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const v=s.validate(u);v&&d.push(f(v,a))}return d};function w(e,n){if(!e)return!0;if("field"in e){let t=n[e.field]??"";return Array.isArray(t)?t=t.map(a=>a.value??""):typeof t=="object"&&t!==null&&(t=t.value??""),e.equals!==void 0?t===e.equals:e.notEquals!==void 0?t!==e.notEquals:e.in!==void 0?Array.isArray(t)?e.in?t.some(a=>e.in.includes(a)):!1:e.in.includes(t):e.notIn!==void 0?Array.isArray(t)?t.every(a=>!e.notIn.includes(a)):!e.notIn.includes(t):e.greaterThan!==void 0?t>e.greaterThan:e.lessThan!==void 0?t<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>w(a,n));if(e.operator==="OR")return e.conditions.some(t=>w(t,n))}return!1}const X=({section:e,values:n,onChange:t,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>w(u.visibleWhen,n)&&l.jsx(c.Grid,{size:ie(u.layout?.cols),children:l.jsx(J,{field:u,value:n[u.id],onChange:d=>t(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function Z(e,n="en"){const[t,a]=g.useState({}),[o,s]=g.useState({});return{values:t,handleChange:(E,k)=>{a(y=>({...y,[E]:k})),s(y=>({...y,[E]:null}))},validateAll:()=>H(e,t,n),getValues:()=>t,getErrors:()=>o,validateField:E=>O(e,t,E,n)}}const de=g.forwardRef(({dto:e,renderers:n,locale:t="en"},a)=>{const{values:o,handleChange:s,getValues:u,getErrors:d,validateAll:x,validateField:v}=Z(e,t);return g.useImperativeHandle(a,()=>({getValues:u,getErrors:d,validateAll:x,validateField:v})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,t)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,t)}),e.sections.map(T=>l.jsx(X,{section:T,values:o,onChange:s,renderers:n,validateField:v,locale:t},T.id))]})});m.AutoCompleteField=V,m.CheckBoxInput=M,m.Field=J,m.FormBuilder=de,m.MultiAutoCompleteField=B,m.RadioInput=G,m.Section=X,m.SelectInput=q,m.TextAreaInput=U,m.TextInput=W,m.useFormBuilder=Z,m.validateAll=H,m.validateField=O,m.validationRules=ce,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,h,_,h),se[h+b]=!0)}if(h=null,p!==void 0&&(n(p),h=""+p),u(i)&&(n(i.key),h=""+i.key),"key"in i){p={};for(var z in i)z!=="key"&&(p[z]=i[z])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),g(r,h,p,o(),O,D)}function R(r){T(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===I&&(r._payload.status==="fulfilled"?T(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function T(r){return typeof r=="object"&&r!==null&&r.$$typeof===y}var v=E,y=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),$=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),L=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ee=Object.prototype.hasOwnProperty,je=Array.isArray,N=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(r){return r()}};var re,te={},ne=v.react_stack_bottom_frame.bind(v,s)(),ae=N(a(s)),se={};S.Fragment=$,S.jsx=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!1,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)},S.jsxs=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!0,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)}})()),S}var W;function le(){return W||(W=1,process.env.NODE_ENV==="production"?k.exports=oe():k.exports=ue()),k.exports}var l=le();function f(e,t="en"){return e?typeof e=="string"?e:e[t]||e.en||Object.values(e)[0]||"":""}function F(e,t="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,t)}):[]}function M({field:e,value:t,onChange:n,error:a,locale:o="en"}){const s=F(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:t,id:e.id,name:e.id,onChange:u=>n(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function V({field:e,value:t,onChange:n,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",name:e.id,onChange:s=>n(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function B({field:e,value:t,onChange:n,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!t,onChange:s=>n(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const U=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:t||null,onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},G=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:t||[],onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},J=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",onChange:s=>n(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),H=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{const s=F(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:t||"",onChange:u=>n(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u.value,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},ie=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(V,{field:e,value:t,onChange:n,error:a,locale:o});case"select":return l.jsx(M,{field:e,value:t,onChange:n,error:a,locale:o});case"autocomplete":return l.jsx(U,{field:e,value:t,onChange:n,error:a,locale:o});case"multi-autocomplete":return l.jsx(G,{field:e,value:t,onChange:n,error:a,locale:o});case"checkbox":return l.jsx(B,{field:e,value:t,onChange:n,error:a,locale:o});case"textarea":return l.jsx(J,{field:e,value:t,onChange:n,error:a,locale:o});case"radio":return l.jsx(H,{field:e,value:t,onChange:n,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},X=({field:e,value:t,onChange:n,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||ie;return l.jsx(u,{field:e,value:t,onChange:n,error:a,locale:s})};function ce(e){const t=e??12;return{xs:12,sm:t,md:t,lg:t,xl:t}}const de={required:(e,t)=>e.required&&(t==null||t==="")?`${e.label} is required`:null,min:(e,t)=>e.type==="number"&&e.min!==void 0&&t<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,t)=>e.type==="number"&&e.max!==void 0&&t>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,t)=>typeof t=="string"&&e.minLength!==void 0&&t.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,t)=>typeof t=="string"&&e.maxLength!==void 0&&t.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,t)=>e.pattern&&typeof t=="string"&&!e.pattern.test(t)?`${e.label} is invalid`:null,options:(e,t)=>e.type==="select"&&e.options&&!e.options.includes(t)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,t)=>{if(e.type==="date"&&t){const n=new Date(t);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,t)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(t);if(typeof n=="string")return n}return null}},Z=(e,t,n="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=w(e,t,s.id);u.length>0&&(a[s.id]=u)})}),a},w=(e,t,n,a="en")=>{const o=e.sections.flatMap(g=>g.fields).find(g=>g.id===n);if(!o)return[];const s=o.validations||{},u=t[n],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const g=s.validate(u);g&&d.push(f(g,a))}return d};function P(e,t){if(!e)return!0;if("field"in e){let n=t[e.field]??"";return Array.isArray(n)?n=n.map(a=>a.value??""):typeof n=="object"&&n!==null&&(n=n.value??""),e.equals!==void 0?n===e.equals:e.notEquals!==void 0?n!==e.notEquals:e.in!==void 0?Array.isArray(n)?e.in?n.some(a=>e.in.includes(a)):!1:e.in.includes(n):e.notIn!==void 0?Array.isArray(n)?n.every(a=>!e.notIn.includes(a)):!e.notIn.includes(n):e.greaterThan!==void 0?n>e.greaterThan:e.lessThan!==void 0?n<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>P(a,t));if(e.operator==="OR")return e.conditions.some(n=>P(n,t))}return!1}const Q=({section:e,values:t,onChange:n,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>P(u.visibleWhen,t)&&l.jsx(c.Grid,{size:ce(u.layout?.cols),children:l.jsx(X,{field:u,value:t[u.id],onChange:d=>n(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function K(e,t="en",n){const[a,o]=E.useState({}),[s,u]=E.useState({});return{values:a,handleChange:(T,v)=>{if(o(y=>({...y,[T]:v})),u(y=>({...y,[T]:null})),n){let y=v;Array.isArray(v)?y=v.map(C=>C.value??""):typeof v=="object"&&v!==null&&(y=v.value??""),n(T,y)}},validateAll:()=>Z(e,a,t),getValues:()=>a,getErrors:()=>s,validateField:T=>w(e,a,T,t)}}const pe=E.forwardRef(({dto:e,renderers:t,locale:n="en",handleChangeCallback:a},o)=>{const{values:s,handleChange:u,getValues:d,getErrors:x,validateAll:g,validateField:j}=K(e,n,a);return E.useImperativeHandle(o,()=>({getValues:d,getErrors:x,validateAll:g,validateField:j})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(R=>l.jsx(Q,{section:R,values:s,onChange:u,renderers:t,validateField:j,locale:n},R.id))]})});m.AutoCompleteField=U,m.CheckBoxInput=B,m.Field=X,m.FormBuilder=pe,m.MultiAutoCompleteField=G,m.RadioInput=H,m.Section=Q,m.SelectInput=M,m.TextAreaInput=J,m.TextInput=V,m.useFormBuilder=K,m.validateAll=Z,m.validateField=w,m.validationRules=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/stories/FormBuilder.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
         dto: FormDTO;
         renderers?: Record<string, React.ComponentType<any>>;
         locale?: string;
+        handleChangeCallback?: (id: string, val: any) => void;
     } & React.RefAttributes<FormBuilderHandle>>;
     argTypes: {
         dto: {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-form-dto",
     "description": "A React library for building forms using DTOs with MUI and TypeScript.",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",