@page-speed/forms 0.6.4 → 0.6.6

package/dist/integration.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkDCGSRMZT_cjs = require('./chunk-DCGSRMZT.cjs');
+var chunkDXAO72JM_cjs = require('./chunk-DXAO72JM.cjs');
 var chunkUQ6JPOBF_cjs = require('./chunk-UQ6JPOBF.cjs');
 var chunkQMWZLGON_cjs = require('./chunk-QMWZLGON.cjs');
 var React2 = require('react');
@@ -565,7 +565,7 @@ function useContactForm(options) {
       window.location.assign(destination);
     }, 150);
   }, [navigate, redirectUrl]);
-  const form = chunkDCGSRMZT_cjs.useForm({
+  const form = chunkDXAO72JM_cjs.useForm({
     initialValues: React2.useMemo(
       () => generateInitialValues(formFields),
       [formFields]
@@ -643,7 +643,7 @@ function DynamicFormField({
   const usesInlineCheckboxLabel = field.type === "checkbox";
   const shouldRenderFieldLabel = renderLabel && !usesGroupLegend && !usesInlineCheckboxLabel;
   return /* @__PURE__ */ React2__namespace.createElement(
-    chunkDCGSRMZT_cjs.Field,
+    chunkDXAO72JM_cjs.Field,
     {
       name: field.name,
       label: shouldRenderFieldLabel ? field.label : void 0,
@@ -690,7 +690,7 @@ function DynamicFormField({
         ...formField,
         id: fieldId,
         options: field.options,
-        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        placeholder: field.placeholder || `Select ${field.label ? field.label.toLocaleLowerCase() : field.name ? field.name.toLocaleLowerCase() : "Item"}`,
         error: meta.touched && !!meta.error,
         disabled: field.disabled,
         "aria-label": field.label
@@ -701,7 +701,7 @@ function DynamicFormField({
         ...formField,
         id: fieldId,
         options: field.options,
-        placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+        placeholder: field.placeholder || `Select ${field.label ? field.label.toLocaleLowerCase() : field.name ? field.name.toLocaleLowerCase() : "Item"}`,
         error: meta.touched && !!meta.error,
         disabled: field.disabled,
         "aria-label": field.label
@@ -804,6 +804,18 @@ function DynamicFormField({
     ))
   );
 }
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "",
+  successMessageClassName: "text-green-600 dark:text-green-400 mt-4 p-3 rounded-md bg-green-50 dark:bg-green-950/20",
+  errorMessageClassName: "text-red-600 dark:text-red-400 mt-4 p-3 rounded-md bg-red-50 dark:bg-red-950/20"
+};
+var DEFAULT_SUBMIT_LABEL = "Submit";
+var DEFAULT_BUTTON_GROUP_LABEL = "Subscribe";
+var DEFAULT_BUTTON_VARIANT = "default";
+var DEFAULT_BUTTON_GROUP_SIZE = "default";
 function FormEngine({
   api,
   fields,
@@ -814,28 +826,51 @@ function FormEngine({
   onError,
   navigate,
   resetOnSuccess,
-  uploadTokens,
-  onFileUpload,
-  onFileRemove,
-  isUploading,
-  uploadProgress
+  uploadTokens: externalUploadTokens,
+  onFileUpload: externalOnFileUpload,
+  onFileRemove: externalOnFileRemove,
+  isUploading: externalIsUploading,
+  uploadProgress: externalUploadProgress
 }) {
   const {
-    styleRules,
+    styleRules: userStyleRules,
     formLayout = "standard",
     buttonGroupSetup,
     submitButtonSetup
   } = formLayoutSettings ?? {};
   const isButtonGroup = formLayout === "button-group";
-  const normalizedFields = React2__namespace.useMemo(
-    () => fields.map((f) => ({ ...f, label: f.label ?? f.name })),
-    [fields]
+  const styleRules = React2__namespace.useMemo(
+    () => ({
+      formContainer: userStyleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: userStyleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: userStyleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: userStyleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: userStyleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: userStyleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    }),
+    [userStyleRules]
   );
+  const {
+    uploadTokens: internalUploadTokens,
+    uploadProgress: internalUploadProgress,
+    isUploading: internalIsUploading,
+    uploadFiles: internalUploadFiles,
+    removeFile: internalRemoveFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const uploadTokens = externalUploadTokens ?? internalUploadTokens;
+  const uploadProgress = externalUploadProgress ?? internalUploadProgress;
+  const isUploading = externalIsUploading ?? internalIsUploading;
+  const onFileUpload = externalOnFileUpload ?? internalUploadFiles;
+  const onFileRemove = externalOnFileRemove ?? internalRemoveFile;
   const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields: normalizedFields,
+    formFields: fields,
     formConfig: api,
     onSubmit,
-    onSuccess,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
     onError,
     navigate,
     resetOnSuccess,
@@ -845,9 +880,9 @@ function FormEngine({
     if (isButtonGroup) {
       return {
         formLayout: "button-group",
-        buttonGroupSize: buttonGroupSetup?.size,
-        submitLabel: buttonGroupSetup?.submitLabel,
-        submitVariant: buttonGroupSetup?.submitVariant,
+        buttonGroupSize: buttonGroupSetup?.size ?? DEFAULT_BUTTON_GROUP_SIZE,
+        submitLabel: buttonGroupSetup?.submitLabel ?? DEFAULT_BUTTON_GROUP_LABEL,
+        submitVariant: buttonGroupSetup?.submitVariant ?? DEFAULT_BUTTON_VARIANT,
         submitIconName: buttonGroupSetup?.submitIconName,
         submitIconComponent: buttonGroupSetup?.submitIconComponent,
         endpoint: api?.endpoint,
@@ -861,7 +896,7 @@ function FormEngine({
     };
   }, [isButtonGroup, buttonGroupSetup, api]);
   return /* @__PURE__ */ React2__namespace.createElement("div", { className: styleRules?.formContainer }, /* @__PURE__ */ React2__namespace.createElement(
-    chunkDCGSRMZT_cjs.Form,
+    chunkDXAO72JM_cjs.Form,
     {
       form,
       fields: isButtonGroup ? fields : void 0,
@@ -878,25 +913,44 @@ function FormEngine({
       },
       onNewSubmission: resetSubmissionState
     },
-    !isButtonGroup && /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement("div", { className: chunkQMWZLGON_cjs.cn("grid grid-cols-12 gap-6", styleRules?.fieldsContainer) }, normalizedFields.map((field) => /* @__PURE__ */ React2__namespace.createElement("div", { key: field.name, className: chunkQMWZLGON_cjs.cn(getColumnSpanClass(field.columnSpan ?? 12), "min-w-0") }, /* @__PURE__ */ React2__namespace.createElement(
-      DynamicFormField,
+    !isButtonGroup && /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
+      "div",
       {
-        field,
-        className: field.className ?? styleRules?.fieldClassName,
-        uploadProgress,
-        onFileUpload,
-        onFileRemove,
-        isUploading
-      }
-    )))), /* @__PURE__ */ React2__namespace.createElement(
+        className: chunkQMWZLGON_cjs.cn(
+          "grid grid-cols-12 gap-6",
+          styleRules?.fieldsContainer
+        )
+      },
+      fields.map((field) => /* @__PURE__ */ React2__namespace.createElement(
+        "div",
+        {
+          key: field.name,
+          className: chunkQMWZLGON_cjs.cn(
+            getColumnSpanClass(field.columnSpan ?? 12),
+            "min-w-0"
+          )
+        },
+        /* @__PURE__ */ React2__namespace.createElement(
+          DynamicFormField,
+          {
+            field,
+            className: field.className ?? styleRules?.fieldClassName,
+            uploadProgress,
+            onFileUpload,
+            onFileRemove,
+            isUploading
+          }
+        )
+      ))
+    ), /* @__PURE__ */ React2__namespace.createElement(
       chunkQMWZLGON_cjs.Button,
       {
         type: "submit",
-        variant: submitButtonSetup?.submitVariant ?? "default",
+        variant: submitButtonSetup?.submitVariant ?? DEFAULT_BUTTON_VARIANT,
         disabled: form.isSubmitting,
         className: "mt-6 w-full"
       },
-      submitButtonSetup?.submitLabel ?? "Submit"
+      submitButtonSetup?.submitLabel ?? DEFAULT_SUBMIT_LABEL
     ))
   ));
 }