@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/row-data-source-server/use-server-data-source.js

@@ -0,0 +1,344 @@
+import { effect, makeAtom, signal } from "@1771technologies/lytenyte-shared";
+import { useRef } from "react";
+import { ServerData } from "./server-data.js";
+import { equal } from "@1771technologies/lytenyte-js-utils";
+export function makeServerDataSource({ dataFetcher, dataInFilterItemFetcher, dataColumnPivotFetcher, cellUpdateHandler, cellUpdateOptimistically, blockSize = 200, }) {
+    let grid = null;
+    let flat;
+    let source;
+    void grid;
+    const isLoading = makeAtom(signal(false));
+    const loadError = makeAtom(signal(null));
+    const cleanup = [];
+    const init = (g) => {
+        grid = g;
+        source = new ServerData({
+            defaultExpansion: g.state.rowGroupDefaultExpansion.get(),
+            blocksize: blockSize,
+            expansions: g.state.rowGroupExpansions.get(),
+            pivotExpansions: g.state.columnPivotRowGroupExpansions.get(),
+            pivotMode: g.state.columnPivotMode.get(),
+            onResetLoadBegin: () => {
+                isLoading.set(true);
+                loadError.set(null);
+            },
+            onResetLoadEnd: () => isLoading.set(false),
+            onResetLoadError: (e) => loadError.set(e),
+            onFlatten: (f) => {
+                const store = g.state.rowDataStore;
+                flat = f;
+                store.rowTopCount.set(f.top);
+                store.rowCenterCount.set(f.center);
+                store.rowBottomCount.set(f.bottom);
+                store.rowClearCache();
+            },
+        });
+        let prevModel = {
+            sorts: g.state.sortModel.get(),
+            groups: g.state.rowGroupModel.get(),
+            filters: g.state.filterModel.get(),
+            filtersIn: g.state.filterInModel.get(),
+            quickSearch: g.state.quickSearch.get(),
+            aggregations: g.state.aggModel.get(),
+            pivotMode: g.state.columnPivotMode.get(),
+            pivotModel: g.state.columnPivotModel.get(),
+        };
+        cleanup.push(effect(() => {
+            const newModel = {
+                // @ts-expect-error this is fine - just a hidden type
+                sorts: g.state.sortModel.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                groups: g.state.rowGroupModel.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                filters: g.state.filterModel.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                filtersIn: g.state.filterInModel.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                quickSearch: g.state.quickSearch.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                aggregations: g.state.aggModel.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                pivotMode: g.state.columnPivotMode.$(),
+                // @ts-expect-error this is fine - just a hidden type
+                pivotModel: g.state.columnPivotModel.$(),
+            };
+            if (equal(newModel, prevModel))
+                return;
+            source.dataFetcher = (req, expansions, pivotExpansions) => {
+                return dataFetcher({
+                    grid: g,
+                    model: {
+                        ...newModel,
+                        groupExpansions: expansions,
+                        pivotGroupExpansions: pivotExpansions,
+                    },
+                    reqTime: Date.now(),
+                    requests: req,
+                });
+            };
+            prevModel = newModel;
+        }));
+        const pivotModel = g.state.columnPivotModel.get();
+        let prevPivotColumnModel = pivotModel.columns;
+        let prevPivotColumnValues = pivotModel.values;
+        const updatePivotColumns = async (model, ignoreEqualCheck = false) => {
+            if (!ignoreEqualCheck &&
+                equal(prevPivotColumnModel, model.columns) &&
+                equal(prevPivotColumnValues, model.values))
+                return;
+            const pivotColumns = await dataColumnPivotFetcher?.({
+                grid: g,
+                model: {
+                    ...prevModel,
+                    pivotMode: g.state.columnPivotMode.get(),
+                    pivotModel: model,
+                    groupExpansions: g.state.rowGroupExpansions.get(),
+                    pivotGroupExpansions: g.state.columnPivotColumnGroupExpansions.get(),
+                },
+                reqTime: Date.now(),
+            });
+            g.state.columnPivotColumns.set(pivotColumns ?? []);
+            g.state.rowDataStore.rowClearCache();
+            prevPivotColumnModel = model.columns;
+            prevPivotColumnValues = model.values;
+        };
+        if (g.state.columnPivotMode.get())
+            updatePivotColumns(pivotModel);
+        // Pivot model monitoring
+        cleanup.push(grid.state.columnPivotMode.watch(() => {
+            const model = g.state.columnPivotModel.get();
+            updatePivotColumns(model);
+        }));
+        cleanup.push(grid.state.columnPivotModel.watch(() => {
+            const model = g.state.columnPivotModel.get();
+            updatePivotColumns(model);
+        }));
+        cleanup.push(g.state.rowGroupDefaultExpansion.watch(() => {
+            source.defaultExpansion = g.state.rowGroupDefaultExpansion.get();
+        }));
+        cleanup.push(g.state.viewBounds.watch(() => {
+            const bounds = g.state.viewBounds.get();
+            source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+        }));
+        source.dataFetcher = (req, expansions, pivotExpansions) => {
+            return dataFetcher({
+                grid: g,
+                model: {
+                    ...prevModel,
+                    groupExpansions: expansions,
+                    pivotGroupExpansions: pivotExpansions,
+                },
+                reqTime: Date.now(),
+                requests: req,
+            });
+        };
+    };
+    const rowById = (id) => {
+        return flat.rowIdToRow.get(id) ?? null;
+    };
+    const rowAllChildIds = (rowId) => {
+        const f = flat;
+        const row = f.rowIdToRow.get(rowId);
+        if (!row || row.kind === "leaf")
+            return [];
+        const ids = new Set();
+        const node = f.rowIdToTreeNode.get(row.id);
+        if (!node || node.kind === "leaf")
+            return [];
+        const stack = [...node.byPath.values()];
+        while (stack.length) {
+            const item = stack.pop();
+            if (item?.kind === "leaf") {
+                ids.add(item.data.id);
+            }
+            else {
+                stack.push(...item.byPath.values());
+                ids.add(item.data.id);
+            }
+        }
+        return [...ids];
+    };
+    const rowByIndex = (i) => {
+        const row = flat.rowIndexToRow.get(i);
+        const isLoading = flat.loading.has(i);
+        const error = flat.errored.get(i);
+        // If we haven't loaded a row yet.
+        if (!row)
+            return {
+                id: `__loading__placeholder__${i}`,
+                data: null,
+                kind: "leaf",
+                loading: isLoading,
+                error: error,
+            };
+        if (error) {
+            return { ...row, error };
+        }
+        if (isLoading) {
+            return { ...row, loading: isLoading };
+        }
+        return flat.rowIndexToRow.get(i) ?? null;
+    };
+    const rowExpand = (expansions) => {
+        if (!grid)
+            return;
+        const mode = grid.state.columnPivotMode.get();
+        if (mode) {
+            const current = grid.state.columnPivotColumnGroupExpansions.get();
+            const next = { ...current, ...expansions };
+            source.pivotExpansions = next;
+            grid.state.columnPivotRowGroupExpansions.set(next);
+        }
+        else {
+            const current = grid.state.rowGroupExpansions.get();
+            const next = { ...current, ...expansions };
+            source.expansions = next;
+            grid.state.rowGroupExpansions.set(next);
+        }
+    };
+    const rowToIndex = (rowId) => {
+        return flat.rowIdToRowIndex.get(rowId) ?? null;
+    };
+    const rowSelect = (params) => {
+        if (!grid || params.mode === "none")
+            return;
+        if (params.mode === "single") {
+            if (params.deselect) {
+                grid.state.rowSelectedIds.set(new Set());
+            }
+            else {
+                grid.state.rowSelectedIds.set(new Set([params.startId]));
+            }
+            return;
+        }
+        const ids = new Set();
+        if (params.startId === params.endId) {
+            ids.add(params.startId);
+            if (params.selectChildren) {
+                rowAllChildIds(params.startId).forEach((c) => ids.add(c));
+            }
+        }
+        else {
+            const first = rowToIndex(params.startId);
+            const last = rowToIndex(params.endId);
+            if (first == null || last == null)
+                return;
+            const start = Math.min(first, last);
+            const end = Math.max(first, last);
+            for (let i = start; i <= end; i++) {
+                const row = rowByIndex(i);
+                if (!row)
+                    continue;
+                if (params.selectChildren) {
+                    rowAllChildIds(row.id).forEach((c) => ids.add(c));
+                }
+                if (row?.id)
+                    ids.add(row.id);
+            }
+        }
+        if (params.deselect) {
+            const current = grid.state.rowSelectedIds.get();
+            const next = current.difference(ids);
+            grid.state.rowSelectedIds.set(next);
+        }
+        else {
+            const current = grid.state.rowSelectedIds.get();
+            const next = current.union(ids);
+            grid.state.rowSelectedIds.set(next);
+        }
+    };
+    const rowSelectAll = (params) => {
+        if (!grid)
+            return;
+        if (params.deselect) {
+            grid.state.rowSelectedIds.set(new Set());
+            return;
+        }
+        const t = flat;
+        grid.state.rowSelectedIds.set(new Set(t.rowIdToRow.keys()));
+    };
+    const rowSetBotData = () => {
+        console.error("Directly setting bottom data in the server data model is not supported.");
+    };
+    const rowSetTopData = () => {
+        console.error("Directly setting top data in the server data model is not supported.");
+    };
+    const rowSetCenterData = () => {
+        console.error("Directly setting center data in the server data model is not supported.");
+    };
+    // CRUD ops
+    const rowAdd = () => {
+        throw new Error(`Server data source does not support adding rows directly. Instead push updates via the pushResponses or pushRequests method`);
+    };
+    const rowDelete = () => {
+        throw new Error(`Server data source does not support deleting rows directly. Instead push updates via the pushResponses or pushRequests method`);
+    };
+    const rowUpdate = (updates) => {
+        const idMap = new Map([...updates.entries()]
+            .map(([key, data]) => {
+            if (typeof key === "string")
+                return [key, data];
+            const row = rowByIndex(key);
+            if (!row)
+                return null;
+            return [row.id, data];
+        })
+            .filter((n) => n != null));
+        cellUpdateHandler?.(idMap);
+        if (!cellUpdateOptimistically)
+            return;
+        idMap.forEach((data, id) => {
+            source.updateRow(id, data);
+        });
+        grid?.state.rowDataStore.rowClearCache();
+    };
+    const inFilterItems = (c) => {
+        if (!dataInFilterItemFetcher || !grid)
+            return [];
+        return dataInFilterItemFetcher({ column: c, grid, reqTime: Date.now() });
+    };
+    const rowAreAllSelected = () => {
+        return false;
+    };
+    const reset = () => {
+        source.reset();
+    };
+    const pushResponses = (responses) => {
+        source.handleResponses(responses);
+    };
+    const pushRequests = (requests) => {
+        source.handleRequests(requests);
+    };
+    const retry = () => { };
+    return {
+        init,
+        rowAdd,
+        rowById,
+        rowAllChildIds,
+        rowByIndex,
+        rowDelete,
+        rowExpand,
+        rowSelect,
+        rowSelectAll,
+        rowSetBotData,
+        rowSetCenterData,
+        rowSetTopData,
+        rowToIndex,
+        rowUpdate,
+        inFilterItems,
+        rowAreAllSelected,
+        isLoading,
+        loadError,
+        pushResponses,
+        pushRequests,
+        reset,
+        retry,
+    };
+}
+export function useServerDataSource(p) {
+    const ds = useRef(null);
+    if (!ds.current) {
+        ds.current = makeServerDataSource(p);
+    }
+    return ds.current;
+}

package/dist/row-data-source-server/utils/get-node-depth.d.ts

@@ -0,0 +1,2 @@
+import type { TreeLeaf, TreeParent } from "../async-tree/+types.async-tree.js";
+export declare function getNodeDepth(node: TreeParent<any, any> | TreeLeaf<any, any>): number;

package/dist/row-data-source-server/utils/get-node-depth.js

@@ -0,0 +1,9 @@
+export function getNodeDepth(node) {
+    let depth = 0;
+    let current = node.parent;
+    while (current && current.kind !== "root") {
+        depth++;
+        current = current.parent;
+    }
+    return depth;
+}

package/dist/row-data-source-server/utils/get-node-path.d.ts

@@ -0,0 +1,2 @@
+import type { TreeParent, TreeRoot } from "../async-tree/+types.async-tree.js";
+export declare function getNodePath<T, K>(c: TreeRoot<T, K> | TreeParent<T, K>): (string | null)[];

package/dist/row-data-source-server/utils/get-node-path.js

@@ -0,0 +1,9 @@
+export function getNodePath(c) {
+    const path = [];
+    let current = c;
+    while (current.kind !== "root") {
+        path.unshift(current.path);
+        current = current.parent;
+    }
+    return path;
+}

package/dist/row-data-source-server/utils/get-request-id.d.ts

@@ -0,0 +1 @@
+export declare function getRequestId(path: (string | null)[], start: number, end: number): string;

package/dist/row-data-source-server/utils/get-request-id.js

@@ -0,0 +1,6 @@
+export function getRequestId(path, start, end) {
+    if (path.length === 0)
+        return `__ROOT__/${start}-${end}`;
+    const key = path.map((s) => (s == null ? `__null__` : s)).join("/") + `${start}-${end}`;
+    return key;
+}

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

@@ -0,0 +1,14 @@
+import type { CellRendererFn, ColumnBase, RowNode } from "../../+types";
+export interface RowMetaData {
+    readonly selected: boolean;
+    readonly indeterminate: boolean;
+    readonly colBounds: [number, number];
+    readonly row: RowNode<any> | null;
+    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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+export const RowContext = createContext({
+    selected: false,
+    indeterminate: false,
+    colBounds: [0, 0],
+    row: 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

@@ -0,0 +1,7 @@
+import type { RowNormalRowLayout } from "../../+types.js";
+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

@@ -0,0 +1,25 @@
+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.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

@@ -0,0 +1,6 @@
+import type { Grid, GridAtomReadonlyUnwatchable, RowNode } 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: GridAtomReadonlyUnwatchable<RowNode<any> | null>, yPositions: Uint32Array): RowMetaData;

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

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from "react";
+export function useRowContextValue(grid, row, yPositions) {
+    const r = 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,
+            xPositions,
+            yPositions,
+            rtl,
+            base,
+            renderers,
+        };
+    }, [base, colBounds, indeterminate, r, renderers, rtl, selected, xPositions, yPositions]);
+    return value;
+}

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getNearestRow, getRowIndexFromEl, SCROLL_WIDTH_VARIABLE_USE, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
+import { useGridRoot } from "../context.js";
+import { useEffect, useState } from "react";
+import { getTabbables, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+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 parent = ref?.parentElement;
+        const first = ref?.firstElementChild;
+        if (!parent || !first)
+            return;
+        const controller = new AbortController();
+        let focusTime = false;
+        const vp = cx.grid.state.viewport.get();
+        vp?.addEventListener("keydown", () => {
+            focusTime = true;
+            setTimeout(() => {
+                focusTime = false;
+            }, 20);
+        }, { capture: true, signal: controller.signal });
+        parent.addEventListener("focusin", (e) => {
+            if (focusTime && e.relatedTarget && isHTMLElement(e.relatedTarget)) {
+                const row = getNearestRow(e.relatedTarget);
+                const gridId = cx.grid.state.gridId.get();
+                if (gridId !== row?.getAttribute("data-ln-gridid"))
+                    return;
+                const prevIndex = getRowIndexFromEl(row);
+                if (prevIndex - 1 === rowIndex) {
+                    first.focus();
+                }
+            }
+        }, { signal: controller.signal });
+        parent.addEventListener("keydown", (e) => {
+            if (e.key === "ArrowDown" && document.activeElement !== first) {
+                e.stopPropagation();
+                e.preventDefault();
+                first.focus();
+            }
+        }, { signal: controller.signal });
+        first.addEventListener("keydown", (e) => {
+            const next = rtl ? "ArrowLeft" : "ArrowRight";
+            const prev = rtl ? "ArrowRight" : "ArrowLeft";
+            if (e.key === "Escape") {
+                first.focus();
+                return;
+            }
+            if (e.key === "ArrowUp") {
+                e.stopPropagation();
+                e.preventDefault();
+                cx.grid.api.focusCell({
+                    row: rowIndex,
+                    column: cx.grid.internal.focusActive.get()?.colIndex ?? 0,
+                });
+            }
+            if (e.key === next) {
+                e.preventDefault();
+                e.stopPropagation();
+                const focusables = getTabbables(first);
+                const index = focusables.indexOf(document.activeElement);
+                if (index === -1)
+                    focusables.at(0)?.focus();
+                else
+                    focusables.at(index + 1)?.focus();
+            }
+            if (e.key === prev) {
+                e.preventDefault();
+                e.stopPropagation();
+                const focusables = getTabbables(first);
+                const index = focusables.indexOf(document.activeElement);
+                if (index === -1)
+                    focusables.at(-1)?.focus();
+                else
+                    focusables[index - 1]?.focus();
+            }
+        }, { signal: controller.signal });
+        return () => {
+            controller.abort();
+        };
+    }, [
+        cx.grid.api,
+        cx.grid.internal.focusActive,
+        cx.grid.internal.focusPrevRowIndex,
+        cx.grid.state.gridId,
+        cx.grid.state.rtl,
+        cx.grid.state.viewport,
+        ref,
+        rowIndex,
+        rtl,
+    ]);
+    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: "all",
+            position: "absolute",
+            left: 0,
+            width: SCROLL_WIDTH_VARIABLE_USE,
+        }, children: _jsx("div", { tabIndex: -1, "data-ln-row-detail": true, style: {
+                position: "sticky",
+                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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,19 @@
+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.row, 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

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