@1771technologies/lytenyte-pro 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/cell-selection/use-edge-scroll.js

@@ -1,66 +1,68 @@
 import { useCallback, useRef } from "react";
 export function useEdgeScroll(grid) {
-    const intervalIdX = useRef(null);
-    const intervalIdY = useRef(null);
-    const cancelX = useCallback(() => {
-        if (intervalIdX.current) {
-            clearInterval(intervalIdX.current);
-            intervalIdX.current = null;
-        }
-    }, []);
-    const cancelY = useCallback(() => {
-        if (intervalIdY.current) {
-            clearInterval(intervalIdY.current);
-            intervalIdY.current = null;
-        }
-    }, []);
-    const edgeScrollY = useCallback((visualPositionY) => {
-        const viewport = grid.state.viewport.get();
-        if (!viewport)
-            return;
-        const viewportClientHeight = grid.state.viewportHeightInner.get();
-        const viewportHeight = Math.min(viewportClientHeight * 0.1, 100);
-        const buffer = viewportHeight;
-        const topBound = buffer + grid.internal.headerHeightTotal.get();
-        const botBound = viewportClientHeight - buffer;
-        const speed = 6;
-        if (visualPositionY < topBound && !intervalIdY.current) {
-            intervalIdY.current = setInterval(() => {
-                viewport.scrollBy({ top: -speed });
-            }, 6);
-        }
-        else if (visualPositionY > botBound && !intervalIdY.current) {
-            intervalIdY.current = setInterval(() => {
-                viewport.scrollBy({ top: speed });
-            }, 6);
-        }
-        if (intervalIdY.current && visualPositionY > topBound && visualPositionY < botBound) {
-            cancelY();
-        }
-    }, [cancelY, grid.internal.headerHeightTotal, grid.state.viewport, grid.state.viewportHeightInner]);
-    const edgeScrollX = useCallback((visualPositionX, isRtl) => {
-        const viewport = grid.state.viewport.get();
-        if (!viewport)
-            return;
-        const viewportClientWidth = grid.state.viewportWidthInner.get();
-        const viewportWidth = Math.min(viewportClientWidth * 0.1, 100);
-        const buffer = viewportWidth;
-        const leftBound = buffer;
-        const rightBound = viewportClientWidth - buffer;
-        const speed = 3;
-        if (visualPositionX < leftBound && !intervalIdX.current) {
-            intervalIdX.current = setInterval(() => {
-                viewport.scrollBy({ left: isRtl ? speed : -speed });
-            }, 6);
-        }
-        else if (visualPositionX > rightBound && !intervalIdX.current) {
-            intervalIdX.current = setInterval(() => {
-                viewport.scrollBy({ left: isRtl ? -speed : speed });
-            }, 6);
-        }
-        if (intervalIdX.current && visualPositionX > leftBound && visualPositionX < rightBound) {
-            cancelX();
-        }
-    }, [cancelX, grid.state.viewport, grid.state.viewportWidthInner]);
-    return { cancelX, edgeScrollX, cancelY, edgeScrollY };
+  const intervalIdX = useRef(null);
+  const intervalIdY = useRef(null);
+  const cancelX = useCallback(() => {
+    if (intervalIdX.current) {
+      clearInterval(intervalIdX.current);
+      intervalIdX.current = null;
+    }
+  }, []);
+  const cancelY = useCallback(() => {
+    if (intervalIdY.current) {
+      clearInterval(intervalIdY.current);
+      intervalIdY.current = null;
+    }
+  }, []);
+  const edgeScrollY = useCallback(
+    (visualPositionY) => {
+      const viewport = grid.state.viewport.get();
+      if (!viewport) return;
+      const viewportClientHeight = grid.state.viewportHeightInner.get();
+      const viewportHeight = Math.min(viewportClientHeight * 0.1, 100);
+      const buffer = viewportHeight;
+      const topBound = buffer + grid.internal.headerHeightTotal.get();
+      const botBound = viewportClientHeight - buffer;
+      const speed = 6;
+      if (visualPositionY < topBound && !intervalIdY.current) {
+        intervalIdY.current = setInterval(() => {
+          viewport.scrollBy({ top: -speed });
+        }, 6);
+      } else if (visualPositionY > botBound && !intervalIdY.current) {
+        intervalIdY.current = setInterval(() => {
+          viewport.scrollBy({ top: speed });
+        }, 6);
+      }
+      if (intervalIdY.current && visualPositionY > topBound && visualPositionY < botBound) {
+        cancelY();
+      }
+    },
+    [cancelY, grid.internal.headerHeightTotal, grid.state.viewport, grid.state.viewportHeightInner],
+  );
+  const edgeScrollX = useCallback(
+    (visualPositionX, isRtl) => {
+      const viewport = grid.state.viewport.get();
+      if (!viewport) return;
+      const viewportClientWidth = grid.state.viewportWidthInner.get();
+      const viewportWidth = Math.min(viewportClientWidth * 0.1, 100);
+      const buffer = viewportWidth;
+      const leftBound = buffer;
+      const rightBound = viewportClientWidth - buffer;
+      const speed = 3;
+      if (visualPositionX < leftBound && !intervalIdX.current) {
+        intervalIdX.current = setInterval(() => {
+          viewport.scrollBy({ left: isRtl ? speed : -speed });
+        }, 6);
+      } else if (visualPositionX > rightBound && !intervalIdX.current) {
+        intervalIdX.current = setInterval(() => {
+          viewport.scrollBy({ left: isRtl ? -speed : speed });
+        }, 6);
+      }
+      if (intervalIdX.current && visualPositionX > leftBound && visualPositionX < rightBound) {
+        cancelX();
+      }
+    },
+    [cancelX, grid.state.viewport, grid.state.viewportWidthInner],
+  );
+  return { cancelX, edgeScrollX, cancelY, edgeScrollY };
 }

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

@@ -1,2 +1,6 @@
 import type { CellRendererParams } from "../+types";
-export declare function CellDefault<T>({ grid, column, row }: CellRendererParams<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CellDefault<T>({
+  grid,
+  column,
+  row,
+}: CellRendererParams<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cells/cell-default.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function CellDefault({ grid, column, row }) {
-    const r = grid.api.columnField(column, row);
-    if (row.data == null && row.loading) {
-        return _jsx("div", { children: "Loading..." });
-    }
-    return _jsx("div", { children: `${r ?? ""}` });
+  const r = grid.api.columnField(column, row);
+  if (row.data == null && row.loading) {
+    return _jsx("div", { children: "Loading..." });
+  }
+  return _jsx("div", { children: `${r ?? ""}` });
 }

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

@@ -1,6 +1,8 @@
 import type { RowCellLayout } from "../+types";
 interface CellEditorParams<T> {
-    readonly cell: RowCellLayout<T>;
+  readonly cell: RowCellLayout<T>;
 }
-export declare function CellEditor<T>({ cell }: CellEditorParams<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CellEditor<T>({
+  cell,
+}: CellEditorParams<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cells/cell-editor.js

@@ -5,92 +5,127 @@ import { useGridRoot } from "../context";
 import { editOnChange } from "../state/helpers/edit-on-change";
 import { handleNavigationKeys } from "@1771technologies/lytenyte-shared";
 export function CellEditor({ cell }) {
-    const [el, setEl] = useState(null);
-    const grid = useGridRoot().grid;
-    useEffect(() => {
-        if (!el)
-            return;
-        const focusFirst = () => {
-            const tabbables = getTabbables(el);
-            if (!el.contains(document.activeElement))
-                tabbables.at(0)?.focus();
-        };
-        const controller = new AbortController();
-        if (el.parentElement) {
-            el.parentElement.addEventListener("focus", () => {
-                focusFirst();
-            }, { signal: controller.signal });
-        }
-        focusFirst();
-        return () => controller.abort();
-    }, [el]);
-    return (_jsx("div", { ref: setEl, style: { width: "100%", height: "100%" }, onKeyDown: (e) => {
-            if (e.key === "Escape") {
-                const parent = el?.parentElement;
-                grid.api.editEnd(true);
-                setTimeout(() => {
-                    parent?.focus();
-                }, 4);
-            }
-            if (e.key === "Enter") {
-                const ds = grid.state.rowDataStore;
-                handleNavigationKeys({
-                    ctrlKey: false,
-                    metaKey: false,
-                    key: "ArrowDown",
-                    preventDefault: () => { },
-                    stopPropagation: () => { },
-                }, {
-                    vp: grid.state.viewport.get(),
-                    rowCount: ds.rowCount.get(),
-                    topCount: ds.rowTopCount.get(),
-                    centerCount: ds.rowCenterCount.get(),
-                    columnCount: grid.state.columnMeta.get().columnsVisible.length,
-                    focusActive: grid.internal.focusActive,
-                    id: grid.state.gridId.get(),
-                    layout: grid.internal.layout.get(),
-                    rtl: grid.state.rtl.get(),
-                    scrollIntoView: grid.api.scrollIntoView,
-                });
-            }
-            e.stopPropagation();
-        }, children: _jsx(EditRenderer, { cell: cell }) }));
+  const [el, setEl] = useState(null);
+  const grid = useGridRoot().grid;
+  useEffect(() => {
+    if (!el) return;
+    const focusFirst = () => {
+      const tabbables = getTabbables(el);
+      if (!el.contains(document.activeElement)) tabbables.at(0)?.focus();
+    };
+    const controller = new AbortController();
+    if (el.parentElement) {
+      el.parentElement.addEventListener(
+        "focus",
+        () => {
+          focusFirst();
+        },
+        { signal: controller.signal },
+      );
+    }
+    focusFirst();
+    return () => controller.abort();
+  }, [el]);
+  return _jsx("div", {
+    ref: setEl,
+    style: { width: "100%", height: "100%" },
+    onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        const parent = el?.parentElement;
+        grid.api.editEnd(true);
+        setTimeout(() => {
+          parent?.focus();
+        }, 4);
+      }
+      if (e.key === "Enter") {
+        const ds = grid.state.rowDataStore;
+        handleNavigationKeys(
+          {
+            ctrlKey: false,
+            metaKey: false,
+            key: "ArrowDown",
+            preventDefault: () => {},
+            stopPropagation: () => {},
+          },
+          {
+            vp: grid.state.viewport.get(),
+            rowCount: ds.rowCount.get(),
+            topCount: ds.rowTopCount.get(),
+            centerCount: ds.rowCenterCount.get(),
+            columnCount: grid.state.columnMeta.get().columnsVisible.length,
+            focusActive: grid.internal.focusActive,
+            id: grid.state.gridId.get(),
+            layout: grid.internal.layout.get(),
+            rtl: grid.state.rtl.get(),
+            scrollIntoView: grid.api.scrollIntoView,
+          },
+        );
+      }
+      e.stopPropagation();
+    },
+    children: _jsx(EditRenderer, { cell: cell }),
+  });
 }
 function EditRenderer({ cell }) {
-    const column = cell.column;
-    const ctx = useGridRoot();
-    const base = ctx.grid.state.columnBase.useValue();
-    const editFuncs = ctx.grid.state.editRenderers.useValue();
-    const editRenderer = column.editRenderer ?? base.editRenderer;
-    const activeData = ctx.grid.internal.editData.useValue();
-    const row = cell.row.get();
-    const value = ctx.grid.api.columnField(column, row.kind === "branch"
-        ? { kind: "branch", data: activeData, key: row.key }
-        : { kind: "leaf", data: activeData });
-    const onChange = useCallback((c) => {
-        editOnChange({
-            value: c,
-            activeData,
-            base,
-            column,
-            grid: ctx.grid,
-            row,
-            rowIndex: cell.rowIndex,
-        });
-    }, [activeData, base, cell.rowIndex, column, ctx.grid, row]);
-    if (!editRenderer) {
-        const type = column.type;
-        if (type === "number")
-            return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(Number.parseFloat(e.target.value)) }));
-        if (type === "date")
-            return _jsx("input", { type: "date", value: value, onChange: (e) => onChange(e.target.value) });
-        if (type === "datetime")
-            return (_jsx("input", { type: "datetime-local", value: value, onChange: (e) => onChange(e.target.value) }));
-        return _jsx("input", { value: value, onChange: (e) => onChange(e.target.value) });
-    }
-    const Renderer = typeof editRenderer === "string" ? editFuncs[editRenderer] : editRenderer;
-    const validation = ctx.grid.internal.editValidation.useValue();
-    if (!Renderer)
-        return null;
-    return (_jsx(Renderer, { column: column, grid: ctx.grid, onChange: onChange, row: cell.row.get(), rowIndex: cell.rowIndex, value: value, rowValidationState: validation }));
+  const column = cell.column;
+  const ctx = useGridRoot();
+  const base = ctx.grid.state.columnBase.useValue();
+  const editFuncs = ctx.grid.state.editRenderers.useValue();
+  const editRenderer = column.editRenderer ?? base.editRenderer;
+  const activeData = ctx.grid.internal.editData.useValue();
+  const row = cell.row.get();
+  const value = ctx.grid.api.columnField(
+    column,
+    row.kind === "branch"
+      ? { kind: "branch", data: activeData, key: row.key }
+      : { kind: "leaf", data: activeData },
+  );
+  const onChange = useCallback(
+    (c) => {
+      editOnChange({
+        value: c,
+        activeData,
+        base,
+        column,
+        grid: ctx.grid,
+        row,
+        rowIndex: cell.rowIndex,
+      });
+    },
+    [activeData, base, cell.rowIndex, column, ctx.grid, row],
+  );
+  if (!editRenderer) {
+    const type = column.type;
+    if (type === "number")
+      return _jsx("input", {
+        type: "number",
+        value: value,
+        onChange: (e) => onChange(Number.parseFloat(e.target.value)),
+      });
+    if (type === "date")
+      return _jsx("input", {
+        type: "date",
+        value: value,
+        onChange: (e) => onChange(e.target.value),
+      });
+    if (type === "datetime")
+      return _jsx("input", {
+        type: "datetime-local",
+        value: value,
+        onChange: (e) => onChange(e.target.value),
+      });
+    return _jsx("input", { value: value, onChange: (e) => onChange(e.target.value) });
+  }
+  const Renderer = typeof editRenderer === "string" ? editFuncs[editRenderer] : editRenderer;
+  const validation = ctx.grid.internal.editValidation.useValue();
+  if (!Renderer) return null;
+  return _jsx(Renderer, {
+    column: column,
+    grid: ctx.grid,
+    onChange: onChange,
+    row: cell.row.get(),
+    rowIndex: cell.rowIndex,
+    value: value,
+    rowValidationState: validation,
+  });
 }

package/dist/cells/cell.d.ts

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

package/dist/cells/cell.js

@@ -7,31 +7,60 @@ import { CellDefault } from "./cell-default";
 import { CellEditor } from "./cell-editor";
 import { useRowMeta } from "../rows/row/context";
 const CellImpl = forwardRef(function Cell({ cell, children, ...props }, forwarded) {
-    const grid = useGridRoot().grid;
-    const cx = grid.state;
-    grid.internal.refreshKey.useValue();
-    const row = cell.row.useValue();
-    const renderers = cx.cellRenderers.useValue();
-    const providedRenderer = children ?? cell.column.cellRenderer;
-    const Renderer = providedRenderer
-        ? typeof providedRenderer === "string"
-            ? (renderers[providedRenderer] ?? CellDefault)
-            : providedRenderer
-        : CellDefault;
-    const [isEditing, setIsEditing] = useState(false);
-    useEffect(() => {
-        return grid.internal.editActivePos.watch(() => {
-            const pos = grid.internal.editActivePos.get();
-            if (!pos)
-                return setIsEditing(false);
-            setIsEditing(pos.column === cell.column &&
-                pos.rowIndex >= cell.rowIndex &&
-                pos.rowIndex < cell.rowIndex + cell.rowSpan);
-        });
-    }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
-    const rowMeta = useRowMeta();
-    if (!row)
-        return null;
-    return (_jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, viewportWidth: cx.viewportWidthInner.useValue(), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: cx.xPositions.useValue(), yPosition: cx.yPositions.useValue(), children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(_Fragment, { children: typeof Renderer === "function" ? (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex })) : (Renderer) }))] }));
+  const grid = useGridRoot().grid;
+  const cx = grid.state;
+  grid.internal.refreshKey.useValue();
+  const base = grid.state.columnBase.useValue();
+  const row = cell.row.useValue();
+  const renderers = cx.cellRenderers.useValue();
+  const providedRenderer = children ?? cell.column.cellRenderer ?? base.cellRenderer;
+  const Renderer = providedRenderer
+    ? typeof providedRenderer === "string"
+      ? (renderers[providedRenderer] ?? CellDefault)
+      : providedRenderer
+    : CellDefault;
+  const [isEditing, setIsEditing] = useState(false);
+  useEffect(() => {
+    return grid.internal.editActivePos.watch(() => {
+      const pos = grid.internal.editActivePos.get();
+      if (!pos) return setIsEditing(false);
+      setIsEditing(
+        pos.column === cell.column &&
+          pos.rowIndex >= cell.rowIndex &&
+          pos.rowIndex < cell.rowIndex + cell.rowSpan,
+      );
+    });
+  }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
+  const rowMeta = useRowMeta();
+  if (!row) return null;
+  return _jsxs(CellReact, {
+    ...props,
+    ref: forwarded,
+    cell: cell,
+    isEditing: isEditing,
+    viewportWidth: cx.viewportWidthInner.useValue(),
+    detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""),
+    rtl: cx.rtl.useValue(),
+    xPosition: cx.xPositions.useValue(),
+    yPosition: cx.yPositions.useValue(),
+    children: [
+      isEditing && _jsx(CellEditor, { cell: cell }),
+      !isEditing &&
+        _jsx(_Fragment, {
+          children:
+            typeof Renderer === "function"
+              ? _jsx(Renderer, {
+                  column: cell.column,
+                  rowSelected: rowMeta.selected,
+                  rowIndeterminate: rowMeta.indeterminate,
+                  row: row,
+                  grid: grid,
+                  rowIndex: cell.rowIndex,
+                  colIndex: cell.colIndex,
+                })
+              : Renderer,
+        }),
+    ],
+  });
 });
 export const Cell = fastDeepMemo(CellImpl);

package/dist/column-manager/branch-lookup-context.d.ts

@@ -1,4 +1,6 @@
 import type { Column } from "../+types";
 import type { PathBranch } from "@1771technologies/lytenyte-shared";
-export declare const branchLookupContext: import("react").Context<Record<string, PathBranch<Column<any>>>>;
+export declare const branchLookupContext: import("react").Context<
+  Record<string, PathBranch<Column<any>>>
+>;
 export declare const useBranchLookup: () => Record<string, PathBranch<Column<any>>>;

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

@@ -2,8 +2,16 @@ import type { TreeVirtualBranch } from "../tree-view/virtualized/make-virtual-tr
 import type { Column } from "../+types";
 import type { SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface ColumnManagerBranchProps {
-    readonly item: TreeVirtualBranch<Column<any>>;
-    readonly label: SlotComponent;
-    readonly expander?: SlotComponent;
+  readonly item: TreeVirtualBranch<Column<any>>;
+  readonly label: SlotComponent;
+  readonly expander?: SlotComponent;
 }
-export declare const Branch: import("react").ForwardRefExoticComponent<Omit<ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+export declare const Branch: import("react").ForwardRefExoticComponent<
+  Omit<
+    ColumnManagerBranchProps &
+      import("react").ClassAttributes<HTMLLIElement> &
+      import("react").LiHTMLAttributes<HTMLLIElement>,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLLIElement>
+>;

package/dist/column-manager/branch.js

@@ -6,33 +6,43 @@ import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
 import { useGrid } from "../grid-provider/use-grid";
 import { useColumnsFromContext } from "./use-columns-from-context";
 export const Branch = forwardRef(function Branch({ item, label, ...props }, forwarded) {
-    const grid = useGrid();
-    const id = grid.state.gridId.useValue();
-    const accepted = `${id}/columns`;
-    const columns = useColumnsFromContext(item);
-    return (_jsx(ColumnItemContext, { value: useMemo(() => ({ item }), [item]), children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.branch.data.idOccurrence, accepted: [accepted], onEnter: (el) => {
-                    const data = dragState.data
-                        .get()
-                        ?.siteLocalData?.[accepted]?.at(-1);
-                    if (!data)
-                        return;
-                    const move = data.id;
-                    if (columns.some((c) => c.id === move))
-                        return;
-                    const allColumns = grid.state.columns.get();
-                    const moveIndex = allColumns.findIndex((c) => c.id === move);
-                    if (moveIndex === -1)
-                        return;
-                    const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
-                    const isBefore = thisIndex > moveIndex;
-                    if (isBefore) {
-                        el.setAttribute("data-ln-is-before", "true");
-                    }
-                    else {
-                        el.setAttribute("data-ln-is-after", "true");
-                    }
-                }, onLeave: (el) => {
-                    el.removeAttribute("data-ln-is-before");
-                    el.removeAttribute("data-ln-is-after");
-                } }), label: label }) }));
+  const grid = useGrid();
+  const id = grid.state.gridId.useValue();
+  const accepted = `${id}/columns`;
+  const columns = useColumnsFromContext(item);
+  return _jsx(ColumnItemContext, {
+    value: useMemo(() => ({ item }), [item]),
+    children: _jsx(TreeBranch, {
+      ...props,
+      itemId: item.branch.data.idOccurrence,
+      ref: forwarded,
+      ...item.attrs,
+      labelWrap: _jsx(DropWrap, {
+        "data-ln-column-manager-branch": true,
+        "data-ln-column-id": item.branch.data.idOccurrence,
+        accepted: [accepted],
+        onEnter: (el) => {
+          const data = dragState.data.get()?.siteLocalData?.[accepted]?.at(-1);
+          if (!data) return;
+          const move = data.id;
+          if (columns.some((c) => c.id === move)) return;
+          const allColumns = grid.state.columns.get();
+          const moveIndex = allColumns.findIndex((c) => c.id === move);
+          if (moveIndex === -1) return;
+          const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+          const isBefore = thisIndex > moveIndex;
+          if (isBefore) {
+            el.setAttribute("data-ln-is-before", "true");
+          } else {
+            el.setAttribute("data-ln-is-after", "true");
+          }
+        },
+        onLeave: (el) => {
+          el.removeAttribute("data-ln-is-before");
+          el.removeAttribute("data-ln-is-after");
+        },
+      }),
+      label: label,
+    }),
+  });
 });