@1771technologies/lytenyte-pro 1.0.2 → 1.0.3

package/dist/+types.d.ts

@@ -81,7 +81,7 @@ export interface UseLyteNyteProps<T> {
     /**
      * The function predicate used to determine if a row should be rendered as full width.
      */
-    readonly rowFullWidthPredicate?: RowFullWidthPredicate<T>;
+    readonly rowFullWidthPredicate?: RowFullWidthPredicate<T> | null;
     /**
      * The renderer used to render the content of a full width row.
      */
@@ -402,7 +402,7 @@ export interface GridState<T> {
      *   full-width row. Full-width rows span across all columns and bypass standard cell layout.
      */
     readonly rowFullWidthPredicate: GridAtom<{
-        fn: RowFullWidthPredicate<T>;
+        fn: RowFullWidthPredicate<T> | null;
     }>;
     /**
      * The component function that renders full-width rows in the grid. This renderer is called
@@ -983,6 +983,14 @@ export interface RowCellLayout<T> {
      * Number of rows this cell spans across.
      */
     readonly rowSpan: number;
+    /**
+     * Indicates if this cell is row spanned over and will not be rendered
+     */
+    readonly isDeadRow: boolean;
+    /**
+     * Indicates if this cell is column spanned over and will not be rendered
+     */
+    readonly isDeadCol: boolean;
     /**
      * A unique identifier that can be used for rendering keys or tracking elements.
      */
@@ -2701,7 +2709,7 @@ export type FieldRowGroup<T> = number | string | FieldPath | FieldRowGroupFn<T>;
  */
 export type Field<T> = number | string | FieldPath | FieldFn<T>;
 /**
- * A function that returns a {@link ReactNode} representing the rendered content of a cell.
+ * A function that returns a ReactNode representing the rendered content of a cell.
  *
  * This function is called once per cell for the associated column. Cell renderers should be
  * optimized for performance, as slow renderers may degrade the overall responsiveness of the grid.
@@ -2984,6 +2992,18 @@ export interface GridApi<T> {
      *   This operation respects column group visibility and layout rules.
      */
     readonly columnMove: (params: ColumnMoveParams<T>) => void;
+    /**
+     * Returns the root cell for the provided row and column index. This may be:
+     *
+     * - A cell that is not covered by the row or column span of another cell, in this case the root cell
+     *   is the cell itself
+     * - A cell that is covered by the row or column span of another cell, in this case the root cell is the
+     *   spanning cell
+     * - A full width row, in this case the root cell is the row itself. Note that full width rows cannot be
+     *   spanned over, so it is not possible for a spanning cell to continue past a full width row, even if the
+     *   span amount would allow it
+     */
+    readonly cellRoot: (row: number, column: number) => PositionGridCell | PositionFullWidthRow | null;
     /**
      * Toggles the expansion state of one or more column groups.
      *   You can also pass a boolean to directly set the expansion state.
@@ -4976,7 +4996,7 @@ export type DragPlaceholderFn<T> = (
 /**
  * Parameters for rendering the placeholder.
  */
-params: DragPlaceholderParams<T>) => ReactNode;
+params: DragPlaceholderParams<T>) => HTMLElement;
 /**
  * Parameters passed when rendering the drag placeholder content.
  *

package/dist/cell-selection/cell-selection-driver.js

@@ -171,7 +171,7 @@ export function CellSelectionDriver() {
                 event.preventDefault();
             }
             if (!isDeselect && grid.state.cellSelections.get().length <= 1)
-                grid.internal.cellSelectionPivot.set(startSelection);
+                grid.internal.cellSelectionPivot.set({ ...startSelection, isUnit: true });
             grid.internal.cellSelectionIsDeselect.set(isDeselect);
             if (isAdditive) {
                 updateAdditiveCellSelection(grid, startSelection);
@@ -267,6 +267,7 @@ export function CellSelectionDriver() {
                     rowEnd: focus.rowIndex + 1,
                     columnStart: focus.colIndex,
                     columnEnd: focus.colIndex + 1,
+                    isUnit: true,
                 });
             }
         });

package/dist/cell-selection/cell-style-row.d.ts

@@ -1,6 +1,6 @@
-import type { DataRect } from "../+types";
+import type { DataRectSplit } from "./split-cell-selection-rect";
 export declare function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }: {
-    rect: DataRect;
+    rect: DataRectSplit;
     isRowPinnedTop?: boolean;
     isDeselect?: boolean;
     isRowPinnedBottom?: boolean;

package/dist/cell-selection/cell-style-row.js

@@ -80,5 +80,5 @@ export function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBott
         xPositions,
         yPositions,
     ]);
-    return (_jsx("div", { style: style, "data-ln-cell-selection-rect": true, "data-ln-cell-selection-is-deselect": isDeselect, "data-ln-cell-selection-is-pivot": isPivot }));
+    return (_jsx("div", { style: style, "data-ln-cell-selection-rect": true, "data-ln-cell-selection-is-deselect": isDeselect, "data-ln-cell-selection-is-pivot": isPivot, "data-ln-cell-selection-is-unit": rect.isUnit, "data-ln-cell-selection-border-top": rect.borderTop, "data-ln-cell-selection-border-bottom": rect.borderBottom, "data-ln-cell-selection-border-start": rect.borderStart, "data-ln-cell-selection-border-end": rect.borderEnd }));
 }

package/dist/cell-selection/get-root-cell.js

@@ -1,86 +1,6 @@
-import { getSpanFn } from "../state/helpers/get-span-callback.js";
-import { getFullWidthCallback } from "../state/helpers/get-full-width-callback.js";
-import { applyLayoutUpdate } from "@1771technologies/lytenyte-shared";
 export const getRootCell = (grid, rowIndex, columnIndex) => {
-    const rds = grid.state.rowDataSource.get();
-    const meta = grid.state.columnMeta.get();
-    const columns = meta.columnsVisible;
-    const rowScan = grid.state.rowScanDistance.get();
-    const colScan = grid.state.colScanDistance.get();
-    const fullWidth = grid.state.rowFullWidthPredicate.get().fn;
-    const layoutMap = new Map();
-    const topCount = grid.state.rowDataStore.rowTopCount.get();
-    const botCount = grid.state.rowDataStore.rowBottomCount.get();
-    const rowCenterCount = grid.state.rowDataStore.rowCenterCount.get();
-    const isTop = rowIndex < topCount;
-    const isBot = rowIndex >= topCount + rowCenterCount;
-    const isStart = columns[columnIndex].pin === "start";
-    const isEnd = columns[columnIndex].pin === "end";
-    applyLayoutUpdate({
-        computeColSpan: getSpanFn(rds, grid, columns, "col"),
-        computeRowSpan: getSpanFn(rds, grid, columns, "row"),
-        colScanDistance: colScan,
-        rowScanDistance: rowScan,
-        invalidated: true,
-        isFullWidth: getFullWidthCallback(rds, fullWidth, grid),
-        isRowCutoff: (r) => {
-            const row = rds.rowByIndex(r);
-            return !row || row.kind === "branch";
-        },
-        layoutMap,
-        nextLayout: {
-            rowTopStart: 0,
-            rowTopEnd: topCount,
-            rowBotStart: topCount + rowCenterCount,
-            rowBotEnd: topCount + rowCenterCount + botCount,
-            rowCenterStart: isTop || isBot ? 0 : rowIndex,
-            rowCenterEnd: isTop || isBot ? 0 : rowIndex + 1,
-            rowCenterLast: topCount + rowCenterCount,
-            colStartStart: 0,
-            colStartEnd: meta.columnVisibleStartCount,
-            colEndStart: meta.columnVisibleStartCount + meta.columnVisibleCenterCount,
-            colEndEnd: columns.length,
-            colCenterStart: isStart || isEnd ? 0 : columnIndex,
-            colCenterEnd: isStart || isEnd ? 0 : columnIndex + 1,
-            colCenterLast: meta.columnVisibleStartCount + meta.columnVisibleCenterCount,
-        },
-        prevLayout: {
-            colCenterEnd: -1,
-            colCenterLast: -1,
-            colCenterStart: -1,
-            colEndEnd: -1,
-            colEndStart: -1,
-            colStartEnd: -1,
-            colStartStart: -1,
-            rowBotEnd: -1,
-            rowBotStart: -1,
-            rowCenterEnd: -1,
-            rowCenterLast: -1,
-            rowCenterStart: -1,
-            rowTopEnd: -1,
-            rowTopStart: -1,
-        },
-    });
-    const row = layoutMap.get(rowIndex);
-    const cell = row?.get(columnIndex);
-    if (!cell)
+    const c = grid.api.cellRoot(rowIndex, columnIndex);
+    if (!c || c.kind === "full-width")
         return null;
-    if (cell?.length === 2)
-        return {
-            colIndex: columnIndex,
-            colSpan: 1,
-            rowIndex: rowIndex,
-            rowSpan: 1,
-        };
-    // Otherwise this is a spanning cell hence we need to find the spans layout.
-    const root = layoutMap.get(cell[1]);
-    const rootCell = root?.get(cell[2]);
-    if (!rootCell)
-        return null;
-    return {
-        colIndex: cell[2],
-        rowIndex: cell[1],
-        rowSpan: rootCell[0],
-        colSpan: rootCell[1],
-    };
+    return c.root;
 };

package/dist/cell-selection/index.d.ts

@@ -4,7 +4,6 @@ export { boundSelectionRect } from "./bound-selection-rect.js";
 export { fullWidthStartEndIndex } from "./full-width-start-end-index.js";
 export { areRectsEqual } from "./are-rects-equal.js";
 export { deselectRectRange } from "./deselect-rect-range.js";
-export { isOverlappingRect } from "./is-overlapping-rect.js";
 export { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
 export { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
 export { expandCellSelectionDown } from "./expand-cell-selection-down.js";

package/dist/cell-selection/index.js

@@ -4,7 +4,6 @@ export { boundSelectionRect } from "./bound-selection-rect.js";
 export { fullWidthStartEndIndex } from "./full-width-start-end-index.js";
 export { areRectsEqual } from "./are-rects-equal.js";
 export { deselectRectRange } from "./deselect-rect-range.js";
-export { isOverlappingRect } from "./is-overlapping-rect.js";
 export { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
 export { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
 export { expandCellSelectionDown } from "./expand-cell-selection-down.js";

package/dist/cell-selection/split-cell-selection-rect.d.ts

@@ -6,6 +6,13 @@ interface SplitCellSelectionRectArgs {
     readonly rowTopCount: number;
     readonly rowCenterCount: number;
 }
+export interface DataRectSplit extends DataRect {
+    readonly isUnit: boolean;
+    readonly borderTop?: boolean;
+    readonly borderBottom?: boolean;
+    readonly borderStart?: boolean;
+    readonly borderEnd?: boolean;
+}
 /**
  * Splits a cell selection rectangle into multiple rectangles when it crosses specified boundary regions.
  * This is useful for handling selections that span across different grid sections (e.g., fixed columns/rows,
@@ -35,5 +42,5 @@ interface SplitCellSelectionRectArgs {
  * @param rowCenterCount - Number of rows in the center (usually scrollable) section
  * @returns An array of split rectangles. If no splits were necessary, returns an array with just the original rectangle
  */
-export declare function splitCellSelectionRect({ rect, colStartCount, colCenterCount, rowTopCount, rowCenterCount, }: SplitCellSelectionRectArgs): DataRect[];
+export declare function splitCellSelectionRect({ rect, colStartCount, colCenterCount, rowTopCount, rowCenterCount, }: SplitCellSelectionRectArgs): DataRectSplit[];
 export {};

package/dist/cell-selection/split-cell-selection-rect.js

@@ -31,6 +31,7 @@ export function splitCellSelectionRect({ rect, colStartCount, colCenterCount, ro
     // Calculate the boundary positions for columns
     const colStartBound = colStartCount;
     const colEndBound = colStartCount + colCenterCount;
+    const isUnit = rect.rowEnd - rect.rowStart === 1 && rect.columnEnd - rect.columnStart === 1;
     const colSplits = [];
     // Handle column splits first
     // Case 1: Selection starts before the fixed columns and extends into the scrollable area
@@ -38,6 +39,7 @@ export function splitCellSelectionRect({ rect, colStartCount, colCenterCount, ro
         const startSplit = {
             ...rect,
             columnEnd: colStartBound,
+            isUnit,
         };
         colSplits.push(startSplit);
         rect = { ...rect, columnStart: colStartBound };
@@ -47,12 +49,13 @@ export function splitCellSelectionRect({ rect, colStartCount, colCenterCount, ro
         const endSplit = {
             ...rect,
             columnStart: colEndBound,
+            isUnit,
         };
         rect = { ...rect, columnEnd: colEndBound };
         colSplits.push(endSplit);
     }
     // Add the remaining rectangle after column splits
-    colSplits.push(rect);
+    colSplits.push({ ...rect, isUnit });
     // Calculate the boundary positions for rows
     const topBound = rowTopCount;
     const bottomBound = rowTopCount + rowCenterCount;
@@ -61,19 +64,25 @@ export function splitCellSelectionRect({ rect, colStartCount, colCenterCount, ro
     for (let split of colSplits) {
         // Case 1: Selection spans from top section into center section
         if (split.rowStart < topBound && split.rowEnd > topBound) {
-            const topSplit = { ...split, rowEnd: topBound };
+            const topSplit = { ...split, rowEnd: topBound, isUnit };
             split = { ...split, rowStart: topBound };
             rowSplits.push(topSplit);
         }
         // Case 2: Selection spans from center section into bottom section
         if (split.rowStart < bottomBound && split.rowEnd > bottomBound) {
-            const bottomSplit = { ...split, rowStart: bottomBound };
+            const bottomSplit = {
+                ...split,
+                rowStart: bottomBound,
+                isUnit,
+            };
             split = { ...split, rowEnd: bottomBound };
             rowSplits.push(bottomSplit);
         }
         rowSplits.push(split);
     }
-    return rowSplits.sort((l, r) => {
+    return rowSplits
+        .map((c) => ({ ...c, borderTop: true, borderBottom: true, borderEnd: true, borderStart: true }))
+        .sort((l, r) => {
         return l.rowStart - r.rowStart || l.columnStart - r.columnStart;
     });
 }

package/dist/cell-selection/split-on-pivot.d.ts

@@ -0,0 +1,3 @@
+import type { DataRect } from "../+types";
+import type { DataRectSplit } from "./split-cell-selection-rect";
+export declare function splitOnPivot(rect: DataRectSplit, pivot: DataRect): DataRectSplit[] | null;

package/dist/cell-selection/split-on-pivot.js

@@ -0,0 +1,50 @@
+import { areRectsEqual } from "./are-rects-equal";
+export function splitOnPivot(rect, pivot) {
+    if (rect.isUnit || areRectsEqual(rect, pivot))
+        return null;
+    const splits = [];
+    const isAfter = pivot.columnStart > rect.columnStart;
+    const isSame = pivot.columnStart === rect.columnStart && pivot.columnEnd === rect.columnEnd;
+    // The pivot is on the right side of the rect. So we split by end
+    if (isAfter) {
+        const split = { ...rect, columnEnd: rect.columnEnd - 1, borderEnd: false };
+        if (split.columnStart !== split.columnEnd)
+            splits.push(split);
+    }
+    else {
+        const split = {
+            ...rect,
+            columnStart: rect.columnStart + 1,
+            borderStart: false,
+        };
+        if (split.columnStart !== split.columnEnd)
+            splits.push(split);
+    }
+    if (pivot.rowStart > rect.rowStart) {
+        const split = {
+            ...rect,
+            columnStart: pivot.columnStart,
+            columnEnd: pivot.columnEnd,
+            rowEnd: rect.rowEnd - 1,
+            borderBottom: false,
+            borderStart: !isAfter,
+            borderEnd: isSame || isAfter,
+        };
+        if (split.rowStart !== split.rowEnd)
+            splits.push(split);
+    }
+    else {
+        const split = {
+            ...rect,
+            columnStart: pivot.columnStart,
+            columnEnd: pivot.columnEnd,
+            rowStart: rect.rowStart + 1,
+            borderTop: false,
+            borderStart: !isAfter,
+            borderEnd: isSame || isAfter,
+        };
+        if (split.rowStart !== split.rowEnd)
+            splits.push(split);
+    }
+    return splits;
+}

package/dist/cells/cell-editor.js

@@ -55,7 +55,7 @@ export function CellEditor({ cell }) {
                     columnCount: grid.state.columnMeta.get().columnsVisible.length,
                     focusActive: grid.internal.focusActive,
                     id: grid.state.gridId.get(),
-                    layout: grid.internal.layout.get(),
+                    getRootCell: grid.api.cellRoot,
                     rtl: grid.state.rtl.get(),
                     scrollIntoView: grid.api.scrollIntoView,
                 });

package/dist/cells/cell-spacer.d.ts

@@ -0,0 +1,3 @@
+export declare function CellSpacePinStart(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerPinEnd(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerNoPin(): import("react/jsx-runtime").JSX.Element | null;

package/dist/cells/cell-spacer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGridRoot } from "../context";
+export function CellSpacePinStart() {
+    const ctx = useGridRoot().grid;
+    const xPos = ctx.state.xPositions.useValue();
+    const bounds = ctx.state.viewBounds.useValue();
+    const offset = xPos[bounds.colCenterStart] - xPos[bounds.colStartEnd];
+    const meta = ctx.state.columnMeta.useValue();
+    if (meta.columnVisibleStartCount === 0)
+        return null;
+    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
+}
+export function CellSpacerPinEnd() {
+    const ctx = useGridRoot().grid;
+    const xPos = ctx.state.xPositions.useValue();
+    const bounds = ctx.state.viewBounds.useValue();
+    const startOffset = xPos[bounds.colCenterEnd];
+    let offset = xPos[bounds.colEndStart] - startOffset;
+    const viewWidth = ctx.state.viewportWidthInner.useValue();
+    if (xPos.at(-1) < viewWidth) {
+        offset = viewWidth - xPos.at(-1);
+    }
+    const meta = ctx.state.columnMeta.useValue();
+    if (meta.columnVisibleEndCount === 0)
+        return null;
+    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
+}
+export function CellSpacerNoPin() {
+    const ctx = useGridRoot().grid;
+    const xPos = ctx.state.xPositions.useValue();
+    const bounds = ctx.state.viewBounds.useValue();
+    const offset = xPos[bounds.colCenterStart - bounds.colStartEnd];
+    const meta = ctx.state.columnMeta.useValue();
+    if (meta.columnVisibleStartCount > 0)
+        return null;
+    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
+}

package/dist/cells/cell.d.ts

@@ -1,7 +1,5 @@
-import { type ReactNode } from "react";
-import type { CellRendererFn, RowCellLayout } from "../+types";
+import type { RowCellLayout } from "../+types";
 export interface CellProps {
     readonly cell: RowCellLayout<any>;
-    readonly children?: ReactNode | CellRendererFn<any>;
 }
 export declare const Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cells/cell.js

@@ -1,19 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
 import { useGridRoot } from "../context";
-import { CellReact } from "@1771technologies/lytenyte-shared";
+import { CellReact, sizeFromCoord } from "@1771technologies/lytenyte-shared";
 import { CellDefault } from "./cell-default";
 import { CellEditor } from "./cell-editor";
 import { useRowMeta } from "../rows/row/context";
-const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarded) {
+import { CellSpacePinStart, CellSpacerPinEnd } from "./cell-spacer";
+export const Cell = forwardRef(function Cell({ cell, ...props }, forwarded) {
     const grid = useGridRoot().grid;
     const cx = grid.state;
-    grid.internal.refreshKey.useValue();
     const base = grid.state.columnBase.useValue();
     const row = cell.row.useValue();
     const renderers = cx.cellRenderers.useValue();
-    const providedRenderer = children ?? cell.column.cellRenderer ?? base.cellRenderer;
+    const providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
     const Renderer = providedRenderer
         ? typeof providedRenderer === "string"
             ? (renderers[providedRenderer] ?? CellDefault)
@@ -30,9 +29,12 @@ const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarde
                 pos.rowIndex < cell.rowIndex + cell.rowSpan);
         });
     }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
+    const xPositions = cx.xPositions.useValue();
+    const yPositions = cx.yPositions.useValue();
     const rowMeta = useRowMeta();
-    if (!row)
+    if (cell.isDeadRow)
+        return _jsx("div", { style: { width: sizeFromCoord(cell.colIndex, xPositions) } });
+    if (!row || cell.isDeadCol)
         return null;
-    return (_jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, viewportWidth: cx.viewportWidthInner.useValue(), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: cx.xPositions.useValue(), yPosition: cx.yPositions.useValue(), children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(_Fragment, { children: typeof Renderer === "function" ? (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin })) : (Renderer) }))] }));
+    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, {}), _jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: xPositions, yPosition: yPositions, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, {})] }));
 });
-export const Cell = fastDeepMemo(CellImpl);

package/dist/column-manager/branch.js

@@ -8,7 +8,7 @@ import { useColumnsFromContext } from "./use-columns-from-context";
 export const Branch = forwardRef(function Branch({ item, label, labelWrapClassName, labelWrapStyle, ...props }, forwarded) {
     const grid = useGrid();
     const id = grid.state.gridId.useValue();
-    const accepted = `${id}/columns`;
+    const accepted = `${id}-columns`;
     const base = grid.state.columnBase.useValue();
     const columns = useColumnsFromContext(item);
     const isVisible = useMemo(() => {

package/dist/column-manager/leaf.js

@@ -11,7 +11,7 @@ export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, fo
     }, [item]);
     const grid = useGrid();
     const id = grid.state.gridId.useValue();
-    const accepted = `${id}/columns`;
+    const accepted = `${id}-columns`;
     const base = grid.state.columnBase.useValue();
     const columns = useColumnsFromContext(item);
     const isVisible = useMemo(() => {

package/dist/column-manager/move-handle.d.ts

@@ -1,12 +1,5 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
-import { type ReactNode } from "react";
-import type { Column } from "../+types";
-import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
 export interface MoveHandleProps {
     readonly as?: SlotComponent;
-    readonly placeholder?: (p: {
-        columns: Column<any>[];
-        item: PathBranch<Column<any>> | PathLeaf<Column<any>>;
-    }) => ReactNode;
 }
 export declare const MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/column-manager/move-handle.js

@@ -5,7 +5,7 @@ import { forwardRef, useMemo } from "react";
 import { useColumnItemContext } from "./context";
 import { useColumnsFromContext } from "./use-columns-from-context";
 import { useGrid } from "../grid-provider/use-grid";
-export const MoveHandle = forwardRef(function MoveHandle({ as, placeholder: Placeholder, ...props }, forwarded) {
+export const MoveHandle = forwardRef(function MoveHandle({ as, ...props }, forwarded) {
     const item = useColumnItemContext().item;
     const grid = useGrid();
     const columns = useColumnsFromContext(item);
@@ -15,9 +15,19 @@ export const MoveHandle = forwardRef(function MoveHandle({ as, placeholder: Plac
     }, [base.uiHints?.movable, columns]);
     const { dragProps: { ref, ...otherProps }, } = useDraggable({
         getItems: () => {
+            const gridId = grid.state.gridId.get();
+            const isGroupable = columns.length === 1 && (columns[0].uiHints?.rowGroupable ?? base.uiHints?.rowGroupable);
+            if (isGroupable) {
+                return {
+                    siteLocalData: {
+                        [`${gridId}-columns`]: columns,
+                        [`${gridId}-group`]: columns[0].id,
+                    },
+                };
+            }
             return {
                 siteLocalData: {
-                    [`${grid.state.gridId.get()}/columns`]: columns,
+                    [`${gridId}-columns`]: columns,
                 },
             };
         },
@@ -39,10 +49,17 @@ export const MoveHandle = forwardRef(function MoveHandle({ as, placeholder: Plac
                 before: isBefore,
             });
         },
-        placeholder: () => {
-            if (Placeholder)
-                return _jsx(Placeholder, { columns: columns, item: item });
-            return (_jsx("div", { children: item.kind === "branch" ? item.data.joinPath.at(-1) : (item.data.name ?? item.data.id) }));
+        placeholder: (_, el) => {
+            let current = el;
+            while (current &&
+                !current.getAttribute("data-ln-column-manager-leaf") &&
+                !current.getAttribute("data-ln-tree-branch")) {
+                current = current.parentElement;
+            }
+            if (current)
+                return current;
+            else
+                return el;
         },
     });
     const combined = useCombinedRefs(ref, forwarded);

package/dist/filter-tree/leaf.js

@@ -6,7 +6,9 @@ import { useTreeItem } from "./hooks/use-tree-item";
 export const Leaf = forwardRef(function Leaf({ item, ...props }, forwarded) {
     const value = useTreeItem(item);
     return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeLeaf, { ...props, itemId: item.leaf.data.id, ref: forwarded, ...item.attrs, style: { ...props.style, ...item.attrs.style }, onClick: () => value.onCheckChange(), onKeyDown: (ev) => {
-                if (ev.key === " ")
+                if (ev.key === " ") {
+                    ev.preventDefault();
                     value.onCheckChange();
+                }
             } }) }));
 });

package/dist/grid-box/+types.d.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import type { DropEventParams } from "../+types.js";
 export interface GridBoxItem<T = any> {
     readonly id: string;
@@ -6,10 +5,11 @@ export interface GridBoxItem<T = any> {
     readonly data: T;
     readonly dragData: Record<string, any>;
     readonly draggable: boolean;
-    readonly dragPlaceholder?: () => ReactNode;
+    readonly dragPlaceholder?: (el: HTMLElement) => HTMLElement;
     readonly onDrop: (p: DropEventParams) => void;
     readonly onAction: (el: HTMLElement) => void;
     readonly onDelete: (el: HTMLElement) => void;
     readonly index: number;
     readonly source: string;
+    readonly active?: boolean;
 }

package/dist/grid-box/item.js

@@ -12,7 +12,7 @@ export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName
                 siteLocalData: item.dragData,
             };
         },
-        placeholder: item.dragPlaceholder,
+        placeholder: item.dragPlaceholder ? (_, el) => item.dragPlaceholder(el) : undefined,
     });
     const ref = useCombinedRefs(forwarded, dragProps.ref);
     const extraProps = item.draggable ? { ...dragProps, ref } : { ref: forwarded };
@@ -31,7 +31,7 @@ export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName
         ],
         slot: itemAs ?? _jsx("div", {}),
     });
-    return (_jsx(DropWrap, { ...props, onEnter: (e) => {
+    return (_jsx(DropWrap, { ...props, active: item.active, onEnter: (e) => {
             const data = dragState.active.get();
             const thisSource = e.getAttribute("data-ln-source");
             const dragSource = data?.getAttribute("data-ln-source");
@@ -54,7 +54,7 @@ export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName
         }, onLeave: (el) => {
             el.removeAttribute("data-ln-is-before");
             el.removeAttribute("data-ln-is-after");
-        }, "data-ln-source": item.source, "data-ln-index": item.index, accepted: accepted, onDrop: (e) => {
+        }, "data-ln-source": item.source, "data-ln-index": item.index, accepted: item.active === false ? [] : accepted, onDrop: (e) => {
             const el = e.dropElement;
             el.removeAttribute("data-ln-is-before");
             el.removeAttribute("data-ln-is-after");

package/dist/grid-box/use-aggregation-box-items.js

@@ -7,7 +7,6 @@ export function useAggregationBoxItems({ grid, orientation }) {
         const items = Object.entries(model).map(([id, agg], i) => {
             const column = grid.api.columnById(id);
             const name = column?.name ?? column?.id ?? id;
-            const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
             return {
                 draggable: false,
                 id,
@@ -15,7 +14,7 @@ export function useAggregationBoxItems({ grid, orientation }) {
                 source: "aggregation",
                 data: { id, agg },
                 dragData: {},
-                label: `${name} ${fn}`,
+                label: name,
                 onAction: () => { },
                 onDelete: () => {
                     grid.state.aggModel.set((prev) => {

package/dist/grid-box/use-column-box-items.d.ts

@@ -1,4 +1,3 @@
-import { type ReactNode } from "react";
 import type { Column, DropEventParams, Grid } from "../+types.js";
 import type { GridBoxItem } from "./+types.js";
 export interface OnDropParams<T> {
@@ -18,13 +17,13 @@ export interface UseColumnBoxItemArgs<T> {
     readonly orientation?: "horizontal" | "vertical";
     readonly draggable?: boolean;
     readonly itemFilter?: (c: Column<T>) => boolean;
+    readonly placeholder?: (el: HTMLElement) => HTMLElement;
     readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
     readonly onDrop?: (p: OnDropParams<T>) => void;
     readonly onAction?: (c: OnActionParams<T>) => void;
     readonly onDelete?: (c: OnActionParams<T>) => void;
-    readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
 }
-export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, dragPlaceholder, itemFilter, }: UseColumnBoxItemArgs<T>): {
+export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, itemFilter, placeholder, }: UseColumnBoxItemArgs<T>): {
     rootProps: {
         accepted: string[];
         orientation: "horizontal" | "vertical" | undefined;