@planetaexo/design-system 0.4.7 → 0.4.9

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",
     {
@@ -4646,31 +4669,31 @@ function RegistrationForm({
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
           ] }),
-          hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
-            adventure && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
+            adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
             ] }),
-            dateRange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground", children: dateRange })
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0", children: dateRange })
             ] }),
-            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground", children: adventure.partnerName })
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0", children: adventure.partnerName })
             ] }),
-            booking && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-mono tabular-nums text-right min-w-0", children: booking.id })
             ] }),
-            traveller && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
             ] })
           ] }) }),
           /* @__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,
                 {
@@ -4858,9 +4881,9 @@ function RegistrationSuccessCard({
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
     ] }),
-    sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(React21__namespace.Fragment, { children: [
+    sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: f.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
+      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
         f,
         answers[f.id]
       ) })