@sonordev/site-kit 3.7.0 → 3.8.1

package/dist/forms/index.js

@@ -1,12 +1,12 @@
 'use client';
 'use strict';
 
-var chunkZKAZGLHI_js = require('../chunk-ZKAZGLHI.js');
+var chunk7CTKFXQ5_js = require('../chunk-7CTKFXQ5.js');
 var chunkV6NVBFEP_js = require('../chunk-V6NVBFEP.js');
 require('../chunk-VJMPIRSD.js');
-var chunkAKBGYQLC_js = require('../chunk-AKBGYQLC.js');
-require('../chunk-GZHLVOW3.js');
-require('../chunk-SCMHZBTN.js');
+var chunkGPXUJQFX_js = require('../chunk-GPXUJQFX.js');
+require('../chunk-XMKZXFVX.js');
+require('../chunk-J4RBHTWC.js');
 require('../chunk-ZSMWDLMK.js');
 var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -44,7 +44,7 @@ async function apiRequest(method, path, body) {
     const token = await getAuthToken();
     headers["Authorization"] = `Bearer ${token}`;
   }
-  const response = await chunkAKBGYQLC_js.sonorFetch(`${baseUrl}${path}`, {
+  const response = await chunkGPXUJQFX_js.sonorFetch(`${baseUrl}${path}`, {
     method,
     headers,
     body: body ? JSON.stringify(body) : void 0
@@ -897,7 +897,7 @@ async function uploadFormFile(file) {
   }
   const body = new FormData();
   body.append("file", file);
-  const response = await chunkAKBGYQLC_js.sonorFetch(
+  const response = await chunkGPXUJQFX_js.sonorFetch(
     `${apiUrl}/api/public/forms/upload`,
     {
       method: "POST",
@@ -925,6 +925,7 @@ function FormClient({
   const [values, setValues] = React2.useState({});
   const [errors, setErrors] = React2.useState({});
   const [step, setStep] = React2.useState(1);
+  const [stepDirection, setStepDirection] = React2.useState("forward");
   const [isSubmitting, setIsSubmitting] = React2.useState(false);
   const [isComplete, setIsComplete] = React2.useState(false);
   const [submitError, setSubmitError] = React2.useState(null);
@@ -932,7 +933,7 @@ function FormClient({
   const honeypotFieldName = config2.honeypot_field || chunkV6NVBFEP_js.DEFAULT_HONEYPOT_FIELD;
   const formLoadedAt = React2.useRef(Date.now());
   const isSubmittingRef = React2.useRef(false);
-  const { trackStepChange, trackComplete } = chunkZKAZGLHI_js.useFormTracking({
+  const { trackStepChange, trackComplete } = chunk7CTKFXQ5_js.useFormTracking({
     formId: config2.id,
     totalSteps: config2.total_steps
   });
@@ -940,9 +941,9 @@ function FormClient({
     if (!config2.is_multi_step) {
       return config2.fields || [];
     }
-    const currentStepConfig = config2.steps?.find((s) => s.step_number === step);
-    if (!currentStepConfig) return config2.fields || [];
-    return (config2.fields || []).filter((f) => f.step_id === currentStepConfig.id);
+    const currentStepConfig2 = config2.steps?.find((s) => s.step_number === step);
+    if (!currentStepConfig2) return config2.fields || [];
+    return (config2.fields || []).filter((f) => f.step_id === currentStepConfig2.id);
   }, [config2, step]);
   const isFieldVisible = React2.useCallback((field2) => {
     if (!field2.conditional?.show_when) return true;
@@ -1061,6 +1062,7 @@ function FormClient({
     if (!validateStep()) return false;
     if (step < config2.total_steps) {
       const newStep = step + 1;
+      setStepDirection("forward");
       setStep(newStep);
       trackStepChange(newStep);
       return true;
@@ -1070,28 +1072,33 @@ function FormClient({
   const prevStep = React2.useCallback(() => {
     if (step > 1) {
       const newStep = step - 1;
+      setStepDirection("back");
       setStep(newStep);
       trackStepChange(newStep);
     }
   }, [step, trackStepChange]);
   const goToStep = React2.useCallback((targetStep) => {
     if (targetStep >= 1 && targetStep <= config2.total_steps) {
+      setStepDirection(targetStep < step ? "back" : "forward");
       setStep(targetStep);
       trackStepChange(targetStep);
     }
-  }, [config2.total_steps, trackStepChange]);
+  }, [step, config2.total_steps, trackStepChange]);
   const submit = React2.useCallback(async () => {
     if (isSubmittingRef.current) return;
     const { ok, firstErrorStep } = validateAll();
     if (!ok) {
-      if (firstErrorStep != null) setStep(firstErrorStep);
+      if (firstErrorStep != null) {
+        setStepDirection("back");
+        setStep(firstErrorStep);
+      }
       return;
     }
     isSubmittingRef.current = true;
     setIsSubmitting(true);
     setSubmitError(null);
     try {
-      const data = await chunkZKAZGLHI_js.submitForm({
+      const data = await chunk7CTKFXQ5_js.submitForm({
         config: config2,
         values: buildVisibleValues(),
         honeypotValue: config2.honeypot_enabled ? honeypotValue : "",
@@ -1115,6 +1122,20 @@ function FormClient({
   const progress = React2.useMemo(() => {
     return Math.round(step / config2.total_steps * 100);
   }, [step, config2.total_steps]);
+  const currentStepConfig = React2.useMemo(
+    () => config2.steps?.find((s) => s.step_number === step),
+    [config2.steps, step]
+  );
+  const stepPanelRef = React2.useRef(null);
+  const hasNavigatedRef = React2.useRef(false);
+  React2.useEffect(() => {
+    if (!config2.is_multi_step) return;
+    if (!hasNavigatedRef.current) {
+      hasNavigatedRef.current = true;
+      return;
+    }
+    stepPanelRef.current?.focus();
+  }, [step, config2.is_multi_step]);
   const renderProps = {
     config: config2,
     fields: currentFields,
@@ -1133,7 +1154,7 @@ function FormClient({
   };
   if (isComplete) {
     const raw = config2.success_message;
-    const message = typeof raw === "string" && raw.trim().length > 0 ? raw.trim() : chunkZKAZGLHI_js.DEFAULT_FORM_SUCCESS_MESSAGE;
+    const message = typeof raw === "string" && raw.trim().length > 0 ? raw.trim() : chunk7CTKFXQ5_js.DEFAULT_FORM_SUCCESS_MESSAGE;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1164,51 +1185,77 @@ function FormClient({
         }
       },
       children: [
-        config2.is_multi_step && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress", style: { marginBottom: 20 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress-header", style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+        config2.is_multi_step && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__progress-header", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sk-form__progress-step", children: [
               "Step ",
               step,
               " of ",
               config2.total_steps
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sk-form__progress-percent", children: [
+            config2.show_progress && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sk-form__progress-percent", children: [
               progress,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__progress-track", style: {
-            height: 4,
-            backgroundColor: "var(--sk-progress-bg, #e5e7eb)",
-            borderRadius: 2,
-            overflow: "hidden"
-          }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__progress-bar", style: {
-            width: `${progress}%`,
-            height: "100%",
-            backgroundColor: "var(--sk-progress-fill, #2563eb)",
-            transition: "width 0.3s ease"
-          } }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__fields", children: currentFields.map((field2) => {
-          if (!isFieldVisible(field2)) return null;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `sk-form__field-wrapper sk-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-            FormField,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              field: field2,
-              value: values[field2.slug],
-              error: errors[field2.slug],
-              onChange: (value) => setFieldValue(field2.slug, value)
+              className: "sk-form__progress-track",
+              role: "progressbar",
+              "aria-valuemin": 1,
+              "aria-valuemax": config2.total_steps,
+              "aria-valuenow": step,
+              "aria-valuetext": `Step ${step} of ${config2.total_steps}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__progress-bar", style: { width: `${progress}%` } })
             }
-          ) }, field2.id);
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__actions", style: {
-          display: "flex",
-          justifyContent: step > 1 ? "space-between" : "flex-end",
-          marginTop: 24
-        }, children: [
-          step > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "sk-form__progress-dots", "aria-hidden": "true", children: Array.from({ length: config2.total_steps }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: "sk-form__progress-dot" + (n === step ? " sk-form__progress-dot--current" : "") + (n < step ? " sk-form__progress-dot--done" : "")
+            },
+            n
+          )) })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: stepPanelRef,
+            tabIndex: -1,
+            className: "sk-form__step" + (config2.is_multi_step ? ` sk-form__step--${stepDirection}` : ""),
+            children: [
+              config2.is_multi_step && (currentStepConfig?.title || currentStepConfig?.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sk-form__step-intro", children: [
+                currentStepConfig.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "sk-form__step-title", children: currentStepConfig.title }),
+                currentStepConfig.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sk-form__step-description", children: currentStepConfig.description })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sk-form__fields", children: currentFields.map((field2) => {
+                if (!isFieldVisible(field2)) return null;
+                return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `sk-form__field-wrapper sk-form__field-wrapper--${field2.width || "full"}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FormField,
+                  {
+                    field: field2,
+                    value: values[field2.slug],
+                    error: errors[field2.slug],
+                    onChange: (value) => setFieldValue(field2.slug, value)
+                  }
+                ) }, field2.id);
+              }) })
+            ]
+          },
+          step
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "sk-form__actions",
+            style: { justifyContent: step > 1 ? "space-between" : "flex-end" },
+            children: [
+              step > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
+            ]
+          }
+        ),
         submitError && /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
@@ -1257,7 +1304,7 @@ function ManagedForm({
     form,
     isLoading,
     fetchError
-  } = chunkZKAZGLHI_js.useForm(formId, {
+  } = chunk7CTKFXQ5_js.useForm(formId, {
     projectId,
     onSuccess,
     onError
@@ -1282,15 +1329,15 @@ function ManagedForm({
 
 Object.defineProperty(exports, "DEFAULT_FORM_SUCCESS_MESSAGE", {
   enumerable: true,
-  get: function () { return chunkZKAZGLHI_js.DEFAULT_FORM_SUCCESS_MESSAGE; }
+  get: function () { return chunk7CTKFXQ5_js.DEFAULT_FORM_SUCCESS_MESSAGE; }
 });
 Object.defineProperty(exports, "useForm", {
   enumerable: true,
-  get: function () { return chunkZKAZGLHI_js.useForm; }
+  get: function () { return chunk7CTKFXQ5_js.useForm; }
 });
 Object.defineProperty(exports, "useFormTracking", {
   enumerable: true,
-  get: function () { return chunkZKAZGLHI_js.useFormTracking; }
+  get: function () { return chunk7CTKFXQ5_js.useFormTracking; }
 });
 exports.DatePicker = DatePicker;
 exports.FormClient = FormClient;