@wix/headless-forms 0.0.8 → 0.0.10

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

@@ -1,6 +1,6 @@
 import React from 'react';
-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';
+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.js';
+import { type FormServiceConfig } from '../services/form-service.js';
 /**
  * Props for the Form root component following the documented API
  */

package/cjs/dist/react/Form.js

@@ -38,7 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@wix/headless-utils/react");
 const form_public_1 = require("@wix/form-public");
-const Form_1 = require("./core/Form");
+const Form_js_1 = require("./core/Form.js");
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -100,7 +100,7 @@ var TestIds;
  */
 exports.Root = react_1.default.forwardRef((props, ref) => {
     const { children, formServiceConfig, asChild, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Form_1.Root, { formServiceConfig: formServiceConfig, children: (0, jsx_runtime_1.jsx)(RootContent, { asChild: asChild, ref: ref, ...otherProps, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Root, { formServiceConfig: formServiceConfig, children: (0, jsx_runtime_1.jsx)(RootContent, { asChild: asChild, ref: ref, ...otherProps, children: children }) }));
 });
 /**
  * Internal component to handle the Root content with service access.
@@ -164,7 +164,7 @@ const RootContent = react_1.default.forwardRef((props, ref) => {
  */
 exports.Loading = react_1.default.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Form_1.Loading, { children: ({ isLoading }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Loading, { children: ({ isLoading }) => {
             if (!isLoading)
                 return null;
             return ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { "data-testid": TestIds.formLoading, ref: ref, asChild: asChild, className: className, customElement: children, content: "Loading form...", ...otherProps, children: (0, jsx_runtime_1.jsx)("div", { children: "Loading form..." }) }));
@@ -221,7 +221,7 @@ exports.Loading = react_1.default.forwardRef((props, ref) => {
  */
 exports.LoadingError = react_1.default.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Form_1.LoadingError, { children: ({ error, hasError }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.LoadingError, { children: ({ error, hasError }) => {
             if (!hasError)
                 return null;
             const errorData = { error, hasError };
@@ -277,7 +277,7 @@ exports.LoadingError = react_1.default.forwardRef((props, ref) => {
  */
 exports.Error = react_1.default.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Form_1.Error, { children: ({ error, hasError }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Error, { children: ({ error, hasError }) => {
             if (!hasError)
                 return null;
             const errorData = { error, hasError };
@@ -333,7 +333,7 @@ exports.Error = react_1.default.forwardRef((props, ref) => {
  */
 exports.Submitted = react_1.default.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Form_1.Submitted, { children: ({ isSubmitted, message }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Submitted, { children: ({ isSubmitted, message }) => {
             if (!isSubmitted)
                 return null;
             const submittedData = { isSubmitted, message };
@@ -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_js_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,
     });
 }