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}
 
 ---