@digiform/wizard 0.3.1 → 0.3.2

package/wizard/src/features/form-runtime/components/FormSection/FormSection.js

@@ -1,270 +1,226 @@
 "use client";
-import { jsx as g, jsxs as h } from "react/jsx-runtime";
-import { clsx as k } from "clsx";
-import { X as _, Edit as D, Check as P } from "lucide-react";
-import { memo as w, useState as L, useMemo as x, useEffect as M, useCallback as S } from "react";
-import u from "./FormSection.module.css.js";
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+import { clsx as _ } from "clsx";
+import { X as k, Edit as P, Check as L } from "lucide-react";
+import { memo as M, useState as w, useMemo as v, useEffect as D, useCallback as g } from "react";
+import d from "./FormSection.module.css.js";
 import { useFormContext as R } from "../../hooks/useFormContext.js";
-import $ from "../FormField.js";
-import { useFormMachine as B } from "../../../state-management/machines/useFormMachine.js";
+import B from "../FormField.js";
+import { useFormMachine as G } from "../../../state-management/machines/useFormMachine.js";
 import { evaluateVisibility as U } from "../../utils/visibilityUtils.js";
-import { ComponentTriggerEngine as G } from "../../../state-management/machines/componentTriggerEngine.js";
-import { Heading as q, Button as j } from "@rijkshuisstijl-community/components-react";
-const H = w(({ section: e }) => {
-  const [a, d, p] = B(), {
-    validateSection: y,
+import { ComponentTriggerEngine as j } from "../../../state-management/machines/componentTriggerEngine.js";
+import { Heading as H, Button as z } from "@rijkshuisstijl-community/components-react";
+const W = M(({ section: t }) => {
+  const [o, r, p] = G(), {
+    validateSection: T,
     validateField: C,
-    startSectionEdit: T,
-    cancelSectionEdit: F
-  } = p, m = R(), [f, E] = L(!1), N = x(() => {
-    if (!e.visibilityConditions)
+    startSectionEdit: N,
+    cancelSectionEdit: y
+  } = p, s = R(), [f, h] = w(!1), O = v(() => {
+    if (!t.visibilityConditions)
       return !0;
-    const o = a.context.data;
-    return U(e.visibilityConditions, o);
-  }, [e.visibilityConditions, a.context.data]), r = x(
+    const e = o.context.data;
+    return U(t.visibilityConditions, e);
+  }, [t.visibilityConditions, o.context.data]), a = v(
     () => ({
-      title: e.title,
-      components: e.components || [],
-      mode: e.mode || "default",
+      title: t.title,
+      components: t.components || [],
+      mode: t.mode || "default",
       // Default to always-editable mode when no mode is specified
-      editText: e.editText || "Edit",
-      cancelText: e.cancelText || "Cancel",
-      saveText: e.saveText || "Save",
-      showTitle: e.showTitle ?? !0,
-      showActionLink: e.showActionLink ?? !0
+      editText: t.editText || "Edit",
+      cancelText: t.cancelText || "Cancel",
+      saveText: t.saveText || "Save",
+      showTitle: t.showTitle ?? !0,
+      showActionLink: t.showActionLink ?? !0
     }),
-    [e]
-  ), I = x(() => {
-    const o = r.mode === "isEditable" ? "default" : r.mode;
-    return o === "readOnly" ? !0 : o === "editable" ? !f : !1;
-  }, [r.mode, f]), n = x(
-    () => r.components.map((o) => o.id),
-    [r.components]
-  ), b = x(
-    () => a.context.activeDialog,
-    [a.context.activeDialog]
+    [t]
+  ), V = v(() => {
+    const e = a.mode === "isEditable" ? "default" : a.mode;
+    return e === "readOnly" ? !0 : e === "editable" ? !f : !1;
+  }, [a.mode, f]), n = v(
+    () => a.components.map((e) => e.id),
+    [a.components]
+  ), S = v(
+    () => o.context.activeDialog,
+    [o.context.activeDialog]
   );
-  M(() => {
-    r.mode !== "editable" || !f || b && !a.context.activeDialog && (console.log(
-      "🔥 FormSection: Dialog closed, checking if verification completed"
-    ), n.every((t) => {
-      const c = a.context.data[t], l = a.context.componentOriginalValues[t];
-      return c === l?.value;
-    }) && (console.log(
-      "🔥 FormSection: All fields clean after verification, clearing alerts and exiting edit mode"
-    ), n.forEach((t) => {
-      d({
+  D(() => {
+    a.mode !== "editable" || !f || S && !o.context.activeDialog && n.every((c) => {
+      const i = o.context.data[c], m = o.context.componentOriginalValues[c];
+      return i === m?.value;
+    }) && (n.forEach((c) => {
+      r({
         type: "CLEAR_COMPONENT_ALERT",
-        componentId: t
+        componentId: c
       });
-    }), E(!1)));
+    }), h(!1));
   }, [
-    a.context.activeDialog,
-    a.context.data,
-    a.context.componentOriginalValues,
+    o.context.activeDialog,
+    o.context.data,
+    o.context.componentOriginalValues,
     n,
-    d,
-    r.mode,
+    r,
+    a.mode,
     f,
-    b
+    S
   ]);
-  const O = S(() => {
-    console.log("Start edit - creating backup for fields:", n);
-    const o = n.map((t) => ({
-      fieldId: t,
-      value: m.getFieldValue(t)
-    }));
-    console.log("Start edit - current form values:", o), n.forEach((t) => {
-      const c = m.getFieldValue(t);
-      p.setData(t, c);
-      const l = a.context.componentOriginalValues[t];
-      (!l || !l.isPopulated) && (console.log(
-        `Setting original value for ${t} on edit start:`,
-        c
-      ), d({
+  const I = g(() => {
+    n.map((e) => ({
+      fieldId: e,
+      value: s.getFieldValue(e)
+    })), n.forEach((e) => {
+      const c = s.getFieldValue(e);
+      p.setData(e, c);
+      const i = o.context.componentOriginalValues[e];
+      (!i || !i.isPopulated) && r({
         type: "SET_COMPONENT_ORIGINAL_VALUE",
-        componentId: t,
+        componentId: e,
         value: c,
         source: "edit_start"
-      }));
-    }), T(e.id, n), E(!0);
+      });
+    }), N(t.id, n), h(!0);
   }, [
-    T,
-    e.id,
+    N,
+    t.id,
     n,
-    m,
+    s,
     p,
-    a.context.componentOriginalValues,
-    d
-  ]), V = S(() => {
-    const o = a.context.sectionBackups[e.id];
-    console.log("Cancel edit - backup data:", o), console.log("Cancel edit - section fields:", n), o ? n.forEach((t) => {
-      const c = o[t], l = m.getFieldValue(t);
-      console.log(
-        `Restoring field ${t}: ${l} -> ${c}`
-      ), c !== void 0 && m.setFieldValue(t, c), console.log(
-        `🧹 [FormSection] Dismissing alerts for field ${t} after cancel edit`
-      ), d({
+    o.context.componentOriginalValues,
+    r
+  ]), F = g(() => {
+    const e = o.context.sectionBackups[t.id];
+    e ? n.forEach((c) => {
+      const i = e[c];
+      s.getFieldValue(c), i !== void 0 && s.setFieldValue(c, i), r({
         type: "DISMISS_COMPONENT_ALERT",
-        componentId: t
+        componentId: c
         // Don't specify alertId to clear all alerts for this component
       });
-    }) : console.warn("No backup data found for section:", e.id), F(e.id), E(!1);
+    }) : console.warn("No backup data found for section:", t.id), y(t.id), h(!1);
   }, [
-    a.context.sectionBackups,
-    e.id,
+    o.context.sectionBackups,
+    t.id,
     n,
-    m,
-    F,
-    d
-  ]), A = S(async () => {
-    console.log(
-      "FormSection: Triggering validation display for fields:",
-      n
-    ), n.forEach((c) => {
-      const l = new CustomEvent("triggerFieldValidation", {
-        detail: { fieldId: c, sectionId: e.id }
+    s,
+    y,
+    r
+  ]), A = g(async () => {
+    n.forEach((i) => {
+      const m = new CustomEvent("triggerFieldValidation", {
+        detail: { fieldId: i, sectionId: t.id }
       });
-      console.log(
-        `FormSection: Dispatching validation trigger for field ${c}`
-      ), window.dispatchEvent(l);
+      window.dispatchEvent(m);
     });
-    let o = !1;
-    const t = n.map((c) => C(c));
-    await Promise.all(t);
-    for (const c of n) {
-      const l = m.getFieldMeta(c);
-      if (l.errors && l.errors.length > 0) {
-        o = !0;
+    let e = !1;
+    const c = n.map((i) => C(i));
+    await Promise.all(c);
+    for (const i of n) {
+      const m = s.getFieldMeta(i);
+      if (m.errors && m.errors.length > 0) {
+        e = !0;
         break;
       }
     }
-    if (y(e.id), !o) {
-      console.log(
-        "🔄 [FormSection] Syncing current form values to XState before trigger evaluation"
-      ), n.forEach((i) => {
-        const s = m.getFieldValue(i);
-        p.setData(i, s), console.log(`🔄 [FormSection] Synced field ${i}:`, s);
-      }), console.log(
-        "🎯 [FormSection] Checking for dirty fields with verification requirements"
-      );
-      const c = p.config, l = a.context.currentStepIndex, v = G.createExecutionPlan(
-        c,
+    if (T(t.id), !e) {
+      n.forEach((l) => {
+        const x = s.getFieldValue(l);
+        p.setData(l, x);
+      });
+      const i = p.config, m = o.context.currentStepIndex, b = j.createExecutionPlan(
+        i,
         "save",
-        l,
-        a.context
+        m,
+        o.context
       );
-      if (console.log("🎯 [FormSection] save execution plan:", {
-        totalActions: v.totalActions,
-        executionsCount: v.executions.length,
-        requiresUserInteraction: v.requiresUserInteraction,
-        executions: v.executions.map((i) => ({
-          componentId: i.componentId,
-          triggerId: i.trigger.id,
-          actionsCount: i.actions.length,
-          actions: i.actions.map((s) => ({
-            id: s.id,
-            type: s.type,
-            contexts: s.contexts
-          }))
-        }))
-      }), v.totalActions > 0) {
-        v.executions.forEach((i) => {
-          i.actions.forEach((s) => {
-            console.log(
-              `🎯 [FormSection] Executing ${s.type} action for component ${i.componentId}`,
-              {
-                componentId: i.componentId,
-                triggerId: i.trigger.id,
-                actionId: s.id,
-                actionType: s.type
-              }
-            ), d({
+      if (b.totalActions > 0) {
+        b.executions.forEach((l) => {
+          l.actions.forEach((x) => {
+            r({
               type: "TRIGGER_COMPONENT_ACTION",
-              componentId: i.componentId,
-              triggerId: i.trigger.id,
-              actionId: s.id,
+              componentId: l.componentId,
+              triggerId: l.trigger.id,
+              actionId: x.id,
               eventType: "sectionSave"
             });
           });
         });
         return;
       }
-      n.forEach((i) => {
-        d({
+      n.forEach((l) => {
+        r({
           type: "CLEAR_COMPONENT_ALERT",
-          componentId: i
+          componentId: l
         });
-      }), n.forEach((i) => {
-        d({
+      }), n.forEach((l) => {
+        r({
           type: "UPDATE_COMPONENT_ORIGINAL_VALUE",
-          componentId: i
+          componentId: l
         });
-      }), E(!1);
+      }), h(!1);
     }
   }, [
     n,
     C,
-    m,
-    y,
-    e.id,
+    s,
+    T,
+    t.id,
     p,
-    a.context.currentStepIndex,
-    a.context,
-    d
+    o.context.currentStepIndex,
+    o.context,
+    r
   ]);
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ u(
     "div",
     {
       style: {
-        display: N ? "block" : "none"
+        display: O ? "block" : "none"
       },
-      "data-section-id": e.id,
-      "data-visible": N,
-      children: /* @__PURE__ */ h("div", { className: k("form-section", u.section), children: [
-        r.showTitle && /* @__PURE__ */ h("div", { className: u.sectionHeader, children: [
-          /* @__PURE__ */ g(q, { level: 3, children: r.title }),
-          r.mode === "editable" && r.showActionLink && /* @__PURE__ */ g("div", { children: f ? /* @__PURE__ */ h(
+      "data-section-id": t.id,
+      "data-visible": O,
+      children: /* @__PURE__ */ E("div", { className: _("form-section", d.section), children: [
+        a.showTitle && /* @__PURE__ */ E("div", { className: d.sectionHeader, children: [
+          /* @__PURE__ */ u(H, { level: 3, children: a.title }),
+          a.mode === "editable" && a.showActionLink && /* @__PURE__ */ u("div", { children: f ? /* @__PURE__ */ E(
             "button",
             {
               type: "button",
-              onClick: V,
-              className: u.cancelButton,
+              onClick: F,
+              className: d.cancelButton,
               children: [
-                /* @__PURE__ */ g(_, { className: u.iconSm }),
-                r.cancelText
+                /* @__PURE__ */ u(k, { className: d.iconSm }),
+                a.cancelText
               ]
             }
-          ) : /* @__PURE__ */ h(
+          ) : /* @__PURE__ */ E(
             "button",
             {
               type: "button",
-              onClick: O,
-              className: u.editButton,
+              onClick: I,
+              className: d.editButton,
               children: [
-                /* @__PURE__ */ g(D, { className: u.iconSm }),
-                r.editText
+                /* @__PURE__ */ u(P, { className: d.iconSm }),
+                a.editText
               ]
             }
           ) })
         ] }),
-        /* @__PURE__ */ h("div", { className: u.sectionContent, children: [
-          r.components.map((o) => /* @__PURE__ */ g(
-            $,
+        /* @__PURE__ */ E("div", { className: d.sectionContent, children: [
+          a.components.map((e) => /* @__PURE__ */ u(
+            B,
             {
-              component: o,
-              readOnly: I
+              component: e,
+              readOnly: V
             },
-            o.id
+            e.id
           )),
-          f && /* @__PURE__ */ g("div", { className: u.saveButtonsWrapper, children: /* @__PURE__ */ h(
-            j,
+          f && /* @__PURE__ */ u("div", { className: d.saveButtonsWrapper, children: /* @__PURE__ */ E(
+            z,
             {
               appearance: "primary-action-button",
               onClick: A,
               children: [
-                /* @__PURE__ */ g(P, { className: u.iconSm }),
-                r.saveText
+                /* @__PURE__ */ u(L, { className: d.iconSm }),
+                a.saveText
               ]
             }
           ) })
@@ -273,7 +229,7 @@ const H = w(({ section: e }) => {
     }
   );
 });
-H.displayName = "FormSection";
+W.displayName = "FormSection";
 export {
-  H as default
+  W as default
 };