Merge branch 'master' into dependabot/npm_and_yarn/next-15.2.4

Author: bluebill1049

src/components/ApiGallery.tsx

@@ -162,6 +162,20 @@ export default function ApiGallery() {
               </Link>
             </div>
           </li>
+          <li>
+            <div>
+              <h3>
+                <code>{`</>`}</code>useLens
+              </h3>
+              <p>
+                Type-safe lenses for building reusable and shareable form
+                components with precise focus on form fields.
+              </p>
+              <Link href="/docs/uselens" aria-label="read more about useLens">
+                Read More ▸
+              </Link>
+            </div>
+          </li>
           <li>
             <div>
               <h3>

src/components/Menu/MenuLinks.ts

@@ -160,6 +160,10 @@ export const apiLinks: Pages = [
     pathname: "/docs/usefieldarray",
     name: "useFieldArray",
   },
+  {
+    pathname: "/docs/uselens",
+    name: "useLens",
+  },
   {
     pathname: "/docs/createFormControl",
     name: "createFormControl",

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

@@ -21,7 +21,7 @@ export function SponsorsList() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src="/images/route4me.png" alt="route4me" />
+          <img src="/images/route4me.png" alt="route4me"/>
         </a>
         <a
           href="https://www.follower24.de/"
@@ -35,15 +35,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/docs/usecontroller/controller.mdx

@@ -63,7 +63,7 @@ The following table contains information about properties which `Controller` pro
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
 import ReactDatePicker from "react-datepicker"
 import { TextField } from "@material-ui/core"
 import { useForm, Controller } from "react-hook-form"

src/content/docs/useform.mdx

@@ -435,7 +435,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>
 
@@ -445,16 +448,11 @@ npm install @hookform/resolvers
 
 <TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
 import { useForm } from "react-hook-form"
 import { yupResolver } from "@hookform/resolvers/yup"
 import * as yup from "yup"
 
-type Inputs = {
-  name: string
-  age: string
-}
-
 const schema = yup
   .object()
   .shape({
@@ -464,7 +462,7 @@ const schema = yup
   .required()
 
 const App = () => {
-  const { register, handleSubmit } = useForm<Inputs>({
+  const { register, handleSubmit } = useForm({
     resolver: yupResolver(schema), // yup, joi and even your own.
   })
 
@@ -478,7 +476,7 @@ const App = () => {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-zod-resolver-ts-example-forked-w72vp"
 import { useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import * as z from "zod"
@@ -491,16 +489,17 @@ const schema = z.object({
 type Schema = z.infer<typeof schema>
 
 const App = () => {
-  const { register, handleSubmit } = useForm<Schema>({
+  const { register, handleSubmit } = useForm({
     resolver: zodResolver(schema),
   })
 
-  const onSubmit = (data: Schema) => {
-    console.log(data)
-  }
-
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form
+      onSubmit={handleSubmit((data) => {
+        // handle inputs
+        console.log(data)
+      })}
+    >
       <input {...register("name")} />
       <input {...register("age", { valueAsNumber: true })} type="number" />
       <input type="submit" />
@@ -509,40 +508,44 @@ const App = () => {
 }
 ```
 
-```typescript 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";
+```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"
 
 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 {...register("name")} />
+      <input type="number" {...register("age")} />
       <input type="submit" />
     </form>
-  );
+  )
 }
 ```
 
-```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-ajvresolver-vr3imc"
 import { useForm } from "react-hook-form"
 import { ajvResolver } from "@hookform/resolvers/ajv"
 
@@ -586,7 +589,7 @@ const App = () => {
 }
 ```
 
-```javascript copy sandbox="https://codesandbox.io/s/vest-8q874"
+```tsx copy sandbox="https://codesandbox.io/s/vest-8q874"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 import { vestResolver } from "@hookform/resolvers/vest"
@@ -633,7 +636,7 @@ const App = () => {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-customresoliver-ts-v7-juc63"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 import * as Joi from "joi"

src/content/docs/useform/clearerrors.mdx

@@ -43,7 +43,7 @@ This function can manually clear errors in the form.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
+```tsx sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx"
 import * as React from "react"
 import { useForm } from "react-hook-form"
 

src/content/docs/useform/control.mdx

@@ -20,7 +20,7 @@ This object contains methods for registering components into React Hook Form.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
 import { useForm, Controller } from "react-hook-form"
 import { TextField } from "@material-ui/core"
 

src/content/docs/useform/getvalues.mdx

@@ -49,7 +49,7 @@ The example below shows what to expect when you invoke `getValues` method.
 
 <TabGroup buttonLabels={["TS", "JS", "Types"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
@@ -107,7 +107,7 @@ export default function App() {
 }
 ```
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
 import React from "react"
 import { useForm } from "react-hook-form"
 

src/content/docs/useform/handlesubmit.mdx

@@ -54,7 +54,7 @@ This function will receive the form data if form validation is successful.
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
-```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
+```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
 import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
 
 type FormValues = {
@@ -66,10 +66,11 @@ type FormValues = {
 export default function App() {
   const { register, handleSubmit } = useForm<FormValues>()
   const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
-  const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors)
+  const onError: SubmitErrorHandler<FormValues> = (errors) =>
+    console.log(errors)
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
       <input {...register("firstName")} />
       <input {...register("lastName")} />
       <input type="email" {...register("email")} />