@planetaexo/design-system 0.4.8 → 0.4.10

package/dist/index.cjs

@@ -4521,6 +4521,8 @@ function RegistrationForm({
   defaultValues,
   onChange,
   onSubmit,
+  onValidate,
+  externalErrors,
   terms,
   includeTerms = false,
   loading = false,
@@ -4552,6 +4554,7 @@ function RegistrationForm({
     )
   );
   const [submitAttempted, setSubmitAttempted] = React21__namespace.useState(false);
+  const [validationErrors, setValidationErrors] = React21__namespace.useState({});
   React21__namespace.useEffect(() => {
     if (isControlled) return;
     setInternal((prev) => {
@@ -4577,12 +4580,15 @@ function RegistrationForm({
   const termsEnabled = includeTerms && !!terms;
   const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
   const handleSubmit = (e) => {
+    var _a2;
     e.preventDefault();
     setSubmitAttempted(true);
     const hasRequiredEmpty = sortedFields.some(
       (f) => f.required && isFieldEmpty(f, current[f.id])
     );
-    if (hasRequiredEmpty || termsEnabled && !termsAccepted) return;
+    const extraErrors = (_a2 = onValidate == null ? void 0 : onValidate(current)) != null ? _a2 : {};
+    setValidationErrors(extraErrors);
+    if (hasRequiredEmpty || Object.keys(extraErrors).length > 0 || termsEnabled && !termsAccepted) return;
     onSubmit == null ? void 0 : onSubmit(current);
   };
   const dateRange = formatDateRange(adventure, dateFormatter);
@@ -4594,7 +4600,24 @@ function RegistrationForm({
         fieldErrors[field.id] = L.requiredFieldError;
       }
     }
+    for (const [id, msg] of Object.entries(validationErrors)) {
+      if (!fieldErrors[id]) fieldErrors[id] = msg;
+    }
+    if (externalErrors) {
+      for (const [id, msg] of Object.entries(externalErrors)) {
+        if (!fieldErrors[id]) fieldErrors[id] = msg;
+      }
+    }
   }
+  const firstErrorFieldId = Object.keys(fieldErrors)[0];
+  React21__namespace.useEffect(() => {
+    if (!submitAttempted || !firstErrorFieldId) return;
+    const timer = setTimeout(() => {
+      const elem = document.getElementById(`rf-${firstErrorFieldId}`);
+      if (elem) elem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [submitAttempted, firstErrorFieldId, validationErrors]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -4670,7 +4693,7 @@ function RegistrationForm({
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
             var _a2;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `rf-${field.id}`, className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 FieldRenderer,
                 {