@1771technologies/lytenyte-pro 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/column-manager/root.d.ts

@@ -1,9 +1,8 @@
-import { type PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 import type { Column, Grid } from "../+types";
-import type { UseColumnManagerReturn } from "./use-column-manager";
-import type { PathRoot } from "@1771technologies/lytenyte-shared";
-export type ColumnManagerRootProps<T> = UseColumnManagerReturn<T>["rootProps"] & {
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface ColumnManagerRootProps<T> {
     readonly grid: Grid<T>;
-    readonly root: PathRoot<Column<any>>;
-};
-export declare function Root<T>({ grid, children, treeRef, root, ...rootProps }: PropsWithChildren<ColumnManagerRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+    readonly lookup: Record<string, PathBranch<Column<any>>>;
+}
+export declare function Root<T>({ grid, lookup, children }: PropsWithChildren<ColumnManagerRootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/column-manager/root.js

@@ -1,20 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { GridProvider } from "../grid-provider/provider";
 import { TreeRoot } from "../tree-view/root";
 import { branchLookupContext } from "./branch-lookup-context";
-export function Root({ grid, children, treeRef, root, ...rootProps }) {
-    const branchLookup = useMemo(() => {
-        const stack = [...root.children.values()];
-        const lookup = {};
-        while (stack.length) {
-            const item = stack.pop();
-            if (item.kind === "leaf")
-                continue;
-            lookup[item.data.idOccurrence] = item;
-            stack.push(...item.children.values());
-        }
-        return lookup;
-    }, [root.children]);
-    return (_jsx(branchLookupContext.Provider, { value: branchLookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { selectMode: "multiple", transitionEnter: 200, transitionExit: 200, expansionDefault: true, ref: treeRef, ...rootProps, children: children }) }) }));
+export function Root({ grid, lookup, children }) {
+    return (_jsx(branchLookupContext.Provider, { value: lookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { children: children }) }) }));
 }

package/dist/column-manager/use-column-manager.d.ts

@@ -1,19 +1,9 @@
-import { type Dispatch, type JSX, type SetStateAction } from "react";
-import type { Column, Grid } from "../+types.js";
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree.js";
-import type { PathRoot } from "@1771technologies/lytenyte-shared";
-export interface UseColumnManagerReturn<T> {
-    readonly rootProps: {
-        readonly grid: Grid<T>;
-        readonly expansions: Record<string, boolean>;
-        readonly onExpansionChange: Dispatch<SetStateAction<Record<string, boolean>>>;
-        readonly treeRef: (el: HTMLElement | null) => void;
-        readonly getAllIds: () => Set<string>;
-        readonly getIdsBetweenNodes: (left: HTMLElement, right: HTMLElement) => string[];
-        readonly onFocusChange: (el: HTMLElement | null) => void;
-        readonly root: PathRoot<Column<T>>;
-    };
-    readonly tree: TreeVirtualItem<Column<T>>[];
-    readonly spacer: JSX.Element;
+import type { Column, Grid } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface UseColumnManagerProps<T> {
+    readonly grid: Grid<T>;
 }
-export declare function useColumnManager<T>(grid: Grid<T>): UseColumnManagerReturn<T>;
+export declare function useColumnManager<T>({ grid }: UseColumnManagerProps<T>): {
+    items: (PathBranch<Column<T>> | import("@1771technologies/lytenyte-shared").PathLeaf<Column<T>>)[];
+    lookup: Record<string, PathBranch<Column<any>>>;
+};

package/dist/column-manager/use-column-manager.js

@@ -1,24 +1,20 @@
-import { useState } from "react";
-import { useVirtualizedTree } from "../tree-view/virtualized/use-virtualized-tree.js";
-export function useColumnManager(grid) {
-    const [expansions, onExpansionChange] = useState({});
+import { useMemo } from "react";
+import { useTreeViewPaths } from "../tree-view/hooks/use-tree-view-paths";
+export function useColumnManager({ grid }) {
     const columns = grid.state.columns.useValue();
-    const virt = useVirtualizedTree({
-        paths: columns,
-        expansions,
-        itemHeight: 24,
-        expansionDefault: true,
-        nonAdjacentPathTrees: true,
-    });
-    return {
-        rootProps: {
-            grid,
-            expansions,
-            onExpansionChange,
-            treeRef: virt.ref,
-            ...virt.rootProps,
-        },
-        spacer: virt.spacer,
-        tree: virt.virtualTree,
-    };
+    const items = useTreeViewPaths(columns, true);
+    console.log(items);
+    const branchLookup = useMemo(() => {
+        const stack = [...items];
+        const lookup = {};
+        while (stack.length) {
+            const item = stack.pop();
+            if (item.kind === "leaf")
+                continue;
+            lookup[item.data.idOccurrence] = item;
+            stack.push(...item.children.values());
+        }
+        return lookup;
+    }, [items]);
+    return { items, lookup: branchLookup };
 }

package/dist/column-manager/use-columns-from-context.d.ts

@@ -1,3 +1,3 @@
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree.js";
 import type { Column } from "../+types.js";
-export declare function useColumnsFromContext(item: TreeVirtualItem<Column<any>>): Column<any>[];
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
+export declare function useColumnsFromContext<T>(item: PathBranch<Column<T>> | PathLeaf<Column<T>>): Column<any>[] | Column<T>[];

package/dist/column-manager/use-columns-from-context.js

@@ -5,7 +5,7 @@ export function useColumnsFromContext(item) {
     const columns = useMemo(() => {
         if (item.kind === "branch") {
             const allChildren = [];
-            const branch = lookup[item.branch.data.idOccurrence];
+            const branch = lookup[item.data.idOccurrence];
             const stack = [...branch.children.values()];
             while (stack.length) {
                 const p = stack.pop();
@@ -17,7 +17,7 @@ export function useColumnsFromContext(item) {
             }
             return allChildren;
         }
-        return [item.leaf.data];
+        return [item.data];
     }, [item, lookup]);
     return columns;
 }

package/dist/column-manager/visibility-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface VisibilityCheckbox {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         visible: boolean;
         indeterminate: boolean;
         toggle: (s?: boolean) => void;

package/dist/column-manager/visibility-checkbox.js

@@ -4,7 +4,7 @@ import { useColumnItemContext } from "./context";
 import { forwardRef, useCallback, useMemo } from "react";
 import { useGrid } from "../grid-provider/use-grid";
 import { useColumnsFromContext } from "./use-columns-from-context";
-export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ slot, ...props }, forwarded) {
+export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const grid = useGrid();
     const base = grid.state.columnBase.useValue();
@@ -21,7 +21,7 @@ export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ slot,
     const rendered = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
+        slot: as ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
                 toggle();
             } })),
         state: { visible: isVisible, indeterminate: isIndeterminate, toggle },

package/dist/filter-tree/branch.js

@@ -14,7 +14,7 @@ export const Branch = forwardRef(function Branch({ item, labelWrap, label, ...pr
             },
         ],
     });
-    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
+    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.id, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
                 if (ev.key === " ")
                     value.onCheckChange();
             }, label: label, labelWrap: labelSlot }) }));

package/dist/filter-tree/inclusion-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface InclusionCheckbox {
-    readonly slot?: SlotComponent<{
+    readonly as?: SlotComponent<{
         checked: boolean;
         indeterminate: boolean;
         toggle: (s?: boolean) => void;

package/dist/filter-tree/inclusion-checkbox.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useTreeItemContext } from "./context";
-export const InclusionCheckbox = forwardRef(function InclusionCheckbox({ slot, ...props }, forwarded) {
+export const InclusionCheckbox = forwardRef(function InclusionCheckbox({ as, ...props }, forwarded) {
     const { isChecked, onCheckChange, isIndeterminate } = useTreeItemContext();
     const rendered = useSlot({
         props: [props],
         ref: forwarded,
         state: { checked: isChecked, toggle: onCheckChange, indeterminate: isIndeterminate },
-        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isChecked, "aria-label": "visibility toggle", onChange: () => onCheckChange() })),
+        slot: as ?? (_jsx("input", { type: "checkbox", checked: isChecked, "aria-label": "visibility toggle", onChange: () => onCheckChange() })),
     });
     return rendered;
 });

package/dist/filter-tree/label.d.ts

@@ -1,5 +1,5 @@
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface LabelProps {
-    readonly slot?: SlotComponent;
+    readonly as?: SlotComponent;
 }
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/filter-tree/label.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
 import { useTreeItemContext } from "./context";
-export const Label = forwardRef(function Label({ slot, ...props }, forwarded) {
+export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useTreeItemContext();
     const label = useMemo(() => {
         if (item.kind == "branch")
@@ -12,7 +12,7 @@ export const Label = forwardRef(function Label({ slot, ...props }, forwarded) {
     const rendered = useSlot({
         props: [{ children: label }, props],
         ref: forwarded,
-        slot: slot ?? _jsx("div", {}),
+        slot: as ?? _jsx("div", {}),
     });
     return rendered;
 });

package/dist/filter-tree/root.d.ts

@@ -4,10 +4,10 @@ import type { UseTreeFilterReturn } from "./hooks/use-filter-tree";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export type FilterTreeRootProps<T> = UseTreeFilterReturn<T>["rootProps"] & {
     readonly grid: Grid<T>;
-    readonly slotLoading?: SlotComponent;
-    readonly slotError?: SlotComponent<{
+    readonly loadingAs?: SlotComponent;
+    readonly errorAs?: SlotComponent<{
         error: any;
         refetch: () => void;
     }>;
 };
-export declare function Root<T>({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, slotError, slotLoading, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }: PropsWithChildren<FilterTreeRootProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function Root<T>({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, errorAs, loadingAs, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }: PropsWithChildren<FilterTreeRootProps<T>>): import("react/jsx-runtime").JSX.Element;

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;
 }