@1771technologies/lytenyte-pro 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useBranchLookup } from "./branch-lookup-context";
+import { useBranchLookup } from "./branch-lookup-context.js";
 export function useColumnsFromContext(item) {
     const lookup = useBranchLookup();
     const columns = useMemo(() => {

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/filter-tree.d.ts

@@ -1,14 +1,14 @@
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-import { InclusionCheckbox } from "./inclusion-checkbox";
-import { Root } from "./root";
-import { useFilterTree } from "./hooks/use-filter-tree";
+import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling.js";
+import { InclusionCheckbox } from "./inclusion-checkbox.js";
+import { Root } from "./root.js";
+import { useFilterTree } from "./hooks/use-filter-tree.js";
 export declare const FilterTree: {
     Root: typeof Root;
     Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
     PassiveScroll: typeof ForceSyncScrolling;
-    Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf").FilterTreeLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch").FilterTreeBranch & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf.js").FilterTreeLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch.js").FilterTreeBranch & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label.js").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InclusionCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useFilterTree: typeof useFilterTree;
 };

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

@@ -1,11 +1,11 @@
-import { TreePanel } from "../tree-view/panel/panel";
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-import { Branch } from "./branch";
-import { InclusionCheckbox } from "./inclusion-checkbox";
-import { Label } from "./label";
-import { Leaf } from "./leaf";
-import { Root } from "./root";
-import { useFilterTree } from "./hooks/use-filter-tree";
+import { TreePanel } from "../tree-view/panel/panel.js";
+import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling.js";
+import { Branch } from "./branch.js";
+import { InclusionCheckbox } from "./inclusion-checkbox.js";
+import { Label } from "./label.js";
+import { Leaf } from "./leaf.js";
+import { Root } from "./root.js";
+import { useFilterTree } from "./hooks/use-filter-tree.js";
 export const FilterTree = {
     Root,
     Panel: TreePanel,

package/dist/filter-tree/hooks/use-tree-item.d.ts

@@ -1,5 +1,5 @@
-import type { FilterInFilterItem } from "../../+types";
-import type { TreeVirtualItem } from "../../tree-view/virtualized/make-virtual-tree";
+import type { FilterInFilterItem } from "../../+types.js";
+import type { TreeVirtualItem } from "../../tree-view/virtualized/make-virtual-tree.js";
 export declare function useTreeItem(item: TreeVirtualItem<FilterInFilterItem>): {
     onCheckChange: (b?: boolean) => void;
     isChecked: boolean;

package/dist/filter-tree/hooks/use-tree-item.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
-import { useGrid } from "../../grid-provider/use-grid";
-import { useTreeContext } from "../context";
+import { useGrid } from "../../grid-provider/use-grid.js";
+import { useTreeContext } from "../context.js";
 function isSelectAll(item) {
     return item.kind === "leaf" && item.leaf.data.id === "__LNG__SELECT_ALL";
 }

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,10 +16,10 @@ 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)

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { DropEventParams } from "../+types";
+import type { DropEventParams } from "../+types.js";
 export interface GridBoxItem<T = any> {
     readonly id: string;
     readonly label: string;
@@ -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/context.d.ts

@@ -1,4 +1,4 @@
-import type { DropEventParams } from "../+types";
+import type { DropEventParams } from "../+types.js";
 interface GridBoxContextValue {
     readonly accepted: string[];
     readonly orientation: "horizontal" | "vertical";

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.d.ts

@@ -1,5 +1,5 @@
-import type { AggModelFn, DropEventParams, Grid } from "../+types";
-import type { GridBoxItem } from "./+types";
+import type { AggModelFn, DropEventParams, Grid } from "../+types.js";
+import type { GridBoxItem } from "./+types.js";
 export interface UseAggregationBoxItemsProps<T> {
     readonly grid: Grid<T>;
     readonly orientation?: "horizontal" | "vertical";

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import type { Column, DropEventParams, Grid } from "../+types";
-import type { GridBoxItem } from "./+types";
+import type { Column, DropEventParams, Grid } from "../+types.js";
+import type { GridBoxItem } from "./+types.js";
 export interface OnDropParams<T> {
     readonly target: Column<T>;
     readonly src: Column<T>;
@@ -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

@@ -1,13 +1,13 @@
 import { type ReactNode } from "react";
-import type { DropEventParams, Grid, RowGroupModelItem } from "../+types";
-import type { GridBoxItem } from "./+types";
+import type { DropEventParams, Grid, RowGroupModelItem } from "../+types.js";
+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-provider/context.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types";
-import type { InternalAtoms } from "../state/+types";
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
 export declare const gridContext: import("react").Context<Grid<any> & {
     internal: InternalAtoms;
 }>;

package/dist/grid-provider/provider.d.ts

@@ -1,3 +1,3 @@
-export declare const GridProvider: import("react").Provider<import("../+types").Grid<any> & {
-    internal: import("../state/+types").InternalAtoms;
+export declare const GridProvider: import("react").Provider<import("../+types.js").Grid<any> & {
+    internal: import("../state/+types.js").InternalAtoms;
 }>;

package/dist/grid-provider/provider.js

@@ -1,2 +1,2 @@
-import { gridContext } from "./context";
+import { gridContext } from "./context.js";
 export const GridProvider = gridContext.Provider;

package/dist/grid-provider/use-grid.d.ts

@@ -1,3 +1,3 @@
-export declare const useGrid: () => import("../+types").Grid<any> & {
-    internal: import("../state/+types").InternalAtoms;
+export declare const useGrid: () => import("../+types.js").Grid<any> & {
+    internal: import("../state/+types.js").InternalAtoms;
 };

package/dist/grid-provider/use-grid.js

@@ -1,3 +1,3 @@
 import { useContext } from "react";
-import { gridContext } from "./context";
+import { gridContext } from "./context.js";
 export const useGrid = () => useContext(gridContext);

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;
@@ -15,15 +11,8 @@ export declare const Grid: {
     RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     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,11 +4,8 @@ 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";
 import { RowsBottom, RowsCenter, RowsTop } from "./rows/rows-sections";
 import { useLyteNyte } from "./state/use-lytenyte";
@@ -24,15 +21,8 @@ export const Grid = {
     RowsContainer,
     RowsBottom,
     RowsTop,
+    Row,
     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;
 }