Add experiments page

docs/package.json

@@ -67,6 +67,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
+    "react-hook-form": "^7.51.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-runner": "^1.0.3",
@@ -82,8 +83,8 @@
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@mui/internal-scripts": "^1.0.1",
     "@mui-internal/docs-utils": "^1.0.2",
+    "@mui/internal-scripts": "^1.0.1",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.12",

docs/pages/experiments/form-field.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import Stack from '@mui/system/Stack';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
+import { Select, SelectRootSlotProps } from '@mui/base/Select';
+import { Option } from '@mui/base/Option';
+import { FormField, HelpText, Label } from '@mui/base';
+
+const SelectButton = React.forwardRef(function SelectButton<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectRootSlotProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+export default function FormFieldExamples() {
+  const [value, setValue] = React.useState<1 | 2 | 3>(1);
+
+  const { control, handleSubmit } = useForm({
+    defaultValues: {
+      replies: 'anyone', // 'anyone' | 'friends' | 'you'
+    },
+  });
+
+  const submitRhfForm = (data) => console.log('submit', data);
+
+  return (
+    <Stack className="m-6" spacing={6}>
+      <FormField className="flex flex-col">
+        <Label className="font-sans font-medium text-sm">Shipping Country</Label>
+        <HelpText className="font-sans text-sm mb-2">
+          We cannot ship cards to unsupported countries
+        </HelpText>
+        <Select
+          className="GallerySelect"
+          slots={{
+            root: SelectButton,
+          }}
+          slotProps={{
+            listbox: { className: 'GallerySelect-listbox' },
+            popup: { className: 'GallerySelect-popup' },
+          }}
+          defaultValue="AU"
+        >
+          <Option className="GallerySelect-option" value="AU">
+            Australia
+          </Option>
+          <Option className="GallerySelect-option" value="BE">
+            Belgium
+          </Option>
+          <Option className="GallerySelect-option" value="CA">
+            Canada
+          </Option>
+        </Select>
+      </FormField>
+
+      <FormField className="flex flex-col w-[300px]">
+        <Label className="font-sans font-medium text-sm">Pronoun</Label>
+        <HelpText className="font-sans text-sm mb-2">
+          Example use: Albert Yu added Meg 2: The Trench to{' '}
+          {
+            {
+              1: 'their',
+              2: 'his',
+              3: 'her',
+            }[value]
+          }{' '}
+          watchlist
+        </HelpText>
+        <Select
+          className="GallerySelect"
+          slots={{
+            root: SelectButton,
+          }}
+          slotProps={{
+            listbox: { className: 'GallerySelect-listbox' },
+            popup: { className: 'GallerySelect-popup' },
+          }}
+          value={value}
+          onChange={(ev, newValue) => newValue && setValue(newValue)}
+        >
+          <Option className="GallerySelect-option" value={1}>
+            They/their
+          </Option>
+          <Option className="GallerySelect-option" value={2}>
+            He/his
+          </Option>
+          <Option className="GallerySelect-option" value={3}>
+            She/her
+          </Option>
+        </Select>
+      </FormField>
+
+      <form onSubmit={handleSubmit(submitRhfForm)}>
+        <Controller
+          name="replies"
+          control={control}
+          render={({ field, fieldState }) => {
+            const {
+              onChange,
+              // onBlur, // TODO: onBlur callback?
+              value: rhfValue,
+              disabled,
+              name,
+              // ref, // we can't use this
+            } = field;
+
+            const {
+              invalid,
+              isTouched,
+              isDirty,
+              // error, // we can't use this yet
+            } = fieldState;
+
+            return (
+              <FormField
+                name={name}
+                disabled={disabled}
+                invalid={invalid}
+                touched={isTouched}
+                dirty={isDirty}
+                className="flex flex-col w-[300px]"
+              >
+                <Label className="font-sans font-medium text-sm">Replies</Label>
+                <HelpText className="font-sans text-xs mb-2">
+                  This default can be overridden on individual reviews
+                </HelpText>
+                <Select
+                  className="GallerySelect"
+                  slots={{
+                    root: SelectButton,
+                  }}
+                  slotProps={{
+                    listbox: { className: 'GallerySelect-listbox' },
+                    popup: { className: 'GallerySelect-popup' },
+                  }}
+                  value={rhfValue}
+                  onChange={(ev, newValue) => onChange(newValue)}
+                >
+                  <Option className="GallerySelect-option" value="anyone">
+                    Anyone
+                  </Option>
+                  <Option className="GallerySelect-option" value="friends">
+                    Friends
+                  </Option>
+                  <Option className="GallerySelect-option" value="you">
+                    Only you
+                  </Option>
+                </Select>
+              </FormField>
+            );
+          }}
+        />
+      </form>
+    </Stack>
+  );
+}