init project

test/e2e/fixtures/Autocomplete/HoverJoyAutocomplete.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+function HoverJoyAutocomplete() {
+  return (
+    <Autocomplete
+      open
+      options={['one', 'two', 'three', 'four', 'five']}
+      sx={{ width: 300 }}
+      slotProps={{ listbox: { sx: { height: '100px' } } }}
+    />
+  );
+}
+
+export default HoverJoyAutocomplete;

test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+function HoverMaterialAutocomplete() {
+  return (
+    <Autocomplete
+      open
+      options={['one', 'two', 'three', 'four', 'five']}
+      sx={{ width: 300 }}
+      ListboxProps={{ sx: { height: '100px' } }}
+      renderInput={(params) => <TextField {...params} />}
+    />
+  );
+}
+
+export default HoverMaterialAutocomplete;

test/e2e/fixtures/FocusTrap/ClosedFocusTrap.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+
+export default function ClosedFocusTrap() {
+  return (
+    <React.Fragment>
+      <button type="button" autoFocus>
+        initial focus
+      </button>
+      <FocusTrap open={false}>
+        <div data-testid="root">
+          <button type="button">inside focusable</button>
+        </div>
+      </FocusTrap>
+      <button type="button">final tab target</button>
+    </React.Fragment>
+  );
+}

test/e2e/fixtures/FocusTrap/DefaultOpenLazyFocusTrap.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+
+export default function BaseFocusTrap() {
+  const [open, close] = React.useReducer(() => false, true);
+
+  return (
+    <React.Fragment>
+      <button type="button" autoFocus data-testid="initial-focus">
+        initial focus
+      </button>
+      <FocusTrap isEnabled={() => true} open={open} disableAutoFocus>
+        <div data-testid="root">
+          <div>Title</div>
+          <button type="button" onClick={close}>
+            close
+          </button>
+          <button type="button">noop</button>
+        </div>
+      </FocusTrap>
+    </React.Fragment>
+  );
+}

test/e2e/fixtures/FocusTrap/DisableEnforceFocusFocusTrap.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+
+export default function disableEnforceFocusFocusTrap() {
+  return (
+    <React.Fragment>
+      <button data-testid="initial-focus" type="button" autoFocus>
+        initial focus
+      </button>
+      <FocusTrap open disableEnforceFocus disableAutoFocus>
+        <div data-testid="root">
+          <button data-testid="inside-trap-focus" type="button">
+            inside focusable
+          </button>
+        </div>
+      </FocusTrap>
+    </React.Fragment>
+  );
+}

test/e2e/fixtures/FocusTrap/OpenFocusTrap.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import FocusTrap from '@mui/material/Unstable_TrapFocus';
+
+export default function OpenFocusTrap() {
+  return (
+    <React.Fragment>
+      <button type="button" autoFocus data-testid="initial-focus">
+        initial focus
+      </button>
+      <FocusTrap isEnabled={() => true} open>
+        <div tabIndex={-1} data-testid="root">
+          <div>Title</div>
+          <button type="button">confirm</button>
+          <button type="button">cancel</button>
+          <button type="button">ok</button>
+        </div>
+      </FocusTrap>
+    </React.Fragment>
+  );
+}

test/e2e/fixtures/Rating/BasicRating.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Rating from '@mui/material/Rating';
+
+export default function BasicRating() {
+  return <Rating name="rating-test" defaultValue={1} />;
+}

test/e2e/fixtures/TextField/OutlinedTextFieldOnClick.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+
+export default function OutlinedTextFieldOnClick() {
+  const [isClicked, setIsClicked] = React.useState(false);
+  return (
+    <TextField
+      id="outlined-basic"
+      label="Outlined"
+      error={isClicked}
+      variant="outlined"
+      onClick={() => {
+        setIsClicked(true);
+      }}
+    />
+  );
+}

test/e2e/fixtures/TextareaAutosize/BasicTextareaAutosize.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+
+function BasicTextareaAutosize() {
+  return <TextareaAutosize data-testid="textarea" />;
+}
+
+export default BasicTextareaAutosize;

test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx

@@ -0,0 +1,30 @@
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import Button from '@mui/material/Button';
+import * as React from 'react';
+
+function LazyRoute() {
+  const [isDone, setIsDone] = React.useState(false);
+
+  if (!isDone) {
+    // Force React to show fallback suspense
+    throw new Promise((resolve) => {
+      setTimeout(resolve, 1);
+      setIsDone(true);
+    });
+  }
+
+  return <div />;
+}
+
+export default function TextareaAutosizeSuspense() {
+  const [showRoute, setShowRoute] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Button onClick={() => setShowRoute((r) => !r)}>Toggle view</Button>
+      <React.Suspense fallback={null}>
+        {showRoute ? <LazyRoute /> : <TextareaAutosize />}
+      </React.Suspense>
+    </React.Fragment>
+  );
+}