@1771technologies/lytenyte-pro 0.9.3 → 1.0.0-beta.0

package/dist/state/api/column-from-index.js

@@ -0,0 +1,6 @@
+export const makeColumnFromIndex = (grid) => {
+    return (index) => {
+        const v = grid.state.columnMeta.get().columnsVisible;
+        return v[index] ?? null;
+    };
+};

package/dist/state/api/column-group-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeColumnGroupToggle: (grid: Grid<any>) => GridApi<any>["columnToggleGroup"];

package/dist/state/api/column-group-toggle.js

@@ -0,0 +1,10 @@
+export const makeColumnGroupToggle = (grid) => {
+    return (group, state) => {
+        const delimiter = grid.state.columnGroupJoinDelimiter.get();
+        const id = typeof group === "string" ? group : group.join(delimiter);
+        const currentExpansions = grid.state.columnGroupExpansions.get();
+        const currentState = currentExpansions[id] ?? grid.state.columnGroupDefaultExpansion.get();
+        const next = state ?? !currentState;
+        grid.state.columnGroupExpansions.set((prev) => ({ ...prev, [id]: next }));
+    };
+};

package/dist/state/api/column-index.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeColumnIndex: (grid: Grid<any>) => GridApi<any>["columnIndex"];

package/dist/state/api/column-index.js

@@ -0,0 +1,7 @@
+export const makeColumnIndex = (grid) => {
+    return (columnOrId) => {
+        const v = grid.state.columnMeta.get().columnsVisible;
+        const id = typeof columnOrId === "string" ? columnOrId : columnOrId.id;
+        return v.findIndex((c) => c.id === id);
+    };
+};

package/dist/state/api/column-move.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeColumnMove: (grid: Grid<any>) => GridApi<any>["columnMove"];

package/dist/state/api/column-move.js

@@ -0,0 +1,49 @@
+import { resolveColumn } from "../helpers/resolve-column";
+export const makeColumnMove = (grid) => {
+    return (params) => {
+        const meta = grid.state.columnMeta.get();
+        const errorRef = { current: false };
+        const colSet = new Set(params.moveColumns.map((c) => {
+            return resolveColumn(c, errorRef, meta);
+        }));
+        const dest = resolveColumn(params.moveTarget, errorRef, meta);
+        if (errorRef.current)
+            return;
+        if (colSet.has(dest)) {
+            console.error(`Destination column cannot be in the move columns`);
+            return;
+        }
+        const columns = grid.state.columns.get();
+        const columnsToMove = columns.filter((c) => colSet.has(c.id));
+        const nextColumns = columns.filter((c) => !colSet.has(c.id));
+        const indexOfDest = nextColumns.findIndex((c) => c.id === dest);
+        const destCol = nextColumns[indexOfDest];
+        let stop = false;
+        grid.api.eventFire("columnMoveBegin", {
+            grid,
+            before: !!params.before,
+            moveColumns: columnsToMove,
+            moveTarget: destCol,
+            preventDefault: () => {
+                stop = true;
+            },
+            updatePinState: !!params.updatePinState,
+        });
+        if (stop)
+            return;
+        const offset = params.before ? 0 : 1;
+        nextColumns.splice(indexOfDest + offset, 0, ...columnsToMove);
+        grid.state.columns.set(nextColumns);
+        if (params.updatePinState) {
+            const updates = Object.fromEntries(columnsToMove.map((c) => [c.id, { pin: destCol.pin ?? null }]));
+            grid.api.columnUpdate(updates);
+        }
+        grid.api.eventFire("columnMoveEnd", {
+            grid,
+            before: !!params.before,
+            moveColumns: columnsToMove,
+            moveTarget: destCol,
+            updatePinState: !!params.updatePinState,
+        });
+    };
+};

package/dist/state/api/column-resize.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeColumnResize: (grid: Grid<any>) => GridApi<any>["columnResize"];

package/dist/state/api/column-resize.js

@@ -0,0 +1,9 @@
+export const makeColumnResize = (grid) => {
+    return (updates) => {
+        const api = grid.api;
+        const columnUpdates = Object.fromEntries(Object.entries(updates)
+            .map(([c, v]) => [c, { width: v }])
+            .filter((c) => api.columnById(c[0])));
+        api.columnUpdate(columnUpdates);
+    };
+};

package/dist/state/api/column-update.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeColumnUpdate: (grid: Grid<any>) => GridApi<any>["columnUpdate"];

package/dist/state/api/column-update.js

@@ -0,0 +1,13 @@
+export const makeColumnUpdate = (grid) => {
+    return (updates) => {
+        const columns = [...grid.state.columns.get()];
+        for (let i = 0; i < columns.length; i++) {
+            const column = columns[i];
+            if (updates[column.id]) {
+                const next = { ...column, ...updates[column.id] };
+                columns[i] = next;
+            }
+        }
+        grid.state.columns.set(columns);
+    };
+};

package/dist/state/api/dialog-frame.d.ts

@@ -0,0 +1,8 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeDialogFrameOpen: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["dialogFrameOpen"];
+export declare const makeDialogFrameClose: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["dialogFrameClose"];

package/dist/state/api/dialog-frame.js

@@ -0,0 +1,16 @@
+export const makeDialogFrameOpen = (grid) => {
+    return (id, context) => {
+        grid.internal.dialogFrames.set((prev) => ({ ...prev, [id]: context }));
+    };
+};
+export const makeDialogFrameClose = (grid) => {
+    return (id) => {
+        grid.internal.dialogFrames.set((prev) => {
+            if (!id)
+                return {};
+            const next = { ...prev };
+            delete next[id];
+            return next;
+        });
+    };
+};

package/dist/state/api/edit-begin.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeEditBegin: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["editBegin"];

package/dist/state/api/edit-begin.js

@@ -0,0 +1,91 @@
+import { focusCell, isFullWidthMap } from "@1771technologies/lytenyte-shared";
+import { runWithBackoff } from "@1771technologies/lytenyte-js-utils";
+import { editOnChange } from "../helpers/edit-on-change";
+export const makeEditBegin = (grid) => {
+    return (params) => {
+        if (grid.state.editCellMode.get() === "readonly" || grid.state.columnPivotMode.get())
+            return;
+        // Start by canceling existing edits
+        grid.api.editEnd();
+        // We must be editing a valid cell location
+        const rowCount = grid.state.rowDataStore.rowCount.get();
+        if (params.rowIndex < 0 || params.rowIndex >= rowCount)
+            return;
+        const i = grid.internal;
+        const meta = grid.state.columnMeta.get();
+        // The column must be presently rendered for it to be editable
+        let column;
+        if (typeof params.column === "string")
+            column = meta.columnLookup.get(params.column);
+        else if (typeof params.column === "number")
+            column = meta.columnsVisible.at(params.column);
+        else
+            column = meta.columnsVisible.find((c) => c.id === params.column.id);
+        if (!column)
+            return;
+        const rowNode = grid.state.rowDataSource.get().rowByIndex(params.rowIndex);
+        if (!rowNode)
+            return;
+        // The column must have its editable state set to true
+        const base = grid.state.columnBase.get();
+        const editable = column.editable ?? base.editable;
+        if (!editable)
+            return;
+        if (typeof editable === "function") {
+            if (!editable({ grid, column, row: rowNode, rowIndex: params.rowIndex }))
+                return;
+        }
+        grid.api.scrollIntoView({ column, row: params.rowIndex });
+        // Let's try begin the cell edit.
+        const run = () => {
+            const layout = i.layout.get();
+            const row = layout.get(params.rowIndex);
+            if (!row)
+                return false;
+            if (isFullWidthMap(row))
+                return true;
+            const columnIndex = meta.columnsVisible.indexOf(column);
+            const cell = layout.get(columnIndex);
+            if (!cell)
+                return false;
+            focusCell({
+                layout,
+                focusActive: i.focusActive,
+                id: grid.state.gridId.get(),
+                colIndex: columnIndex,
+                rowIndex: params.rowIndex,
+                scrollIntoView: grid.api.scrollIntoView,
+                vp: grid.state.viewport.get(),
+                postFocus: () => {
+                    let prevented = false;
+                    grid.api.eventFire("editBegin", {
+                        column,
+                        rowIndex: params.rowIndex,
+                        preventDefault: () => {
+                            prevented = true;
+                        },
+                    });
+                    if (prevented)
+                        return;
+                    const activeData = structuredClone(rowNode.data);
+                    i.editActivePos.set({ column, rowIndex: params.rowIndex });
+                    i.editData.set(activeData);
+                    if (params.init != null) {
+                        editOnChange({
+                            value: params.init,
+                            activeData,
+                            base,
+                            column,
+                            grid,
+                            row: rowNode,
+                            rowIndex: params.rowIndex,
+                        });
+                    }
+                },
+            });
+            return true;
+        };
+        runWithBackoff(run, [4, 20]);
+        return;
+    };
+};

package/dist/state/api/edit-end.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeEditEnd: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["editEnd"];

package/dist/state/api/edit-end.js

@@ -0,0 +1,43 @@
+export const makeEditEnd = (grid) => {
+    return (cancel) => {
+        const active = grid.internal.editActivePos.get();
+        if (!active)
+            return;
+        const data = grid.internal.editData.get();
+        if (cancel) {
+            grid.internal.editActivePos.set(null);
+            grid.internal.editData.set(null);
+            grid.api.eventFire("editCancel", { column: active.column, rowIndex: active.rowIndex, data });
+            return;
+        }
+        const validation = grid.internal.editValidation.get();
+        if (!validation || Object.keys(validation).length > 1) {
+            grid.api.eventFire("editError", {
+                column: active.column,
+                rowIndex: active.rowIndex,
+                data,
+                validation,
+            });
+            return;
+        }
+        try {
+            const ds = grid.state.rowDataSource.get();
+            ds.rowUpdate(new Map([[active.rowIndex, data]]));
+            grid.api.eventFire("editEnd", { column: active.column, rowIndex: active.rowIndex, data });
+        }
+        catch (e) {
+            grid.api.eventFire("editError", {
+                column: active.column,
+                rowIndex: active.rowIndex,
+                data,
+                validation,
+                error: e,
+            });
+        }
+        finally {
+            grid.internal.editActivePos.set(null);
+            grid.internal.editData.set(null);
+            grid.internal.editValidation.set(true);
+        }
+    };
+};

package/dist/state/api/edit-is-cell-active.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeEditIsCellActive: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["editIsCellActive"];

package/dist/state/api/edit-is-cell-active.js

@@ -0,0 +1,27 @@
+import { isFullWidthMap } from "@1771technologies/lytenyte-shared";
+export const makeEditIsCellActive = (grid) => {
+    return (params) => {
+        const active = grid.internal.editActivePos.get();
+        if (!active)
+            return false;
+        const meta = grid.state.columnMeta.get();
+        let column;
+        if (typeof params.column === "string")
+            column = meta.columnLookup.get(params.column);
+        else if (typeof params.column === "number")
+            column = meta.columnsVisible.at(params.column);
+        else
+            column = meta.columnsVisible.find((c) => c.id === params.column.id);
+        if (!column)
+            return false;
+        const layout = grid.internal.layout.get();
+        const row = layout.get(params.rowIndex);
+        if (!row || isFullWidthMap(row))
+            return false;
+        const colIndex = meta.columnsVisible.indexOf(column);
+        const cell = row.get(colIndex);
+        if (!cell)
+            return false;
+        return active.column.id === column.id && active.rowIndex === params.rowIndex;
+    };
+};

package/dist/state/api/edit-update.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeEditUpdate: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["editUpdate"];

package/dist/state/api/edit-update.js

@@ -0,0 +1,88 @@
+import { editOnChange } from "../helpers/edit-on-change";
+export const makeEditUpdate = (grid) => {
+    return (params) => {
+        if (grid.state.editCellMode.get() === "readonly" || grid.state.columnPivotMode.get())
+            return;
+        // We must be editing a valid cell location
+        const rowCount = grid.state.rowDataStore.rowCount.get();
+        if (params.rowIndex < 0 || params.rowIndex >= rowCount)
+            return;
+        const i = grid.internal;
+        const meta = grid.state.columnMeta.get();
+        // The column must be presently rendered for it to be editable
+        let column;
+        if (typeof params.column === "string")
+            column = meta.columnLookup.get(params.column);
+        else if (typeof params.column === "number")
+            column = meta.columnsVisible.at(params.column);
+        else
+            column = meta.columnsVisible.find((c) => c.id === params.column.id);
+        if (!column)
+            return;
+        const rowNode = grid.state.rowDataSource.get().rowByIndex(params.rowIndex);
+        if (!rowNode)
+            return;
+        // The column must have its editable state set to true
+        const base = grid.state.columnBase.get();
+        const editable = column.editable ?? base.editable;
+        if (!editable)
+            return;
+        if (typeof editable === "function") {
+            if (!editable({ grid, column, row: rowNode, rowIndex: params.rowIndex }))
+                return;
+        }
+        const activeData = structuredClone(rowNode.data);
+        const currentValidation = i.editValidation.get();
+        const currentData = i.editData.get();
+        editOnChange({
+            value: params.value,
+            activeData,
+            base,
+            column,
+            grid,
+            row: rowNode,
+            rowIndex: params.rowIndex,
+        });
+        const updatedData = i.editData.get();
+        const updatedValidation = i.editValidation.get();
+        i.editValidation.set(currentValidation);
+        i.editData.set(currentData);
+        let prevent = false;
+        grid.api.eventFire("editBegin", {
+            column,
+            rowIndex: params.rowIndex,
+            preventDefault: () => {
+                prevent = true;
+            },
+        });
+        if (prevent)
+            return;
+        if (!updatedValidation || Object.keys(updatedValidation).length > 1) {
+            grid.api.eventFire("editError", {
+                column: column,
+                rowIndex: params.rowIndex,
+                data: updatedData,
+                validation: updatedValidation,
+            });
+            return;
+        }
+        try {
+            const ds = grid.state.rowDataSource.get();
+            ds.rowUpdate(new Map([[params.rowIndex, updatedData]]));
+            grid.api.eventFire("editEnd", {
+                column: column,
+                rowIndex: params.rowIndex,
+                data: updatedData,
+            });
+        }
+        catch (e) {
+            grid.api.eventFire("editError", {
+                column: column,
+                rowIndex: params.rowIndex,
+                data: updatedData,
+                validation: updatedValidation,
+                error: e,
+            });
+        }
+    };
+};

package/dist/state/api/event-listeners.d.ts

@@ -0,0 +1,5 @@
+export declare const makeEventListeners: <T>() => {
+    eventAddListener: <K extends keyof import("../../+types").GridEvents<T_1>>(name: K, cb: (event: Parameters<Required<import("../../+types").GridEvents<T>>[K]>[0]) => void) => () => boolean;
+    eventFire: <K extends keyof import("../../+types").GridEvents<T_1>>(name: K, event: Parameters<Required<import("../../+types").GridEvents<T>>[K]>[0]) => void;
+    eventRemoveListener: <K extends keyof import("../../+types").GridEvents<T_1>>(name: K, cb: (event: Parameters<Required<import("../../+types").GridEvents<T>>[K]>[0]) => void) => void;
+};

package/dist/state/api/event-listeners.js

@@ -0,0 +1,19 @@
+export const makeEventListeners = () => {
+    const events = {};
+    return {
+        eventAddListener: (name, cb) => {
+            events[name] ??= new Set();
+            events[name].add(cb);
+            return () => events[name].delete(cb);
+        },
+        eventFire: (name, ...args) => {
+            const listeners = events[name];
+            if (!listeners)
+                return;
+            listeners.forEach((c) => c(...args));
+        },
+        eventRemoveListener: (name, cb) => {
+            events[name]?.delete(cb);
+        },
+    };
+};

package/dist/state/api/export-csv.d.ts

@@ -0,0 +1,3 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeExportCsv: (grid: Grid<any>) => GridApi<any>["exportCsv"];
+export declare const makeExportCsvFile: (grid: Grid<any>) => GridApi<any>["exportCsvFile"];

package/dist/state/api/export-csv.js

@@ -0,0 +1,40 @@
+import { getDataRect } from "../helpers/get-data-rect";
+export const makeExportCsv = (grid) => {
+    return async (p) => {
+        const visible = grid.state.columnMeta.get().columnsVisible;
+        const rowCount = grid.state.rowDataStore.rowCount.get();
+        const rowStart = p?.dataRect?.rowStart ?? 0;
+        const rowEnd = p?.dataRect?.rowEnd ?? rowCount;
+        const columnStart = p?.dataRect?.columnStart ?? 0;
+        const columnEnd = p?.dataRect?.columnEnd ?? visible.length;
+        const rows = [];
+        for (let i = rowStart; i < rowEnd; i++) {
+            rows.push(grid.api.rowByIndex(i) ?? null);
+        }
+        const { data, groupHeaders, headers } = getDataRect({
+            rows,
+            columnField: grid.api.columnField,
+            visible,
+            columnStart,
+            columnEnd,
+            uniformGroupHeaders: p?.uniformGroupHeaders,
+        });
+        const final = [...data];
+        if (p?.includeHeader)
+            final.unshift(headers);
+        if (p?.includeGroupHeaders)
+            final.unshift(...groupHeaders);
+        return final
+            .map((c) => {
+            return c.map((x) => `"${x}"`).join(p?.delimiter ?? ",");
+        })
+            .join("\n");
+    };
+};
+export const makeExportCsvFile = (grid) => {
+    return async (p) => {
+        const csv = await grid.api.exportCsv(p);
+        const blob = new Blob([csv], { type: "text/csv" });
+        return blob;
+    };
+};

package/dist/state/api/export-data-rect.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeExportDataRect: (grid: Grid<any>) => GridApi<any>["exportDataRect"];

package/dist/state/api/export-data-rect.js

@@ -0,0 +1,24 @@
+import { getDataRect } from "../helpers/get-data-rect";
+export const makeExportDataRect = (grid) => {
+    return (p) => {
+        const s = grid.state;
+        const rowCount = s.rowDataStore.rowCount.get();
+        const visible = s.columnMeta.get().columnsVisible;
+        const rowStart = p?.dataRect?.rowStart ?? 0;
+        const rowEnd = p?.dataRect?.rowEnd ?? rowCount;
+        const columnStart = p?.dataRect?.columnStart ?? 0;
+        const columnEnd = p?.dataRect?.columnEnd ?? visible.length;
+        const rows = [];
+        for (let i = rowStart; i < rowEnd; i++) {
+            rows.push(grid.api.rowByIndex(i) ?? null);
+        }
+        return getDataRect({
+            rows,
+            visible,
+            columnField: grid.api.columnField,
+            uniformGroupHeaders: p?.uniformGroupHeaders,
+            columnEnd,
+            columnStart,
+        });
+    };
+};

package/dist/state/api/focus-cell.d.ts

@@ -0,0 +1,5 @@
+import type { Grid, GridApi } from "../../+types";
+import type { InternalAtoms } from "../+types";
+export declare const makeFocusCell: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["focusCell"];

package/dist/state/api/focus-cell.js

@@ -0,0 +1,117 @@
+import { focusCell, getHeaderRows, handleNavigationKeys, isColumnFloatingHeader, } from "@1771technologies/lytenyte-shared";
+import { clamp } from "@1771technologies/lytenyte-js-utils";
+export const makeFocusCell = (grid) => {
+    return (position) => {
+        const vp = grid.state.viewport.get();
+        if (!vp)
+            return false;
+        if (typeof position === "string") {
+            let key = "";
+            if (position === "up")
+                key = "ArrowUp";
+            else if (position === "down")
+                key = "ArrowDown";
+            else if (position === "next")
+                key = grid.state.rtl.get() ? "ArrowLeft" : "ArrowRight";
+            else if (position === "prev")
+                key = grid.state.rtl.get() ? "ArrowRight" : "ArrowLeft";
+            if (!key)
+                return false;
+            const ds = grid.state.rowDataStore;
+            handleNavigationKeys({
+                key,
+                ctrlKey: false,
+                metaKey: false,
+                preventDefault: () => { },
+                stopPropagation: () => { },
+            }, {
+                vp,
+                rowCount: ds.rowCount.get(),
+                topCount: ds.rowTopCount.get(),
+                centerCount: ds.rowCenterCount.get(),
+                columnCount: grid.state.columnMeta.get().columnsVisible.length,
+                focusActive: grid.internal.focusActive,
+                id: grid.state.gridId.get(),
+                layout: grid.internal.layout.get(),
+                rtl: grid.state.rtl.get(),
+                scrollIntoView: grid.api.scrollIntoView,
+            });
+            return true;
+        }
+        if ("kind" in position) {
+            if (position.kind === "header-cell") {
+                grid.api.scrollIntoView({ column: position.colIndex });
+                const run = () => {
+                    const header = getHeaderRows(vp);
+                    if (!header)
+                        return false;
+                    for (const row of header) {
+                        const cell = row.querySelector(`[data-ln-header-cell][data-ln-colindex="${position.colIndex}"]`);
+                        if (!cell)
+                            continue;
+                        if (isColumnFloatingHeader(cell))
+                            continue;
+                        cell.focus();
+                        return true;
+                    }
+                    return false;
+                };
+                if (!run()) {
+                    setTimeout(() => {
+                        if (!run()) {
+                            setTimeout(() => run(), 20);
+                        }
+                    }, 8);
+                }
+                return true;
+            }
+            else if (position.kind === "header-group-cell") {
+                grid.api.scrollIntoView({ column: position.colIndex });
+                const run = () => {
+                    const header = getHeaderRows(vp);
+                    if (!header)
+                        return false;
+                    const row = header[position.hierarchyRowIndex];
+                    if (!row)
+                        return false;
+                    const headers = Array.from(row.querySelectorAll("[data-ln-header-range]"));
+                    const match = headers.find((c) => {
+                        const [colStartStr, colEndStr] = c.getAttribute("data-ln-header-range").split(",");
+                        const colStart = Number.parseInt(colStartStr);
+                        const colEnd = Number.parseInt(colEndStr);
+                        return colStart <= position.colIndex && position.colIndex < colEnd;
+                    });
+                    if (match) {
+                        match.focus();
+                        grid.internal.focusActive.set((prev) => ({ ...prev, colIndex }));
+                        return true;
+                    }
+                    return false;
+                };
+                if (!run()) {
+                    setTimeout(() => {
+                        if (!run()) {
+                            setTimeout(() => run(), 20);
+                        }
+                    }, 8);
+                }
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+        const columnCount = grid.state.columnMeta.get().columnsVisible.length - 1;
+        const colIndex = clamp(0, typeof position.column === "number" ? position.column : grid.api.columnIndex(position.column), columnCount);
+        focusCell({
+            colIndex,
+            rowIndex: position.row,
+            focusActive: grid.internal.focusActive,
+            id: grid.state.gridId.get(),
+            layout: grid.internal.layout.get(),
+            scrollIntoView: grid.api.scrollIntoView,
+            vp,
+        });
+        return false;
+    };
+};