@wix/headless-forms 0.0.10 → 0.0.11

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

@@ -135,14 +135,14 @@ export interface FormErrorRenderProps {
  */
 export declare function LoadingError(props: FormErrorProps): import("react").ReactNode;
 /**
- * Props for Form Error headless component
+ * Props for Form Submit Error headless component
  */
 export interface FormSubmitErrorProps {
     /** Render prop function that receives submit error state data */
     children: (props: FormSubmitErrorRenderProps) => React.ReactNode;
 }
 /**
- * Render props for Form Error component
+ * Render props for Form Submit Error component
  */
 export interface FormSubmitErrorRenderProps {
     /** Submit error message */
@@ -222,14 +222,17 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
 /**
  * Render props for Fields component
  */
-interface FieldsRenderProps {
+export interface FieldsRenderProps {
+    /** The form data, or null if not loaded */
     form: forms.Form | null;
+    /** Function to submit the form with values */
     submitForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component
  */
-interface FieldsProps {
+export interface FieldsProps {
+    /** Render prop function that receives form data and submit handler */
     children: (props: FieldsRenderProps) => React.ReactNode;
 }
 /**
@@ -264,4 +267,76 @@ interface FieldsProps {
  * ```
  */
 export declare function Fields(props: FieldsProps): import("react").ReactNode;
-export {};
+/**
+ * Form view interface containing field definitions
+ */
+export interface FormView {
+    fields: FieldDefinition[];
+}
+/**
+ * Field layout configuration
+ */
+export interface Layout {
+    column: number;
+    row: number;
+    height: number;
+    width: number;
+}
+/**
+ * Field definition including layout information
+ */
+export interface FieldDefinition {
+    id: string;
+    layout: Layout;
+}
+/**
+ * Render props for Field component
+ */
+export interface FieldRenderProps {
+    /** The field ID */
+    id: string;
+    /** The field layout configuration */
+    layout: Layout;
+    /** Grid styles for container */
+    gridStyles: {
+        label: React.CSSProperties;
+        input: React.CSSProperties;
+    };
+}
+/**
+ * Props for Field headless component
+ */
+export interface FieldProps {
+    /** The unique identifier for this field */
+    id: string;
+    /** The field layout configuration */
+    layout: Layout;
+    /** Render prop function that receives field layout data */
+    children: (props: FieldRenderProps) => React.ReactNode;
+}
+/**
+ * Headless Field component that provides field layout data and grid styles.
+ * This component accesses field configuration and calculates grid positioning.
+ *
+ * @component
+ * @param {FieldProps} props - Component props
+ * @param {FieldProps['children']} props.children - Render prop function that receives field layout data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function CustomField({ id, layout }) {
+ *   return (
+ *     <Form.Field id={id} layout={layout}>
+ *       {({ id, layout, gridStyles }) => (
+ *         <div data-field-id={id}>
+ *           <div style={gridStyles.label}>Label</div>
+ *           <div style={gridStyles.input}>Input</div>
+ *         </div>
+ *       )}
+ *     </Form.Field>
+ *   );
+ * }
+ * ```
+ */
+export declare function Field(props: FieldProps): import("react").ReactNode;

package/dist/react/core/Form.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { FormServiceDefinition, FormService, } from '../../services/form-service.js';
+import { calculateGridStyles } from '../utils.js';
 const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
 /**
  * Root component that provides the Form service context to its children.
@@ -227,3 +228,42 @@ export function Fields(props) {
         submitForm,
     });
 }
+/**
+ * Headless Field component that provides field layout data and grid styles.
+ * This component accesses field configuration and calculates grid positioning.
+ *
+ * @component
+ * @param {FieldProps} props - Component props
+ * @param {FieldProps['children']} props.children - Render prop function that receives field layout data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function CustomField({ id, layout }) {
+ *   return (
+ *     <Form.Field id={id} layout={layout}>
+ *       {({ id, layout, gridStyles }) => (
+ *         <div data-field-id={id}>
+ *           <div style={gridStyles.label}>Label</div>
+ *           <div style={gridStyles.input}>Input</div>
+ *         </div>
+ *       )}
+ *     </Form.Field>
+ *   );
+ * }
+ * ```
+ */
+export function Field(props) {
+    const { id, children, layout } = props;
+    const { formSignal } = useService(FormServiceDefinition);
+    const form = formSignal.get();
+    if (!form) {
+        return null;
+    }
+    const gridStyles = calculateGridStyles(layout);
+    return children({
+        id,
+        layout,
+        gridStyles,
+    });
+}

package/dist/react/utils.d.ts

@@ -0,0 +1,13 @@
+import { Layout } from './core/Form';
+export declare function calculateGridStyles(layout: Layout): {
+    label: {
+        gridRow: string;
+        gridColumn: string;
+        display: string;
+        alignItems: string;
+    };
+    input: {
+        gridRow: string;
+        gridColumn: string;
+    };
+};

package/dist/react/utils.js

@@ -0,0 +1,17 @@
+export function calculateGridStyles(layout) {
+    const labelRow = 1;
+    const inputRow = 2;
+    const gridColumn = `${layout.column + 1} / span ${layout.width}`;
+    return {
+        label: {
+            gridRow: `${labelRow} / span 1`,
+            gridColumn,
+            display: 'flex',
+            alignItems: 'flex-end',
+        },
+        input: {
+            gridRow: `${inputRow} / span 1`,
+            gridColumn,
+        },
+    };
+}

package/dist/services/form-service.d.ts

@@ -13,6 +13,8 @@ export type SubmitResponse = {
     message: string;
 } | {
     type: 'idle';
+} | {
+    type: 'loading';
 };
 /**
  * API interface for the Form service, providing reactive form data management.

package/dist/services/form-service.js

@@ -67,7 +67,10 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
     }
     async function defaultSubmitHandler(formId, formValues) {
         try {
-            await submissions.createSubmission({ formId, ...formValues });
+            await submissions.createSubmission({
+                formId,
+                submissions: formValues,
+            });
             // TODO: add message
             return { type: 'success' };
         }
@@ -88,7 +91,7 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
         }
         // @ts-expect-error
         const formId = form._id ? form._id : form.id;
-        submitResponseSignal.set({ type: 'idle' });
+        submitResponseSignal.set({ type: 'loading' });
         try {
             const handler = config.onSubmit || defaultSubmitHandler;
             const response = await handler(formId, formValues);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -41,8 +41,8 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@wix/form-public": "^0.26.0",
-    "@wix/forms": "^1.0.330",
+    "@wix/form-public": "^0.40.0",
+    "@wix/forms": "^1.0.331",
     "@wix/headless-utils": "0.0.4",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"