@1771technologies/lytenyte-pro 1.0.12 → 1.0.13

package/dist/cells/cell-editor.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { getTabbables } from "@1771technologies/lytenyte-dom-utils";
 import { useGridRoot } from "../context.js";
 import { editOnChange } from "../state/helpers/edit-on-change.js";
-import { handleNavigationKeys } from "@1771technologies/lytenyte-shared";
+import { handleNavigation } from "@1771technologies/lytenyte-shared";
 export function CellEditor({ cell }) {
     const [el, setEl] = useState(null);
     const grid = useGridRoot().grid;
@@ -41,20 +41,27 @@ export function CellEditor({ cell }) {
                     : Object.keys(editValidation).length >= 1) {
                     return;
                 }
-                handleNavigationKeys({
-                    ctrlKey: false,
-                    metaKey: false,
-                    key: "ArrowDown",
-                    preventDefault: () => { },
-                    stopPropagation: () => { },
-                }, {
-                    vp: grid.state.viewport.get(),
+                handleNavigation({
+                    event: {
+                        key: "ArrowDown",
+                        ctrlKey: false,
+                        metaKey: false,
+                        preventDefault: () => { },
+                        stopPropagation: () => { },
+                    },
+                    topCount: grid.state.rowDataStore.rowTopCount.get(),
+                    centerCount: grid.state.rowDataStore.rowCenterCount.get(),
+                    isRowDetailExpanded: (r) => {
+                        const row = grid.api.rowByIndex(r);
+                        if (!row)
+                            return false;
+                        return grid.api.rowDetailIsExpanded(row);
+                    },
+                    viewport: grid.state.viewport.get(),
                     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(),
+                    gridId: grid.state.gridId.get(),
                     getRootCell: grid.api.cellRoot,
                     rtl: grid.state.rtl.get(),
                     scrollIntoView: grid.api.scrollIntoView,

package/dist/cells/cell-spacer.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useGridRoot } from "../context.js";
+import { useRowMeta } from "../rows/row/context.js";
 export function CellSpacePinStart({ xPositions: x }) {
+    const { layout, colBounds } = useRowMeta();
     const ctx = useGridRoot().grid;
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = x[bounds.colCenterStart] - x[bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
-    if (meta.columnVisibleStartCount === 0)
+    if (meta.columnVisibleStartCount === 0 || layout.kind === "full-width")
         return null;
+    const colOffset = layout.cells.findIndex((c) => !c.colPin && c.colIndex + c.colSpan - 1 >= colBounds[0] && !c.isDeadCol);
+    const offset = x[colOffset] - x[bounds.colStartEnd];
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
 export function CellSpacerPinEnd({ xPositions: x }) {
@@ -24,11 +27,13 @@ export function CellSpacerPinEnd({ xPositions: x }) {
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
 export function CellSpacerNoPin({ xPositions: x }) {
+    const { layout, colBounds } = useRowMeta();
     const ctx = useGridRoot().grid;
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = x[bounds.colCenterStart - bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
-    if (meta.columnVisibleStartCount > 0)
+    if (meta.columnVisibleStartCount > 0 || layout.kind === "full-width")
         return null;
+    const colOffset = layout.cells.findIndex((c) => c.colIndex + c.colSpan - 1 >= colBounds[0] && !c.isDeadCol);
+    const offset = x[colOffset - bounds.colStartEnd];
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }

package/dist/cells/cell.js

@@ -10,12 +10,13 @@ import { useCellStyle } from "./use-cell-style.js";
 export const Cell = forwardRef(function Cell(props, forwarded) {
     const { colBounds: [start, end], ...rowMeta } = useRowMeta();
     // This enforces our column virtualization.
-    if (props.cell.colPin == null && (props.cell.colIndex >= end || props.cell.colIndex < start)) {
+    if (props.cell.colPin == null &&
+        (props.cell.colIndex >= end || props.cell.colIndex + props.cell.colSpan - 1 < start)) {
         return null;
     }
     return _jsx(CellImpl, { ...props, ref: forwarded, ...rowMeta });
 });
-const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indeterminate, xPositions, yPositions, base, renderers, rtl, ...props }, forwarded) {
+const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indeterminate, xPositions, yPositions, base, renderers, rtl, layout: _, ...props }, forwarded) {
     const grid = useGridRoot().grid;
     const providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
     const Renderer = providedRenderer
@@ -39,5 +40,5 @@ const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indetermin
         return _jsx("div", { style: { width: sizeFromCoord(cell.colIndex, xPositions) } });
     if (!row || cell.isDeadCol)
         return null;
-    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, { xPositions: xPositions }), _jsxs("div", { ...props, ref: forwarded, role: "gridcell", "data-ln-rowindex": cell.rowIndex, "data-ln-colindex": cell.colIndex, "data-ln-colspan": cell.colSpan, "data-ln-rowspan": cell.rowSpan, "data-ln-pin": cell.colPin ?? "center", "data-ln-cell": true, "data-ln-last-top-pin": cell.rowLastPinTop, "data-ln-first-bottom-pin": cell.rowFirstPinBottom, "data-ln-last-start-pin": cell.colLastStartPin, "data-ln-first-end-pin": cell.colFirstEndPin, tabIndex: isEditing ? -1 : 0, style: style, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: selected, rowIndeterminate: indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, { xPositions: xPositions })] }));
+    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, { xPositions: xPositions }), _jsxs("div", { ...props, ref: forwarded, role: "gridcell", "data-ln-rowindex": cell.rowIndex, "data-ln-colindex": cell.colIndex, "data-ln-colspan": cell.colSpan, "data-ln-rowspan": cell.rowSpan, "data-ln-pin": cell.colPin ?? "center", "data-ln-cell": true, "data-ln-last-top-pin": cell.rowLastPinTop, "data-ln-first-bottom-pin": cell.rowFirstPinBottom, "data-ln-last-start-pin": cell.colLastStartPin, "data-ln-first-end-pin": cell.colFirstEndPin, tabIndex: isEditing ? -1 : 0, style: { ...style, ...props.style }, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: selected, rowIndeterminate: indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, { xPositions: xPositions })] }));
 }));

package/dist/context.d.ts

@@ -1,7 +1,7 @@
-import type { Grid } from "./+types";
-import type { InternalAtoms } from "./state/+types";
+import type { Grid } from "./+types.js";
+import type { InternalAtoms } from "./state/+types.js";
 export interface GridRootContext {
-    readonly ref: (el: HTMLElement | SVGElement | null) => void;
+    readonly ref: (el: HTMLElement | null) => void;
     readonly grid: Grid<any> & {
         internal: InternalAtoms;
     };

package/dist/header/use-header-cell-renderer.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useGridRoot } from "../context.js";
+// eslint-disable-next-line react-refresh/only-export-components
 function DefaultRenderer(p) {
     return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
 }

package/dist/icons/index.js

@@ -1,3 +1 @@
-export { AddIcon, AddSmallIcon, AggregateIcon, AggregationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightCurvedIcon, ArrowRightIcon, ArrowUpIcon, AutosizeIcon, BackIcon, BookmarkIcon, BooleanIcon, CalendarIcon, ChartIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Close2Icon, CloseIcon, CollapseGroupIcon, Columns2Icon, ColumnsIcon, CopyIcon, CornerRadiusIcon, CustomizeThemeIcon, CutIcon, CsvIcon, DeleteIcon, DocsIcon, DownloadIcon, Drag2Icon, DragDotsIcon, DragDotsSmallIcon, DragIcon, DuplicateIcon, EditIcon, EmailIcon, ExcelIcon, ExpandGroupIcon, ExpandIcon, Expression2Icon, ExpressionIcon, ExternalLinkIcon, File2Icon, FileIcon, FilterIcon, FolderIcon, GlobeIcon, GridViewIcon, GroupByColIcon, HamburgerIcon, HelpIcon, HiddenIcon, HistoryIcon, ImportIcon, LinkIcon, ListViewIcon, LoadingIcon, LocationIcon, ModalIcon, MoreIcon, MoreVerticalIcon, MultilineIcon, NumberIcon, PasteIcon, PieIcon, PinColumnIcon, RefreshIcon, SearchIcon, SettingsIcon, ShareIcon, SingleLineIcon, Sort2Icon, SortIcon, SpacingHIcon, SpacingIcon, StickColumnIcon, SwapIcon, TagIcon, TaskIcon, TextIcon, ThemesIcon, Tickmark2Icon, TickmarkIcon, TimeIcon, UploadIcon, UserIcon, ViewIcon,
-// eslint-disable-next-line import/extensions
- } from "@1771technologies/lytenyte-core/icons";
+export { AddIcon, AddSmallIcon, AggregateIcon, AggregationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightCurvedIcon, ArrowRightIcon, ArrowUpIcon, AutosizeIcon, BackIcon, BookmarkIcon, BooleanIcon, CalendarIcon, ChartIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Close2Icon, CloseIcon, CollapseGroupIcon, Columns2Icon, ColumnsIcon, CopyIcon, CornerRadiusIcon, CustomizeThemeIcon, CutIcon, CsvIcon, DeleteIcon, DocsIcon, DownloadIcon, Drag2Icon, DragDotsIcon, DragDotsSmallIcon, DragIcon, DuplicateIcon, EditIcon, EmailIcon, ExcelIcon, ExpandGroupIcon, ExpandIcon, Expression2Icon, ExpressionIcon, ExternalLinkIcon, File2Icon, FileIcon, FilterIcon, FolderIcon, GlobeIcon, GridViewIcon, GroupByColIcon, HamburgerIcon, HelpIcon, HiddenIcon, HistoryIcon, ImportIcon, LinkIcon, ListViewIcon, LoadingIcon, LocationIcon, ModalIcon, MoreIcon, MoreVerticalIcon, MultilineIcon, NumberIcon, PasteIcon, PieIcon, PinColumnIcon, RefreshIcon, SearchIcon, SettingsIcon, ShareIcon, SingleLineIcon, Sort2Icon, SortIcon, SpacingHIcon, SpacingIcon, StickColumnIcon, SwapIcon, TagIcon, TaskIcon, TextIcon, ThemesIcon, Tickmark2Icon, TickmarkIcon, TimeIcon, UploadIcon, UserIcon, ViewIcon, } from "@1771technologies/lytenyte-core/icons";

package/dist/root/root.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo } from "react";
-import { useEvent, useMeasure } from "@1771technologies/lytenyte-react-hooks";
+import { useEffect, useMemo, useState } from "react";
 import { RootProvider } from "../context.js";
 import { DialogDriver } from "./dialog-driver.js";
 import { PopoverDriver } from "./popover-driver.js";
@@ -33,13 +32,6 @@ export function Root({ grid, children, ...events }) {
         document.body.appendChild(invalidLicenseWatermark);
         return () => invalidLicenseWatermark.remove();
     }, []);
-    const onViewportChange = useEvent((bounds) => {
-        grid.state.viewport.set(element ?? null);
-        grid.state.viewportHeightOuter.set(bounds.height);
-        grid.state.viewportWidthOuter.set(bounds.width);
-        grid.state.viewportWidthInner.set(element?.clientWidth ?? 0);
-        grid.state.viewportHeightInner.set(element?.clientHeight ?? 0);
-    });
     // Add event listeners in the standard react way
     useEffect(() => {
         const ev = Object.entries(events).map(([onName, fn]) => {
@@ -51,53 +43,7 @@ export function Root({ grid, children, ...events }) {
         return () => ev.forEach((c) => c?.());
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [Object.values(events)]);
-    const [ref, bounds, , element] = useMeasure({
-        onChange: onViewportChange,
-    });
-    // Add css variables so that we can avoid re-renders
-    useEffect(() => {
-        return grid.state.widthTotal.watch(() => {
-            const vp = grid.state.viewport.get();
-            const width = grid.state.widthTotal.get();
-            if (!vp)
-                return;
-            vp.style.setProperty("--lng-vp-total-width", `${width}px`);
-        });
-    }, [grid]);
     const internal = grid.internal;
-    // Listen to size changes of the window
-    useLayoutEffect(() => {
-        if (!element)
-            return;
-        const obs = new ResizeObserver(() => {
-            grid.state.viewport.set(element ?? null);
-            grid.state.viewportHeightOuter.set(bounds.height);
-            grid.state.viewportWidthOuter.set(bounds.width);
-            grid.state.viewportWidthInner.set(element?.clientWidth ?? 0);
-            grid.state.viewportHeightInner.set(element?.clientHeight ?? 0);
-        });
-        obs.observe(element);
-        const controller = new AbortController();
-        element.addEventListener("scroll", () => {
-            internal.xScroll.set(Math.abs(element.scrollLeft));
-            internal.yScroll.set(element.scrollTop);
-        }, { signal: controller.signal });
-        return () => {
-            obs.disconnect();
-            controller.abort();
-        };
-    }, [
-        bounds.height,
-        bounds.width,
-        element,
-        grid.state.viewport,
-        grid.state.viewportHeightInner,
-        grid.state.viewportHeightOuter,
-        grid.state.viewportWidthInner,
-        grid.state.viewportWidthOuter,
-        internal.xScroll,
-        internal.yScroll,
-    ]);
     useEffect(() => {
         return internal.focusActive.watch(() => {
             const editActive = internal.editActivePos.get();
@@ -114,12 +60,49 @@ export function Root({ grid, children, ...events }) {
             }
         });
     }, [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, ref]);
+    }, [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,9 +1,10 @@
-import type { CellRendererFn, ColumnBase, RowNode } from "../../+types";
+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>;

package/dist/rows/row/context.js

@@ -4,6 +4,7 @@ export const RowContext = createContext({
     indeterminate: false,
     colBounds: [0, 0],
     row: null,
+    layout: null,
     xPositions: new Uint32Array(),
     yPositions: new Uint32Array(),
     base: null,

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

@@ -1,4 +1,4 @@
-import type { RowNormalRowLayout } from "../../+types.js";
+import type { RowNormalRowLayout } from "../../+types";
 import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
 export interface RowProps extends Omit<DropWrapProps, "accepted"> {
     readonly row: RowNormalRowLayout<any>;

package/dist/rows/row/row.js

@@ -11,7 +11,7 @@ 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 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 })] }) }));

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

@@ -1,6 +1,6 @@
-import type { Grid, GridAtomReadonlyUnwatchable, RowNode } from "../../+types.js";
+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: GridAtomReadonlyUnwatchable<RowNode<any> | null>, yPositions: Uint32Array): RowMetaData;
+}, row: RowLayout<any>, yPositions: Uint32Array): RowMetaData;

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 export function useRowContextValue(grid, row, yPositions) {
-    const r = row.useValue();
+    const r = row.row.useValue();
     const xPositions = grid.state.xPositions.useValue();
     const [indeterminate, setIndeterminate] = useState(false);
     const [selected, setSelected] = useState(false);
@@ -33,12 +33,13 @@ export function useRowContextValue(grid, row, yPositions) {
             indeterminate,
             colBounds,
             row: r,
+            layout: row,
             xPositions,
             yPositions,
             rtl,
             base,
             renderers,
         };
-    }, [base, colBounds, indeterminate, r, renderers, rtl, selected, xPositions, yPositions]);
+    }, [base, colBounds, indeterminate, r, renderers, row, rtl, selected, xPositions, yPositions]);
     return value;
 }

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getNearestRow, getRowIndexFromEl, SCROLL_WIDTH_VARIABLE_USE, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
+import { 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();
@@ -17,89 +16,6 @@ function RowDetailImpl({ row, rowIndex }) {
     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)
@@ -115,12 +31,13 @@ function RowDetailImpl({ row, rowIndex }) {
     }, [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",
+            pointerEvents: "none",
             position: "absolute",
             left: 0,
             width: SCROLL_WIDTH_VARIABLE_USE,
-        }, children: _jsx("div", { tabIndex: -1, "data-ln-row-detail": true, style: {
+        }, 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,

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

@@ -12,7 +12,7 @@ const RowFullWidthImpl = forwardRef(function RowFullWidth({ row: layout, space,
     const row = layout.row.useValue();
     const yPositions = grid.state.yPositions.useValue();
     const hasSpans = grid.internal.hasSpans.useValue();
-    const meta = useRowContextValue(grid, layout.row, yPositions);
+    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) }));
 });

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

@@ -45,13 +45,14 @@ export const makeCellRoot = (grid) => {
         if (status === CONTAINS_DEAD_CELLS) {
             const spec = l.lookup.get(row);
             // This cell is not covered
-            if (!spec || spec[column * 4] !== 0) {
+            if (!spec || spec[column * 4] > 0) {
                 return { kind: "cell", rowIndex: row, colIndex: column, root: null };
             }
-            const rowSpan = spec[column * 4];
-            const colSpan = spec[column * 4 + 1];
             const rowIndex = spec[column * 4 + 2];
             const colIndex = spec[column * 4 + 3];
+            const rootSpec = l.lookup.get(rowIndex);
+            const rowSpan = rootSpec[colIndex * 4];
+            const colSpan = rootSpec[colIndex * 4 + 1];
             return {
                 kind: "cell",
                 rowIndex: row,

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

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

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

@@ -1,4 +1,4 @@
-import { focusCell, getHeaderRows, handleNavigationKeys, isColumnFloatingHeader, } from "@1771technologies/lytenyte-shared";
+import { focusCell, getHeaderRows, handleNavigation, isColumnFloatingHeader, } from "@1771technologies/lytenyte-shared";
 import { clamp } from "@1771technologies/lytenyte-js-utils";
 export const makeFocusCell = (grid) => {
     return (position) => {
@@ -18,20 +18,27 @@ export const makeFocusCell = (grid) => {
             if (!key)
                 return false;
             const ds = grid.state.rowDataStore;
-            handleNavigationKeys({
-                key,
-                ctrlKey: false,
-                metaKey: false,
-                preventDefault: () => { },
-                stopPropagation: () => { },
-            }, {
-                vp,
+            handleNavigation({
+                event: {
+                    key,
+                    ctrlKey: false,
+                    metaKey: false,
+                    preventDefault: () => { },
+                    stopPropagation: () => { },
+                },
+                topCount: grid.state.rowDataStore.rowTopCount.get(),
+                centerCount: grid.state.rowDataStore.rowCenterCount.get(),
+                isRowDetailExpanded: (r) => {
+                    const row = grid.api.rowByIndex(r);
+                    if (!row)
+                        return false;
+                    return grid.api.rowDetailIsExpanded(row);
+                },
+                viewport: 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(),
+                gridId: grid.state.gridId.get(),
                 getRootCell: grid.api.cellRoot,
                 rtl: grid.state.rtl.get(),
                 scrollIntoView: grid.api.scrollIntoView,

package/dist/state/helpers/column-marker.js

@@ -35,9 +35,11 @@ export function columnHandleMarker({ columns, marker, markerEnabled, }) {
     }
     return columns;
 }
+// eslint-disable-next-line react-refresh/only-export-components
 function HeaderRenderer() {
     return (_jsx(_Fragment, { children: _jsx("div", { style: { overflow: "hidden", opacity: 0, width: "100%", height: "100%" }, children: "Marker column default" }) }));
 }
+// eslint-disable-next-line react-refresh/only-export-components
 function FloatingRenderer() {
     return _jsx(_Fragment, {});
 }

package/dist/state/helpers/get-span-callback.js

@@ -11,7 +11,7 @@ export function getSpanFn(rds, grid, visibleColumns, span) {
             return 1;
         if (typeof spanFn === "number") {
             if (span === "col") {
-                return c % spanFn === 0 ? spanFn : 1;
+                return spanFn;
             }
             else {
                 return r % spanFn === 0 ? spanFn : 1;

package/dist/state/helpers/row-layout/row-layout.js

@@ -44,31 +44,15 @@ export function makeRowLayout({ view: n, viewCache, layout, rds, columns }) {
      * BOTTOM ROW LAYOUT END
      */
     return {
-        top: top.map((t) => partition(n, t)),
-        center: center.map((t) => partition(n, t)),
-        bottom: bottom.map((t) => partition(n, t)),
+        top: top,
+        center: center,
+        bottom: bottom,
     };
 }
-const partition = (n, row) => {
-    if (row.kind === "full-width")
-        return row;
-    let found = false;
-    const cells = [
-        ...row.cells.slice(0, n.colStartEnd),
-        ...row.cells.slice(n.colCenterStart, n.colCenterEnd).map((c) => {
-            if (!found && c.isDeadCol && !c.isDeadRow)
-                return { ...c, isDeadCol: false, isDeadRow: true };
-            found = true;
-            return c;
-        }),
-        ...row.cells.slice(n.colEndStart, n.colEndEnd),
-    ];
-    return {
-        ...row,
-        cells,
-    };
-};
 function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, layout, viewCache, container, rowForIndex, }) {
+    /**
+     * TOP ROW LAYOUT START
+     */
     for (let r = rowStart; r < rowEnd; r++) {
         const status = layout.special[r];
         const computed = layout.computed[r];
@@ -84,9 +68,7 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
         const rowLastPinTop = n.rowTopEnd - 1 === r ? true : undefined;
         if (status === FULL_WIDTH) {
             const row = {
-                get id() {
-                    return node.get()?.id ?? `${r}`;
-                },
+                id: node.get()?.id ?? `${r}`,
                 rowIndex: r,
                 kind: "full-width",
                 rowPin,
@@ -165,9 +147,7 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
             });
         }
         const row = {
-            get id() {
-                return node.get()?.id ?? `${r}`;
-            },
+            id: node.get()?.id ?? `${r}`,
             rowIndex: r,
             kind: "row",
             cells: cellLayout,

package/dist/state/use-lytenyte.js

@@ -194,6 +194,7 @@ export function makeLyteNyte(p) {
         rowDataStore.rowCenterCount.$();
         rowDataStore.rowTopCount.$();
         rowDataSource();
+        rowDetailExpansions();
         rowGroupModel();
         sortModel();
         filterModel();
@@ -430,6 +431,7 @@ export function makeLyteNyte(p) {
         const topCount = rowDataStore.rowTopCount.$();
         const botCount = rowDataStore.rowBottomCount.$();
         const rowCount = rowDataStore.rowCount.$();
+        const expansions = rowDetailExpansions();
         const fullWidthPredicate = rowFullWidthPredicate().fn;
         updateFull({
             topCount,
@@ -442,7 +444,7 @@ export function makeLyteNyte(p) {
             isFullWidth: fullWidthPredicate ? getFullWidthCallback(rds, fullWidthPredicate, grid) : null,
             isRowCutoff: (r) => {
                 const row = rds.rowByIndex(r);
-                return !row || row.kind === "branch";
+                return !row || row.kind === "branch" || expansions.has(row.id);
             },
             rowScanDistance: rowScan,
             rowStart: n.rowCenterStart,