Add NewWindow story

e2e/VList.spec.ts

@@ -117,6 +117,30 @@ test.describe("smoke", () => {
     expect(initialTotalHeight).toEqual(changedTotalHeight);
   });
 
+  test("new window", async ({ page, context }) => {
+    await page.goto(storyUrl("advanced-newwindow--default"));
+
+    // open new window
+    const newPagePromise = context.waitForEvent("page");
+    await page.getByRole("button", { name: "open window" }).click();
+    const newPage = await newPagePromise;
+    await newPage.bringToFront();
+
+    const component = await getScrollable(newPage);
+    await component.waitForElementState("stable");
+
+    // check if start is displayed
+    const first = await getFirstItem(component);
+    await expect(first.text).toEqual("0");
+    await expect(first.top).toEqual(0);
+
+    // scroll to the end
+    await scrollToBottom(component);
+
+    // check if the end is displayed
+    await expect(await component.innerText()).toContain("999");
+  });
+
   test("scroll restoration", async ({ page }) => {
     await page.goto(storyUrl("basics-vlist--scroll-restoration"));
 

package.json

@@ -121,6 +121,7 @@
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-merge-refs": "^2.1.1",
+    "react-new-window": "^1.0.1",
     "react-virtualized": "^9.22.5",
     "react-virtuoso": "^4.7.11",
     "react-window": "^1.8.10",

stories/react/advanced/NewWindow.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { VList } from "../../../src";
+import NewWindow from "react-new-window";
+
+export default {
+  component: VList,
+} as Meta;
+
+const createRows = (num: number) => {
+  const heights = [20, 40, 80, 77];
+  return Array.from({ length: num }).map((_, i) => {
+    return (
+      <div
+        key={i}
+        style={{
+          height: heights[i % 4],
+          borderBottom: "solid 1px #ccc",
+          background: "#fff",
+        }}
+      >
+        {i}
+      </div>
+    );
+  });
+};
+
+const Content = () => {
+  return <VList style={{ height: "100vh" }}>{createRows(1000)}</VList>;
+};
+
+export const Default: StoryObj = {
+  name: "NewWindow",
+
+  render: () => {
+    const [isWindowOpened, setIsWindowOpened] = useState(false);
+    return (
+      <div>
+        <button
+          onClick={() => {
+            setIsWindowOpened((prev) => !prev);
+          }}
+        >
+          {isWindowOpened ? "close" : "open"} window
+        </button>
+        {isWindowOpened && (
+          <NewWindow
+            onUnload={() => {
+              setIsWindowOpened(false);
+            }}
+          >
+            <Content />
+          </NewWindow>
+        )}
+      </div>
+    );
+  },
+};