@1771technologies/lytenyte-pro 1.0.14 → 1.0.16

package/dist/root/root.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { RootProvider } from "../context.js";
-import { DialogDriver } from "./dialog-driver.js";
-import { PopoverDriver } from "./popover-driver.js";
-import { CellSelectionDriver } from "../cell-selection/cell-selection-driver.js";
-import { hasAValidLicense, licenseState } from "../license.js";
-export function Root({ grid, children, ...events }) {
-    useEffect(() => {
-        if (hasAValidLicense)
-            return;
-        const existing = document.getElementById("lng1771-watermark");
-        if (existing)
-            return;
-        const invalidLicenseWatermark = document.createElement("div");
-        invalidLicenseWatermark.style.position = "fixed";
-        invalidLicenseWatermark.style.bottom = "0px";
-        invalidLicenseWatermark.style.insetInlineEnd = "0px";
-        invalidLicenseWatermark.style.background = "rgb(255, 167, 167)";
-        invalidLicenseWatermark.style.color = "black";
-        invalidLicenseWatermark.style.fontSize = "1.2rem";
-        invalidLicenseWatermark.style.fontWeight = "bold";
-        invalidLicenseWatermark.style.border = "1px solid black";
-        invalidLicenseWatermark.style.padding = "16px";
-        if (licenseState === "expired")
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: License key expired. Your license covers earlier versions only.`;
-        else if (licenseState === "invalid")
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: Invalid license key. Please verify the key and try again.`;
-        else
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid PRO is being used for evaluation. 
-      <a href="https://1771Technologies.com/pricing">Click here</a> to secure your license.`;
-        document.body.appendChild(invalidLicenseWatermark);
-        return () => invalidLicenseWatermark.remove();
-    }, []);
-    // Add event listeners in the standard react way
-    useEffect(() => {
-        const ev = Object.entries(events).map(([onName, fn]) => {
-            if (!onName.startsWith("on"))
-                return;
-            const name = onName[2].toLowerCase() + onName.slice(3);
-            return grid.api.eventAddListener(name, fn);
-        });
-        return () => ev.forEach((c) => c?.());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [Object.values(events)]);
-    const internal = grid.internal;
-    useEffect(() => {
-        return internal.focusActive.watch(() => {
-            const editActive = internal.editActivePos.get();
-            if (!editActive)
-                return;
-            const focus = internal.focusActive.get();
-            if (focus?.kind !== "cell") {
-                grid.api.editEnd();
-            }
-            else {
-                if (grid.api.editIsCellActive({ rowIndex: focus.rowIndex, column: focus.colIndex }))
-                    return;
-                grid.api.editEnd();
-            }
-        });
-    }, [grid.api, internal.editActivePos, internal.focusActive]);
-    const [vp, ref] = useState(null);
-    useEffect(() => {
-        if (!vp)
-            return;
-        const controller = new AbortController();
-        vp.addEventListener("scroll", () => {
-            internal.xScroll.set(Math.abs(vp.scrollLeft));
-            internal.yScroll.set(vp.scrollTop);
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, [internal.xScroll, internal.yScroll, vp]);
-    useEffect(() => {
-        grid.state.viewport.set(vp);
-        if (!vp)
-            return;
-        const obs = new ResizeObserver(() => {
-            grid.state.viewportHeightOuter.set(vp.offsetHeight);
-            grid.state.viewportWidthOuter.set(vp.offsetWidth);
-            grid.state.viewportWidthInner.set(vp.clientWidth);
-            grid.state.viewportHeightInner.set(vp.clientHeight);
-        });
-        grid.state.viewportHeightOuter.set(vp.offsetHeight);
-        grid.state.viewportWidthOuter.set(vp.offsetWidth);
-        grid.state.viewportWidthInner.set(vp.clientWidth);
-        grid.state.viewportHeightInner.set(vp.clientHeight);
-        obs.observe(vp);
-        return () => {
-            obs.disconnect();
-        };
-    }, [
-        grid.state.viewport,
-        grid.state.viewportHeightInner,
-        grid.state.viewportHeightOuter,
-        grid.state.viewportWidthInner,
-        grid.state.viewportWidthOuter,
-        vp,
-    ]);
-    const value = useMemo(() => {
-        return {
-            ref,
-            grid: grid,
-        };
-    }, [grid]);
-    const cellSelectionMode = grid.state.cellSelectionMode.useValue();
-    return (_jsxs(RootProvider, { value: value, children: [_jsx(DialogDriver, {}), _jsx(PopoverDriver, {}), cellSelectionMode !== "none" && _jsx(CellSelectionDriver, {}), children] }));
-}

package/dist/rows/row/context.d.ts

@@ -1,15 +0,0 @@
-import type { CellRendererFn, ColumnBase, RowLayout, RowNode } from "../../+types";
-export interface RowMetaData {
-    readonly selected: boolean;
-    readonly indeterminate: boolean;
-    readonly colBounds: [number, number];
-    readonly row: RowNode<any> | null;
-    readonly layout: RowLayout<any>;
-    readonly xPositions: Uint32Array;
-    readonly yPositions: Uint32Array;
-    readonly base: ColumnBase<any>;
-    readonly renderers: Record<string, CellRendererFn<any>>;
-    readonly rtl: boolean;
-}
-export declare const RowContext: import("react").Context<RowMetaData>;
-export declare const useRowMeta: () => RowMetaData;

package/dist/rows/row/context.js

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "react";
-export const RowContext = createContext({
-    selected: false,
-    indeterminate: false,
-    colBounds: [0, 0],
-    row: null,
-    layout: null,
-    xPositions: new Uint32Array(),
-    yPositions: new Uint32Array(),
-    base: null,
-    renderers: null,
-    rtl: false,
-});
-export const useRowMeta = () => useContext(RowContext);

package/dist/rows/row/row.d.ts

@@ -1,7 +0,0 @@
-import type { RowNormalRowLayout } from "../../+types";
-import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
-export interface RowProps extends Omit<DropWrapProps, "accepted"> {
-    readonly row: RowNormalRowLayout<any>;
-    readonly accepted?: string[];
-}
-export declare const Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/row/row.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo } from "react";
-import { useGridRoot } from "../../context.js";
-import { RowDetailRow } from "../row-detail-row.js";
-import { RowReact } from "@1771technologies/lytenyte-shared";
-import { useRowContextValue } from "./use-row-context-value.js";
-import { RowContext } from "./context.js";
-import { equal } from "@1771technologies/lytenyte-js-utils";
-import { CellSpacerNoPin } from "../../cells/cell-spacer.js";
-const empty = [];
-const RowImpl = forwardRef(function Rows({ row, ...props }, forwarded) {
-    const ctx = useGridRoot().grid;
-    const yPos = ctx.state.yPositions.useValue();
-    const rowMeta = useRowContextValue(ctx, row, yPos);
-    const hasSpans = ctx.internal.hasSpans.useValue();
-    const accepted = props.accepted ?? empty;
-    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, rowPin: row.rowPin, topOffset: ctx.view.useValue().rows.rowTopTotalHeight, yPositions: yPos, hasSpans: hasSpans, "data-ln-row-selected": rowMeta.selected, children: [_jsx(CellSpacerNoPin, { xPositions: rowMeta.xPositions }), props.children, _jsx(RowDetailRow, { layout: row })] }) }));
-});
-export const Row = memo(RowImpl, (prev, next) => {
-    const { row: rowP, ...propsP } = prev;
-    const { row: rowN, ...propsN } = next;
-    const { cells: _, ...rowPropsP } = rowP;
-    const { cells: __, ...rowPropsN } = rowN;
-    return equal(rowPropsN, rowPropsP) && equal(propsP, propsN);
-});

package/dist/rows/row/use-row-context-value.d.ts

@@ -1,6 +0,0 @@
-import type { Grid, RowLayout } from "../../+types.js";
-import type { InternalAtoms } from "../../state/+types.js";
-import type { RowMetaData } from "./context.js";
-export declare function useRowContextValue(grid: Grid<any> & {
-    internal: InternalAtoms;
-}, row: RowLayout<any>, yPositions: Uint32Array): RowMetaData;

package/dist/rows/row/use-row-context-value.js

@@ -1,45 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-export function useRowContextValue(grid, row, yPositions) {
-    const r = row.row.useValue();
-    const xPositions = grid.state.xPositions.useValue();
-    const [indeterminate, setIndeterminate] = useState(false);
-    const [selected, setSelected] = useState(false);
-    const colBounds = grid.internal.colBounds.useValue();
-    const rtl = grid.state.rtl.useValue();
-    const base = grid.state.columnBase.useValue();
-    const renderers = grid.state.cellRenderers.useValue();
-    useEffect(() => {
-        function handleSelection() {
-            if (!r)
-                return;
-            const selectedIds = grid.state.rowSelectedIds.get();
-            if (selectedIds.has(r.id))
-                setSelected(true);
-            else
-                setSelected(false);
-            if (r.kind === "branch") {
-                const childIds = grid.state.rowDataSource.get().rowAllChildIds(r.id);
-                setIndeterminate(childIds.some((c) => selectedIds.has(c)) && childIds.some((c) => !selectedIds.has(c)));
-            }
-            else
-                setIndeterminate(false);
-        }
-        handleSelection();
-        return grid.state.rowSelectedIds.watch(() => handleSelection());
-    }, [grid.state.rowDataSource, grid.state.rowSelectedIds, r]);
-    const value = useMemo(() => {
-        return {
-            selected,
-            indeterminate,
-            colBounds,
-            row: r,
-            layout: row,
-            xPositions,
-            yPositions,
-            rtl,
-            base,
-            renderers,
-        };
-    }, [base, colBounds, indeterminate, r, renderers, row, rtl, selected, xPositions, yPositions]);
-    return value;
-}

package/dist/rows/row-detail-row.d.ts

@@ -1,4 +0,0 @@
-import type { RowFullWidthRowLayout, RowNormalRowLayout } from "../+types";
-export declare function RowDetailRow<T>({ layout, }: {
-    layout: RowNormalRowLayout<T> | RowFullWidthRowLayout<T>;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/rows/row-detail-row.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SCROLL_WIDTH_VARIABLE_USE, sizeFromCoord } from "@1771technologies/lytenyte-shared";
-import { useGridRoot } from "../context.js";
-import { useEffect, useState } from "react";
-export function RowDetailRow({ layout, }) {
-    const cx = useGridRoot();
-    const row = layout.row.useValue();
-    if (!row || !cx.grid.api.rowDetailIsExpanded(row))
-        return null;
-    return _jsx(RowDetailImpl, { row: row, rowIndex: layout.rowIndex });
-}
-function RowDetailImpl({ row, rowIndex }) {
-    const cx = useGridRoot();
-    const rtl = cx.grid.state.rtl.useValue();
-    const height = cx.grid.api.rowDetailRenderedHeight(row);
-    const rowHeight = sizeFromCoord(rowIndex, cx.grid.state.yPositions.get()) - height;
-    const Renderer = cx.grid.state.rowDetailRenderer.useValue().fn;
-    const [ref, setRef] = useState(null);
-    useEffect(() => {
-        const first = ref?.firstElementChild;
-        if (!first)
-            return;
-        const obs = new ResizeObserver(() => {
-            cx.grid.internal.rowDetailAutoHeightCache.set((prev) => ({
-                ...prev,
-                [rowIndex]: first.offsetHeight,
-            }));
-        });
-        obs.observe(first);
-        return () => obs.disconnect();
-    }, [cx.grid.internal.rowDetailAutoHeightCache, ref?.firstElementChild, rowIndex]);
-    const isAuto = cx.grid.state.rowDetailHeight.useValue() === "auto";
-    return (_jsx("div", { ref: setRef, role: "gridcell", style: {
-            pointerEvents: "none",
-            position: "absolute",
-            left: 0,
-            width: SCROLL_WIDTH_VARIABLE_USE,
-        }, children: _jsx("div", { tabIndex: 0, "data-ln-gridid": cx.grid.state.gridId.get(), "data-ln-row-detail": true, "data-ln-rowindex": rowIndex, style: {
-                position: "sticky",
-                pointerEvents: "all",
-                right: rtl ? "0px" : undefined,
-                left: rtl ? undefined : "0px",
-                marginTop: rowHeight,
-                width: cx.grid.state.viewportWidthInner.useValue(),
-                height: isAuto ? "auto" : height,
-            }, children: _jsx(Renderer, { grid: cx.grid, row: row, rowIndex: rowIndex }) }) }));
-}

package/dist/rows/row-full-width.d.ts

@@ -1,8 +0,0 @@
-import type { RowFullWidthRowLayout } from "../+types";
-import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
-export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
-    readonly row: RowFullWidthRowLayout<any>;
-    readonly space?: "viewport" | "scroll-width";
-    readonly accepted?: string[];
-}
-export declare const RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/row-full-width.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { useGridRoot } from "../context.js";
-import { RowFullWidthReact } from "@1771technologies/lytenyte-shared";
-import { RowDetailRow } from "./row-detail-row.js";
-import { useRowContextValue } from "./row/use-row-context-value.js";
-const empty = [];
-const RowFullWidthImpl = forwardRef(function RowFullWidth({ row: layout, space, children, ...props }, forwarded) {
-    const grid = useGridRoot().grid;
-    const Renderer = grid.state.rowFullWidthRenderer.useValue().fn;
-    const row = layout.row.useValue();
-    const yPositions = grid.state.yPositions.useValue();
-    const hasSpans = grid.internal.hasSpans.useValue();
-    const meta = useRowContextValue(grid, layout, yPositions);
-    return (_jsx(RowFullWidthReact, { ...props, ref: forwarded, accepted: props.accepted ?? empty, detail: _jsx(RowDetailRow, { layout: layout }), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), gridId: grid.state.gridId.useValue(), rtl: meta.rtl, hasSpans: hasSpans, rowFirstPinBottom: layout.rowFirstPinBottom, rowLastPinTop: layout.rowLastPinTop, rowIndex: layout.rowIndex, rowIsFocusRow: layout.rowIsFocusRow ?? false, rowPin: layout.rowPin, topOffset: grid.view.useValue().rows.rowTopTotalHeight, yPositions: yPositions, space: space, "data-ln-row-selected": meta.selected, children: children ??
-            (row ? (_jsx(Renderer, { grid: grid, row: row, rowIndex: layout.rowIndex, rowSelected: meta.selected, rowIndeterminate: meta.indeterminate })) : null) }));
-});
-export const RowFullWidth = fastDeepMemo(RowFullWidthImpl);

package/dist/rows/rows-container.d.ts

@@ -1 +0,0 @@
-export declare const RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/rows-container.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useGridRoot } from "../context.js";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { RowsContainerReact } from "@1771technologies/lytenyte-shared";
-export const RowsContainer = fastDeepMemo(forwardRef(function Rows(props, forwarded) {
-    const ctx = useGridRoot().grid;
-    return (_jsx(RowsContainerReact, { ...props, ref: forwarded, height: ctx.state.heightTotal.useValue(), width: ctx.state.widthTotal.useValue(), viewportHeight: ctx.state.viewportHeightInner.useValue(), viewportWidth: ctx.state.viewportWidthInner.useValue() }));
-}));

package/dist/rows/rows-sections.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { useGridRoot } from "../context.js";
-import { NativeScroller } from "./scrollers/native-scroller.js";
-import { RowsBottomReact, RowsCenterReact, RowsTopReact } from "@1771technologies/lytenyte-shared";
-import { CellSelectionBottom, CellSelectionCenter, CellSelectionTop, } from "../cell-selection/cell-selection-containers.js";
-export const RowsTop = fastDeepMemo(forwardRef(function RowsTop(props, forwarded) {
-    const cx = useGridRoot().grid;
-    const view = cx.view.useValue().rows;
-    const topCount = cx.state.rowDataStore.rowTopCount.useValue();
-    return (_jsxs(RowsTopReact, { ...props, rowFirst: topCount || -1, rowLast: topCount, ref: forwarded, top: cx.internal.headerHeightTotal.useValue(), height: view.rowTopTotalHeight, children: [props.children, _jsx(CellSelectionTop, {})] }));
-}));
-export const RowsCenter = fastDeepMemo(forwardRef(function RowsCenter({ children, ...props }, forwarded) {
-    const cx = useGridRoot().grid;
-    const view = cx.view.useValue().rows;
-    const rowCenterCount = cx.state.rowDataStore.rowCenterCount.useValue();
-    return (_jsx(RowsCenterReact, { ...props, ref: forwarded, rowFirst: cx.state.rowDataStore.rowTopCount.useValue(), rowLast: rowCenterCount + cx.state.rowDataStore.rowTopCount.useValue(), height: view.rowCenterTotalHeight, pinSectionHeights: view.rowBottomTotalHeight + view.rowTopTotalHeight, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
-}));
-export const RowsBottom = fastDeepMemo(forwardRef(function RowsBottom(props, forwarded) {
-    const cx = useGridRoot().grid;
-    const view = cx.view.useValue().rows;
-    const rowCenterCount = cx.state.rowDataStore.rowCenterCount.useValue();
-    const rowTopCount = cx.state.rowDataStore.rowTopCount.useValue();
-    const rowBottomCount = cx.state.rowDataStore.rowBottomCount.useValue();
-    return (_jsxs(RowsBottomReact, { ...props, ref: forwarded, rowFirst: rowCenterCount + rowTopCount, rowLast: rowCenterCount + rowBottomCount + rowTopCount, height: view.rowBottomTotalHeight, children: [_jsx(CellSelectionBottom, {}), props.children] }));
-}));

package/dist/rows/scrollers/native-scroller.d.ts

@@ -1,2 +0,0 @@
-import type { PropsWithChildren } from "react";
-export declare function NativeScroller(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/rows/scrollers/native-scroller.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function NativeScroller(props) {
-    return _jsx("div", { role: "presentation", children: props.children });
-}

package/dist/utils/cycle-sorts.d.ts

@@ -1,2 +0,0 @@
-import type { Column, Grid } from "../+types";
-export declare function cycleSorts<T>(grid: Grid<T>, column: Column<T>): void;

package/dist/utils/cycle-sorts.js

@@ -1,16 +0,0 @@
-export function cycleSorts(grid, column) {
-    const current = grid.api.sortForColumn(column.id);
-    if (current) {
-        if (current.sort.isDescending)
-            grid.state.sortModel.set([]);
-        else
-            grid.state.sortModel.set([
-                { columnId: column.id, sort: { kind: "string" }, isDescending: true },
-            ]);
-    }
-    else {
-        grid.state.sortModel.set([
-            { columnId: column.id, sort: { kind: "string" }, isDescending: false },
-        ]);
-    }
-}

package/dist/viewport/begin-editing.d.ts

@@ -1,5 +0,0 @@
-import type { Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
-export declare function beginEditing<T>(grid: Grid<T> & {
-    internal: InternalAtoms;
-}, activator?: "single" | "double-click", init?: any): void;

package/dist/viewport/begin-editing.js

@@ -1,15 +0,0 @@
-export function beginEditing(grid, activator, init) {
-    const focusPos = grid.internal.focusActive.get();
-    const editMode = grid.state.editCellMode.get();
-    const editActivator = grid.state.editClickActivator.get();
-    if (focusPos?.kind !== "cell" || editMode === "readonly")
-        return;
-    if (activator && editActivator !== activator)
-        return;
-    const column = grid.api.columnByIndex(focusPos.colIndex);
-    if (!column)
-        return;
-    if (grid.api.editIsCellActive({ column, rowIndex: focusPos.rowIndex }))
-        return;
-    grid.api.editBegin({ column, rowIndex: focusPos.rowIndex, init });
-}

package/dist/viewport/viewport.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useCombinedRefs } from "@1771technologies/lytenyte-react-hooks";
-import { useGridRoot } from "../context.js";
-import { handleNavigation, useFocusTracking } from "@1771technologies/lytenyte-shared";
-import { beginEditing } from "./begin-editing.js";
-export const Viewport = forwardRef(function Viewport({ children, style, ...props }, forwarded) {
-    const ctx = useGridRoot();
-    const ref = useCombinedRefs(ctx.ref, forwarded);
-    const vp = ctx.grid.state.viewport.useValue();
-    const width = ctx.grid.state.widthTotal.useValue();
-    const height = ctx.grid.state.heightTotal.useValue();
-    const rtl = ctx.grid.state.rtl.useValue();
-    const cellSelectionMode = ctx.grid.state.cellSelectionMode.useValue();
-    const [focused, vpFocused] = useFocusTracking(vp, ctx.grid.internal.focusActive);
-    const shouldCapture = !focused && !vpFocused;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { tabIndex: 0, ...props, "data-ln-has-cell-selection": cellSelectionMode !== "none", onKeyDown: (e) => {
-                    props.onKeyDown?.(e);
-                    if (e.defaultPrevented || e.isPropagationStopped() || !vp)
-                        return;
-                    handleNavigation({
-                        gridId: ctx.grid.state.gridId.get(),
-                        rtl,
-                        event: e,
-                        viewport: vp,
-                        topCount: ctx.grid.state.rowDataStore.rowTopCount.get(),
-                        centerCount: ctx.grid.state.rowDataStore.rowCenterCount.get(),
-                        getRootCell: ctx.grid.api.cellRoot,
-                        scrollIntoView: ctx.grid.api.scrollIntoView,
-                        focusActive: ctx.grid.internal.focusActive,
-                        columnCount: ctx.grid.state.columnMeta.get().columnsVisible.length,
-                        rowCount: ctx.grid.state.rowDataStore.rowCount.get(),
-                        isRowDetailExpanded: (r) => {
-                            const row = ctx.grid.api.rowByIndex(r);
-                            if (!row)
-                                return false;
-                            return ctx.grid.api.rowDetailIsExpanded(row);
-                        },
-                    });
-                    if (e.key === "Enter" || e.key.length === 1) {
-                        // We use a timeout to avoid setting the value on clicks. This can happen when a user types
-                        // a non-printable key.
-                        setTimeout(() => {
-                            beginEditing(ctx.grid, undefined, e.key === "Enter" ? undefined : e.key);
-                        });
-                    }
-                    if (e.key === "Backspace" || e.key === "Delete") {
-                        const focusPos = ctx.grid.internal.focusActive.get();
-                        if (focusPos?.kind === "cell")
-                            ctx.grid.api.editUpdate({
-                                column: focusPos.colIndex,
-                                rowIndex: focusPos.rowIndex,
-                                value: null,
-                            });
-                    }
-                }, onClick: (e) => {
-                    props.onClick?.(e);
-                    if (e.defaultPrevented)
-                        return;
-                    beginEditing(ctx.grid, "single");
-                    if (ctx.grid.state.rowSelectionActivator.get() === "single-click")
-                        ctx.grid.api.rowHandleSelect(e);
-                }, onDoubleClick: (e) => {
-                    props.onDoubleClick?.(e);
-                    if (e.defaultPrevented)
-                        return;
-                    beginEditing(ctx.grid, "double-click");
-                    if (ctx.grid.state.rowSelectionActivator.get() === "double-click")
-                        ctx.grid.api.rowHandleSelect(e);
-                }, role: "grid", ref: ref, "data-ln-viewport": true, style: {
-                    ...style,
-                    position: "relative",
-                    display: "flex",
-                    flexDirection: "column",
-                    contain: "strict",
-                    width: "100%",
-                    height: "100%",
-                    overflow: style?.overflow ?? "auto",
-                    direction: rtl ? "rtl" : "ltr",
-                }, children: [vp && children, !vp && _jsx("div", { style: { width, height } })] }), shouldCapture && (_jsx("div", { role: "none", "data-ln-focus-capture": true, onFocusCapture: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    vp?.focus();
-                }, tabIndex: 0 }))] }));
-});