Merge branch 'master' into master

Author: maurer2

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

pnpm-lock.yaml

@@ -2,7 +2,6 @@
   padding: 40px 0;
   font-size: 0.8rem;
   font-weight: 400;
-  margin-bottom: 60px;
   text-align: center;
 }
 

public/images/twicsy.png

@@ -70,6 +70,8 @@ function Menu({ pages = [] }: { pages: Pages }) {
             )
           })}
         </ul>
+
+        <div id="carbon-cover" />
       </div>
     </aside>
   )

src/components/Footer.module.css

@@ -277,14 +277,14 @@ export const getStartedLinks: Pages = [
     name: "Integrating with global state",
     pathname: "#Integratingwithglobalstate",
   },
-  {
-    name: "Integrating with services",
-    pathname: "#Integratingwithservices",
-  },
   {
     name: "Handle errors",
     pathname: "#Handleerrors",
   },
+  {
+    name: "Integrating with services",
+    pathname: "#Integratingwithservices",
+  },
   {
     name: "Schema Validation",
     pathname: "#SchemaValidation",

src/components/Menu/Menu.tsx

@@ -335,6 +335,11 @@ table {
   border: 1px solid var(--color-light-grey);
 }
 
+.scrollToTop,
+.editPage {
+  display: none;
+}
+
 .editPage:hover,
 .scrollToTop:hover {
   border-color: var(--color-secondary);
@@ -388,6 +393,11 @@ a.active {
     padding-left: 0;
     padding-right: 0;
   }
+
+  .scrollToTop,
+  .editPage {
+    display: block;
+  }
 }
 
 .editPage {
@@ -923,3 +933,11 @@ pre[class*="language-"] {
     height: auto;
   }
 }
+
+#carbon-responsive {
+  margin: 0 auto 50px;
+}
+
+#carbon-cover {
+  margin: 0 auto 50px;
+}

src/components/Menu/MenuLinks.ts

@@ -28,8 +28,8 @@
 
 .logoGroup {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
   margin: 0 1rem;
 }
 
@@ -44,12 +44,16 @@
   padding: 0.5rem;
 }
 
+.twicsy {
+  border-radius: 50px;
+}
+
 @media (min-width: 768px) {
   .logoGroup {
     display: grid;
-    max-width: 500px;
+    max-width: 600px;
     margin: 0 auto;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5rem;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
   }
 }

src/components/layout.css

@@ -33,6 +33,17 @@ export function SponsorsList() {
             alt="route4me"
           />
         </a>
+        <a
+          href="https://twicsy.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            className={styles.twicsy}
+            src="/images/twicsy.png"
+            alt="twicsy"
+          />
+        </a>
       </div>
     </div>
   )

src/components/sponsorsList.module.css

@@ -92,6 +92,7 @@ sidebar: apiLinks
 | [delayError](#delayError)                               | Delay error from appearing instantly.                             |
 | [shouldUseNativeValidation](#shouldUseNativeValidation) | Use browser built-in form constraint API.                         |
 | [shouldUnregister](#shouldUnregister)                   | Enable and disable input unregister after unmount.                |
+| [disabled](#disabled)                                   | Disable the entire form with all associated inputs.               |
 
 **Schema validation props:**
 
@@ -322,7 +323,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:**
 
@@ -352,6 +353,54 @@ export default function App() {
 }
 ```
 
+#### disabled: <TypeText>boolean = false</TypeText> {#disabled}
+
+---
+
+This config allows you to disable the entire form and all associated inputs when set to `true`.<br />
+This can be useful for preventing user interaction during asynchronous tasks or other
+situations where inputs should be temporarily unresponsive.
+
+**Examples:**
+
+---
+
+```javascript copy
+import { useForm, Controller } from "react-hook-form"
+
+const App = () => {
+  const [disabled, setDisabled] = useState(false)
+  const { register, handleSubmit, control } = useForm({
+    disabled,
+  })
+
+  return (
+    <form
+      onSubmit={handleSubmit(async () => {
+        setDisabled(true)
+        await sleep(100)
+        setDisabled(false)
+      })}
+    >
+      <input
+        type={"checkbox"}
+        {...register("checkbox")}
+        data-testid={"checkbox"}
+      />
+      <select {...register("select")} data-testid={"select"} />
+
+      <Controller
+        control={control}
+        render={({ field }) => <input disabled={field.disabled} />}
+        name="test"
+      />
+
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
 #### resolver: [Resolver](/ts#Resolver) {#resolver}
 
 ---

src/components/sponsorsList.tsx

@@ -271,7 +271,7 @@ const App = () => {
         minLength: "This is minLength",
       },
     })
-  }, [setValue])
+  }, [setError])
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>

src/content/docs/useform.mdx

@@ -4,46 +4,113 @@ description: Subscribe to input changes
 sidebar: apiLinks
 ---
 
-## \</> `watch:` <TypeText>(names?: string | string[] | (data, options) => void) => unknown</TypeText>
+## \</> `watch:` _<TypeText>some overloads</TypeText>_
 
 This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.
 
-### Props
+### Overloads
+
+This function mainly serves **two purposes**:
+
+1. Returns and keep sync with fields' values
+   a. <TypeText>`watch(name: string, defaultValue?): unknown`</TypeText>
+   b. <TypeText>`watch(names: string[], defaultValue?): {[key:string]: unknown}`</TypeText>
+   c. <TypeText>`watch(): {[key:string]: unknown}`</TypeText>
+2. Start subscribing with given callback function (can be stopped by calling `unsubscribe` function)
+   a. <TypeText>`watch(callback: (data, { name, type }) => void, defaultValues?): { unsubscribe: () => void }`</TypeText>
+
+The explanation of each of these four overloads follows below.
+
+#### 1-a. Watching single field <TypeText>`watch(name: string, defaultValue?: unknown): unknown`</TypeText>
+
+---
+
+Watch and subscribe to a single field used outside of render.
+
+**Params**
+
+| Name           | Type                           | Description                         |
+| -------------- | ------------------------------ | ----------------------------------- |
+| `name`         | <TypeText>`string`</TypeText>  | the field name                      |
+| `defaultValue` | <TypeText>`unknown`</TypeText> | _optional_. default value for field |
+
+**Returns** the single field value.
+
+```tsx
+const name = watch("name")
+```
+
+#### 1-b. Watching some fields <TypeText>`watch(names: string[], defaultValue?: {[key:string]: unknown}): unknown[]`</TypeText>
 
 ---
 
-| Type                                                                           | Description                                                                                       |
-| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
-| <TypeText>string</TypeText>                                                    | Watch input value by name (similar to lodash [get](https://lodash.com/docs/4.17.15#get) function) |
-| <TypeText>string[]</TypeText>                                                  | Watch multiple inputs                                                                             |
-| <TypeText>undefined</TypeText>                                                 | Watch all inputs                                                                                  |
-| <TypeText>`(data: unknown, { name: string, type: string }) => void`</TypeText> | Watch all inputs and invoke a callback                                                            |
+Watch and subscribe to an array of fields used outside of render.
+
+**Params**
+
+| Name           | Type                                           | Description                           |
+| -------------- | ---------------------------------------------- | ------------------------------------- |
+| `names`        | <TypeText>`string[]`</TypeText>                | the field names                       |
+| `defaultValue` | <TypeText>`{[key:string]: unknown}`</TypeText> | _optional_. default values for fields |
+
+**Returns** an array of field values.
+
+```tsx
+const [name, name1] = watch(["name", "name1"])
+```
 
-### Return
+#### 1-c. Watching the entire form <TypeText>`watch(): {[key:string]: unknown}`</TypeText>
 
 ---
 
-| Example                                                          | Return                                             |
-| ---------------------------------------------------------------- | -------------------------------------------------- |
-| `watch('inputName')`                                             | <TypeText>unknown</TypeText>                       |
-| `watch(['inputName1'])`                                          | <TypeText>unknown[]</TypeText>                     |
-| `watch()`                                                        | <TypeText>`{[key:string]: unknown}`</TypeText>     |
-| `watch((data, { name, type }) => console.log(data, name, type))` | <TypeText>`{ unsubscribe: () => void }`</TypeText> |
+Watch and subscribe to the entire form update/change based on onChange and re-render at the useForm.
 
-<Admonition type="important" title="Rules">
+**Params** None
+
+**Returns** the entire form values.
+
+```tsx
+const formValues = watch()
+```
+
+#### 2. Start watching with callback fn <TypeText>`watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }`</TypeText>
+
+---
+
+Subscribe to field update/change without trigger re-render.
+
+**Params**
+
+| Name            | Type                                                  | Description                                          |
+| --------------- | ----------------------------------------------------- | ---------------------------------------------------- |
+| `callback`      | <TypeText>`(data, { name, type }) => void`</TypeText> | callback function to subscribe to all fields changes |
+| `defaultValues` | <TypeText>`{[key:string]: unknown}`</TypeText>        | _optional_. defaultValues for the entire form        |
+
+**Returns** object with `unsubscribe` function.
+
+```tsx
+useEffect(() => {
+  const { unsubscribe } = watch((value) => {
+    console.log(value)
+  })
+  return () => unsubscribe()
+}, [watch])
+```
+
+### Rules
+
+---
 
 - When `defaultValue` is not defined, the first render of `watch` will return `undefined` because it is called before `register`. It's **recommended** to provide `defaultValues` at `useForm` to avoid this behaviour, but you can set the inline `defaultValue` as the second argument.
 - When both `defaultValue` and `defaultValues` are supplied, `defaultValue` will be returned.
 - This API will trigger re-render at the root of your app or form, consider using a callback or the [useWatch](/docs/usewatch) api if you are experiencing performance issues.
 - `watch` result is optimised for render phase instead of `useEffect`'s deps, to detect value update you may want to use an external custom hook for value comparison.
 
-</Admonition>
-
-**Examples:**
+### Examples:
 
 ---
 
-**Watch in a Form**
+#### Watch in a Form
 
 <TabGroup buttonLabels={["TS", "JS"]}>
 
@@ -138,7 +205,7 @@ function App() {
 
 </TabGroup>
 
-**Watch in Field Array**
+#### Watch in Field Array
 
 <TabGroup buttonLabels={["TS", "JS"]}>