@vritti/quantum-ui 0.2.8 → 0.2.10

package/dist/Form.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-import { c as FieldError } from './field.js';
-import { c as cn } from './utils.js';
+import { c as cn } from './utils2.js';
+import { axios } from './utils/axios.js';
+import { A as Alert } from './Alert.js';
 import { B as Button } from './Button.js';
 import { C as Checkbox } from './Checkbox.js';
+import { P as PhoneField } from './PhoneField.js';
 import { S as Switch } from './Switch.js';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
@@ -621,7 +623,7 @@ function mapApiErrorsToForm(error, form, options = {}) {
   if (!error || typeof error !== "object") {
     if (setRootError) {
       form.setError("root", {
-        type: "manual",
+        type: "Error",
         message: "An error occurred"
       });
     }
@@ -630,34 +632,26 @@ function mapApiErrorsToForm(error, form, options = {}) {
   const axiosError = error;
   const errorData = axiosError.response?.data || error;
   const apiError = errorData;
-  const generalMessage = apiError.message || apiError.error;
-  let hasFieldErrors = false;
+  const errorTitle = apiError.label || apiError.title || "Error";
+  const generalMessage = apiError.detail;
   if (apiError.errors && Array.isArray(apiError.errors)) {
     for (const errorItem of apiError.errors) {
-      if (errorItem.field) {
-        const formField = fieldMapping[errorItem.field] || errorItem.field;
-        form.setError(formField, {
-          type: "manual",
-          message: errorItem.message
-        });
-        hasFieldErrors = true;
-      } else if (errorItem.message && setRootError) {
-        form.setError("root", {
-          type: "manual",
-          message: errorItem.message
-        });
-      }
+      const formField = fieldMapping[errorItem.field] || errorItem.field;
+      form.setError(formField, {
+        type: "manual",
+        message: errorItem.message
+      });
     }
   }
-  if (!hasFieldErrors && generalMessage && setRootError) {
+  if (generalMessage && setRootError) {
     form.setError("root", {
-      type: "manual",
+      type: errorTitle,
       message: generalMessage
     });
   }
 }
 
-function processChildren(children, control, isSubmitting) {
+function processChildren(children, control, isSubmitting, setValue) {
   return React.Children.map(children, (child) => {
     if (!React.isValidElement(child)) {
       return child;
@@ -674,11 +668,17 @@ function processChildren(children, control, isSubmitting) {
           render: ({ field, fieldState }) => {
             const isCheckbox = child.type === Checkbox;
             const isSwitch = child.type === Switch;
+            const isPhone = child.type === PhoneField;
             const fieldProps = isCheckbox || isSwitch ? {
               checked: field.value,
               onCheckedChange: field.onChange,
               onBlur: field.onBlur,
               ref: field.ref
+            } : isPhone ? {
+              ...field,
+              onCountryChange: (country) => {
+                setValue(`${name}Country`, country);
+              }
             } : field;
             return React.cloneElement(child, {
               ...childProps,
@@ -702,12 +702,12 @@ function processChildren(children, control, isSubmitting) {
       }
     }
     if (isFragment) {
-      return processChildren(childProps.children, control, isSubmitting);
+      return processChildren(childProps.children, control, isSubmitting, setValue);
     }
     if (childProps.children != null) {
       return React.cloneElement(child, {
         ...childProps,
-        children: processChildren(childProps.children, control, isSubmitting)
+        children: processChildren(childProps.children, control, isSubmitting, setValue)
       });
     }
     return child;
@@ -717,9 +717,10 @@ function Form({
   form,
   onSubmit,
   children,
-  showRootError = true,
+  showRootError = false,
   rootErrorPosition = "bottom",
   rootErrorClassName,
+  rootErrorAction,
   fieldMapping,
   mutation,
   transformSubmit,
@@ -728,6 +729,10 @@ function Form({
   const isSubmitting = form.formState.isSubmitting || (mutation?.isPending ?? false);
   const wrappedOnSubmit = React.useCallback(
     async (data) => {
+      const interceptorId = axios.interceptors.request.use((config) => ({
+        ...config,
+        showErrorToast: false
+      }));
       try {
         if (mutation) {
           const variables = transformSubmit ? transformSubmit(data) : data;
@@ -741,16 +746,36 @@ function Form({
           setRootError: showRootError
         });
         console.error("[Form Submission Error]", error);
+      } finally {
+        axios.interceptors.request.eject(interceptorId);
       }
     },
     [onSubmit, mutation, transformSubmit, fieldMapping, form, showRootError]
   );
   const handleSubmit = form.handleSubmit(wrappedOnSubmit);
-  const processedChildren = processChildren(children, form.control, isSubmitting);
+  const processedChildren = processChildren(children, form.control, isSubmitting, form.setValue);
   return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, ...props, children: [
-    showRootError && rootErrorPosition === "top" && form.formState.errors.root && /* @__PURE__ */ jsx(FieldError, { errors: [form.formState.errors.root], className: cn("mb-4 text-center", rootErrorClassName) }),
+    showRootError && rootErrorPosition === "top" && form.formState.errors.root && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        variant: "destructive",
+        title: form.formState.errors.root.type || "Error",
+        description: form.formState.errors.root.message,
+        action: rootErrorAction,
+        className: cn("mb-4", rootErrorClassName)
+      }
+    ),
     processedChildren,
-    showRootError && rootErrorPosition === "bottom" && form.formState.errors.root && /* @__PURE__ */ jsx(FieldError, { errors: [form.formState.errors.root], className: cn("mt-4 text-center", rootErrorClassName) })
+    showRootError && rootErrorPosition === "bottom" && form.formState.errors.root && /* @__PURE__ */ jsx(
+      Alert,
+      {
+        variant: "destructive",
+        title: form.formState.errors.root.type || "Error",
+        description: form.formState.errors.root.message,
+        action: rootErrorAction,
+        className: cn("mt-4", rootErrorClassName)
+      }
+    )
   ] }) });
 }
 Form.displayName = "Form";