@page-speed/forms 0.6.7 → 0.6.8

package/dist/integration.d.cts

@@ -604,11 +604,11 @@ interface FormEngineLayoutSettings {
     /** Settings for the submit button in standard layout */
     submitButtonSetup?: FormEngineSubmitButtonSetup;
 }
-interface FormEngineProps {
+interface FormEngineSetup {
     /** API / submission configuration */
     api?: PageSpeedFormConfig;
     /** Form field definitions */
-    fields: FormFieldConfig[];
+    fields?: FormFieldConfig[];
     /** Layout, style, and submit-button settings */
     formLayoutSettings?: FormEngineLayoutSettings;
     /** Success message shown after a successful submission */
@@ -636,25 +636,40 @@ interface FormEngineProps {
         [fileName: string]: number;
     };
 }
+interface FormEngineProps extends FormEngineSetup {
+    /**
+     * Optional wrapper object used by block libraries to pass the full setup as a
+     * single prop. Direct props on FormEngine take precedence when both are provided.
+     */
+    formEngineSetup?: FormEngineSetup;
+    /** Default form field definitions used when setup fields are missing/empty */
+    defaultFields?: FormFieldConfig[];
+    /** Default style rules merged before built-in FormEngine defaults */
+    defaultStyleRules?: FormEngineStyleRules;
+}
 /**
  * FormEngine — declarative form component with built-in API integration.
  *
- * Handles `useContactForm` orchestration internally so callers only need to
- * supply `api`, `fields`, and optional layout/style settings.
+ * Handles `useContactForm` orchestration internally so callers can supply
+ * either direct props or a `formEngineSetup` wrapper plus optional defaults.
  *
  * @example Standard layout
  * ```tsx
  * <FormEngine api={api} fields={fields} formLayoutSettings={{ submitButtonSetup: { submitLabel: "Send" } }} />
  * ```
  *
- * @example Button-group layout
+ * @example Wrapped setup with defaults
  * ```tsx
- * <FormEngine api={api} fields={[emailField]} formLayoutSettings={{ formLayout: "button-group", buttonGroupSetup: { size: "lg", submitLabel: "Subscribe" } }} />
+ * <FormEngine
+ *   formEngineSetup={{ api, fields: [emailField] }}
+ *   defaultFields={fallbackFields}
+ *   defaultStyleRules={fallbackStyleRules}
+ * />
  * ```
  */
-declare function FormEngine({ api, fields, formLayoutSettings, successMessage, onSubmit, onSuccess, onError, navigate, resetOnSuccess, uploadTokens: externalUploadTokens, onFileUpload: externalOnFileUpload, onFileRemove: externalOnFileRemove, isUploading: externalIsUploading, uploadProgress: externalUploadProgress, }: FormEngineProps): React.JSX.Element;
+declare function FormEngine(props: FormEngineProps): React.JSX.Element;
 declare namespace FormEngine {
     var displayName: string;
 }
 
-export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineSetup, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };

package/dist/integration.d.ts

@@ -604,11 +604,11 @@ interface FormEngineLayoutSettings {
     /** Settings for the submit button in standard layout */
     submitButtonSetup?: FormEngineSubmitButtonSetup;
 }
-interface FormEngineProps {
+interface FormEngineSetup {
     /** API / submission configuration */
     api?: PageSpeedFormConfig;
     /** Form field definitions */
-    fields: FormFieldConfig[];
+    fields?: FormFieldConfig[];
     /** Layout, style, and submit-button settings */
     formLayoutSettings?: FormEngineLayoutSettings;
     /** Success message shown after a successful submission */
@@ -636,25 +636,40 @@ interface FormEngineProps {
         [fileName: string]: number;
     };
 }
+interface FormEngineProps extends FormEngineSetup {
+    /**
+     * Optional wrapper object used by block libraries to pass the full setup as a
+     * single prop. Direct props on FormEngine take precedence when both are provided.
+     */
+    formEngineSetup?: FormEngineSetup;
+    /** Default form field definitions used when setup fields are missing/empty */
+    defaultFields?: FormFieldConfig[];
+    /** Default style rules merged before built-in FormEngine defaults */
+    defaultStyleRules?: FormEngineStyleRules;
+}
 /**
  * FormEngine — declarative form component with built-in API integration.
  *
- * Handles `useContactForm` orchestration internally so callers only need to
- * supply `api`, `fields`, and optional layout/style settings.
+ * Handles `useContactForm` orchestration internally so callers can supply
+ * either direct props or a `formEngineSetup` wrapper plus optional defaults.
  *
  * @example Standard layout
  * ```tsx
  * <FormEngine api={api} fields={fields} formLayoutSettings={{ submitButtonSetup: { submitLabel: "Send" } }} />
  * ```
  *
- * @example Button-group layout
+ * @example Wrapped setup with defaults
  * ```tsx
- * <FormEngine api={api} fields={[emailField]} formLayoutSettings={{ formLayout: "button-group", buttonGroupSetup: { size: "lg", submitLabel: "Subscribe" } }} />
+ * <FormEngine
+ *   formEngineSetup={{ api, fields: [emailField] }}
+ *   defaultFields={fallbackFields}
+ *   defaultStyleRules={fallbackStyleRules}
+ * />
  * ```
  */
-declare function FormEngine({ api, fields, formLayoutSettings, successMessage, onSubmit, onSuccess, onError, navigate, resetOnSuccess, uploadTokens: externalUploadTokens, onFileUpload: externalOnFileUpload, onFileRemove: externalOnFileRemove, isUploading: externalIsUploading, uploadProgress: externalUploadProgress, }: FormEngineProps): React.JSX.Element;
+declare function FormEngine(props: FormEngineProps): React.JSX.Element;
 declare namespace FormEngine {
     var displayName: string;
 }
 
-export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };
+export { type AdaptedComponentProps, type Block, type BlockAdapterOptions, type ButtonGroupFormSetup, DynamicFormField, type DynamicFormFieldProps, type FileUploadProgress, FormEngine, type FormEngineLayoutSettings, type FormEngineProps, type FormEngineSetup, type FormEngineStyleRules, type FormEngineSubmitButtonSetup, type FormErrors, FormFieldConfig, FormLayoutSettings, type PageSpeedFormConfig, type PageSpeedFormMethod, type PageSpeedFormSubmissionConfig, PageSpeedFormSubmissionError, type PageSpeedFormSubmissionFormat, type PageSpeedFormSubmissionResult, type RailsApiConfig, type RailsErrorResponse, type SerializedFormData, type UseContactFormOptions, type UseContactFormReturn, type UseFileUploadOptions, type UseFileUploadReturn, createBlockAdapter, createBlockAdapters, deserializeErrors, isValidEmail, serializeForRails, standardInputTransformer, submitPageSpeedForm, useContactForm, useFileUpload };

package/dist/integration.js

@@ -795,22 +795,40 @@ 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,
-  formLayoutSettings,
-  successMessage,
-  onSubmit,
-  onSuccess,
-  onError,
-  navigate,
-  resetOnSuccess,
-  uploadTokens: externalUploadTokens,
-  onFileUpload: externalOnFileUpload,
-  onFileRemove: externalOnFileRemove,
-  isUploading: externalIsUploading,
-  uploadProgress: externalUploadProgress
-}) {
+function FormEngine(props) {
+  const {
+    formEngineSetup,
+    defaultFields,
+    defaultStyleRules,
+    api: directApi,
+    fields: directFields,
+    formLayoutSettings: directFormLayoutSettings,
+    successMessage: directSuccessMessage,
+    onSubmit: directOnSubmit,
+    onSuccess: directOnSuccess,
+    onError: directOnError,
+    navigate: directNavigate,
+    resetOnSuccess: directResetOnSuccess,
+    uploadTokens: directUploadTokens,
+    onFileUpload: directOnFileUpload,
+    onFileRemove: directOnFileRemove,
+    isUploading: directIsUploading,
+    uploadProgress: directUploadProgress
+  } = props;
+  const api = directApi ?? formEngineSetup?.api;
+  const fields = directFields ?? formEngineSetup?.fields;
+  const formLayoutSettings = directFormLayoutSettings ?? formEngineSetup?.formLayoutSettings;
+  const successMessage = directSuccessMessage ?? formEngineSetup?.successMessage;
+  const onSubmit = directOnSubmit ?? formEngineSetup?.onSubmit;
+  const onSuccess = directOnSuccess ?? formEngineSetup?.onSuccess;
+  const onError = directOnError ?? formEngineSetup?.onError;
+  const navigate = directNavigate ?? formEngineSetup?.navigate;
+  const resetOnSuccess = directResetOnSuccess ?? formEngineSetup?.resetOnSuccess;
+  const externalUploadTokens = directUploadTokens ?? formEngineSetup?.uploadTokens;
+  const externalOnFileUpload = directOnFileUpload ?? formEngineSetup?.onFileUpload;
+  const externalOnFileRemove = directOnFileRemove ?? formEngineSetup?.onFileRemove;
+  const externalIsUploading = directIsUploading ?? formEngineSetup?.isUploading;
+  const externalUploadProgress = directUploadProgress ?? formEngineSetup?.uploadProgress;
   const {
     styleRules: userStyleRules,
     formLayout = "standard",
@@ -818,16 +836,21 @@ function FormEngine({
     submitButtonSetup
   } = formLayoutSettings ?? {};
   const isButtonGroup = formLayout === "button-group";
+  const formFields = React2.useMemo(() => {
+    if (fields && fields.length > 0) return fields;
+    if (defaultFields && defaultFields.length > 0) return defaultFields;
+    return [];
+  }, [fields, defaultFields]);
   const styleRules = React2.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
+      formContainer: userStyleRules?.formContainer ?? defaultStyleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: userStyleRules?.fieldsContainer ?? defaultStyleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: userStyleRules?.fieldClassName ?? defaultStyleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: userStyleRules?.formClassName ?? defaultStyleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: userStyleRules?.successMessageClassName ?? defaultStyleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: userStyleRules?.errorMessageClassName ?? defaultStyleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
     }),
-    [userStyleRules]
+    [userStyleRules, defaultStyleRules]
   );
   const {
     uploadTokens: internalUploadTokens,
@@ -843,7 +866,7 @@ function FormEngine({
   const onFileUpload = externalOnFileUpload ?? internalUploadFiles;
   const onFileRemove = externalOnFileRemove ?? internalRemoveFile;
   const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields: fields,
+    formFields,
     formConfig: api,
     onSubmit,
     onSuccess: (data) => {
@@ -878,7 +901,7 @@ function FormEngine({
     Form,
     {
       form,
-      fields: isButtonGroup ? fields : void 0,
+      fields: isButtonGroup ? formFields : void 0,
       formConfig: legacyFormConfig,
       method: formMethod,
       notificationConfig: {
@@ -900,7 +923,7 @@ function FormEngine({
           styleRules?.fieldsContainer
         )
       },
-      fields.map((field) => /* @__PURE__ */ React2.createElement(
+      formFields.map((field) => /* @__PURE__ */ React2.createElement(
         "div",
         {
           key: field.name,