From 819dd5fe2403d517ae49130bd7d886f2c752b1fb Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Thu, 11 Jul 2024 00:18:14 +0900
Subject: [PATCH] Add NewWindow story

---
 e2e/VList.spec.ts                            | 24 ++++++++
 package-lock.json                            | 14 +++++
 package.json                                 |  1 +
 stories/react/advanced/NewWindow.stories.tsx | 58 ++++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 stories/react/advanced/NewWindow.stories.tsx

diff --git a/e2e/VList.spec.ts b/e2e/VList.spec.ts
index 69e28a000..464e1b157 100644
--- a/e2e/VList.spec.ts
+++ b/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"));
 
diff --git a/package-lock.json b/package-lock.json
index 3792cb548..e8a434cc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,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",
@@ -23442,6 +23443,19 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/react-new-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-new-window/-/react-new-window-1.0.1.tgz",
+      "integrity": "sha512-pLQlq5NzMxNocXKPIwkXfAxSOZmbpWSbP8QrxCbunpHcx4k249YChkk7l/7P4jjwxq3dI/xwL3nVHLp6h5zM3w==",
+      "dev": true,
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-redux": {
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
diff --git a/package.json b/package.json
index b1979a352..ab41062d0 100644
--- a/package.json
+++ b/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",
diff --git a/stories/react/advanced/NewWindow.stories.tsx b/stories/react/advanced/NewWindow.stories.tsx
new file mode 100644
index 000000000..c54dc06da
--- /dev/null
+++ b/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>
+    );
+  },
+};