fix Form ref

packages/@next-fetch/react-query/src/form.ts

@@ -1,4 +1,4 @@
-import { type HTMLProps, createElement } from "react";
+import { type HTMLProps, createElement, forwardRef } from "react";
 import { useForm as useForm_ } from "@next-fetch/core-plugin/form";
 import type {
   UseMutationResult,
@@ -32,15 +32,30 @@ export function useForm<Data, Error, Input, Context>(
  * This enables progressive enhancement, as the form can be submitted
  * without having to re-render the app using JavaScript code.
  */
-export function Form<Data, Error, Input, Context>({
-  mutation,
-  mutationConfig,
-  ...props
-}: React.HTMLProps<HTMLFormElement> &
+type FormProps<Data, Error, Input, Context> = React.HTMLProps<HTMLFormElement> &
   React.PropsWithChildren<{
     mutation: HookWithFormSubmission<Data, Error, Input, Context>;
     mutationConfig?: UseMutationOptions<Data, Error, Input, Context>;
-  }>) {
+  }>;
+
+type FormT = <Data, Error, Input, Context>(
+  props: FormProps<Data, Error, Input, Context> & {
+    ref?: React.ForwardedRef<HTMLFormElement>;
+  }
+) => ReturnType<typeof FormImpl>;
+
+export function FormImpl<Data, Error, Input, Context>(
+  {
+    mutation,
+    mutationConfig,
+    ...props
+  }: FormProps<Data, Error, Input, Context>,
+  ref: React.ForwardedRef<HTMLFormElement>
+) {
   const { formProps } = useForm(mutation, mutationConfig);
-  return createElement("form", { ...formProps, ...props }, props.children);
+
+  return createElement("form", { ...formProps, ...props, ref }, props.children);
 }
+
+// 1. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
+export const Form = forwardRef(FormImpl) as unknown as FormT;

packages/@next-fetch/swr/src/form.ts

@@ -1,4 +1,4 @@
-import { type HTMLProps, createElement } from "react";
+import { type HTMLProps, createElement, forwardRef } from "react";
 import { useForm as useForm_ } from "@next-fetch/core-plugin/form";
 import type {
   SWRMutationResponse,
@@ -32,15 +32,24 @@ export function useForm<Data, Error>(
  * This enables progressive enhancement, as the form can be submitted
  * without having to re-render the app using JavaScript code.
  */
-export function Form<Data, Error>({
-  mutation,
-  mutationConfig,
-  ...props
-}: React.HTMLProps<HTMLFormElement> &
+type FormProps<Data, Error> = React.HTMLProps<HTMLFormElement> &
   React.PropsWithChildren<{
     mutation: HookWithFormSubmission<Data, Error>;
     mutationConfig?: SWRMutationConfiguration<Data, Error>;
-  }>) {
+  }>;
+
+type FormT = <Data, Error>(
+  props: FormProps<Data, Error> & { ref?: React.ForwardedRef<HTMLFormElement> }
+) => ReturnType<typeof FormImpl>;
+
+function FormImpl<Data, Error>(
+  { mutation, mutationConfig, ...props }: FormProps<Data, Error>,
+  ref?: React.ForwardedRef<HTMLFormElement>
+) {
   const { formProps } = useForm(mutation, mutationConfig);
-  return createElement("form", { ...formProps, ...props }, props.children);
+
+  return createElement("form", { ...formProps, ...props, ref }, props.children);
 }
+
+// 1. https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012#58473012
+export const Form = forwardRef(FormImpl) as unknown as FormT;