@1771technologies/lytenyte-pro 1.0.0-beta.9 → 1.0.0

package/dist/filter-tree/root.js

@@ -4,7 +4,7 @@ import { GridProvider } from "../grid-provider/provider";
 import { TreeRoot } from "../tree-view/root";
 import { FilterTreeContext } from "./context";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, slotError, slotLoading, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }) {
+export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, errorAs, loadingAs, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }) {
     const value = useMemo(() => {
         return {
             filter: filterIn,
@@ -16,15 +16,15 @@ export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, e
         };
     }, [applyChangesImmediately, columnId, filterIn, filterInChange, items, pivotMode]);
     const loadingSlot = useSlot({
-        slot: slotLoading ?? _jsx("div", { children: "Loading..." }),
+        slot: loadingAs ?? _jsx("div", { children: "Loading..." }),
     });
     const errorSlot = useSlot({
-        slot: slotError ?? _jsx("div", { children: "Error Occurred Fetching" }),
+        slot: errorAs ?? _jsx("div", { children: "Error Occurred Fetching" }),
         state: { error, refetch: fetchItems },
     });
     if (loading)
         return loadingSlot;
     if (error)
         return errorSlot;
-    return (_jsx(GridProvider, { value: grid, children: _jsx(FilterTreeContext.Provider, { value: value, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 200, transitionExit: 200, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
+    return (_jsx(GridProvider, { value: grid, children: _jsx(FilterTreeContext.Provider, { value: value, children: _jsx(TreeRoot, { selectMode: "none", transitionEnter: 0, transitionExit: 0, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
 }

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

@@ -8,6 +8,8 @@ export interface GridBoxItem<T = any> {
     readonly draggable: boolean;
     readonly dragPlaceholder?: () => ReactNode;
     readonly onDrop: (p: DropEventParams) => void;
-    readonly onAction: () => void;
-    readonly onDelete: () => void;
+    readonly onAction: (el: HTMLElement) => void;
+    readonly onDelete: (el: HTMLElement) => void;
+    readonly index: number;
+    readonly source: string;
 }

package/dist/grid-box/item.d.ts

@@ -1,7 +1,10 @@
+import { type CSSProperties } from "react";
 import type { GridBoxItem } from "./+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface GridBoxItemProps {
     readonly item: GridBoxItem;
-    readonly itemWrap?: SlotComponent;
+    readonly itemAs?: SlotComponent;
+    readonly itemClassName?: string;
+    readonly itemStyle?: CSSProperties;
 }
 export declare const BoxItem: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & GridBoxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/grid-box/item.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Item } from "../listbox/item";
-import { DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
+import { dragState, DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
 import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
 import { useGridBoxContext } from "./context";
-export const BoxItem = forwardRef(function BoxItem({ item, itemWrap, ...props }, forwarded) {
+export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName, itemStyle, children, ...props }, forwarded) {
     const { accepted } = useGridBoxContext();
     const { dragProps } = useDraggable({
         getItems: () => {
@@ -19,15 +19,45 @@ export const BoxItem = forwardRef(function BoxItem({ item, itemWrap, ...props },
     const renderer = useSlot({
         props: [
             {
-                children: (_jsx(Item, { ...props, ...extraProps, onKeyDown: (ev) => {
-                        if (ev.key === " ")
-                            item.onAction?.();
+                children: (_jsx(Item, { ...extraProps, onKeyDown: (ev) => {
+                        if (ev.key === " ") {
+                            item.onAction?.(ev.currentTarget);
+                            ev.preventDefault();
+                        }
                         if (ev.key === "Backspace" || ev.key === "Delete")
-                            item.onDelete?.();
-                    }, onClick: () => item.onAction() })),
+                            item.onDelete?.(ev.currentTarget);
+                    }, onClick: (ev) => item.onAction(ev.currentTarget), className: itemClassName, style: itemStyle, "data-ln-source": item.source, "data-ln-index": item.index, children: children })),
             },
         ],
-        slot: itemWrap ?? _jsx("div", {}),
+        slot: itemAs ?? _jsx("div", {}),
     });
-    return _jsx(DropWrap, { accepted: accepted, onDrop: item.onDrop, as: renderer });
+    return (_jsx(DropWrap, { ...props, onEnter: (e) => {
+            const data = dragState.active.get();
+            const thisSource = e.getAttribute("data-ln-source");
+            const dragSource = data?.getAttribute("data-ln-source");
+            if (!data)
+                return;
+            if (thisSource !== dragSource) {
+                e.setAttribute("data-ln-is-after", "true");
+                return;
+            }
+            const overIndex = Number.parseInt(e.getAttribute("data-ln-index"));
+            const dragIndex = Number.parseInt(data.getAttribute("data-ln-index"));
+            if (Number.isNaN(dragIndex) || Number.isNaN(overIndex) || overIndex === dragIndex)
+                return;
+            if (overIndex < dragIndex) {
+                e.setAttribute("data-ln-is-before", "true");
+            }
+            else {
+                e.setAttribute("data-ln-is-after", "true");
+            }
+        }, 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) => {
+            const el = e.dropElement;
+            el.removeAttribute("data-ln-is-before");
+            el.removeAttribute("data-ln-is-after");
+            item.onDrop(e);
+        }, as: renderer }));
 });

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

@@ -4,13 +4,15 @@ export function useAggregationBoxItems({ grid, orientation }) {
     const model = grid.state.aggModel.useValue();
     const gridId = grid.state.gridId.useValue();
     const items = useMemo(() => {
-        const items = Object.entries(model).map(([id, agg]) => {
+        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,
+                index: i,
+                source: "aggregation",
                 data: { id, agg },
                 dragData: {},
                 label: `${name} ${fn}`,

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

@@ -9,6 +9,10 @@ export interface OnDropParams<T> {
 export interface OnRootDropParams<T> {
     readonly column: Column<T>;
 }
+export interface OnActionParams<T> {
+    readonly column: Column<T>;
+    readonly el: HTMLElement;
+}
 export interface UseColumnBoxItemArgs<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";
@@ -16,8 +20,8 @@ export interface UseColumnBoxItemArgs<T> {
     readonly itemFilter?: (c: Column<T>) => boolean;
     readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
     readonly onDrop?: (p: OnDropParams<T>) => void;
-    readonly onAction?: (c: Column<T>) => void;
-    readonly onDelete?: (c: Column<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>): {

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

@@ -12,7 +12,7 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
             .filter((c) => {
             return itemFilter ? itemFilter(c) : true;
         })
-            .map((c) => {
+            .map((c, i) => {
             const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
             const canAgg = Boolean(c.uiHints?.aggDefault ??
                 c.uiHints?.aggDefault?.length ??
@@ -28,23 +28,22 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
             return {
                 label: c.name ?? c.id,
                 id: c.id,
+                index: i,
+                source: "columns",
                 draggable,
                 data: c,
                 dragData: data,
                 dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
-                onAction: () => onAction?.(c),
-                onDelete: () => onDelete?.(c),
+                onAction: (el) => onAction?.({ column: c, el }),
+                onDelete: (el) => onDelete?.({ column: c, el }),
                 onDrop: (p) => {
-                    const target = c;
                     const src = p.state.siteLocalData?.[columnId];
-                    const isRtl = grid.state.rtl.get();
-                    let isBefore;
-                    if (orientation === "horizontal") {
-                        isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
-                    }
-                    else {
-                        isBefore = p.moveState.topHalf;
-                    }
+                    const target = c;
+                    const dragIndex = columns.findIndex((x) => x.id === src.id);
+                    const overIndex = columns.findIndex((x) => x.id === c.id);
+                    const isBefore = overIndex < dragIndex;
+                    if (overIndex === dragIndex)
+                        return;
                     onDrop?.({ src, target, isBefore });
                 },
             };
@@ -56,13 +55,11 @@ export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction
         columns,
         dragPlaceholder,
         draggable,
-        grid.state.rtl,
         gridId,
         itemFilter,
         onAction,
         onDelete,
         onDrop,
-        orientation,
     ]);
     const onRootDropEv = useEvent((p) => {
         const columnId = `${gridId}-column`;

package/dist/grid-box/use-row-group-box-items.d.ts

@@ -4,10 +4,10 @@ import type { GridBoxItem } from "./+types.js";
 export interface UseRowGroupBoxItems<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";
-    readonly placeholder?: (c: RowGroupModelItem<T>) => ReactNode;
+    readonly dragPlaceholder?: (c: RowGroupModelItem<T>) => ReactNode;
     readonly hideColumnOnGroup?: boolean;
 }
-export declare function useRowGroupBoxItems<T>({ grid, orientation, placeholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+export declare function useRowGroupBoxItems<T>({ grid, orientation, dragPlaceholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
     rootProps: {
         accepted: string[];
         onRootDrop: (p: DropEventParams) => void;

package/dist/grid-box/use-row-group-box-items.js

@@ -1,26 +1,23 @@
 import { useMemo } from "react";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumnOnGroup = true, }) {
+export function useRowGroupBoxItems({ grid, orientation, dragPlaceholder, hideColumnOnGroup = true, }) {
     const rowGroupModel = grid.state.rowGroupModel.useValue();
     const gridId = grid.state.gridId.useValue();
     const items = useMemo(() => {
         const groupId = `${gridId}-group`;
         return rowGroupModel
-            .map((c) => {
+            .map((c, i) => {
             const onDelete = () => {
                 grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
             };
             const onDrop = (p) => {
                 const target = c;
                 const src = p.state.siteLocalData?.[groupId];
-                const isRtl = grid.state.rtl.get();
-                let isBefore;
-                if (orientation === "horizontal") {
-                    isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
-                }
-                else {
-                    isBefore = p.moveState.topHalf;
-                }
+                const overIndex = rowGroupModel.findIndex((x) => x === c);
+                const dragIndex = rowGroupModel.findIndex((x) => x === src);
+                const isBefore = overIndex < dragIndex;
+                if (overIndex === dragIndex)
+                    return;
                 const srcIndex = rowGroupModel.findIndex((x) => {
                     if (typeof src !== typeof x)
                         return;
@@ -58,12 +55,14 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
                     dragData: { [groupId]: c },
                     data: c,
                     draggable: true,
+                    source: "groups",
                     id: c,
+                    index: i,
                     label: column.name ?? column.id,
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop: onDrop,
-                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
                 };
             }
             else {
@@ -72,11 +71,13 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
                     data: c,
                     draggable: true,
                     id: c.id,
+                    source: "groups",
+                    index: i,
                     label: c.name ?? c.id,
                     onAction: () => { },
                     onDelete: onDelete,
                     onDrop,
-                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                    dragPlaceholder: dragPlaceholder ? () => dragPlaceholder(c) : undefined,
                 };
             }
         })
@@ -84,11 +85,9 @@ export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumn
     }, [
         grid.api,
         grid.state.rowGroupModel,
-        grid.state.rtl,
         gridId,
         hideColumnOnGroup,
-        orientation,
-        placeholder,
+        dragPlaceholder,
         rowGroupModel,
     ]);
     const onRootDrop = useEvent((p) => {

package/dist/grid.d.ts

@@ -1,8 +1,4 @@
 import { Root } from "./root/root";
-import { makeClientDataSource, useClientRowDataSource } from "./row-data-source-client/use-client-data-source";
-import { makeClientDataSourcePaginated, useClientRowDataSourcePaginated } from "./row-data-source-client/use-client-data-source-paginated";
-import { makeClientTreeDataSource, useClientTreeDataSource } from "./row-data-source-client/use-client-tree-data-source";
-import { makeServerDataSource, useServerDataSource } from "./row-data-source-server/use-server-data-source";
 import { useLyteNyte } from "./state/use-lytenyte";
 export declare const Grid: {
     Root: typeof Root;
@@ -19,12 +15,4 @@ export declare const Grid: {
     RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useLyteNyte: typeof useLyteNyte;
-    useClientRowDataSource: typeof useClientRowDataSource;
-    makeClientDataSource: typeof makeClientDataSource;
-    makeClientDataSourcePaginated: typeof makeClientDataSourcePaginated;
-    useClientRowDataSourcePaginated: typeof useClientRowDataSourcePaginated;
-    useClientTreeDataSource: typeof useClientTreeDataSource;
-    makeClientTreeDataSource: typeof makeClientTreeDataSource;
-    makeServerDataSource: typeof makeServerDataSource;
-    useServerDataSource: typeof useServerDataSource;
 };

package/dist/grid.js

@@ -4,10 +4,6 @@ import { HeaderCell } from "./header/header-cell";
 import { HeaderGroupCell } from "./header/header-group-cell";
 import { HeaderRow } from "./header/header-row";
 import { Root } from "./root/root";
-import { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
-import { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
-import { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
-import { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";
 import { RowFullWidth } from "./rows/row-full-width";
 import { Row } from "./rows/row/row";
 import { RowsContainer } from "./rows/rows-container";
@@ -29,12 +25,4 @@ export const Grid = {
     RowsCenter,
     Viewport,
     useLyteNyte,
-    useClientRowDataSource,
-    makeClientDataSource,
-    makeClientDataSourcePaginated,
-    useClientRowDataSourcePaginated,
-    useClientTreeDataSource,
-    makeClientTreeDataSource,
-    makeServerDataSource,
-    useServerDataSource,
 };

package/dist/header/header-cell.d.ts

@@ -3,7 +3,7 @@ import type { HeaderCellFloating, HeaderCellLayout } from "../+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface HeaderCellProps<T> {
     readonly cell: HeaderCellLayout<T> | HeaderCellFloating<T>;
-    readonly resizerSlot?: SlotComponent;
+    readonly resizerAs?: SlotComponent;
     readonly resizerClassName?: string;
     readonly resizerStyle?: CSSProperties;
 }

package/dist/header/header-cell.js

@@ -6,7 +6,7 @@ import { fastDeepMemo, useCombinedRefs, } from "@1771technologies/lytenyte-react
 import { useHeaderCellRenderer } from "./use-header-cell-renderer";
 import { ResizeHandler } from "./resize-handler";
 import { useDragMove } from "./use-drag-move";
-const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerSlot, resizerStyle, resizerClassName, children, ...props }, forwarded) {
+const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerAs, resizerStyle, resizerClassName, children, ...props }, forwarded) {
     const grid = useGridRoot().grid;
     const ctx = grid.state;
     const xPositions = ctx.xPositions.useValue();
@@ -19,6 +19,6 @@ const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerSlot, resiz
         : (cell.column.uiHints?.resizable ?? base.uiHints?.resizable ?? false);
     const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
     const combined = useCombinedRefs(forwarded, ref);
-    return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, viewportWidth: viewport, isFloating: cell.kind === "floating", rtl: rtl, xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, slot: resizerSlot, className: resizerClassName, style: resizerStyle }))] }));
+    return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, viewportWidth: viewport, isFloating: cell.kind === "floating", rtl: rtl, xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, as: resizerAs, className: resizerClassName, style: resizerStyle }))] }));
 });
 export const HeaderCell = fastDeepMemo(HeaderCellImpl);

package/dist/header/header-group-cell.js

@@ -9,6 +9,8 @@ const HeaderGroupCellImpl = forwardRef(function HeaderCell({ cell, children, ...
     const ctx = grid.state;
     const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
     const combined = useCombinedRefs(ref, forwarded);
-    return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(), rtl: ctx.rtl.useValue(), viewportWidth: ctx.viewportWidthInner.useValue(), xPositions: ctx.xPositions.useValue(), isHiddenMove: cell.isHiddenMove ?? false, children: children == undefined ? cell.id : children }));
+    const isExpanded = grid.state.columnGroupExpansions.useValue()[cell.id] ??
+        grid.state.columnGroupDefaultExpansion.get();
+    return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(), rtl: ctx.rtl.useValue(), viewportWidth: ctx.viewportWidthInner.useValue(), xPositions: ctx.xPositions.useValue(), isHiddenMove: cell.isHiddenMove ?? false, "data-ln-collapsible": cell.isCollapsible, "data-ln-collapsed": !isExpanded, children: children == undefined ? cell.id : children }));
 });
 export const HeaderGroupCell = fastDeepMemo(HeaderGroupCellImpl);

package/dist/header/resize-handler.d.ts

@@ -2,11 +2,11 @@ import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { HeaderCellLayout } from "../+types";
 import { type CSSProperties } from "react";
 interface ResizeHandlerProps<T> {
-    readonly slot?: SlotComponent;
+    readonly as?: SlotComponent;
     readonly cell: HeaderCellLayout<T>;
     readonly xPositions: Uint32Array;
     readonly className?: string;
     readonly style?: CSSProperties;
 }
-export declare function ResizeHandler<T>({ slot, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ResizeHandler<T>({ as, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/header/resize-handler.js

@@ -5,7 +5,7 @@ import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl,
 import { useGridRoot } from "../context";
 import { getComputedStyle, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
-export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
+export function ResizeHandler({ as, cell, xPositions, style, className, }) {
     const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
     const sx = useGridRoot().grid;
     const double = sx.state.columnDoubleClickToAutosize.useValue();
@@ -57,7 +57,9 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
                     const id = sx.state.gridId.get();
                     const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
                     const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
+                    const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
                     const header = vp.querySelector(headerQuery);
+                    const floating = vp.querySelector(floatingQuery);
                     if (!header)
                         return;
                     const pin = header.getAttribute("data-ln-pin");
@@ -72,6 +74,8 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
                     }
                     const q = Array.from(vp.querySelectorAll(query));
                     q.push(header);
+                    if (floating)
+                        q.push(floating);
                     q.forEach((c) => {
                         if (!isHTMLElement(c))
                             return;
@@ -113,7 +117,7 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
         className,
         style: {
             height: "100%",
-            width: "8px",
+            width: "6px",
             ...style,
             top: "0px",
             insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
@@ -123,7 +127,7 @@ export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
     };
     const edge = useSlot({
         props: [defaultProps],
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return edge;
 }

package/dist/header/use-drag-move.js

@@ -1,4 +1,4 @@
-import { getHoveredColumnIndex, getNearestFocusable, useDraggable, } from "@1771technologies/lytenyte-shared";
+import { COLUMN_MARKER_ID, getHoveredColumnIndex, getNearestFocusable, GROUP_COLUMN_PREFIX, useDraggable, } from "@1771technologies/lytenyte-shared";
 import { useMemo, useRef } from "react";
 export function useDragMove(grid, cell, onDragStart) {
     const ctx = grid.state;
@@ -12,7 +12,9 @@ export function useDragMove(grid, cell, onDragStart) {
         return columns;
     }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
     const isMovable = useMemo(() => {
-        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable ?? false);
+        return columns.every((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
+            c.id !== COLUMN_MARKER_ID &&
+            (c.uiHints?.movable ?? base.uiHints?.movable ?? false));
     }, [base.uiHints?.movable, columns]);
     const swapDirection = useRef(null);
     const swapIndex = useRef(-1);
@@ -53,6 +55,11 @@ export function useDragMove(grid, cell, onDragStart) {
             });
             if (index == null)
                 return;
+            const columnTarget = grid.api.columnByIndex(index);
+            if (columnTarget) {
+                if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
+                    return;
+            }
             const first = columns[0];
             const currentIndex = grid.api.columnIndex(first);
             const columnIndices = columns.map((c) => grid.api.columnIndex(c));

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

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useGridRoot } from "../context";
 function DefaultRenderer(p) {
-    return _jsx(_Fragment, { children: p.column.id });
+    return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
 }
 export function useHeaderCellRenderer(cell) {
     const ctx = useGridRoot().grid;
@@ -18,16 +18,16 @@ export function useHeaderCellRenderer(cell) {
                 return renderer;
         }
         else {
-            const renderer = cell.column.floatingRenderer ?? base.floatingRenderer ?? DefaultRenderer;
+            const renderer = cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
             if (typeof renderer === "string")
                 return floatingRenderers[renderer] ?? DefaultRenderer;
             else
                 return renderer;
         }
     }, [
-        base.floatingRenderer,
+        base.floatingCellRenderer,
         base.headerRenderer,
-        cell.column.floatingRenderer,
+        cell.column.floatingCellRenderer,
         cell.column.headerRenderer,
         cell.kind,
         floatingRenderers,

package/dist/index.d.ts

@@ -1,7 +1,13 @@
+export { GROUP_COLUMN_PREFIX, COLUMN_MARKER_ID, GROUP_COLUMN_SINGLE_ID, GROUP_COLUMN_MULTI_PREFIX, } from "@1771technologies/lytenyte-shared";
 export { Grid } from "./grid.js";
 export { SortManager } from "./sort-manager/sort-manager.js";
 export { FilterTree } from "./filter-tree/filter-tree.js";
 export { ColumnManager } from "./column-manager/column-manager.js";
 export { GridBox } from "./grid-box/grid-box.js";
+export { DropWrap } from "@1771technologies/lytenyte-dragon";
 export { activateLicense } from "./license.js";
 export { measureText } from "@1771technologies/lytenyte-shared";
+export { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
+export { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
+export { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
+export { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";

package/dist/index.js

@@ -1,7 +1,13 @@
+export { GROUP_COLUMN_PREFIX, COLUMN_MARKER_ID, GROUP_COLUMN_SINGLE_ID, GROUP_COLUMN_MULTI_PREFIX, } from "@1771technologies/lytenyte-shared";
 export { Grid } from "./grid.js";
 export { SortManager } from "./sort-manager/sort-manager.js";
 export { FilterTree } from "./filter-tree/filter-tree.js";
 export { ColumnManager } from "./column-manager/column-manager.js";
 export { GridBox } from "./grid-box/grid-box.js";
+export { DropWrap } from "@1771technologies/lytenyte-dragon";
 export { activateLicense } from "./license.js";
 export { measureText } from "@1771technologies/lytenyte-shared";
+export { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
+export { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
+export { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
+export { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";

package/dist/license.js

@@ -1,5 +1,5 @@
 const hashSalt = "faec0f3c45281b1fe12d87e64a6c3271";
-const issueDate = new Date("2025-08-09");
+const issueDate = new Date("2025-08-19");
 function getHostname() {
     const win = globalThis?.document?.defaultView || (typeof window !== "undefined" ? window : null);
     const loc = win?.location;

package/dist/listbox/item.js

@@ -9,6 +9,7 @@ export const Item = forwardRef(function Item(props, forwarded) {
             const prev = ctx.rtl ? "ArrowRight" : "ArrowLeft";
             if (ev.key !== next && ev.key !== prev)
                 return;
+            ev.preventDefault();
             const items = getTabbables(ev.currentTarget);
             if (!items.length)
                 return;
@@ -18,7 +19,6 @@ export const Item = forwardRef(function Item(props, forwarded) {
             const itemToFocus = items[nextIndex];
             if (!itemToFocus)
                 return;
-            ev.preventDefault();
             ev.stopPropagation();
             itemToFocus.focus();
         }, ref: forwarded, tabIndex: 0, "data-ln-listbox-item": true }));

package/dist/row-data-source-client/filter/compute-filtered-rows.js

@@ -22,7 +22,7 @@ export function computeFilteredRows(rows, grid, filterModel, filterInModel, quic
             const pass = nonIgnored.some((c) => {
                 const field = `${grid.api.columnField(c, { data: row.data, kind: "leaf" })}`;
                 if (sensitivity === "case-insensitive")
-                    field.toLowerCase().includes(quickSearch.toLowerCase());
+                    return field.toLowerCase().includes(quickSearch.toLowerCase());
                 return field.includes(quickSearch);
             });
             if (!pass)

package/dist/row-data-source-client/use-client-data-source-paginated.d.ts

@@ -1,10 +1,10 @@
 import type { GridAtom, RowDataSourceClientPaginated } from "../+types.js";
-import { type ClientRowDataSourceParams } from "../+types.js";
+import { type ClientRowDataSourcePaginatedParams } from "../+types.js";
 interface DataAtoms<T> {
     readonly top: GridAtom<T[]>;
     readonly center: GridAtom<T[]>;
     readonly bottom: GridAtom<T[]>;
 }
-export declare function makeClientDataSourcePaginated<T>(p: ClientRowDataSourceParams<T>): [RowDataSourceClientPaginated<T>, DataAtoms<T>];
-export declare function useClientRowDataSourcePaginated<T>(p: ClientRowDataSourceParams<T>): RowDataSourceClientPaginated<T>;
+export declare function makeClientDataSourcePaginated<T>(p: ClientRowDataSourcePaginatedParams<T>): [RowDataSourceClientPaginated<T>, DataAtoms<T>];
+export declare function useClientRowDataSourcePaginated<T>(p: ClientRowDataSourcePaginatedParams<T>): RowDataSourceClientPaginated<T>;
 export {};