@wix/headless-forms 0.0.7 → 0.0.9

package/README.md

@@ -42,5 +42,5 @@ All changes should be documented using `jsdoc` and updating `docs/api/FORM_INTER
      - "Forms SDK Exports Components"
      - "Forms SDK Exports Services"
   - Release new app version
-  - Check if update has been commited to `auto-sdk-packages` repo
+  - Check if update has been commited to `auto-sdk-packages` repo (might take around 20mins)
 

package/cjs/dist/react/Form.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { type CheckboxGroupProps, type CheckboxProps, type PhoneInputProps, type DateInputProps, type DatePickerProps, type DateTimeInputProps, type DropdownProps, type FileUploadProps, type MultilineAddressProps, type NumberInputProps, type RadioGroupProps, type RatingInputProps, type RichTextProps, type SignatureProps, type SubmitButtonProps, type TagsProps, type TextAreaProps, type TextInputProps, type TimeInputProps, type ProductListProps, type FixedPaymentProps, type PaymentInputProps, type DonationProps, type AppointmentProps, type ImageChoiceProps } from './types';
 import { type FormServiceConfig } from '../services/form-service';
-import { CheckboxGroupProps, CheckboxProps, PhoneInputProps, DateInputProps, DatePickerProps, DateTimeInputProps, DropdownProps, FileUploadProps, MultilineAddressProps, NumberInputProps, RadioGroupProps, RatingInputProps, RichTextProps, SignatureProps, SubmitButtonProps, TagsProps, TextAreaProps, TextInputProps, TimeInputProps, ProductListProps, FixedPaymentProps, PaymentInputProps, DonationProps, AppointmentProps, ImageChoiceProps } from './types.js';
 /**
  * Props for the Form root component following the documented API
  */

package/cjs/dist/react/Form.js

@@ -493,10 +493,9 @@ exports.Fields = react_1.default.forwardRef((props, ref) => {
     const handleFormValidate = (0, react_1.useCallback)((errors) => {
         setFormErrors(errors);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form_1.Fields, { children: ({ form }) => {
-            console.log('Fields form', form);
+    return ((0, jsx_runtime_1.jsx)(Form_1.Fields, { children: ({ form, submitForm }) => {
             if (!form)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.Form, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.Form, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues) }) }));
         } }));
 });

package/cjs/dist/react/core/Form.d.ts

@@ -1,5 +1,6 @@
 import { forms } from '@wix/forms';
 import { FormServiceConfig } from '../../services/form-service.js';
+import { FormValues } from '../types.js';
 /**
  * Props for Root headless component
  */
@@ -223,6 +224,7 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
  */
 interface FieldsRenderProps {
     form: forms.Form | null;
+    submitForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component
@@ -231,12 +233,13 @@ interface FieldsProps {
     children: (props: FieldsRenderProps) => React.ReactNode;
 }
 /**
- * Fields component that provides form data to its children.
- * This component accesses the form data from the service and passes it to children via render props.
+ * Fields component that provides form data and actions to its children.
+ * This component accesses the form data and submitForm action from the service
+ * and passes them to children via render props.
  *
  * @component
  * @param {FieldsProps} props - Component props
- * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data and actions
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -244,11 +247,14 @@ interface FieldsProps {
  * function FormFields() {
  *   return (
  *     <Form.Fields>
- *       {({ form }) => (
+ *       {({ form, submitForm }) => (
  *         form ? (
  *           <div>
  *             <h2>{form.name}</h2>
  *             <p>{form.description}</p>
+ *             <button onClick={() => submitForm({ field1: 'value' })}>
+ *               Submit
+ *             </button>
  *           </div>
  *         ) : null
  *       )}

package/cjs/dist/react/core/Form.js

@@ -149,9 +149,10 @@ function LoadingError(props) {
  * ```
  */
 function Error(props) {
-    // TODO: Implement submit response handling when submitResponseSignal is added to service
-    const error = null;
-    const hasError = false;
+    const { submitResponseSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const submitResponse = submitResponseSignal.get();
+    const error = submitResponse.type === 'error' ? submitResponse.message : null;
+    const hasError = submitResponse.type === 'error';
     return props.children({
         error,
         hasError,
@@ -184,21 +185,25 @@ function Error(props) {
  * ```
  */
 function Submitted(props) {
-    // TODO: Implement submit response handling when submitResponseSignal is added to service
-    const isSubmitted = false;
-    const message = DEFAULT_SUCCESS_MESSAGE;
+    const { submitResponseSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const submitResponse = submitResponseSignal.get();
+    const isSubmitted = submitResponse.type === 'success';
+    const message = submitResponse.type === 'success'
+        ? submitResponse.message || DEFAULT_SUCCESS_MESSAGE
+        : DEFAULT_SUCCESS_MESSAGE;
     return props.children({
         isSubmitted,
         message,
     });
 }
 /**
- * Fields component that provides form data to its children.
- * This component accesses the form data from the service and passes it to children via render props.
+ * Fields component that provides form data and actions to its children.
+ * This component accesses the form data and submitForm action from the service
+ * and passes them to children via render props.
  *
  * @component
  * @param {FieldsProps} props - Component props
- * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data and actions
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -206,11 +211,14 @@ function Submitted(props) {
  * function FormFields() {
  *   return (
  *     <Form.Fields>
- *       {({ form }) => (
+ *       {({ form, submitForm }) => (
  *         form ? (
  *           <div>
  *             <h2>{form.name}</h2>
  *             <p>{form.description}</p>
+ *             <button onClick={() => submitForm({ field1: 'value' })}>
+ *               Submit
+ *             </button>
  *           </div>
  *         ) : null
  *       )}
@@ -220,9 +228,10 @@ function Submitted(props) {
  * ```
  */
 function Fields(props) {
-    const { formSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const { formSignal, submitForm } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
     const form = formSignal.get();
     return props.children({
         form,
+        submitForm,
     });
 }