@twintag/twintag-form 1.2.0 → 1.3.0

package/dist/twintag-form.webcomponent.js

@@ -4746,6 +4746,7 @@ const kr = {
   },
   presets: [Bt(), yr()]
 }), Cr = Mt(Sr), zr = St(pt, {
+  // @ts-expect-error: ts limitation
   props: {
     config: "json",
     options: "json"

package/lib/components/form.tsx

@@ -1,7 +1,7 @@
 import type { FieldValues } from 'react-hook-form';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { Form } from '@twintag/twintag-form/common/form';
@@ -11,94 +11,94 @@ type Props = {
   resetOnSubmit?: boolean;
 } & WithChildren;
 
-export const TwintagForm = ({
-  defaultValues,
-  resetOnSubmit,
-  children,
-}: Props) => {
-  const ref = useRef<HTMLFormElement>(null);
-
-  const form = useForm({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (form.formState.isSubmitSuccessful && resetOnSubmit) {
-      if (defaultValues) {
-        form.reset(
-          Object.keys(defaultValues).reduce(
-            (acc, key) => ({ ...acc, [key]: '' }),
-            {},
-          ),
-        );
-      }
-    }
-  }, [form.formState]);
-
-  const onValid = (data: FieldValues) => {
-    const eventWithValidData = new CustomEvent('twintag-form-valid', {
-      detail: data,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
+export const TwintagForm = forwardRef<HTMLFormElement, Props>(
+  ({ defaultValues, resetOnSubmit, children }, fowardedRef) => {
+    const ref = useRef<HTMLFormElement>(null);
+
+    const form = useForm({
+      defaultValues,
     });
 
-    ref.current?.dispatchEvent(eventWithValidData);
-  };
+    useImperativeHandle(fowardedRef, () => ref.current!);
+
+    useEffect(() => {
+      if (form.formState.isSubmitSuccessful && resetOnSubmit) {
+        if (defaultValues) {
+          form.reset(
+            Object.keys(defaultValues).reduce(
+              (acc, key) => ({ ...acc, [key]: '' }),
+              {},
+            ),
+          );
+        }
+      }
+    }, [form.formState]);
+
+    const onValid = (data: FieldValues) => {
+      const eventWithValidData = new CustomEvent('twintag-form-valid', {
+        detail: data,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
 
-  const onInvalid = (__errors: FieldValues) => {
-    const eventWithInvalidData = new CustomEvent('twintag-form-invalid', {
-      detail: __errors,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    });
+      ref.current?.dispatchEvent(eventWithValidData);
+    };
 
-    ref.current?.dispatchEvent(eventWithInvalidData);
-  };
+    const onInvalid = (__errors: FieldValues) => {
+      const eventWithInvalidData = new CustomEvent('twintag-form-invalid', {
+        detail: __errors,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
 
-  const onValidate = () => {
-    void form.handleSubmit(onValid, onInvalid)();
-  };
+      ref.current?.dispatchEvent(eventWithInvalidData);
+    };
 
-  const onGetValues = () => {
-    const values = form.getValues();
+    const onValidate = () => {
+      void form.handleSubmit(onValid, onInvalid)();
+    };
 
-    const eventWithValues = new CustomEvent('twintag-form-values', {
-      detail: values,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    });
+    const onGetValues = () => {
+      const values = form.getValues();
 
-    ref.current?.dispatchEvent(eventWithValues);
-  };
+      const eventWithValues = new CustomEvent('twintag-form-values', {
+        detail: values,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
 
-  useEffect(() => {
-    const form = ref.current;
+      ref.current?.dispatchEvent(eventWithValues);
+    };
 
-    if (form) {
-      form.addEventListener('twintag-form-validate', onValidate);
-      form.addEventListener('twintag-form-get_values', onGetValues);
-    }
+    useEffect(() => {
+      const form = ref.current;
 
-    return () => {
       if (form) {
-        form.removeEventListener('twintag-form-validate', onValidate);
-        form.removeEventListener('twintag-form-get_values', onGetValues);
+        form.addEventListener('twintag-form-validate', onValidate);
+        form.addEventListener('twintag-form-get_values', onGetValues);
       }
-    };
-  }, []);
-
-  return (
-    <Form {...form}>
-      <form
-        ref={ref}
-        className='relative space-y-4 font-tf-font'
-        onSubmit={form.handleSubmit(onValid, onInvalid)}
-      >
-        {children}
-      </form>
-    </Form>
-  );
-};
+
+      return () => {
+        if (form) {
+          form.removeEventListener('twintag-form-validate', onValidate);
+          form.removeEventListener('twintag-form-get_values', onGetValues);
+        }
+      };
+    }, []);
+
+    return (
+      <Form {...form}>
+        <form
+          ref={ref}
+          className='relative space-y-4 font-tf-font'
+          onSubmit={form.handleSubmit(onValid, onInvalid)}
+        >
+          {children}
+        </form>
+      </Form>
+    );
+  },
+);

package/lib/index.tsx

@@ -1,6 +1,8 @@
 import type { ComponentProps } from 'react';
 import type { RawJsonComponent } from '@twintag/twintag-form/types';
 
+import { forwardRef } from 'react';
+
 import { TwintagJsonRenderer } from '@twintag/twintag-form/components';
 import { components } from '@twintag/twintag-form/components/config';
 import { TwintagForm } from '@twintag/twintag-form/components/form';
@@ -15,17 +17,20 @@ type Props = {
   }>;
 };
 
-export const Form = ({ config, options }: Props) => {
-  return (
-    <TwintagFormProvider variant={options?.variant} components={components}>
-      <TwintagForm
-        defaultValues={options?.defaultValues}
-        resetOnSubmit={options?.resetOnSubmit}
-      >
-        {config.map((item, idx) => (
-          <TwintagJsonRenderer key={idx} config={item} />
-        ))}
-      </TwintagForm>
-    </TwintagFormProvider>
-  );
-};
+export const Form = forwardRef<HTMLFormElement, Props>(
+  ({ config, options }, ref) => {
+    return (
+      <TwintagFormProvider variant={options?.variant} components={components}>
+        <TwintagForm
+          ref={ref}
+          defaultValues={options?.defaultValues}
+          resetOnSubmit={options?.resetOnSubmit}
+        >
+          {config.map((item, idx) => (
+            <TwintagJsonRenderer key={idx} config={item} />
+          ))}
+        </TwintagForm>
+      </TwintagFormProvider>
+    );
+  },
+);

package/lib/webcomponent.ts

@@ -8,6 +8,7 @@ import config from '../twind.config';
 const withTwind = install(config);
 
 const TwintagFormElement = r2wc(Form, {
+  // @ts-expect-error: ts limitation
   props: {
     config: 'json',
     options: 'json',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Twintag",
   "type": "module",
   "exports": {