@wix/headless-forms 0.0.16 → 0.0.18

package/README.md

@@ -27,16 +27,9 @@ All changes should be documented using `jsdoc` and updating `docs/api/FORM_INTER
 ## Publishing
 
 1. **Update Version**
-   - Update version in `package.json`
-   - Create PR and merge to main branch
+ The version will be updated automatically by Falcon after merging to master
 
-2. **Publish to NPM**
-   - Go to GitHub Actions
-   - Run "Publish Package" workflow
-   - Enter package name: `forms`
-   - Monitor the workflow for successful completion
-
-3. **Update SDK Exports**
+2. **Update SDK Exports**
    - Go to Form app in Wix Dev Center
    - Update SDK exports extensions:
      - "Forms SDK Exports Components"

package/cjs/dist/react/Form.js

@@ -41,6 +41,7 @@ const form_public_1 = require("@wix/form-public");
 const Form_js_1 = require("./core/Form.js");
 const FieldContext_js_1 = require("./context/FieldContext.js");
 const FieldLayoutContext_js_1 = require("./context/FieldLayoutContext.js");
+const utils_1 = require("../services/utils");
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -523,21 +524,30 @@ exports.Submitted = react_1.default.forwardRef((props, ref) => {
  * ```
  */
 exports.Fields = react_1.default.forwardRef((props, ref) => {
-    const [formValues, setFormValues] = (0, react_1.useState)({});
     const [formErrors, setFormErrors] = (0, react_1.useState)([]);
-    const handleFormChange = (0, react_1.useCallback)((values) => {
-        setFormValues(values);
-    }, []);
     const handleFormValidate = (0, react_1.useCallback)((errors) => {
         setFormErrors(errors);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form_js_1.Fields, { children: ({ form, submitForm }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Fields, { children: ({ form, formValues, submitForm, handleForm }) => {
             if (!form)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.FormProvider, { currency: 'USD', locale: 'en', children: (0, jsx_runtime_1.jsx)(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.FormProvider, { currency: 'USD', locale: 'en', children: (0, jsx_runtime_1.jsx)(FieldsWithForm, { form: form, values: formValues, onChange: handleForm, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: submitForm, rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
         } }));
 });
 const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
+    const coreUploadFile = async ({ file, formId, }) => {
+        const uploadUrl = await (0, utils_1.getUploadUrl)(formId, file);
+        if (uploadUrl === undefined) {
+            return { isPrivate: false };
+        }
+        const url = await (0, utils_1.uploadFile)(file, uploadUrl);
+        return {
+            id: '123123',
+            isPrivate: false,
+            displayName: file.name,
+            url,
+        };
+    };
     const formData = (0, form_public_1.useForm)({
         form,
         values,
@@ -545,6 +555,7 @@ const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate
         onChange,
         onValidate,
         submitForm,
+        uploadFile: coreUploadFile,
         fieldMap,
     });
     if (!formData)

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

@@ -225,8 +225,10 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
 export interface FieldsRenderProps {
     /** The form data, or null if not loaded */
     form: forms.Form | null;
+    formValues: FormValues;
     /** Function to submit the form with values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component

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

@@ -230,11 +230,14 @@ function Submitted(props) {
  * ```
  */
 function Fields(props) {
-    const { formSignal, submitForm } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const { formSignal, submitForm, handleForm, formValuesSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
     const form = formSignal.get();
+    const formValues = formValuesSignal.get();
     return props.children({
         form,
+        formValues,
         submitForm,
+        handleForm,
     });
 }
 /**

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

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export * from './Phone.js';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/cjs/dist/react/index.js

@@ -36,7 +36,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
+exports.FileUpload = exports.PhoneField = exports.Form = void 0;
 exports.Form = __importStar(require("./Form.js"));
 __exportStar(require("./types.js"), exports);
-__exportStar(require("./Phone.js"), exports);
+var form_public_1 = require("@wix/form-public");
+Object.defineProperty(exports, "PhoneField", { enumerable: true, get: function () { return form_public_1.PhoneField; } });
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return form_public_1.FileUpload; } });

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

@@ -1,3 +1,14 @@
 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 '@wix/form-public';
 export type { 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, };
 export type FormValues = Record<string, any>;
+export interface UploadFileParams {
+    file: File;
+    formId: string;
+    uploadTarget: string;
+}
+export interface FileDescriptor {
+    id?: string;
+    displayName?: string;
+    url?: string;
+    isPrivate: boolean;
+}

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

@@ -32,8 +32,12 @@ export interface FormServiceAPI {
     errorSignal: ReadOnlySignal<string | null>;
     /** Reactive signal containing submission response state */
     submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Reactive signal that contains all actual formValues */
+    formValuesSignal: ReadOnlySignal<FormValues>;
     /** Function to submit form with current values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    /** Function to handle changed form with new values */
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Service definition for the Form service.

package/cjs/dist/services/form-service.js

@@ -47,6 +47,7 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
     });
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
+    const formValuesSignal = signalsService.signal({});
     if (!hasSchema) {
         loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
@@ -88,7 +89,7 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
      * Submits the form with the provided values.
      * Uses custom handler if provided in config, otherwise uses default submission.
      */
-    async function submitForm(formValues) {
+    async function submitForm() {
         const form = formSignal.get();
         if (!form) {
             console.error('Cannot submit: form not loaded');
@@ -98,8 +99,8 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
         const formId = form._id ? form._id : form.id;
         submitResponseSignal.set({ type: 'loading' });
         try {
-            const handler = config.onSubmit || defaultSubmitHandler;
-            const response = await handler(formId, formValues);
+            const handler = await defaultSubmitHandler;
+            const response = await handler(formId, formValuesSignal.get());
             submitResponseSignal.set(response);
         }
         catch (error) {
@@ -110,12 +111,17 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
             });
         }
     }
+    async function handleForm(formValues) {
+        formValuesSignal.set(formValues);
+    }
     return {
-        formSignal: formSignal,
-        isLoadingSignal: isLoadingSignal,
-        errorSignal: errorSignal,
-        submitResponseSignal: submitResponseSignal,
-        submitForm: submitForm,
+        formSignal,
+        isLoadingSignal,
+        errorSignal,
+        submitResponseSignal,
+        formValuesSignal,
+        submitForm,
+        handleForm,
     };
 });
 function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {

package/cjs/dist/services/utils/file-upload-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getUploadUrl: (formId: string, file: File) => Promise<string | undefined>;
+export declare const uploadFile: (file: File, uploadUrl: string) => Promise<string | undefined>;

package/cjs/dist/services/utils/file-upload-utils.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = exports.getUploadUrl = void 0;
+const forms_1 = require("@wix/forms");
+const essentials_1 = require("@wix/essentials");
+const getUploadUrl = async (formId, file) => {
+    try {
+        const { uploadUrl } = await forms_1.submissions.getMediaUploadUrl(formId, file.name, file.type);
+        return uploadUrl;
+    }
+    catch {
+        console.error('Cannot get uploadUrl for file upload!');
+        return;
+    }
+};
+exports.getUploadUrl = getUploadUrl;
+const uploadFile = async (file, uploadUrl) => {
+    const headers = {
+        'Content-Type': 'application/octet-stream',
+    };
+    const { withErrorHandler } = essentials_1.errorHandler;
+    try {
+        const response = await withErrorHandler(() => essentials_1.httpClient.fetchWithAuth(uploadUrl, {
+            method: 'PUT',
+            body: file,
+            headers,
+        }), {});
+        const data = await response.json();
+        if (!data) {
+            return;
+        }
+        return data.file.url;
+    }
+    catch (e) {
+        const resolvedError = essentials_1.errorHandler.getResolvedError(e);
+        throw resolvedError;
+    }
+};
+exports.uploadFile = uploadFile;

package/cjs/dist/services/utils/index.d.ts

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/cjs/dist/services/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = exports.getUploadUrl = void 0;
+var file_upload_utils_1 = require("./file-upload-utils");
+Object.defineProperty(exports, "getUploadUrl", { enumerable: true, get: function () { return file_upload_utils_1.getUploadUrl; } });
+Object.defineProperty(exports, "uploadFile", { enumerable: true, get: function () { return file_upload_utils_1.uploadFile; } });

package/dist/react/Form.js

@@ -5,6 +5,7 @@ import { useForm, FormProvider, } from '@wix/form-public';
 import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, Field as CoreField, } from './core/Form.js';
 import { FieldContext, useFieldContext, } from './context/FieldContext.js';
 import { FieldLayoutProvider, useFieldLayout, } from './context/FieldLayoutContext.js';
+import { getUploadUrl, uploadFile } from '../services/utils';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -487,21 +488,30 @@ export const Submitted = React.forwardRef((props, ref) => {
  * ```
  */
 export const Fields = React.forwardRef((props, ref) => {
-    const [formValues, setFormValues] = useState({});
     const [formErrors, setFormErrors] = useState([]);
-    const handleFormChange = useCallback((values) => {
-        setFormValues(values);
-    }, []);
     const handleFormValidate = useCallback((errors) => {
         setFormErrors(errors);
     }, []);
-    return (_jsx(CoreFields, { children: ({ form, submitForm }) => {
+    return (_jsx(CoreFields, { children: ({ form, formValues, submitForm, handleForm }) => {
             if (!form)
                 return null;
-            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { currency: 'USD', locale: 'en', children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { currency: 'USD', locale: 'en', children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleForm, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: submitForm, rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
         } }));
 });
 const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
+    const coreUploadFile = async ({ file, formId, }) => {
+        const uploadUrl = await getUploadUrl(formId, file);
+        if (uploadUrl === undefined) {
+            return { isPrivate: false };
+        }
+        const url = await uploadFile(file, uploadUrl);
+        return {
+            id: '123123',
+            isPrivate: false,
+            displayName: file.name,
+            url,
+        };
+    };
     const formData = useForm({
         form,
         values,
@@ -509,6 +519,7 @@ const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate
         onChange,
         onValidate,
         submitForm,
+        uploadFile: coreUploadFile,
         fieldMap,
     });
     if (!formData)

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

@@ -225,8 +225,10 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
 export interface FieldsRenderProps {
     /** The form data, or null if not loaded */
     form: forms.Form | null;
+    formValues: FormValues;
     /** Function to submit the form with values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component

package/dist/react/core/Form.js

@@ -221,11 +221,14 @@ export function Submitted(props) {
  * ```
  */
 export function Fields(props) {
-    const { formSignal, submitForm } = useService(FormServiceDefinition);
+    const { formSignal, submitForm, handleForm, formValuesSignal } = useService(FormServiceDefinition);
     const form = formSignal.get();
+    const formValues = formValuesSignal.get();
     return props.children({
         form,
+        formValues,
         submitForm,
+        handleForm,
     });
 }
 /**

package/dist/react/index.d.ts

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export * from './Phone.js';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/dist/react/index.js

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export * from './Phone.js';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/dist/react/types.d.ts

@@ -1,3 +1,14 @@
 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 '@wix/form-public';
 export type { 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, };
 export type FormValues = Record<string, any>;
+export interface UploadFileParams {
+    file: File;
+    formId: string;
+    uploadTarget: string;
+}
+export interface FileDescriptor {
+    id?: string;
+    displayName?: string;
+    url?: string;
+    isPrivate: boolean;
+}

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

@@ -32,8 +32,12 @@ export interface FormServiceAPI {
     errorSignal: ReadOnlySignal<string | null>;
     /** Reactive signal containing submission response state */
     submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Reactive signal that contains all actual formValues */
+    formValuesSignal: ReadOnlySignal<FormValues>;
     /** Function to submit form with current values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    /** Function to handle changed form with new values */
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Service definition for the Form service.

package/dist/services/form-service.js

@@ -43,6 +43,7 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
     });
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
+    const formValuesSignal = signalsService.signal({});
     if (!hasSchema) {
         loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
@@ -84,7 +85,7 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
      * Submits the form with the provided values.
      * Uses custom handler if provided in config, otherwise uses default submission.
      */
-    async function submitForm(formValues) {
+    async function submitForm() {
         const form = formSignal.get();
         if (!form) {
             console.error('Cannot submit: form not loaded');
@@ -94,8 +95,8 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
         const formId = form._id ? form._id : form.id;
         submitResponseSignal.set({ type: 'loading' });
         try {
-            const handler = config.onSubmit || defaultSubmitHandler;
-            const response = await handler(formId, formValues);
+            const handler = await defaultSubmitHandler;
+            const response = await handler(formId, formValuesSignal.get());
             submitResponseSignal.set(response);
         }
         catch (error) {
@@ -106,12 +107,17 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
             });
         }
     }
+    async function handleForm(formValues) {
+        formValuesSignal.set(formValues);
+    }
     return {
-        formSignal: formSignal,
-        isLoadingSignal: isLoadingSignal,
-        errorSignal: errorSignal,
-        submitResponseSignal: submitResponseSignal,
-        submitForm: submitForm,
+        formSignal,
+        isLoadingSignal,
+        errorSignal,
+        submitResponseSignal,
+        formValuesSignal,
+        submitForm,
+        handleForm,
     };
 });
 function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {

package/dist/services/utils/file-upload-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getUploadUrl: (formId: string, file: File) => Promise<string | undefined>;
+export declare const uploadFile: (file: File, uploadUrl: string) => Promise<string | undefined>;

package/dist/services/utils/file-upload-utils.js

@@ -0,0 +1,34 @@
+import { submissions } from '@wix/forms';
+import { httpClient, errorHandler } from '@wix/essentials';
+export const getUploadUrl = async (formId, file) => {
+    try {
+        const { uploadUrl } = await submissions.getMediaUploadUrl(formId, file.name, file.type);
+        return uploadUrl;
+    }
+    catch {
+        console.error('Cannot get uploadUrl for file upload!');
+        return;
+    }
+};
+export const uploadFile = async (file, uploadUrl) => {
+    const headers = {
+        'Content-Type': 'application/octet-stream',
+    };
+    const { withErrorHandler } = errorHandler;
+    try {
+        const response = await withErrorHandler(() => httpClient.fetchWithAuth(uploadUrl, {
+            method: 'PUT',
+            body: file,
+            headers,
+        }), {});
+        const data = await response.json();
+        if (!data) {
+            return;
+        }
+        return data.file.url;
+    }
+    catch (e) {
+        const resolvedError = errorHandler.getResolvedError(e);
+        throw resolvedError;
+    }
+};

package/dist/services/utils/index.d.ts

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/dist/services/utils/index.js

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -42,11 +42,12 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@wix/form-public": "^0.55.0",
+    "@wix/form-public": "^0.68.0",
     "@wix/forms": "^1.0.331",
     "@wix/headless-utils": "0.0.7",
     "@wix/services-definitions": "^0.1.4",
-    "@wix/services-manager-react": "^0.1.26"
+    "@wix/services-manager-react": "^0.1.26",
+    "react-aria-components": "^1.13.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -58,5 +59,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "8cb5d395518afd8d76e474d88a52dc1b8fcac24810e523dd18de3672"
+  "falconPackageHash": "f3edf9d5732afbeb7ae504e3914dcd5e290272761dec8d784dc0e8f8"
 }

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

@@ -1,47 +0,0 @@
-import React from 'react';
-export interface PhoneFieldProps {
-    id: string;
-    children: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export interface PhoneLabelProps {
-    children: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export interface PhoneLabelRequiredProps {
-    required?: boolean;
-    children?: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export declare const Required: React.ForwardRefExoticComponent<PhoneLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
-interface PhoneLabelComponent extends React.ForwardRefExoticComponent<PhoneLabelProps & React.RefAttributes<HTMLDivElement>> {
-    Required: typeof Required;
-}
-export declare const Label: PhoneLabelComponent;
-export interface PhoneErrorProps {
-    children?: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-declare const Error: React.ForwardRefExoticComponent<PhoneErrorProps & React.RefAttributes<HTMLDivElement>>;
-export interface CountryCodeProps {
-    asChild?: boolean;
-    className?: string;
-}
-declare const CountryCode: React.ForwardRefExoticComponent<CountryCodeProps & React.RefAttributes<HTMLDivElement>>;
-export interface PhoneFieldInputProps {
-    asChild?: boolean;
-    className?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<PhoneFieldInputProps & React.RefAttributes<HTMLDivElement>>;
-interface PhoneFieldComponent extends React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLDivElement>> {
-    Label: typeof Label;
-    Error: typeof Error;
-    Input: typeof Input;
-    CountryCode: typeof CountryCode;
-}
-export declare const PhoneField: PhoneFieldComponent;
-export {};

package/cjs/dist/react/Phone.js

@@ -1,56 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoneField = exports.Label = exports.Required = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@wix/headless-forms/react");
-const form_public_1 = require("@wix/form-public");
-const Root = react_1.default.forwardRef((props, ref) => {
-    const { id, children, asChild, className } = props;
-    const { description } = (0, form_public_1.useFieldProps)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field, { ref: ref, id: id, asChild: asChild, className: className, children: (0, jsx_runtime_1.jsx)(react_2.Form.Field.InputWrapper, { children: (0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { description: description, children: children }) }) }));
-});
-Root.displayName = 'PhoneField';
-const LabelRoot = react_1.default.forwardRef((props, ref) => {
-    const { asChild, className, children } = props;
-    const { id, label, showLabel } = (0, form_public_1.useFieldProps)();
-    if (!showLabel) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Label, { ref: ref, asChild: asChild, className: className, children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, children: [label, children] }) }));
-});
-LabelRoot.displayName = 'PhoneField.Label';
-exports.Required = react_1.default.forwardRef((props, ref) => {
-    const { required } = (0, form_public_1.useFieldProps)();
-    return (0, jsx_runtime_1.jsx)(react_2.Form.Field.Label.Required, { ...props, ref: ref, required: required });
-});
-exports.Required.displayName = 'PhoneField.Label.Required';
-exports.Label = LabelRoot;
-exports.Label.Required = exports.Required;
-const Error = react_1.default.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { errorMessage } = (0, form_public_1.useFieldProps)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Error, { ref: ref, ...rest, children: errorMessage }));
-});
-Error.displayName = 'PhoneField.Error';
-const CountryCode = react_1.default.forwardRef((props, ref) => {
-    const { asChild, className, ...rest } = props;
-    const { id, countryCodes, defaultCountryCode, readOnly, onChange, onBlur, onFocus, } = (0, form_public_1.useFieldProps)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: (0, jsx_runtime_1.jsx)("select", { id: `${id}-country`, defaultValue: defaultCountryCode || '', disabled: readOnly, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), children: countryCodes?.map((code) => ((0, jsx_runtime_1.jsx)("option", { value: code, children: code }, code))) }) }));
-});
-CountryCode.displayName = 'PhoneField.CountryCode';
-const Input = react_1.default.forwardRef((props, ref) => {
-    const { asChild, className, ...rest } = props;
-    const { id, value, required, readOnly, placeholder, onChange, onBlur, onFocus, description, } = (0, form_public_1.useFieldProps)();
-    const descriptionId = description ? `${id}-description` : undefined;
-    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: (0, jsx_runtime_1.jsx)("input", { id: id, type: "tel", value: value || '', required: required, readOnly: readOnly, placeholder: placeholder, "aria-describedby": descriptionId, "aria-invalid": !!(required && !value), "aria-required": required, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.() }) }));
-});
-Input.displayName = 'PhoneField.Input';
-exports.PhoneField = Root;
-exports.PhoneField.Label = exports.Label;
-exports.PhoneField.Error = Error;
-exports.PhoneField.Input = Input;
-exports.PhoneField.CountryCode = CountryCode;

package/dist/react/Phone.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-export interface PhoneFieldProps {
-    id: string;
-    children: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export interface PhoneLabelProps {
-    children: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export interface PhoneLabelRequiredProps {
-    required?: boolean;
-    children?: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-export declare const Required: React.ForwardRefExoticComponent<PhoneLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
-interface PhoneLabelComponent extends React.ForwardRefExoticComponent<PhoneLabelProps & React.RefAttributes<HTMLDivElement>> {
-    Required: typeof Required;
-}
-export declare const Label: PhoneLabelComponent;
-export interface PhoneErrorProps {
-    children?: React.ReactNode;
-    asChild?: boolean;
-    className?: string;
-}
-declare const Error: React.ForwardRefExoticComponent<PhoneErrorProps & React.RefAttributes<HTMLDivElement>>;
-export interface CountryCodeProps {
-    asChild?: boolean;
-    className?: string;
-}
-declare const CountryCode: React.ForwardRefExoticComponent<CountryCodeProps & React.RefAttributes<HTMLDivElement>>;
-export interface PhoneFieldInputProps {
-    asChild?: boolean;
-    className?: string;
-}
-declare const Input: React.ForwardRefExoticComponent<PhoneFieldInputProps & React.RefAttributes<HTMLDivElement>>;
-interface PhoneFieldComponent extends React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLDivElement>> {
-    Label: typeof Label;
-    Error: typeof Error;
-    Input: typeof Input;
-    CountryCode: typeof CountryCode;
-}
-export declare const PhoneField: PhoneFieldComponent;
-export {};

package/dist/react/Phone.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Form } from '@wix/headless-forms/react';
-import { useFieldProps } from '@wix/form-public';
-const Root = React.forwardRef((props, ref) => {
-    const { id, children, asChild, className } = props;
-    const { description } = useFieldProps();
-    return (_jsx(Form.Field, { ref: ref, id: id, asChild: asChild, className: className, children: _jsx(Form.Field.InputWrapper, { children: _jsx(Form.Field.Input, { description: description, children: children }) }) }));
-});
-Root.displayName = 'PhoneField';
-const LabelRoot = React.forwardRef((props, ref) => {
-    const { asChild, className, children } = props;
-    const { id, label, showLabel } = useFieldProps();
-    if (!showLabel) {
-        return null;
-    }
-    return (_jsx(Form.Field.Label, { ref: ref, asChild: asChild, className: className, children: _jsxs("label", { htmlFor: id, children: [label, children] }) }));
-});
-LabelRoot.displayName = 'PhoneField.Label';
-export const Required = React.forwardRef((props, ref) => {
-    const { required } = useFieldProps();
-    return _jsx(Form.Field.Label.Required, { ...props, ref: ref, required: required });
-});
-Required.displayName = 'PhoneField.Label.Required';
-export const Label = LabelRoot;
-Label.Required = Required;
-const Error = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const { errorMessage } = useFieldProps();
-    return (_jsx(Form.Field.Error, { ref: ref, ...rest, children: errorMessage }));
-});
-Error.displayName = 'PhoneField.Error';
-const CountryCode = React.forwardRef((props, ref) => {
-    const { asChild, className, ...rest } = props;
-    const { id, countryCodes, defaultCountryCode, readOnly, onChange, onBlur, onFocus, } = useFieldProps();
-    return (_jsx(Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: _jsx("select", { id: `${id}-country`, defaultValue: defaultCountryCode || '', disabled: readOnly, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), children: countryCodes?.map((code) => (_jsx("option", { value: code, children: code }, code))) }) }));
-});
-CountryCode.displayName = 'PhoneField.CountryCode';
-const Input = React.forwardRef((props, ref) => {
-    const { asChild, className, ...rest } = props;
-    const { id, value, required, readOnly, placeholder, onChange, onBlur, onFocus, description, } = useFieldProps();
-    const descriptionId = description ? `${id}-description` : undefined;
-    return (_jsx(Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: _jsx("input", { id: id, type: "tel", value: value || '', required: required, readOnly: readOnly, placeholder: placeholder, "aria-describedby": descriptionId, "aria-invalid": !!(required && !value), "aria-required": required, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.() }) }));
-});
-Input.displayName = 'PhoneField.Input';
-export const PhoneField = Root;
-PhoneField.Label = Label;
-PhoneField.Error = Error;
-PhoneField.Input = Input;
-PhoneField.CountryCode = CountryCode;