Add e2e test route with <iframe>

.gitignore

@@ -8,4 +8,5 @@ node_modules
 .cache
 .parcel-cache
 .pnp.*
-.yarn
+.yarn
+.vscode

packages/react-resizable-panels-website/index.tsx

@@ -14,6 +14,7 @@ import PersistenceExampleRoute from "./src/routes/examples/Persistence";
 import CollapsibleExampleRoute from "./src/routes/examples/Collapsible";
 import VerticalExampleRoute from "./src/routes/examples/Vertical";
 import EndToEndTestingRoute from "./src/routes/EndToEndTesting";
+import IframeRoute from "./src/routes/iframe";
 
 const router = createBrowserRouter([
   {
@@ -66,6 +67,10 @@ const router = createBrowserRouter([
     path: "/__e2e",
     element: <EndToEndTestingRoute />,
   },
+  {
+    path: "/__e2e/iframe",
+    element: <IframeRoute />,
+  },
 ]);
 
 const rootElement = document.getElementById("root")!;

packages/react-resizable-panels-website/src/routes/iframe/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import styles from "./styles.module.css";
+
+export default function Page() {
+  const [url] = useState(() => {
+    const url = new URL(
+      typeof window !== undefined ? window.location.href : ""
+    );
+
+    return `${url.origin}/__e2e/?urlPanelGroup=${url.searchParams.get(
+      "urlPanelGroup"
+    )}`;
+  });
+
+  return (
+    <div className={styles.Root}>
+      <iframe
+        className={styles.IFrame}
+        sandbox="allow-scripts"
+        src={url}
+      ></iframe>
+    </div>
+  );
+}

packages/react-resizable-panels-website/src/routes/iframe/styles.module.css

@@ -0,0 +1,14 @@
+.Root {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-logo-background);
+}
+
+.IFrame {
+  width: 400px;
+  height: 200px;
+  border: none;
+}

packages/react-resizable-panels/src/hooks/useWindowSplitterBehavior.ts

@@ -71,8 +71,8 @@ export function useWindowSplitterResizeHandlerBehavior({
               ? index - 1
               : handles.length - 1
             : index + 1 < handles.length
-              ? index + 1
-              : 0;
+            ? index + 1
+            : 0;
 
           const nextHandle = handles[nextIndex] as HTMLElement;
           nextHandle.focus();

tsconfig.json

@@ -9,8 +9,8 @@
     "noUncheckedIndexedAccess": true,
     "strict": true,
     "typeRoots": ["node_modules/@types"],
-    "types": ["jest", "node"],
+    "types": ["jest", "node"]
   },
   "exclude": ["node_modules"],
-  "include": ["declaration.d.ts", "packages/**/*.ts", "packages/**/*.tsx"],
+  "include": ["declaration.d.ts", "packages/**/*.ts", "packages/**/*.tsx"]
 }