@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/dist/organisms/form/builder/useFormEdit.js

@@ -0,0 +1,36 @@
+import s from "lodash/cloneDeep";
+import { useReducer as y, useEffect as g } from "react";
+import { reducer as C, createInitialState as S, hasChanged as b } from "./FormEdit.reducer.js";
+function R(e) {
+  const [{ current: t, future: m, past: i }, o] = y(C, S(e)), u = () => {
+    e.onSubmit && typeof e.onSubmit == "function" && e.onSubmit(t);
+  }, a = () => {
+    e.onSubmit && typeof e.onCopy == "function" && e.onCopy(t);
+  };
+  g(() => {
+    e.form && (t._id !== e.form._id || t.modified !== e.form.modified) && o({ type: "replaceForm", value: e.form });
+  }, [e.form]);
+  const f = (n) => {
+    b(t, { ...t, ...n }) && o({ type: "formChange", value: n });
+  }, c = () => o({ type: "redo" }), r = () => o({ type: "undo" }), d = () => o({ type: "reset" }), h = (n, l) => {
+    f({ ...t, [n]: l });
+  };
+  return {
+    form: s(t),
+    redo: c,
+    undo: r,
+    reset: d,
+    hasChanged: !!i.length,
+    isValid: t.title && t.name && t.path,
+    hasUndo: !!i.length,
+    hasRedo: !!m.length,
+    onSubmit: u,
+    onCopy: a,
+    formChange: f,
+    setChange: h
+  };
+}
+export {
+  R as useFormEdit
+};
+//# sourceMappingURL=useFormEdit.js.map

package/dist/organisms/form/builder/useFormEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormEdit.js","sources":["../../../../src/organisms/form/builder/useFormEdit.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useReducer } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { createInitialState, hasChanged, reducer } from \"./FormEdit.reducer\";\n\nexport interface UseFormEditHookProps extends Record<string, unknown> {\n  form?: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  onSubmit?: (form: Partial<FormType>) => void;\n  onCopy?: (form: Partial<FormType>) => void;\n}\n\nexport function useFormEdit(props: UseFormEditHookProps) {\n  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));\n\n  const onSubmit = () => {\n    if (props.onSubmit && typeof props.onSubmit === \"function\") {\n      props.onSubmit(current);\n    }\n  };\n  const onCopy = () => {\n    if (props.onSubmit && typeof props.onCopy === \"function\") {\n      props.onCopy(current);\n    }\n  };\n\n  useEffect(() => {\n    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {\n      dispatchFormAction({ type: \"replaceForm\", value: props.form });\n    }\n  }, [props.form]);\n\n  const formChange = (newForm: Partial<FormType>) => {\n    if (hasChanged(current, { ...current, ...newForm })) {\n      dispatchFormAction({ type: \"formChange\", value: newForm });\n    }\n  };\n\n  const redo = () => dispatchFormAction({ type: \"redo\" });\n  const undo = () => dispatchFormAction({ type: \"undo\" });\n  const reset = () => dispatchFormAction({ type: \"reset\" });\n\n  const setChange = (path: string | undefined, value: any) => {\n    formChange({ ...current, [path!]: value });\n  };\n\n  return {\n    form: cloneDeep(current),\n    redo,\n    undo,\n    reset,\n    hasChanged: !!past.length,\n    isValid: current.title && current.name && current.path,\n    hasUndo: !!past.length,\n    hasRedo: !!future.length,\n    onSubmit,\n    onCopy,\n    formChange,\n    setChange\n  };\n}\n"],"names":["useFormEdit","props","current","future","past","dispatchFormAction","useReducer","reducer","createInitialState","onSubmit","onCopy","useEffect","formChange","newForm","hasChanged","redo","undo","reset","setChange","path","value","cloneDeep"],"mappings":";;;AAeO,SAASA,EAAYC,GAA6B;AACvD,QAAM,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,EAAK,GAAGC,CAAkB,IAAIC,EAAWC,GAASC,EAAmBP,CAAK,CAAC,GAE/FQ,IAAW,MAAM;AACrB,IAAIR,EAAM,YAAY,OAAOA,EAAM,YAAa,cAC9CA,EAAM,SAASC,CAAO;AAAA,EAE1B,GACMQ,IAAS,MAAM;AACnB,IAAIT,EAAM,YAAY,OAAOA,EAAM,UAAW,cAC5CA,EAAM,OAAOC,CAAO;AAAA,EAExB;AAEA,EAAAS,EAAU,MAAM;AACV,IAAAV,EAAM,SAASC,EAAQ,QAAQD,EAAM,KAAK,OAAOC,EAAQ,aAAaD,EAAM,KAAK,aACnFI,EAAmB,EAAE,MAAM,eAAe,OAAOJ,EAAM,MAAM;AAAA,EAC/D,GACC,CAACA,EAAM,IAAI,CAAC;AAET,QAAAW,IAAa,CAACC,MAA+B;AAC7C,IAAAC,EAAWZ,GAAS,EAAE,GAAGA,GAAS,GAAGW,EAAA,CAAS,KAChDR,EAAmB,EAAE,MAAM,cAAc,OAAOQ,GAAS;AAAA,EAE7D,GAEME,IAAO,MAAMV,EAAmB,EAAE,MAAM,QAAQ,GAChDW,IAAO,MAAMX,EAAmB,EAAE,MAAM,QAAQ,GAChDY,IAAQ,MAAMZ,EAAmB,EAAE,MAAM,SAAS,GAElDa,IAAY,CAACC,GAA0BC,MAAe;AAC1D,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAK,GAAGC,GAAO;AAAA,EAC3C;AAEO,SAAA;AAAA,IACL,MAAMC,EAAUnB,CAAO;AAAA,IACvB,MAAAa;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAY,CAAC,CAACb,EAAK;AAAA,IACnB,SAASF,EAAQ,SAASA,EAAQ,QAAQA,EAAQ;AAAA,IAClD,SAAS,CAAC,CAACE,EAAK;AAAA,IAChB,SAAS,CAAC,CAACD,EAAO;AAAA,IAClB,UAAAM;AAAA,IACA,QAAAC;AAAA,IACA,YAAAE;AAAA,IACA,WAAAM;AAAA,EACF;AACF;"}

package/dist/{components/form-settings/formSettings.component.d.ts → organisms/form/settings/FormSettings.d.ts}

@@ -1,8 +1,7 @@
-import React from "react";
-import { FormOptions, FormSchema } from "../../interfaces";
-export interface FormSettingsProps {
-    form: Partial<FormSchema>;
-    onSubmit?: Function;
-    options?: FormOptions;
-}
-export declare function FormSettings(props: FormSettingsProps): React.JSX.Element;
+import { FormOptions, FormType } from '../../../interfaces';
+export interface FormSettingsProps {
+    form: Partial<FormType>;
+    onSubmit?: Function;
+    options?: FormOptions;
+}
+export declare function FormSettings(props: FormSettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/settings/FormSettings.js

@@ -0,0 +1,38 @@
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import g from "lodash/isEqual";
+import l from "lodash/noop";
+import { useState as b, useEffect as h } from "react";
+import { Form as F } from "../Form.js";
+import { getFormSettingsSchema as y } from "./FormSettings.schema.js";
+import { formSettingsToSubmission as S, submissionToFormSettings as x } from "./FormSettings.utils.js";
+function C({ form: s, onSubmit: a = l, options: e }) {
+  const o = y(), [c, m] = b(!0), [t, r] = b(() => S(s)), n = ({ data: u, isValid: p }) => {
+    p && r({ data: u }), m(p);
+  };
+  return h(() => {
+    const u = S(s);
+    s != null && s._id && !g(t.data, u.data) && r(u);
+  }, [s == null ? void 0 : s._id]), {
+    options: e,
+    form: o,
+    type: s.type,
+    submission: t,
+    onChange: n,
+    isValid: c,
+    setIsValid: m,
+    onSubmit: () => {
+      a(x(s, t));
+    }
+  };
+}
+function q(s) {
+  const { form: a, submission: e, options: o = {}, onChange: c, onSubmit: m, isValid: t } = C(s), r = o.i18n || ((n) => n);
+  return /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ d(F, { form: a, submission: e, onChange: c, options: o }),
+    /* @__PURE__ */ d("button", { "data-testid": "submit", disabled: !t, className: "mt-5 btn btn-primary", onClick: m, type: "submit", children: r("Save settings") })
+  ] });
+}
+export {
+  q as FormSettings
+};
+//# sourceMappingURL=FormSettings.js.map

package/dist/organisms/form/settings/FormSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSettings.js","sources":["../../../../src/organisms/form/settings/FormSettings.tsx"],"sourcesContent":["import isEqual from \"lodash/isEqual\";\nimport noop from \"lodash/noop\";\nimport { useEffect, useState } from \"react\";\n\nimport type { ChangedSubmission, FormOptions, FormType } from \"../../../interfaces\";\nimport { Form } from \"../../form/Form\";\nimport { getFormSettingsSchema } from \"./FormSettings.schema\";\nimport { formSettingsToSubmission, FormSettingsType, submissionToFormSettings } from \"./FormSettings.utils\";\n\nexport interface FormSettingsProps {\n  form: Partial<FormType>;\n  onSubmit?: Function;\n  options?: FormOptions;\n}\n\nfunction useFormSettings({ form: formDefinition, onSubmit = noop, options }: FormSettingsProps) {\n  const form = getFormSettingsSchema();\n  const [isValid, setIsValid] = useState(true);\n  const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));\n\n  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsType>) => {\n    if (isValid) {\n      setSubmission({ data });\n    }\n    setIsValid(isValid);\n  };\n\n  useEffect(() => {\n    const input = formSettingsToSubmission(formDefinition);\n    if (formDefinition?._id && !isEqual(submission.data, input.data)) {\n      setSubmission(input);\n    }\n  }, [formDefinition?._id]);\n\n  return {\n    options,\n    form,\n    type: formDefinition.type,\n    submission,\n    onChange,\n    isValid,\n    setIsValid,\n    onSubmit: () => {\n      onSubmit(submissionToFormSettings(formDefinition, submission));\n    }\n  };\n}\n\nexport function FormSettings(props: FormSettingsProps) {\n  const { form, submission, options = {}, onChange, onSubmit, isValid } = useFormSettings(props);\n\n  const i18n = options.i18n || ((f: string) => f);\n\n  return (\n    <div>\n      <Form<FormSettingsType> form={form} submission={submission} onChange={onChange} options={options} />\n\n      <button data-testid='submit' disabled={!isValid} className={\"mt-5 btn btn-primary\"} onClick={onSubmit} type={\"submit\"}>\n        {i18n(\"Save settings\")}\n      </button>\n    </div>\n  );\n}\n"],"names":["useFormSettings","formDefinition","onSubmit","noop","options","form","getFormSettingsSchema","isValid","setIsValid","useState","submission","setSubmission","formSettingsToSubmission","onChange","data","useEffect","input","isEqual","submissionToFormSettings","FormSettings","props","i18n","f","jsx","Form"],"mappings":";;;;;;;AAeA,SAASA,EAAgB,EAAE,MAAMC,GAAgB,UAAAC,IAAWC,GAAM,SAAAC,KAA8B;AAC9F,QAAMC,IAAOC,EAAsB,GAC7B,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAI,GACrC,CAACC,GAAYC,CAAa,IAAIF,EAAS,MAAMG,EAAyBX,CAAc,CAAC,GAErFY,IAAW,CAAC,EAAE,MAAAC,GAAM,SAAAP,QAAmD;AAC3E,IAAIA,KACYI,EAAA,EAAE,MAAAG,GAAM,GAExBN,EAAWD,CAAO;AAAA,EACpB;AAEA,SAAAQ,EAAU,MAAM;AACR,UAAAC,IAAQJ,EAAyBX,CAAc;AACjD,IAAAA,KAAA,QAAAA,EAAgB,OAAO,CAACgB,EAAQP,EAAW,MAAMM,EAAM,IAAI,KAC7DL,EAAcK,CAAK;AAAA,EACrB,GACC,CAACf,KAAA,gBAAAA,EAAgB,GAAG,CAAC,GAEjB;AAAA,IACL,SAAAG;AAAA,IACA,MAAAC;AAAA,IACA,MAAMJ,EAAe;AAAA,IACrB,YAAAS;AAAA,IACA,UAAAG;AAAA,IACA,SAAAN;AAAA,IACA,YAAAC;AAAA,IACA,UAAU,MAAM;AACL,MAAAN,EAAAgB,EAAyBjB,GAAgBS,CAAU,CAAC;AAAA,IAAA;AAAA,EAEjE;AACF;AAEO,SAASS,EAAaC,GAA0B;AAC/C,QAAA,EAAE,MAAAf,GAAM,YAAAK,GAAY,SAAAN,IAAU,CAAI,GAAA,UAAAS,GAAU,UAAAX,GAAU,SAAAK,EAAA,IAAYP,EAAgBoB,CAAK,GAEvFC,IAAOjB,EAAQ,SAAS,CAACkB,MAAcA;AAE7C,2BACG,OACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAuB,EAAA,MAAAnB,GAAY,YAAAK,GAAwB,UAAAG,GAAoB,SAAAT,GAAkB;AAAA,IAEjG,gBAAAmB,EAAA,UAAA,EAAO,eAAY,UAAS,UAAU,CAAChB,GAAS,WAAW,wBAAwB,SAASL,GAAU,MAAM,UAC1G,UAAAmB,EAAK,eAAe,EACvB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/organisms/form/settings/FormSettings.schema.d.ts

@@ -0,0 +1,2 @@
+import { FormType } from '../../../interfaces';
+export declare function getFormSettingsSchema(): FormType;

package/dist/organisms/form/settings/FormSettings.schema.js

@@ -0,0 +1,60 @@
+function e() {
+  return {
+    type: "form",
+    tags: [],
+    components: [
+      {
+        input: !0,
+        key: "action",
+        placeholder: "Enter the custom submission URL",
+        label: "Custom Action Url",
+        labelPosition: "top",
+        widget: { type: "input" },
+        type: "url",
+        mask: !1,
+        inputType: "url",
+        inputFormat: "plain",
+        spellcheck: !0,
+        id: "efyrzea",
+        attributes: {
+          "data-testid": "action"
+        }
+      },
+      {
+        input: !0,
+        key: "tags",
+        placeholder: "Add tags",
+        label: "Form tags",
+        widget: { type: "input" },
+        type: "tags",
+        delimeter: ",",
+        storeas: "array",
+        maxTags: 0,
+        id: "erxcyw"
+      },
+      {
+        input: !0,
+        key: "properties",
+        label: "Custom Properties",
+        labelPosition: "top",
+        type: "datamap",
+        addAnother: "Add Another",
+        disableAddingRemovingRows: !1,
+        keyBeforeValue: !0,
+        valueComponent: {
+          type: "textfield",
+          key: "value",
+          label: "Value",
+          input: !0,
+          hideLabel: !0
+        },
+        id: "ezne35"
+      }
+    ],
+    display: "form"
+  };
+}
+export {
+  e as getFormSettingsSchema
+};
+//# sourceMappingURL=FormSettings.schema.js.map

package/dist/organisms/form/settings/FormSettings.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSettings.schema.js","sources":["../../../../src/organisms/form/settings/FormSettings.schema.ts"],"sourcesContent":["import type { FormType } from \"../../../interfaces\";\n\nexport function getFormSettingsSchema(): FormType {\n  return {\n    type: \"form\",\n    tags: [],\n    components: [\n      {\n        input: true,\n        key: \"action\",\n        placeholder: \"Enter the custom submission URL\",\n        label: \"Custom Action Url\",\n        labelPosition: \"top\",\n        widget: { type: \"input\" },\n        type: \"url\",\n        mask: false,\n        inputType: \"url\",\n        inputFormat: \"plain\",\n        spellcheck: true,\n        id: \"efyrzea\",\n        attributes: {\n          \"data-testid\": \"action\"\n        }\n      },\n      {\n        input: true,\n        key: \"tags\",\n        placeholder: \"Add tags\",\n        label: \"Form tags\",\n        widget: { type: \"input\" },\n        type: \"tags\",\n        delimeter: \",\",\n        storeas: \"array\",\n        maxTags: 0,\n        id: \"erxcyw\"\n      },\n      {\n        input: true,\n        key: \"properties\",\n        label: \"Custom Properties\",\n        labelPosition: \"top\",\n        type: \"datamap\",\n        addAnother: \"Add Another\",\n        disableAddingRemovingRows: false,\n        keyBeforeValue: true,\n        valueComponent: {\n          type: \"textfield\",\n          key: \"value\",\n          label: \"Value\",\n          input: true,\n          hideLabel: true\n        },\n        id: \"ezne35\"\n      }\n    ],\n    display: \"form\"\n  };\n}\n"],"names":["getFormSettingsSchema"],"mappings":"AAEO,SAASA,IAAkC;AACzC,SAAA;AAAA,IACL,MAAM;AAAA,IACN,MAAM,CAAC;AAAA,IACP,YAAY;AAAA,MACV;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,eAAe;AAAA,QACf,QAAQ,EAAE,MAAM,QAAQ;AAAA,QACxB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,YAAY;AAAA,UACV,eAAe;AAAA,QAAA;AAAA,MAEnB;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ,EAAE,MAAM,QAAQ;AAAA,QACxB,MAAM;AAAA,QACN,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,eAAe;AAAA,QACf,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,2BAA2B;AAAA,QAC3B,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,UACP,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,QACA,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,SAAS;AAAA,EACX;AACF;"}

package/dist/organisms/form/settings/FormSettings.utils.d.ts

@@ -0,0 +1,8 @@
+import { FormType, SubmissionType } from '../../../interfaces';
+export type FormSettingsType = {
+    action: string;
+    tags: string[];
+    properties: Record<string, any>;
+};
+export declare function formSettingsToSubmission(form: Partial<FormType>): SubmissionType<FormSettingsType>;
+export declare function submissionToFormSettings(form: Partial<FormType>, submission: SubmissionType<FormSettingsType>): Partial<FormType>;

package/dist/organisms/form/settings/FormSettings.utils.js

@@ -0,0 +1,23 @@
+import e from "lodash/cloneDeep";
+function r(t) {
+  return {
+    data: {
+      action: t.action,
+      tags: t.tags,
+      properties: t.properties
+    }
+  };
+}
+function i(t, a) {
+  return {
+    ...e(t),
+    tags: a.data.tags,
+    action: a.data.action,
+    properties: a.data.properties
+  };
+}
+export {
+  r as formSettingsToSubmission,
+  i as submissionToFormSettings
+};
+//# sourceMappingURL=FormSettings.utils.js.map

package/dist/organisms/form/settings/FormSettings.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSettings.utils.js","sources":["../../../../src/organisms/form/settings/FormSettings.utils.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\n\nimport { FormType, SubmissionType } from \"../../../interfaces\";\n\nexport type FormSettingsType = {\n  action: string;\n  tags: string[];\n  properties: Record<string, any>;\n};\n\nexport function formSettingsToSubmission(form: Partial<FormType>): SubmissionType<FormSettingsType> {\n  return {\n    data: {\n      action: form.action!,\n      tags: form.tags!,\n      properties: form.properties!\n    }\n  };\n}\n\nexport function submissionToFormSettings(form: Partial<FormType>, submission: SubmissionType<FormSettingsType>): Partial<FormType> {\n  return {\n    ...cloneDeep(form),\n    tags: submission.data.tags,\n    action: submission.data.action,\n    properties: submission.data.properties\n  };\n}\n"],"names":["formSettingsToSubmission","form","submissionToFormSettings","submission","cloneDeep"],"mappings":";AAUO,SAASA,EAAyBC,GAA2D;AAC3F,SAAA;AAAA,IACL,MAAM;AAAA,MACJ,QAAQA,EAAK;AAAA,MACb,MAAMA,EAAK;AAAA,MACX,YAAYA,EAAK;AAAA,IAAA;AAAA,EAErB;AACF;AAEgB,SAAAC,EAAyBD,GAAyBE,GAAiE;AAC1H,SAAA;AAAA,IACL,GAAGC,EAAUH,CAAI;AAAA,IACjB,MAAME,EAAW,KAAK;AAAA,IACtB,QAAQA,EAAW,KAAK;AAAA,IACxB,YAAYA,EAAW,KAAK;AAAA,EAC9B;AACF;"}

package/dist/organisms/form/types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, JSON, SubmissionType } from '../../interfaces';
+export interface FormPageChangeProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> {
+    page: number;
+    submission: SubmissionType<Data>;
+}
+export type FormCustomEvent = {
+    type: string;
+    event: string;
+    component: ComponentType;
+    data: any;
+};

package/dist/organisms/form/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/organisms/form/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/organisms/form/useForm.d.ts

@@ -0,0 +1,65 @@
+import { MutableRefObject } from 'react';
+import { ChangedSubmission, ComponentType, FormOptions, FormType, JSON, SubmissionType } from '../../interfaces';
+import { FormCustomEvent } from './types';
+type Webform = any;
+type EventError = string | Error | Error[] | {
+    message: string;
+} | {
+    message: string;
+}[];
+export interface UseFormProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> {
+    src?: string;
+    url?: string;
+    form?: FormType;
+    submission?: SubmissionType<Data>;
+    options?: FormOptions;
+    FormClass?: any;
+    onFormReady?: (instance: Webform) => void;
+    onPrevPage?: (page: number, submission: SubmissionType<Data>) => void;
+    onNextPage?: (page: number, submission: SubmissionType<Data>) => void;
+    onCancelSubmit?: () => void;
+    onCancelComponent?: (component: ComponentType) => void;
+    onChange?: (value: ChangedSubmission<Data>, flags: any, modified: boolean) => void;
+    onCustomEvent?: (event: FormCustomEvent) => void;
+    onComponentChange?: (changed: {
+        instance: Webform;
+        component: Webform;
+        value: any;
+        flags: any;
+    }) => void;
+    onSubmit?: (submission: SubmissionType<Data>, saved?: boolean) => void;
+    onAsyncSubmit?: (submission: SubmissionType<Data>) => void;
+    onSubmitDone?: (submission: SubmissionType<Data>) => void;
+    onSubmitError?: (error: EventError) => void;
+    onFormLoad?: (form: JSON) => void;
+    onError?: (error: EventError | false) => void;
+    onRender?: (param: any) => void;
+    onAttach?: (param: any) => void;
+    onBuild?: (param: any) => void;
+    onFocus?: (instance: Webform) => void;
+    onBlur?: (instance: Webform) => void;
+    onInitialized?: () => void;
+    onLanguageChanged?: () => void;
+    onBeforeSetSubmission?: (submission: SubmissionType<Data>) => void;
+    onSaveDraftBegin?: () => void;
+    onSaveDraft?: (submission: SubmissionType<Data>) => void;
+    onRestoreDraft?: (submission: SubmissionType<Data> | null) => void;
+    onSubmissionDeleted?: (submission: SubmissionType<Data>) => void;
+    onRequestDone?: () => void;
+    otherEvents?: {
+        [event: string]: (...args: any[]) => void;
+    };
+}
+export declare function useForm<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}>(props: UseFormProps<Data>): {
+    element: MutableRefObject<HTMLDivElement | null>;
+    instance: any;
+};
+export {};