Sync with upstream (removing .github directory)

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -12,7 +12,7 @@
     "clsx": "^1.2.1",
     "contentlayer": "^0.3.4",
     "little-state-machine": "^4.8.1",
-    "next": "^15.1.2",
+    "next": "^15.5.2",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.4.1",
@@ -46,8 +46,8 @@
     "eslint-plugin-react-hooks": "5.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
-    "prettier": "^3.5.3",
-    "typescript": "^5.8.3",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
     "typescript-eslint": "8.18.1"
   },
   "keywords": [

src/components/ApiGallery.tsx

@@ -18,7 +18,7 @@ export default function ApiGallery() {
 
     if (version !== 7) {
       router.push(
-        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/${version}/api`
+        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/v${version}/api`
       )
     } else {
       router.push(`/v${version}/docs/`)

src/components/CarbonAds.tsx

@@ -0,0 +1,38 @@
+"use client"
+import { useEffect, useRef } from "react"
+
+export const CARBON_SCRIPT_ID = "_carbonads_js"
+const CARBON_SCRIPT_SRC =
+  "https://cdn.carbonads.com/carbon.js?serve=CW7DTKQ7&placement=react-hook-formcom&format=cover"
+
+export function CarbonAds({ id }: { id: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function injectScript() {
+      if (document.getElementById(id)) return
+
+      const script = document.createElement("script")
+      script.id = id
+      script.async = true
+      script.src = CARBON_SCRIPT_SRC
+      script.type = "text/javascript"
+
+      if (containerRef.current) {
+        containerRef.current.appendChild(script)
+      }
+    }
+
+    if (document.readyState === "complete") {
+      injectScript()
+    } else {
+      window.addEventListener("load", injectScript)
+
+      return () => window.removeEventListener("load", injectScript)
+    }
+
+    return
+  }, [id])
+
+  return <div className="carbonAdsContainer" ref={containerRef} />
+}

src/components/Menu/Menu.tsx

@@ -4,6 +4,7 @@ import styles from "./SideMenu.module.css"
 import typographyStyles from "../../styles/typography.module.css"
 import { useRouter } from "next/router"
 import { Pages } from "../../types/types"
+import { CARBON_SCRIPT_ID, CarbonAds } from "@/components/CarbonAds"
 
 function Menu({ pages = [] }: { pages: Pages }) {
   const router = useRouter()
@@ -70,8 +71,9 @@ function Menu({ pages = [] }: { pages: Pages }) {
             )
           })}
         </ul>
-
-        <div id="carbon-cover" />
+        <div className={styles.ads}>
+          <CarbonAds id={CARBON_SCRIPT_ID} />
+        </div>
       </div>
     </aside>
   )

src/components/Menu/MenuLinks.ts

@@ -145,6 +145,12 @@ export const apiLinks: Pages = [
   {
     pathname: "/docs/usewatch",
     name: "useWatch",
+    pages: [
+      {
+        pathname: "/docs/usewatch/watch",
+        name: "Watch",
+      },
+    ],
   },
   {
     pathname: "/docs/useformstate",

src/components/Menu/SideMenu.module.css

@@ -38,7 +38,7 @@
     max-width: 230px;
     padding: 0;
     overflow-y: auto;
-    height: calc(100vh - 190px);
+    height: calc(100vh - 600px);
     overflow-y: auto;
   }
 
@@ -49,6 +49,10 @@
     display: flex;
   }
 
+  .menu > div > ul > li:last-child {
+    padding-bottom: 0;
+  }
+
   .menu > div > ul > li > a {
     text-decoration: none;
     padding-left: 6px;
@@ -118,6 +122,7 @@
   .menu > div > ul {
     margin-top: 0;
     max-width: 260px;
+    height: calc(100vh - 450px);
   }
 
   .menu > ul {
@@ -204,3 +209,8 @@
 .menu ul li a.isActive {
   border-bottom: 1px solid var(--color-secondary);
 }
+
+.ads {
+  position: absolute;
+  height: 500px;
+}

src/components/Nav.tsx

@@ -303,19 +303,6 @@ export default function Nav() {
                     {nav.tools.formBuilder}
                   </Link>
 
-                  <a
-                    href="https://www.beekai.com/features/form-builder"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={styles.linkExternal}
-                  >
-                    <b>BEEKAI</b> Form Builder{" "}
-                    <img
-                      src="/images/open-link.svg"
-                      alt="BEEKAI Form Builder"
-                    />
-                  </a>
-
                   <Link
                     className={router.pathname == "/dev-tools" ? "active" : ""}
                     href="/dev-tools"

src/components/layout.css

@@ -945,11 +945,3 @@ pre[class*="language-"] {
     height: auto;
   }
 }
-
-#carbon-responsive {
-  margin: 0 auto 50px;
-}
-
-#carbon-cover {
-  margin: 0 auto 50px;
-}

src/components/layout.tsx

@@ -28,19 +28,6 @@ const Layout = ({ children }: { children: ReactNode }) => {
 
   return (
     <>
-      {/*<div className="banner">*/}
-      {/*  <p>*/}
-      {/*    Next-gen <strong>form building</strong> platform with code generation.*/}
-      {/*    <a*/}
-      {/*      href="https://beekai.com/"*/}
-      {/*      title="Learn more about BEEKAI form builder"*/}
-      {/*      target="_blank"*/}
-      {/*      rel="noreferrer"*/}
-      {/*    >*/}
-      {/*      Find out more*/}
-      {/*    </a>*/}
-      {/*  </p>*/}
-      {/*</div>*/}
       <a className="skip-main" href="#main">
         Skip to content
       </a>

src/components/sponsorsList.module.css

@@ -48,6 +48,12 @@
   border-radius: 50px;
 }
 
+.add {
+  border: 1px dashed #ccc;
+  border-radius: 50px;
+  font-size: 12px;
+}
+
 @media (min-width: 768px) {
   .logoGroup {
     display: grid;

src/components/sponsorsList.tsx

@@ -6,23 +6,6 @@ export function SponsorsList() {
       <p className={styles.heading}>SUPPORTED AND BACKED BY</p>
 
       <div className={styles.logoGroup}>
-        <a
-          href="https://www.beekai.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img
-            src="https://www.beekai.com/marketing/logo/horizontal.svg"
-            alt="BEEKAI Form builder"
-          />
-        </a>
-        <a
-          href="https://www.route4me.com/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img src="/images/route4me.png" alt="route4me" />
-        </a>
         <a
           href="https://www.follower24.de/"
           target="_blank"
@@ -35,15 +18,12 @@ export function SponsorsList() {
           />
         </a>
         <a
-          href="https://www.sanity.io//"
+          href="https://opencollective.com/react-hook-form"
           target="_blank"
+          className={styles.add}
           rel="noopener noreferrer"
         >
-          <img
-            className={styles.twicsy}
-            src="/images/sanity.png"
-            alt="sanity io"
-          />
+          + Sponsor
         </a>
       </div>
     </div>

src/content/advanced-usage.mdx

@@ -381,7 +381,7 @@ function App() {
 
       <Input {...register("input")} />
 
-      <button type="button" onClick={() => reset({ defaultValues })}>
+      <button type="button" onClick={() => reset({ ...defaultValues })}>
         Reset
       </button>
       <input type="submit" />
@@ -408,7 +408,7 @@ function App() {
   const onSubmit = (data) => console.log(data)
 
   useEffect(() => {
-    register({ name: "select" })
+    register("select")
   }, [register])
 
   const handleChange = (e) => setValue("select", e.target.value)
@@ -521,7 +521,12 @@ const items = Array.from(Array(1000).keys()).map((i) => ({
 const WindowedRow = memo(({ index, style, data }) => {
   const { register } = useFormContext()
 
-  return <input {...register(`${index}.quantity`)} />
+  return (
+    <div style={style}>
+      <label>{data[index].title}</label>
+      <input {...register(`${index}.quantity`)} />
+    </div>
+  )
 })
 
 export const App = () => {

src/content/docs/useform.mdx

@@ -287,7 +287,6 @@ By default, an input value will be retained when input is removed. However, you
 - By default, `shouldUnregister: false` means unmounted fields are **not validated** by built-in validation.
 - By setting `shouldUnregister` to true at `useForm` level, `defaultValues` will **not** be merged against submission result.
 - Setting `shouldUnregister: true` makes your form behave more closely to native forms.
-
   - Form values are stored within the inputs themselves.
   - Unmounting an input removes its value.
   - Hidden inputs should use the `hidden` attribute for storing hidden data.
@@ -329,7 +328,7 @@ This config will enable [browser native validation](https://developer.mozilla.or
 
 - Only works with `onSubmit` and `onChange` modes, as the `reportValidity` execution will focus the error input.
 - Each registered field's validation message is required to be string to display them natively.
-- This feature only works with the `register` API and `useController/Controller` that are connected with actual DOM references.
+- This feature only works with the `register` API and  `useController/Controller` that are connected with actual DOM references.
 
 **Examples:**
 
@@ -435,7 +434,10 @@ npm install @hookform/resolvers
 - A resolver can not be used with the built-in validators (e.g.: required, min, etc.)
 - When building a custom resolver:
   - Make sure that you return an object with both `values` and `errors` properties. Their default values should be an empty object. For example: `{}`.
-  - The keys of the `error` object should match the `name` values of your fields.
+  - The keys of the `errors` object should match the `name` values of your fields, but they _must_ be hierarchical rather than a single key for deep errors:
+    `❌ { "participants.1.name": someErr }` will not set or clear properly - instead, use `✅ { participants: [null, { name: someErr } ] }` as this is reachable
+    as `errors.participants[1].name` - you can still prepare your errors using flat keys, and then use a function like this one from the zod resolver:
+    [toNestErrors(flatErrs, resolverOptions)](https://github.com/react-hook-form/resolvers/blob/master/src/toNestErrors.ts)
 
 </Admonition>
 
@@ -491,10 +493,12 @@ const App = () => {
   })
 
   return (
-    <form onSubmit={handleSubmit((data) => {
-      // handle inputs
-      console.log(data);
-    })}>
+    <form
+      onSubmit={handleSubmit((data) => {
+        // handle inputs
+        console.log(data)
+      })}
+    >
       <input {...register("name")} />
       <input {...register("age", { valueAsNumber: true })} type="number" />
       <input type="submit" />
@@ -504,35 +508,39 @@ const App = () => {
 ```
 
 ```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
-import { useForm } from "react-hook-form";
-import { joiResolver } from "@hookform/resolvers/joi";
-import Joi from "joi";
+import { useForm } from "react-hook-form"
+import { joiResolver } from "@hookform/resolvers/joi"
+import Joi from "joi"
 
 interface IFormInput {
-  name: string;
-  age: number;
+  name: string
+  age: number
 }
 
 const schema = Joi.object({
   name: Joi.string().required(),
-  age: Joi.number().required()
-});
+  age: Joi.number().required(),
+})
 
 const App = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>({
-    resolver: joiResolver(schema)
-  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>({
+    resolver: joiResolver(schema),
+  })
   const onSubmit = (data: IFormInput) => {
-    console.log(data);
-  };
+    console.log(data)
+  }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <input {...register("name")} />
       <input type="number" {...register("age")} />
       <input type="submit" />
     </form>
-  );
+  )
 }
 ```
 

src/content/docs/useform/control.mdx

@@ -35,7 +35,7 @@ function App() {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Controller
-        as={TextField}
+        render={({ field }) => <input {...field} />}
         name="firstName"
         control={control}
         defaultValue=""