@digiform/wizard 0.3.1 → 0.3.3

package/wizard/src/features/state-management/machines/useFormMachine.js

@@ -1,23 +1,23 @@
 "use client";
-import { useMachine as me } from "@xstate/react";
-import fe, { useMemo as f, useCallback as o, createContext as Ee, useContext as Ce } from "react";
+import { useMachine as gt } from "@xstate/react";
+import ft, { useMemo as g, useCallback as o, createContext as Et, useContext as Ct } from "react";
 import { ComponentTriggerEngine as V } from "./componentTriggerEngine.js";
-import { formMachine as he } from "./formMachine.js";
-import { ValidationEngine as Fe } from "../../validation-system/validation/ValidationEngine.js";
-const ve = ({
+import { formMachine as ht } from "./formMachine.js";
+import { ValidationEngine as Tt } from "../../validation-system/validation/ValidationEngine.js";
+const vt = ({
   config: i,
-  initialData: g = {},
+  initialData: m = {},
   onSubmit: p
 }) => {
-  const d = f(() => new Fe({
+  const d = g(() => new Tt({
     messageStyle: i.validationMessageStyle || "withLabel",
     debounceMs: 300
-  }), [i.validationMessageStyle]), [m, n] = me(he, {
+  }), [i.validationMessageStyle]), [f, n] = gt(ht, {
     input: {
       config: i,
       currentStepId: i.steps[0]?.id || "",
       currentStepIndex: 0,
-      data: g,
+      data: m,
       errors: {},
       dirtyFields: {},
       touchedFields: {},
@@ -25,16 +25,16 @@ const ve = ({
       isSubmitting: !1
     }
     // Reduced inspection logging for performance
-  }), { context: s } = m, v = s.currentStepId, E = s.currentStepIndex, u = s.data, M = s.errors, h = s.isValid, O = s.isSubmitting, I = s.dirtyFields, R = s.touchedFields, N = f(
+  }), { context: s } = f, v = s.currentStepId, E = s.currentStepIndex, u = s.data, I = s.errors, h = s.isValid, O = s.isSubmitting, M = s.dirtyFields, R = s.touchedFields, N = g(
     () => i.steps[E],
     [i.steps, E]
-  ), D = f(() => i.steps, [i.steps]), L = E === 0, P = E === i.steps.length - 1, F = o(
-    (e) => {
-      for (const t of i.steps) {
-        const r = "sections" in t ? t.sections : [];
-        for (const c of r || []) {
-          const a = c.components?.find(
-            (l) => l.id === e
+  ), D = g(() => i.steps, [i.steps]), L = E === 0, P = E === i.steps.length - 1, T = o(
+    (t) => {
+      for (const e of i.steps) {
+        const r = e.sections || [];
+        for (const l of r || []) {
+          const a = l.components?.find(
+            (c) => c.id === t
           );
           if (a)
             return a;
@@ -44,121 +44,121 @@ const ve = ({
     },
     [i.steps]
   ), S = o(
-    (e, t) => {
+    (t, e) => {
       n({
         type: "SET_FIELD_STATE",
-        componentId: e,
-        state: { error: t }
+        componentId: t,
+        state: { error: e }
       });
     },
     [n]
   ), C = o(
-    (e) => {
+    (t) => {
       n({
         type: "SET_FIELD_STATE",
-        componentId: e,
+        componentId: t,
         state: { error: null }
       });
     },
     [n]
   ), x = o(
-    (e, t) => {
-      n({ type: "SET_DATA", key: e, value: t });
+    (t, e) => {
+      n({ type: "SET_DATA", key: t, value: e });
     },
     [n]
-  ), T = o(
-    (e) => {
-      const t = F(e);
-      if (!t) return !0;
+  ), F = o(
+    (t) => {
+      const e = T(t);
+      if (!e) return !0;
       const r = d.validateField(
-        t,
-        u[e]
+        e,
+        u[t]
       );
       if (!r.isValid) {
-        const c = r.errors?.[0] || "Validation error";
-        return S(e, c), !1;
+        const l = r.errors?.[0] || "Validation error";
+        return S(t, l), !1;
       }
-      return C(e), !0;
+      return C(t), !0;
     },
-    [u, F, S, C, d]
+    [u, T, S, C, d]
   ), w = o(
-    (e) => {
-      let t = !0;
+    (t) => {
+      let e = !0;
       for (const r of i.steps) {
-        const a = ("sections" in r ? r.sections : [])?.find(
-          (l) => l.id === e
+        const a = (r.sections || []).find(
+          (c) => c.id === t
         );
         if (a) {
-          for (const l of a.components || [])
-            T(l.id) || (t = !1);
+          for (const c of a.components || [])
+            F(c.id) || (e = !1);
           break;
         }
       }
-      return t;
+      return e;
     },
-    [i.steps, T]
-  ), b = o(
-    async (e) => {
-      const t = i.steps.find((a) => a.id === e);
-      if (!t || !("sections" in t)) return !0;
-      const r = await d.validateStep(t, u);
-      for (const [a, l] of Object.entries(
+    [i.steps, F]
+  ), W = o(
+    async (t) => {
+      const e = i.steps.find((a) => a.id === t);
+      if (!e) return !0;
+      const r = await d.validateStep(e, u);
+      for (const [a, c] of Object.entries(
         r.fieldErrors
       ))
-        l.length > 0 && S(a, l[0]);
-      const c = t.sections?.flatMap(
+        c.length > 0 && S(a, c[0]);
+      const l = e.sections?.flatMap(
         (a) => a.components || []
       ) || [];
-      for (const a of c)
+      for (const a of l)
         r.fieldErrors[a.id] || C(a.id);
       return r.isValid;
     },
     [i.steps, d, u, S, C]
-  ), G = o(async () => {
-    const e = await d.validateForm(i, u);
-    for (const [t, r] of Object.entries(
-      e.fieldErrors
+  ), b = o(async () => {
+    const t = await d.validateForm(i, u);
+    for (const [e, r] of Object.entries(
+      t.fieldErrors
     ))
-      r.length > 0 && S(t, r[0]);
-    return e.isValid;
-  }, [i, d, u, S]), W = o(() => {
+      r.length > 0 && S(e, r[0]);
+    return t.isValid;
+  }, [i, d, u, S]), G = o(() => {
     n({ type: "NEXT" });
   }, [n]), U = o(() => {
     n({ type: "PREVIOUS" });
   }, [n]), k = o(
-    (e) => {
-      n({ type: "GO_TO_STEP", stepId: e });
+    (t) => {
+      n({ type: "GO_TO_STEP", stepId: t });
     },
     [n]
-  ), $ = o(async () => {
+  ), j = o(async () => {
     if (n({ type: "SUBMIT" }), h && p)
       try {
         await p(u), n({ type: "SUBMIT_SUCCESS" });
-      } catch (e) {
+      } catch (t) {
         n({
           type: "SUBMIT_ERROR",
-          error: e instanceof Error ? e : new Error("Unknown error occurred")
+          error: t instanceof Error ? t : new Error("Unknown error occurred")
         });
       }
-  }, [n, h, p, u]), j = o(() => {
+  }, [n, h, p, u]), B = o(() => {
     n({ type: "RESET" });
-  }, [n]), B = o(
-    (e, t) => {
-      n({ type: "START_SECTION_EDIT", sectionId: e, componentIds: t });
+  }, [n]), z = o(
+    (t, e) => {
+      n({ type: "START_SECTION_EDIT", sectionId: t, componentIds: e });
     },
     [n]
-  ), z = o(
-    (e) => {
-      n({ type: "CANCEL_SECTION_EDIT", sectionId: e });
+  ), H = o(
+    (t) => {
+      n({ type: "CANCEL_SECTION_EDIT", sectionId: t });
     },
     [n]
-  ), H = o(
-    (e, t, r) => {
-      n({ type: "FIELD_CHANGED", fieldId: e, oldValue: t, newValue: r });
+  ), $ = o(
+    (t, e, r) => {
+      n({ type: "FIELD_CHANGED", fieldId: t, oldValue: e, newValue: r });
     },
     [n]
   ), K = o(
-    (e) => e ? s.fieldChangeState[e] || {
+    (t) => t ? s.fieldChangeState[t] || {
       originalValue: void 0,
       currentValue: void 0,
       hasChanged: !1,
@@ -166,146 +166,128 @@ const ve = ({
     } : s.fieldChangeState,
     [s.fieldChangeState]
   ), X = o(
-    (e) => {
-      n({ type: "CLEAR_FIELD_CHANGES", fieldId: e });
+    (t) => {
+      n({ type: "CLEAR_FIELD_CHANGES", fieldId: t });
     },
     [n]
   ), q = o(
-    (e, t) => {
-      n({ type: "TRIGGER_FIELD_WARNING", fieldId: e, warning: t });
+    (t, e) => {
+      n({ type: "TRIGGER_FIELD_WARNING", fieldId: t, warning: e });
     },
     [n]
   ), J = o(
-    (e, t) => {
-      n({ type: "DISMISS_FIELD_WARNING", fieldId: e, warningId: t });
+    (t, e) => {
+      n({ type: "DISMISS_FIELD_WARNING", fieldId: t, warningId: e });
     },
     [n]
   ), Q = o(
-    (e) => s.fieldChangeState[e]?.validationWarnings || [],
+    (t) => s.fieldChangeState[t]?.validationWarnings || [],
     [s.fieldChangeState]
   ), Y = o(
-    async (e, t) => (n({ type: "START_FIELD_VERIFICATION", fieldId: e, config: t }), new Promise((r) => {
+    async (t, e) => (n({ type: "START_FIELD_VERIFICATION", fieldId: t, config: e }), new Promise((r) => {
       setTimeout(() => {
-        const c = {
+        const l = {
           status: "success",
           timestamp: Date.now(),
           result: { verified: !0 }
         };
         n({
           type: "FIELD_VERIFICATION_COMPLETE",
-          fieldId: e,
-          result: c,
+          fieldId: t,
+          result: l,
           success: !0
-        }), r(c);
+        }), r(l);
       }, 1e3);
     })),
     [n]
   ), Z = o(
-    (e) => s.fieldValidationState.verificationResults[e] || null,
+    (t) => s.fieldValidationState.verificationResults[t] || null,
     [s.fieldValidationState.verificationResults]
-  ), ee = f(() => s.fieldValidationState.activeWarnings.length > 0, [s.fieldValidationState.activeWarnings]), te = f(() => s.fieldValidationState.pendingVerifications.length > 0, [s.fieldValidationState.pendingVerifications]), ne = f(() => Object.keys(s.fieldChangeState).length > 0, [s.fieldChangeState]), se = o(
-    (e, t, r) => {
-      console.log(
-        `🚀 [useFormMachine] evaluateComponentTriggers called for ${e}:`,
-        {
-          eventType: t,
-          value: r,
-          componentId: e,
-          sendFunction: !!n,
-          currentState: m.value
-        }
-      );
-      const c = {
+  ), tt = g(() => s.fieldValidationState.activeWarnings.length > 0, [s.fieldValidationState.activeWarnings]), et = g(() => s.fieldValidationState.pendingVerifications.length > 0, [s.fieldValidationState.pendingVerifications]), nt = g(() => Object.keys(s.fieldChangeState).length > 0, [s.fieldChangeState]), st = o(
+    (t, e, r) => {
+      n({
         type: "EVALUATE_COMPONENT_TRIGGERS",
-        componentId: e,
-        eventType: t,
+        componentId: t,
+        eventType: e,
         value: r
-      };
-      console.log("🚀 [useFormMachine] About to send event:", c), n(c), console.log(
-        `🚀 [useFormMachine] EVALUATE_COMPONENT_TRIGGERS event sent for ${e}`
-      );
+      });
     },
-    [n, m.value]
-  ), re = o(
-    (e, t, r = "initialized") => {
+    [n, f.value]
+  ), rt = o(
+    (t, e, r = "initialized") => {
       n({
         type: "SET_COMPONENT_ORIGINAL_VALUE",
-        componentId: e,
-        value: t,
+        componentId: t,
+        value: e,
         source: r
       });
     },
     [n]
-  ), oe = o(
-    (e, t) => {
+  ), ot = o(
+    (t, e) => {
       n({
         type: "MARK_COMPONENT_AS_POPULATED",
-        componentId: e,
-        value: t
+        componentId: t,
+        value: e
       });
     },
     [n]
-  ), ie = o(
-    (e) => s.componentOriginalValues[e]?.value,
+  ), it = o(
+    (t) => s.componentOriginalValues[t]?.value,
     [s.componentOriginalValues]
-  ), ae = o(
-    (e, t) => {
-      const r = s.componentOriginalValues[e];
-      return !r || !r.isPopulated ? !1 : r.value !== t;
+  ), at = o(
+    (t, e) => {
+      const r = s.componentOriginalValues[t];
+      return !r || !r.isPopulated ? !1 : r.value !== e;
     },
     [s.componentOriginalValues]
-  ), ce = o(
-    (e) => s.componentAlerts[e] || [],
+  ), ct = o(
+    (t) => s.componentAlerts[t] || [],
     [s.componentAlerts]
-  ), le = o(
-    (e, t) => {
+  ), lt = o(
+    (t, e) => {
       n({
         type: "DISMISS_COMPONENT_ALERT",
-        componentId: e,
-        alertId: t
+        componentId: t,
+        alertId: e
       });
     },
     [n]
-  ), de = o(
-    (e, t) => {
+  ), dt = o(
+    (t, e) => {
       try {
-        const r = e.getFieldValue(t);
-        console.log(
-          `🔄 [useFormMachine] Resetting dirty state for field ${t}:`,
-          { currentValue: r }
-        ), e.resetField(t), r != null && r !== "" && e.setFieldValue(t, r, {
+        const r = t.getFieldValue(e);
+        t.resetField(e), r != null && r !== "" && t.setFieldValue(e, r, {
           dontUpdateMeta: !0
           // This prevents marking as dirty/touched
-        }), console.log(
-          `✅ [useFormMachine] Field ${t} dirty state reset complete`
-        );
+        });
       } catch (r) {
         console.error(
-          `❌ [useFormMachine] Error resetting dirty state for field ${t}:`,
+          `❌ [useFormMachine] Error resetting dirty state for field ${e}:`,
           r
         );
       }
     },
     []
-  ), ue = o(
-    (e) => V.hasComponentTriggers(i, e),
+  ), ut = o(
+    (t) => V.hasComponentTriggers(i, t),
     [i]
-  ), pe = o(
-    (e) => V.hasComponentActions(i, e),
+  ), pt = o(
+    (t) => V.hasComponentActions(i, t),
     [i]
-  ), Se = o(
-    (e) => {
-      const t = V.findComponentTriggers(
+  ), St = o(
+    (t) => {
+      const e = V.findComponentTriggers(
         i,
-        e
-      ), r = Object.entries(s.componentTriggerState).filter(([l]) => l.startsWith(`${e}-`)).reduce(
-        (l, [y, ge]) => (l[y] = ge, l),
+        t
+      ), r = Object.entries(s.componentTriggerState).filter(([c]) => c.startsWith(`${t}-`)).reduce(
+        (c, [A, mt]) => (c[A] = mt, c),
         {}
-      ), c = s.activeComponentActions[e] || [], a = s.componentAlerts[e] || [];
+      ), l = s.activeComponentActions[t] || [], a = s.componentAlerts[t] || [];
       return {
-        triggers: t,
+        triggers: e,
         triggerStates: r,
-        activeActions: c,
+        activeActions: l,
         alerts: a
       };
     },
@@ -318,17 +300,17 @@ const ve = ({
   );
   return {
     // XState primitives - for direct machine access
-    state: m,
+    state: f,
     send: n,
     // Computed state values
     currentStep: N,
     currentStepId: v,
     currentStepIndex: E,
     data: u,
-    errors: M,
+    errors: I,
     isValid: h,
     isSubmitting: O,
-    dirtyFields: I,
+    dirtyFields: M,
     touchedFields: R,
     isFirstStep: L,
     isLastStep: P,
@@ -337,24 +319,24 @@ const ve = ({
     // Shared validation engine
     validationEngine: d,
     // Helper functions
-    findComponentById: F,
+    findComponentById: T,
     setFieldError: S,
     clearFieldError: C,
     // Actions
     setData: x,
-    validateField: T,
+    validateField: F,
     validateSection: w,
-    validateStep: b,
-    validateForm: G,
-    nextStep: W,
+    validateStep: W,
+    validateForm: b,
+    nextStep: G,
     previousStep: U,
     goToStep: k,
-    submitForm: $,
-    resetForm: j,
-    startSectionEdit: B,
-    cancelSectionEdit: z,
+    submitForm: j,
+    resetForm: B,
+    startSectionEdit: z,
+    cancelSectionEdit: H,
     // Field change validation helpers
-    trackFieldChange: H,
+    trackFieldChange: $,
     getFieldChanges: K,
     clearFieldChanges: X,
     showFieldWarning: q,
@@ -363,50 +345,50 @@ const ve = ({
     startFieldVerification: Y,
     getVerificationStatus: Z,
     // Computed validation state
-    hasActiveWarnings: ee,
-    hasPendingVerifications: te,
-    hasFieldChanges: ne,
+    hasActiveWarnings: tt,
+    hasPendingVerifications: et,
+    hasFieldChanges: nt,
     fieldChangeState: s.fieldChangeState,
     fieldValidationState: s.fieldValidationState,
     // Component trigger-action system
-    evaluateComponentTriggers: se,
-    setComponentOriginalValue: re,
-    markComponentAsPopulated: oe,
-    getComponentOriginalValue: ie,
-    isComponentDirty: ae,
-    getComponentAlerts: ce,
-    dismissComponentAlert: le,
-    resetFieldDirtyState: de,
-    hasComponentTriggers: ue,
-    hasComponentActions: pe,
-    getComponentTriggerState: Se,
+    evaluateComponentTriggers: st,
+    setComponentOriginalValue: rt,
+    markComponentAsPopulated: ot,
+    getComponentOriginalValue: it,
+    isComponentDirty: at,
+    getComponentAlerts: ct,
+    dismissComponentAlert: lt,
+    resetFieldDirtyState: dt,
+    hasComponentTriggers: ut,
+    hasComponentActions: pt,
+    getComponentTriggerState: St,
     componentTriggerState: s.componentTriggerState,
     activeComponentActions: s.activeComponentActions,
     componentAlerts: s.componentAlerts,
     componentOriginalValues: s.componentOriginalValues
   };
 };
-let A = null;
-const _ = () => (A || (A = Ee(null)), A), Me = {
+let y = null;
+const _ = () => (y || (y = Et(null)), y), It = {
   Provider: ({
     children: i,
-    value: g
+    value: m
   }) => {
     const p = _();
-    return fe.createElement(p.Provider, { value: g }, i);
+    return ft.createElement(p.Provider, { value: m }, i);
   }
-}, Oe = () => {
-  const i = _(), g = Ce(i);
-  if (!g)
+}, Ot = () => {
+  const i = _(), m = Ct(i);
+  if (!m)
     throw new Error(
       "useFormMachine must be used within a FormWizard component"
     );
-  const { state: p, send: d, ...m } = g;
-  return [p, d, m];
+  const { state: p, send: d, ...f } = m;
+  return [p, d, f];
 };
 export {
-  Me as FormMachineContext,
-  Oe as default,
-  Oe as useFormMachine,
-  ve as useFormMachineProvider
+  It as FormMachineContext,
+  Ot as default,
+  Ot as useFormMachine,
+  vt as useFormMachineProvider
 };