Display single example

mui · Feb 4, 2025 · 7bbb026 · 7bbb026
1 parent f2bc065
commit 7bbb026
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 34 deletions.
diff --git a/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/css-modules/index.tsx
@@ -4,7 +4,7 @@ import styles from './index.module.css';
 
 export default function ExampleDialog() {
   return (
-    <Dialog.Root>
+    <Dialog.Root onOpenChangeComplete={console.log}>
       <Dialog.Trigger className={styles.Button}>View notifications</Dialog.Trigger>
       <Dialog.Portal keepMounted>
         <Dialog.Backdrop className={styles.Backdrop} />

diff --git a/docs/src/app/(public)/(content)/react/components/form/demos/zod/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/form/demos/zod/css-modules/index.tsx
@@ -9,15 +9,21 @@ const schema = z.object({
   age: z.coerce.number().positive(),
 });
 
-function handleRequest(event: React.FormEvent<HTMLFormElement>) {
+async function submitForm(event: React.FormEvent<HTMLFormElement>) {
+  event.preventDefault();
+
   const formData = new FormData(event.currentTarget);
   const result = schema.safeParse(Object.fromEntries(formData as any));
 
   if (!result.success) {
-    return result.error.flatten().fieldErrors;
+    return {
+      errors: result.error.flatten().fieldErrors,
+    };
   }
 
-  return {};
+  return {
+    errors: {},
+  };
 }
 
 export default function Page() {
@@ -28,10 +34,9 @@ export default function Page() {
       className={styles.Form}
       errors={errors}
       onClearErrors={setErrors}
-      onSubmit={(event) => {
-        event.preventDefault();
-        const reqErrors = handleRequest(event);
-        setErrors(reqErrors);
+      onSubmit={async (event) => {
+        const response = await submitForm(event);
+        setErrors(response.errors);
       }}
     >
       <Field.Root name="name" className={styles.Field}>

diff --git a/docs/src/app/(public)/(content)/react/components/form/demos/zod/tailwind/index.tsx b/docs/src/app/(public)/(content)/react/components/form/demos/zod/tailwind/index.tsx
@@ -8,15 +8,21 @@ const schema = z.object({
   age: z.coerce.number().positive(),
 });
 
-function handleRequest(event: React.FormEvent<HTMLFormElement>) {
+async function submitForm(event: React.FormEvent<HTMLFormElement>) {
+  event.preventDefault();
+
   const formData = new FormData(event.currentTarget);
   const result = schema.safeParse(Object.fromEntries(formData as any));
 
   if (!result.success) {
-    return result.error.flatten().fieldErrors;
+    return {
+      errors: result.error.flatten().fieldErrors,
+    };
   }
 
-  return {};
+  return {
+    errors: {},
+  };
 }
 
 export default function Page() {
@@ -27,10 +33,9 @@ export default function Page() {
       className="flex w-full max-w-64 flex-col gap-4"
       errors={errors}
       onClearErrors={setErrors}
-      onSubmit={(event) => {
-        event.preventDefault();
-        const reqErrors = handleRequest(event);
-        setErrors(reqErrors);
+      onSubmit={async (event) => {
+        const response = await submitForm(event);
+        setErrors(response.errors);
       }}
     >
       <Field.Root name="name" className="flex flex-col items-start gap-1">

diff --git a/docs/src/app/(public)/(content)/react/components/form/page.mdx b/docs/src/app/(public)/(content)/react/components/form/page.mdx
@@ -34,22 +34,4 @@ import { Form } from '@base-ui-components/react/form';
 
 When parsing the schema using `schema.safeParse()`, the `result.error.flatten().fieldErrors` data can be used to map the errors to each field's `name`.
 
-```jsx title="Zod integration"
-import { z } from 'zod';
-
-const schema = z.object({
-  name: z.string().min(1),
-  age: z.coerce.number().positive(),
-});
-
-function handleSubmit(event) {
-  // When submitting the form, parse the form data using the schema
-  const formData = new FormData(event.currentTarget);
-  const result = schema.safeParse(Object.fromEntries(formData));
-
-  // The field errors can be stored in state and passed as the `errors` prop
-  const fieldErrors = result.error.flatten().fieldErrors;
-}
-```
-
-<Demo compact path="./demos/zod" />
+<Demo path="./demos/zod" />