@1771technologies/lytenyte-pro 1.0.12 → 1.0.14

package/dist/__play__/grid-navigation/normal-layout.play.d.ts

@@ -0,0 +1,10 @@
+import "./navigation.css";
+import type { Column } from "../../+types.js";
+export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, floatingRow, }: {
+    rtl?: boolean;
+    columns?: Column<any>[];
+    center?: number;
+    pinTop?: number;
+    pinBot?: number;
+    floatingRow?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/normal-layout.play.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./navigation.css";
+import { useLyteNyte } from "../../state/use-lytenyte.js";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import { Root } from "../../root/root.js";
+import { Viewport } from "../../viewport/viewport.js";
+import { Header } from "../../header/header.js";
+import { HeaderRow } from "../../header/header-row.js";
+import { HeaderGroupCell } from "../../header/header-group-cell.js";
+import { HeaderCell } from "../../header/header-cell.js";
+import { RowsContainer } from "../../rows/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
+import { RowHandler } from "../test-utils/row-handler.js";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
+const baseColumns = [
+    { id: "age" },
+    { id: "job" },
+    { id: "balance" },
+    { id: "education" },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, floatingRow, }) {
+    const ds = useClientRowDataSource({
+        data: center ? bankDataSmall.slice(0, center) : bankDataSmall,
+        topData: pinTop ? bankDataSmall.slice(0, pinTop) : [],
+        bottomData: pinBot ? bankDataSmall.slice(0, pinBot) : [],
+    });
+    const g = useLyteNyte({
+        gridId: "x",
+        columns: columns ?? baseColumns,
+        rowDataSource: ds,
+        rtl: rtl,
+        floatingRowEnabled: floatingRow,
+    });
+    const view = g.view.useValue();
+    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+                                    return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
+                                            if (c.kind === "group") {
+                                                return (_jsx(HeaderGroupCell, { cell: c, style: {
+                                                        paddingInline: "16px",
+                                                        background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                        color: "light-dark(black,white)",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        borderBottom: "1px solid light-dark(gray, #444242)",
+                                                        borderRight: "1px solid light-dark(gray, #444242)",
+                                                    } }, c.idOccurrence));
+                                            }
+                                            return (_jsx(HeaderCell, { cell: c, style: {
+                                                    paddingInline: "16px",
+                                                    background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                    color: "light-dark(black,white)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    borderBottom: "1px solid light-dark(gray, #444242)",
+                                                    borderRight: "1px solid light-dark(gray, #444242)",
+                                                } }, c.column.id));
+                                        }) }, i));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+}

package/dist/__play__/grid-navigation/pinned-gap-layout.play.d.ts

@@ -0,0 +1,3 @@
+export default function PinnedGapLayout({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/pinned-gap-layout.play.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const baseColumns = [
+    { id: "age", pin: "start" },
+    { id: "job" },
+    { id: "marital" },
+    { id: "housing", pin: "end" },
+];
+export default function PinnedGapLayout({ rtl }) {
+    return _jsx(NormalLayout, { columns: baseColumns, rtl: rtl });
+}

package/dist/__play__/grid-navigation/row-detail-with-spans.play.d.ts

@@ -0,0 +1,6 @@
+import "./navigation.css";
+import type { Column } from "../../+types.js";
+export default function RowDetailWithSpans({ rtl, columns, }: {
+    rtl?: boolean;
+    columns?: Column<any>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/row-detail-with-spans.play.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./navigation.css";
+import { useLyteNyte } from "../../state/use-lytenyte.js";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import { Root } from "../../root/root.js";
+import { Viewport } from "../../viewport/viewport.js";
+import { Header } from "../../header/header.js";
+import { HeaderRow } from "../../header/header-row.js";
+import { HeaderGroupCell } from "../../header/header-group-cell.js";
+import { HeaderCell } from "../../header/header-cell.js";
+import { RowsContainer } from "../../rows/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
+import { RowHandler } from "../test-utils/row-handler.js";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
+const baseColumns = [
+    { id: "age" },
+    {
+        id: "job",
+        rowSpan: (c) => {
+            if (c.rowIndex === 0)
+                return 5;
+            return 1;
+        },
+    },
+    { id: "balance" },
+    { id: "education" },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function RowDetailWithSpans({ rtl, columns, }) {
+    const ds = useClientRowDataSource({
+        data: bankDataSmall,
+    });
+    const g = useLyteNyte({
+        gridId: "x",
+        columns: columns ?? baseColumns,
+        rowDataSource: ds,
+        rtl: rtl,
+        rowDetailExpansions: new Set(["2"]),
+        columnMarkerEnabled: true,
+        columnMarker: {
+            width: 60,
+            cellRenderer: (p) => {
+                return _jsx("button", { onClick: () => p.grid.api.rowDetailToggle(p.row), children: "X" });
+            },
+        },
+        rowDetailRenderer: () => {
+            return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, children: "Detail A" }), _jsx("button", { tabIndex: 0, children: "Detail B" })] }));
+        },
+    });
+    const view = g.view.useValue();
+    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+                                    return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
+                                            if (c.kind === "group") {
+                                                return _jsx(HeaderGroupCell, { cell: c }, c.idOccurrence);
+                                            }
+                                            return (_jsx(HeaderCell, { cell: c, style: {
+                                                    paddingInline: "16px",
+                                                    background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                    color: "light-dark(black,white)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    borderBottom: "1px solid light-dark(gray, #444242)",
+                                                    borderRight: "1px solid light-dark(gray, #444242)",
+                                                } }, c.column.id));
+                                        }) }, i));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+}

package/dist/__play__/grid-navigation/row-detail.play.d.ts

@@ -0,0 +1,6 @@
+import "./navigation.css";
+import type { Column } from "../../+types.js";
+export default function RowDetail({ rtl, columns }: {
+    rtl?: boolean;
+    columns?: Column<any>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/row-detail.play.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./navigation.css";
+import { useLyteNyte } from "../../state/use-lytenyte.js";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import { Root } from "../../root/root.js";
+import { Viewport } from "../../viewport/viewport.js";
+import { Header } from "../../header/header.js";
+import { HeaderRow } from "../../header/header-row.js";
+import { HeaderGroupCell } from "../../header/header-group-cell.js";
+import { HeaderCell } from "../../header/header-cell.js";
+import { RowsContainer } from "../../rows/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
+import { RowHandler } from "../test-utils/row-handler.js";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
+const baseColumns = [
+    { id: "age" },
+    { id: "job" },
+    { id: "balance" },
+    { id: "education" },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function RowDetail({ rtl, columns }) {
+    const ds = useClientRowDataSource({
+        data: bankDataSmall,
+    });
+    const g = useLyteNyte({
+        gridId: "x",
+        columns: columns ?? baseColumns,
+        rowDataSource: ds,
+        rtl: rtl,
+        rowDetailExpansions: new Set(["2", "5"]),
+        columnMarkerEnabled: true,
+        columnMarker: {
+            width: 60,
+            cellRenderer: (p) => {
+                return _jsx("button", { onClick: () => p.grid.api.rowDetailToggle(p.row), children: "X" });
+            },
+        },
+        rowDetailRenderer: () => {
+            return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, children: "Detail A" }), _jsx("button", { tabIndex: 0, children: "Detail B" })] }));
+        },
+        rowFullWidthPredicate: (r) => r.rowIndex === 2 || r.rowIndex == 4,
+        rowFullWidthRenderer: (r) => {
+            if (r.rowIndex === 2)
+                return _jsx("div", { children: "Nothing" });
+            return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, children: "A" }), _jsx("button", { tabIndex: 0, children: "B" }), _jsx("button", { tabIndex: 0, children: "C" })] }));
+        },
+    });
+    const view = g.view.useValue();
+    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+                                    return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
+                                            if (c.kind === "group") {
+                                                return _jsx(HeaderGroupCell, { cell: c }, c.idOccurrence);
+                                            }
+                                            return (_jsx(HeaderCell, { cell: c, style: {
+                                                    paddingInline: "16px",
+                                                    background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                    color: "light-dark(black,white)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    borderBottom: "1px solid light-dark(gray, #444242)",
+                                                    borderRight: "1px solid light-dark(gray, #444242)",
+                                                } }, c.column.id));
+                                        }) }, i));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+}

package/dist/__play__/grid-navigation/row-detail.pt.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__play__/grid-navigation/row-detail.pt.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { wait } from "@1771technologies/lytenyte-js-utils";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-react";
+import RowDetail from "./row-detail.play.js";
+import { getCellQuery } from "@1771technologies/lytenyte-shared";
+import { userEvent } from "@vitest/browser/context";
+import RowDetailWithSpans from "./row-detail-with-spans.play.js";
+test("when row details are present it should be possible to navigate across them", async () => {
+    const screen = render(_jsx(RowDetail, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 0));
+    ourFirstCell.focus();
+    await expect.element(ourFirstCell).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("Detail ADetail B");
+    await userEvent.keyboard("{ArrowLeft}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("Detail B");
+    await userEvent.keyboard("{ArrowLeft}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("Detail A");
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("X");
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("ABC");
+    await userEvent.keyboard("{ArrowUp}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("X");
+    await userEvent.keyboard("{ArrowUp}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("Detail ADetail B");
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("X");
+    await userEvent.keyboard("{ArrowLeft}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("X");
+    await userEvent.click(document.activeElement);
+    await wait();
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("Detail ADetail B");
+});
+test("when there are row spans it should be cutoff when the detail is expanded", async () => {
+    const screen = render(_jsx(RowDetailWithSpans, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 2));
+    ourFirstCell.focus();
+    await expect.element(ourFirstCell).toHaveFocus();
+    await expect.element(document.activeElement).toHaveTextContent("unemployed");
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("management");
+    await userEvent.keyboard("{ArrowDown}");
+    await wait();
+    await expect.element(document.activeElement).toHaveTextContent("Detail ADetail B");
+});

package/dist/__play__/grid-navigation/vertical-navigation.pt.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__play__/grid-navigation/vertical-navigation.pt.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-react";
+import NormalLayout from "./normal-layout.play.js";
+import { wait } from "@1771technologies/lytenyte-js-utils";
+import { getCellQuery } from "@1771technologies/lytenyte-shared";
+import { userEvent } from "@vitest/browser/context";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import FullWidthRows from "./full-width-rows.play.js";
+import CellSpans from "./cell-spans.play.js";
+test("should be able to navigate up and down cells", async () => {
+    const screen = render(_jsx(NormalLayout, { center: 50 }));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 0));
+    ourFirstCell.focus();
+    const values = bankDataSmall.slice(0, 50).map((c) => `${c.age}`);
+    for (const v of values) {
+        await expect.element(document.activeElement).toHaveTextContent(v);
+        await userEvent.keyboard("{ArrowDown}");
+        await wait(100);
+    }
+    for (const v of values.toReversed()) {
+        await expect.element(document.activeElement).toHaveTextContent(v);
+        await userEvent.keyboard("{ArrowUp}");
+        await wait(100);
+    }
+});
+test("should be able to navigate up and down cells with pins", async () => {
+    const screen = render(_jsx(NormalLayout, { pinTop: 2, pinBot: 2, center: 50 }));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 0));
+    ourFirstCell.focus();
+    const values = bankDataSmall
+        .slice(0, 2)
+        .map((c) => `${c.age}`)
+        .concat(bankDataSmall.slice(0, 50).map((c) => `${c.age}`))
+        .concat(bankDataSmall.slice(0, 2).map((c) => `${c.age}`));
+    for (const v of values) {
+        await expect.element(document.activeElement).toHaveTextContent(v);
+        await userEvent.keyboard("{ArrowDown}");
+        await wait(100);
+    }
+    for (const v of values.toReversed()) {
+        await expect.element(document.activeElement).toHaveTextContent(v);
+        await userEvent.keyboard("{ArrowUp}");
+        await wait(100);
+    }
+});
+test("should be able to handle moving to the start or end", async () => {
+    const screen = render(_jsx(NormalLayout, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 0));
+    ourFirstCell.focus();
+    await expect.element(document.activeElement).toHaveTextContent("30");
+    await userEvent.keyboard("{Control>}{ArrowDown}{/Control}");
+    await wait(200);
+    await expect.element(document.activeElement).toHaveTextContent("42");
+    await userEvent.keyboard("{Control>}{ArrowUp}{/Control}");
+    await wait(200);
+    await expect.element(document.activeElement).toHaveTextContent("30");
+});
+test("should be navigate across full width rows", async () => {
+    const screen = render(_jsx(FullWidthRows, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 2));
+    ourFirstCell.focus();
+    await expect.element(document.activeElement).toHaveTextContent("1787");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("4789");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("Nothing");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("1476");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("ABC");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("747");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("ABC");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("1476");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("Nothing");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("4789");
+});
+test("should be able to navigate across column and row spans", async () => {
+    const screen = render(_jsx(CellSpans, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 3));
+    ourFirstCell.focus();
+    await expect.element(document.activeElement).toHaveTextContent("primary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("management");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowRight}");
+    await expect.element(document.activeElement).toHaveTextContent("married");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("married");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("married");
+    await userEvent.keyboard("{ArrowLeft}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("tertiary");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect.element(document.activeElement).toHaveTextContent("management");
+});
+test("page up and down should focus the correct cells", async () => {
+    const screen = render(_jsx(CellSpans, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 3));
+    ourFirstCell.focus();
+    await userEvent.keyboard("{PageDown}");
+    await expect.element(document.activeElement).toHaveTextContent("secondary");
+    await userEvent.keyboard("{PageUp}");
+    await expect.element(document.activeElement).toHaveTextContent("management");
+});
+test("home and end should work as expected", async () => {
+    const screen = render(_jsx(CellSpans, {}));
+    const grid = screen.getByRole("grid");
+    await expect.element(grid).toBeVisible();
+    await wait(); // Give the grid a moment to render
+    const ourFirstCell = document.querySelector(getCellQuery("x", 0, 3));
+    ourFirstCell.focus();
+    await expect.element(document.activeElement).toHaveTextContent("primary");
+    await userEvent.keyboard("{End}");
+    await wait(100);
+    await expect.element(document.activeElement).toHaveTextContent("unknown");
+    await userEvent.keyboard("{Home}");
+    await wait(100);
+    await expect.element(document.activeElement).toHaveTextContent("30");
+    await userEvent.keyboard("{Control>}{End}{/Control}");
+    await wait(100);
+    await expect.element(document.activeElement).toHaveTextContent("unknown");
+    await userEvent.keyboard("{Control>}{Home}{/Control}");
+    await wait(100);
+    await expect.element(document.activeElement).toHaveTextContent("30");
+});

package/dist/__play__/test-utils/bank-data-smaller.d.ts

@@ -0,0 +1,19 @@
+export declare const bankDataSmall: {
+    age: number;
+    job: string;
+    marital: string;
+    education: string;
+    default: string;
+    balance: number;
+    housing: string;
+    loan: string;
+    contact: string;
+    day: number;
+    month: string;
+    duration: number;
+    campaign: string;
+    pdays: string;
+    previous: string;
+    poutcome: string;
+    y: string;
+}[];