@page-speed/forms 0.6.2 → 0.6.4

package/dist/integration.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkMUBEMXI7_cjs = require('./chunk-MUBEMXI7.cjs');
-var chunkED4UK63G_cjs = require('./chunk-ED4UK63G.cjs');
-var chunkQRI5TMES_cjs = require('./chunk-QRI5TMES.cjs');
+var chunkDCGSRMZT_cjs = require('./chunk-DCGSRMZT.cjs');
+var chunkUQ6JPOBF_cjs = require('./chunk-UQ6JPOBF.cjs');
+var chunkQMWZLGON_cjs = require('./chunk-QMWZLGON.cjs');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -565,7 +565,7 @@ function useContactForm(options) {
       window.location.assign(destination);
     }, 150);
   }, [navigate, redirectUrl]);
-  const form = chunkMUBEMXI7_cjs.useForm({
+  const form = chunkDCGSRMZT_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(
-    chunkMUBEMXI7_cjs.Field,
+    chunkDCGSRMZT_cjs.Field,
     {
       name: field.name,
       label: shouldRenderFieldLabel ? field.label : void 0,
@@ -652,7 +652,7 @@ function DynamicFormField({
       className
     },
     ({ field: formField, meta }) => /* @__PURE__ */ React2__namespace.createElement("div", null, (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkQRI5TMES_cjs.TextInput,
+      chunkQMWZLGON_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -663,7 +663,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "number" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkQRI5TMES_cjs.TextInput,
+      chunkQMWZLGON_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -674,7 +674,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "textarea" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.TextArea,
+      chunkUQ6JPOBF_cjs.TextArea,
       {
         ...formField,
         id: fieldId,
@@ -685,7 +685,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.Select,
+      chunkUQ6JPOBF_cjs.Select,
       {
         ...formField,
         id: fieldId,
@@ -696,7 +696,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.MultiSelect,
+      chunkUQ6JPOBF_cjs.MultiSelect,
       {
         ...formField,
         id: fieldId,
@@ -707,7 +707,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "radio" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.Radio,
+      chunkUQ6JPOBF_cjs.Radio,
       {
         ...formField,
         id: fieldId,
@@ -721,7 +721,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.Checkbox,
+      chunkUQ6JPOBF_cjs.Checkbox,
       {
         ...formField,
         id: fieldId,
@@ -735,7 +735,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.CheckboxGroup,
+      chunkUQ6JPOBF_cjs.CheckboxGroup,
       {
         ...formField,
         id: fieldId,
@@ -749,7 +749,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.DatePicker,
+      chunkUQ6JPOBF_cjs.DatePicker,
       {
         ...formField,
         id: fieldId,
@@ -759,7 +759,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "date-range" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.DateRangePicker,
+      chunkUQ6JPOBF_cjs.DateRangePicker,
       {
         ...formField,
         id: fieldId,
@@ -769,7 +769,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "time" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.TimePicker,
+      chunkUQ6JPOBF_cjs.TimePicker,
       {
         ...formField,
         id: fieldId,
@@ -779,7 +779,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "file" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkED4UK63G_cjs.FileInput,
+      chunkUQ6JPOBF_cjs.FileInput,
       {
         ...formField,
         id: fieldId,
@@ -804,8 +804,106 @@ function DynamicFormField({
     ))
   );
 }
+function FormEngine({
+  api,
+  fields,
+  formLayoutSettings,
+  successMessage,
+  onSubmit,
+  onSuccess,
+  onError,
+  navigate,
+  resetOnSuccess,
+  uploadTokens,
+  onFileUpload,
+  onFileRemove,
+  isUploading,
+  uploadProgress
+}) {
+  const {
+    styleRules,
+    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 { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields: normalizedFields,
+    formConfig: api,
+    onSubmit,
+    onSuccess,
+    onError,
+    navigate,
+    resetOnSuccess,
+    uploadTokens
+  });
+  const legacyFormConfig = React2__namespace.useMemo(() => {
+    if (isButtonGroup) {
+      return {
+        formLayout: "button-group",
+        buttonGroupSize: buttonGroupSetup?.size,
+        submitLabel: buttonGroupSetup?.submitLabel,
+        submitVariant: buttonGroupSetup?.submitVariant,
+        submitIconName: buttonGroupSetup?.submitIconName,
+        submitIconComponent: buttonGroupSetup?.submitIconComponent,
+        endpoint: api?.endpoint,
+        submissionConfig: api?.submissionConfig
+      };
+    }
+    return {
+      formLayout: "standard",
+      endpoint: api?.endpoint,
+      submissionConfig: api?.submissionConfig
+    };
+  }, [isButtonGroup, buttonGroupSetup, api]);
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: styleRules?.formContainer }, /* @__PURE__ */ React2__namespace.createElement(
+    chunkDCGSRMZT_cjs.Form,
+    {
+      form,
+      fields: isButtonGroup ? fields : void 0,
+      formConfig: legacyFormConfig,
+      method: formMethod,
+      notificationConfig: {
+        submissionError: submissionError ?? void 0,
+        successMessage
+      },
+      styleConfig: {
+        formClassName: styleRules?.formClassName,
+        successMessageClassName: styleRules?.successMessageClassName,
+        errorMessageClassName: styleRules?.errorMessageClassName
+      },
+      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,
+      {
+        field,
+        className: field.className ?? styleRules?.fieldClassName,
+        uploadProgress,
+        onFileUpload,
+        onFileRemove,
+        isUploading
+      }
+    )))), /* @__PURE__ */ React2__namespace.createElement(
+      chunkQMWZLGON_cjs.Button,
+      {
+        type: "submit",
+        variant: submitButtonSetup?.submitVariant ?? "default",
+        disabled: form.isSubmitting,
+        className: "mt-6 w-full"
+      },
+      submitButtonSetup?.submitLabel ?? "Submit"
+    ))
+  ));
+}
+FormEngine.displayName = "FormEngine";
 
 exports.DynamicFormField = DynamicFormField;
+exports.FormEngine = FormEngine;
 exports.PageSpeedFormSubmissionError = PageSpeedFormSubmissionError;
 exports.createBlockAdapter = createBlockAdapter;
 exports.createBlockAdapters = createBlockAdapters;