Merge remote-tracking branch 'upstream/master' into experiments/menu-fully-featured

Author: michaldudak

docs/package.json

@@ -96,6 +96,7 @@
     "tailwindcss": "4.0.0-beta.2",
     "unified": "^11.0.5",
     "webpack-bundle-analyzer": "^4.10.2",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "zod": "^3.24.1"
   }
 }

docs/src/app/(private)/experiments/rtl.module.css

@@ -16,7 +16,7 @@
   margin: 12px 0;
   min-width: 200px;
   border-radius: 12px;
-  /*  overflow: auto;*/
+  /* overflow: auto; */
   outline: 0;
   background: #fff;
   border: 1px solid var(--color-gray-200);

docs/src/app/(public)/(content)/react/components/form/demos/zod/css-modules/index.module.css

@@ -0,0 +1,87 @@
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 16rem;
+}
+
+.Field {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
+}
+
+.Label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color-gray-900);
+}
+
+.Input {
+  box-sizing: border-box;
+  padding-left: 0.875rem;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  background-color: transparent;
+  color: var(--color-gray-900);
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Error {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-red-800);
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--color-gray-400);
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}

docs/src/app/(public)/(content)/react/components/form/demos/zod/css-modules/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { z } from 'zod';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import styles from './index.module.css';
+
+const schema = z.object({
+  name: z.string().min(1),
+  age: z.coerce.number().positive(),
+});
+
+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 {
+      errors: result.error.flatten().fieldErrors,
+    };
+  }
+
+  return {
+    errors: {},
+  };
+}
+
+export default function Page() {
+  const [errors, setErrors] = React.useState({});
+
+  return (
+    <Form
+      className={styles.Form}
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        const response = await submitForm(event);
+        setErrors(response.errors);
+      }}
+    >
+      <Field.Root name="name" className={styles.Field}>
+        <Field.Label className={styles.Label}>Name</Field.Label>
+        <Field.Control placeholder="Enter name" className={styles.Input} />
+        <Field.Error className={styles.Error} />
+      </Field.Root>
+      <Field.Root name="age" className={styles.Field}>
+        <Field.Label className={styles.Label}>Age</Field.Label>
+        <Field.Control placeholder="Enter age" className={styles.Input} />
+        <Field.Error className={styles.Error} />
+      </Field.Root>
+      <button type="submit" className={styles.Button}>
+        Submit
+      </button>
+    </Form>
+  );
+}

docs/src/app/(public)/(content)/react/components/form/demos/zod/index.ts

@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';

docs/src/app/(public)/(content)/react/components/form/demos/zod/tailwind/index.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { z } from 'zod';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+
+const schema = z.object({
+  name: z.string().min(1),
+  age: z.coerce.number().positive(),
+});
+
+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 {
+      errors: result.error.flatten().fieldErrors,
+    };
+  }
+
+  return {
+    errors: {},
+  };
+}
+
+export default function Page() {
+  const [errors, setErrors] = React.useState({});
+
+  return (
+    <Form
+      className="flex w-full max-w-64 flex-col gap-4"
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        const response = await submitForm(event);
+        setErrors(response.errors);
+      }}
+    >
+      <Field.Root name="name" className="flex flex-col items-start gap-1">
+        <Field.Label className="text-sm font-medium text-gray-900">Name</Field.Label>
+        <Field.Control
+          placeholder="Enter name"
+          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+        />
+        <Field.Error className="text-sm text-red-800" />
+      </Field.Root>
+      <Field.Root name="age" className="flex flex-col items-start gap-1">
+        <Field.Label className="text-sm font-medium text-gray-900">Age</Field.Label>
+        <Field.Control
+          placeholder="Enter age"
+          className="h-10 w-full rounded-md border border-gray-200 pl-3.5 text-base text-gray-900 focus:outline focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+        />
+        <Field.Error className="text-sm text-red-800" />
+      </Field.Root>
+      <button
+        type="submit"
+        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+      >
+        Submit
+      </button>
+    </Form>
+  );
+}

docs/src/app/(public)/(content)/react/components/form/page.mdx

@@ -27,3 +27,11 @@ import { Form } from '@base-ui-components/react/form';
 ```
 
 <Reference component="Form" />
+
+## Examples
+
+### Using with Zod
+
+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`.
+
+<Demo path="./demos/zod" />

docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/css-modules/index.module.css

@@ -87,10 +87,12 @@
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;

docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/css-modules/index.module.css

@@ -66,8 +66,8 @@
   @media (prefers-color-scheme: light) {
     outline: 1px solid var(--color-gray-200);
     box-shadow:
-      0px 10px 15px -3px var(--color-gray-200),
-      0px 4px 6px -4px var(--color-gray-200);
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;
@@ -123,7 +126,6 @@
   padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1rem;
-
   display: grid;
   gap: 0.5rem;
   align-items: center;

docs/src/app/(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css

@@ -83,14 +83,17 @@
     bottom: -8px;
     rotate: 180deg;
   }
+
   &[data-side='bottom'] {
     top: -8px;
     rotate: 0deg;
   }
+
   &[data-side='left'] {
     right: -13px;
     rotate: 90deg;
   }
+
   &[data-side='right'] {
     left: -13px;
     rotate: -90deg;