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

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

@@ -4,11 +4,26 @@ import { useGridRoot } from "../context";
 import { HeaderGroupCellReact } from "@1771technologies/lytenyte-shared";
 import { fastDeepMemo, useCombinedRefs } from "@1771technologies/lytenyte-react-hooks";
 import { useDragMove } from "./use-drag-move";
-const HeaderGroupCellImpl = forwardRef(function HeaderCell({ cell, children, ...props }, forwarded) {
-    const grid = useGridRoot().grid;
-    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 HeaderGroupCellImpl = forwardRef(function HeaderCell(
+  { cell, children, ...props },
+  forwarded,
+) {
+  const grid = useGridRoot().grid;
+  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,
+  });
 });
 export const HeaderGroupCell = fastDeepMemo(HeaderGroupCellImpl);

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

@@ -1,4 +1,12 @@
 export interface HeaderRowProps {
-    readonly headerRowIndex: number;
+  readonly headerRowIndex: number;
 }
-export declare const HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HeaderRow: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").ClassAttributes<HTMLDivElement> &
+      import("react").HTMLAttributes<HTMLDivElement> &
+      HeaderRowProps,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/header/header-row.js

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useGridRoot } from "../context";
 import { HeaderRowReact } from "@1771technologies/lytenyte-shared";
 const HeaderRowImpl = forwardRef(function HeaderRow(props, forwarded) {
-    const maxRow = useGridRoot().grid.view.get().header.maxRow;
-    return _jsx(HeaderRowReact, { ...props, ref: forwarded, maxRow: maxRow });
+  const maxRow = useGridRoot().grid.view.get().header.maxRow;
+  return _jsx(HeaderRowReact, { ...props, ref: forwarded, maxRow: maxRow });
 });
 export const HeaderRow = fastDeepMemo(HeaderRowImpl);

package/dist/header/header.d.ts

@@ -1 +1,10 @@
-export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Header: import("react").ForwardRefExoticComponent<
+  Omit<
+    import("react").DetailedHTMLProps<
+      import("react").HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLDivElement>
+>;

package/dist/header/header.js

@@ -4,7 +4,16 @@ import { useGridRoot } from "../context";
 import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
 import { HeaderReact } from "@1771technologies/lytenyte-shared";
 const HeaderImpl = forwardRef(function Header(props, forwarded) {
-    const grid = useGridRoot().grid;
-    return (_jsx(HeaderReact, { ...props, ref: forwarded, floatingRowEnabled: grid.state.floatingRowEnabled.useValue(), floatingRowHeight: grid.state.floatingRowHeight.useValue(), headerGroupHeight: grid.state.headerGroupHeight.useValue(), headerHeight: grid.state.headerHeight.useValue(), rows: grid.internal.headerRows.useValue(), width: grid.state.widthTotal.useValue() }));
+  const grid = useGridRoot().grid;
+  return _jsx(HeaderReact, {
+    ...props,
+    ref: forwarded,
+    floatingRowEnabled: grid.state.floatingRowEnabled.useValue(),
+    floatingRowHeight: grid.state.floatingRowHeight.useValue(),
+    headerGroupHeight: grid.state.headerGroupHeight.useValue(),
+    headerHeight: grid.state.headerHeight.useValue(),
+    rows: grid.internal.headerRows.useValue(),
+    width: grid.state.widthTotal.useValue(),
+  });
 });
 export const Header = fastDeepMemo(HeaderImpl);

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

@@ -2,11 +2,20 @@ 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 cell: HeaderCellLayout<T>;
-    readonly xPositions: Uint32Array;
-    readonly className?: string;
-    readonly style?: CSSProperties;
+  readonly slot?: 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>({
+  slot,
+  cell,
+  xPositions,
+  style,
+  className,
+}: ResizeHandlerProps<T>): import("react").ReactElement<
+  unknown,
+  string | import("react").JSXElementConstructor<any>
+>;
 export {};

package/dist/header/resize-handler.js

@@ -1,128 +1,139 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import {} from "react";
-import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl, getTranslate, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
+import {
+  DEFAULT_COLUMN_WIDTH_MAX,
+  DEFAULT_COLUMN_WIDTH_MIN,
+  getColIndexFromEl,
+  getTranslate,
+  sizeFromCoord,
+} from "@1771technologies/lytenyte-shared";
 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, }) {
-    const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
-    const sx = useGridRoot().grid;
-    const double = sx.state.columnDoubleClickToAutosize.useValue();
-    const defaultProps = {
-        role: "button",
-        "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
-        tabIndex: -1,
-        onDoubleClick: () => {
-            if (!double)
-                return;
-            sx.api.columnAutosize({
-                columns: [cell.column],
-                includeHeader: true,
+export function ResizeHandler({ slot, cell, xPositions, style, className }) {
+  const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
+  const sx = useGridRoot().grid;
+  const double = sx.state.columnDoubleClickToAutosize.useValue();
+  const defaultProps = {
+    role: "button",
+    "data-ln-header-resizer": "true",
+    "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
+    tabIndex: -1,
+    onDoubleClick: () => {
+      if (!double) return;
+      sx.api.columnAutosize({
+        columns: [cell.column],
+        includeHeader: true,
+      });
+    },
+    onPointerDown: (ev) => {
+      const vp = sx.state.viewport.get();
+      if (!vp) return;
+      if (ev.pointerType === "mouse" && ev.button !== 0) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      const isRtl = sx.state.rtl.get();
+      let startX = null;
+      let anim = null;
+      const style = getComputedStyle(vp);
+      const overflow = style.overflowX;
+      vp.style.overflowX = "hidden";
+      const base = sx.state.columnBase.get();
+      const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
+      const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
+      const maxDelta = maxWidth - width;
+      const minDelta = minWidth - width;
+      const deltaRef = { current: 0 };
+      const controller = new AbortController();
+      document.addEventListener(
+        "pointermove",
+        (ev) => {
+          if (startX === null) {
+            startX = getClientX(ev);
+            return;
+          }
+          const endAdjust = cell.colPin === "end" ? -1 : 1;
+          const rtlAdjust = isRtl ? -1 : 1;
+          deltaRef.current = clamp(
+            minDelta,
+            (getClientX(ev) - startX) * endAdjust * rtlAdjust,
+            maxDelta,
+          );
+          if (anim) return;
+          anim = requestAnimationFrame(() => {
+            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 header = vp.querySelector(headerQuery);
+            if (!header) return;
+            const pin = header.getAttribute("data-ln-pin");
+            const queryAfter = `${query} ~ [data-ln-cell="true"]`;
+            const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
+            let after;
+            if (pin !== "end") {
+              after = Array.from(vp.querySelectorAll(queryAfter)).concat(
+                Array.from(vp.querySelectorAll(headerAfterQuery)),
+              );
+            } else {
+              after = [];
+            }
+            const q = Array.from(vp.querySelectorAll(query));
+            q.push(header);
+            q.forEach((c) => {
+              if (!isHTMLElement(c)) return;
+              c.style.removeProperty("min-width");
+              c.style.removeProperty("max-width");
+              c.style.width = `${width + deltaRef.current}px`;
+              if (pin === "end") {
+                const viewportWidth = sx.state.viewportWidthInner.get();
+                const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
+                const x = viewportWidth - spaceLeft - deltaRef.current;
+                c.style.transform = getTranslate(isRtl ? -x : x, 0);
+              }
             });
-        },
-        onPointerDown: (ev) => {
-            const vp = sx.state.viewport.get();
-            if (!vp)
+            after.forEach((c) => {
+              if (!isHTMLElement(c)) return;
+              const thisPin = c.getAttribute("data-ln-pin");
+              if (pin === "end" && thisPin === "end") {
                 return;
-            if (ev.pointerType === "mouse" && ev.button !== 0)
-                return;
-            ev.preventDefault();
-            ev.stopPropagation();
-            const isRtl = sx.state.rtl.get();
-            let startX = null;
-            let anim = null;
-            const style = getComputedStyle(vp);
-            const overflow = style.overflowX;
-            vp.style.overflowX = "hidden";
-            const base = sx.state.columnBase.get();
-            const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
-            const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
-            const maxDelta = maxWidth - width;
-            const minDelta = minWidth - width;
-            const deltaRef = { current: 0 };
-            const controller = new AbortController();
-            document.addEventListener("pointermove", (ev) => {
-                if (startX === null) {
-                    startX = getClientX(ev);
-                    return;
-                }
-                const endAdjust = cell.colPin === "end" ? -1 : 1;
-                const rtlAdjust = isRtl ? -1 : 1;
-                deltaRef.current = clamp(minDelta, (getClientX(ev) - startX) * endAdjust * rtlAdjust, maxDelta);
-                if (anim)
-                    return;
-                anim = requestAnimationFrame(() => {
-                    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 header = vp.querySelector(headerQuery);
-                    if (!header)
-                        return;
-                    const pin = header.getAttribute("data-ln-pin");
-                    const queryAfter = `${query} ~ [data-ln-cell="true"]`;
-                    const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
-                    let after;
-                    if (pin !== "end") {
-                        after = Array.from(vp.querySelectorAll(queryAfter)).concat(Array.from(vp.querySelectorAll(headerAfterQuery)));
-                    }
-                    else {
-                        after = [];
-                    }
-                    const q = Array.from(vp.querySelectorAll(query));
-                    q.push(header);
-                    q.forEach((c) => {
-                        if (!isHTMLElement(c))
-                            return;
-                        c.style.removeProperty("min-width");
-                        c.style.removeProperty("max-width");
-                        c.style.width = `${width + deltaRef.current}px`;
-                        if (pin === "end") {
-                            const viewportWidth = sx.state.viewportWidthInner.get();
-                            const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
-                            const x = viewportWidth - spaceLeft - deltaRef.current;
-                            c.style.transform = getTranslate(isRtl ? -x : x, 0);
-                        }
-                    });
-                    after.forEach((c) => {
-                        if (!isHTMLElement(c))
-                            return;
-                        const thisPin = c.getAttribute("data-ln-pin");
-                        if (pin === "end" && thisPin === "end") {
-                            return;
-                        }
-                        if (pin !== "end" && thisPin === "end")
-                            return;
-                        const colindex = getColIndexFromEl(c);
-                        const transform = xPositions[colindex] + deltaRef.current;
-                        c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
-                    });
-                    anim = null;
-                });
-            }, { signal: controller.signal });
-            window.addEventListener("pointerup", () => {
-                if (anim)
-                    cancelAnimationFrame(anim);
-                controller.abort();
-                vp.style.overflowX = overflow;
-                const newWidth = width + deltaRef.current;
-                sx.api.columnResize({ [cell.id]: newWidth });
-            }, { signal: controller.signal });
+              }
+              if (pin !== "end" && thisPin === "end") return;
+              const colindex = getColIndexFromEl(c);
+              const transform = xPositions[colindex] + deltaRef.current;
+              c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
+            });
+            anim = null;
+          });
         },
-        className,
-        style: {
-            height: "100%",
-            width: "8px",
-            ...style,
-            top: "0px",
-            insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
-            insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
-            position: "absolute",
+        { signal: controller.signal },
+      );
+      window.addEventListener(
+        "pointerup",
+        () => {
+          if (anim) cancelAnimationFrame(anim);
+          controller.abort();
+          vp.style.overflowX = overflow;
+          const newWidth = width + deltaRef.current;
+          sx.api.columnResize({ [cell.id]: newWidth });
         },
-    };
-    const edge = useSlot({
-        props: [defaultProps],
-        slot: slot ?? _jsx("div", {}),
-    });
-    return edge;
+        { signal: controller.signal },
+      );
+    },
+    className,
+    style: {
+      height: "100%",
+      width: "8px",
+      ...style,
+      top: "0px",
+      insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
+      insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
+      position: "absolute",
+    },
+  };
+  const edge = useSlot({
+    props: [defaultProps],
+    slot: slot ?? _jsx("div", {}),
+  });
+  return edge;
 }

package/dist/header/use-drag-move.d.ts

@@ -1,14 +1,25 @@
-import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types";
+import type {
+  Grid,
+  HeaderCellFloating,
+  HeaderCellLayout,
+  HeaderGroupCellLayout,
+} from "../+types.js";
 import { type JSX } from "react";
-import type { InternalAtoms } from "../state/+types";
-export declare function useDragMove<T>(grid: Grid<T> & {
+import type { InternalAtoms } from "../state/+types.js";
+export declare function useDragMove<T>(
+  grid: Grid<T> & {
     internal: InternalAtoms;
-}, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {
-    draggable?: undefined;
-    onDragStart?: undefined;
-    ref?: undefined;
-} | {
-    draggable: true;
-    onDragStart: (e: import("react").DragEvent<Element>) => void;
-    ref: any;
-};
+  },
+  cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>,
+  onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"],
+):
+  | {
+      draggable?: undefined;
+      onDragStart?: undefined;
+      ref?: undefined;
+    }
+  | {
+      draggable: true;
+      onDragStart: (e: import("react").DragEvent<Element>) => void;
+      ref: any;
+    };

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

@@ -1,90 +1,86 @@
-import { getHoveredColumnIndex, getNearestFocusable, useDraggable, } from "@1771technologies/lytenyte-shared";
+import {
+  getHoveredColumnIndex,
+  getNearestFocusable,
+  useDraggable,
+} from "@1771technologies/lytenyte-shared";
 import { useMemo, useRef } from "react";
 export function useDragMove(grid, cell, onDragStart) {
-    const ctx = grid.state;
-    const meta = ctx.columnMeta.useValue();
-    const base = ctx.columnBase.useValue();
-    const columns = useMemo(() => {
-        const columns = [];
-        for (let i = cell.colStart; i < cell.colEnd; i++) {
-            columns.push(meta.columnsVisible[i]);
-        }
-        return columns;
-    }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
-    const isMovable = useMemo(() => {
-        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable ?? false);
-    }, [base.uiHints?.movable, columns]);
-    const swapDirection = useRef(null);
-    const swapIndex = useRef(-1);
-    const swapPrevIndex = useRef(-1);
-    const isForward = useRef(false);
-    const prevPos = useRef(-1);
-    const { dragProps } = useDraggable({
-        getItems: () => ({}),
-        onDragStart: () => {
-            if (cell.kind === "group")
-                grid.internal.draggingHeader.set(cell);
-        },
-        onDragEnd: () => {
-            grid.internal.draggingHeader.set(null);
-        },
-        onDragMove: (p) => {
-            const element = document.elementFromPoint(p.position.x, p.position.y);
-            const vp = grid.state.viewport.get();
-            if (!vp?.contains(element))
-                return;
-            const nearest = getNearestFocusable(element);
-            if (!nearest)
-                return;
-            if (prevPos.current < p.position.x)
-                isForward.current = true;
-            if (prevPos.current > p.position.x)
-                isForward.current = false;
-            prevPos.current = p.position.x;
-            const meta = grid.state.columnMeta.get();
-            const index = getHoveredColumnIndex({
-                viewport: vp,
-                centerCount: meta.columnVisibleCenterCount,
-                startCount: meta.columnVisibleStartCount,
-                endCount: meta.columnVisibleEndCount,
-                clientX: p.position.x,
-                rtl: grid.state.rtl.get(),
-                xPositions: grid.state.xPositions.get(),
-            });
-            if (index == null)
-                return;
-            const first = columns[0];
-            const currentIndex = grid.api.columnIndex(first);
-            const columnIndices = columns.map((c) => grid.api.columnIndex(c));
-            if (columnIndices.includes(index))
-                return;
-            const ignoreMove = swapDirection.current === isForward.current &&
-                swapIndex.current === currentIndex &&
-                index === swapPrevIndex.current;
-            if (currentIndex === index || ignoreMove)
-                return;
-            swapDirection.current = isForward.current;
-            swapIndex.current = index;
-            swapPrevIndex.current = currentIndex;
-            grid.api.columnMove({
-                moveColumns: columns,
-                moveTarget: index,
-                before: currentIndex > index,
-                updatePinState: true,
-            });
-        },
-    });
-    const finalProps = useMemo(() => {
-        if (cell.kind === "floating" || !isMovable)
-            return {};
-        return {
-            draggable: true,
-            onDragStart: (e) => {
-                onDragStart?.(e);
-                dragProps.onDragStart(e);
-            },
-            ref: dragProps.ref,
-        };
-    }, [cell.kind, dragProps, isMovable, onDragStart]);
-    return finalProps;
+  const ctx = grid.state;
+  const meta = ctx.columnMeta.useValue();
+  const base = ctx.columnBase.useValue();
+  const columns = useMemo(() => {
+    const columns = [];
+    for (let i = cell.colStart; i < cell.colEnd; i++) {
+      columns.push(meta.columnsVisible[i]);
+    }
+    return columns;
+  }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
+  const isMovable = useMemo(() => {
+    return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable ?? false);
+  }, [base.uiHints?.movable, columns]);
+  const swapDirection = useRef(null);
+  const swapIndex = useRef(-1);
+  const swapPrevIndex = useRef(-1);
+  const isForward = useRef(false);
+  const prevPos = useRef(-1);
+  const { dragProps } = useDraggable({
+    getItems: () => ({}),
+    onDragStart: () => {
+      if (cell.kind === "group") grid.internal.draggingHeader.set(cell);
+    },
+    onDragEnd: () => {
+      grid.internal.draggingHeader.set(null);
+    },
+    onDragMove: (p) => {
+      const element = document.elementFromPoint(p.position.x, p.position.y);
+      const vp = grid.state.viewport.get();
+      if (!vp?.contains(element)) return;
+      const nearest = getNearestFocusable(element);
+      if (!nearest) return;
+      if (prevPos.current < p.position.x) isForward.current = true;
+      if (prevPos.current > p.position.x) isForward.current = false;
+      prevPos.current = p.position.x;
+      const meta = grid.state.columnMeta.get();
+      const index = getHoveredColumnIndex({
+        viewport: vp,
+        centerCount: meta.columnVisibleCenterCount,
+        startCount: meta.columnVisibleStartCount,
+        endCount: meta.columnVisibleEndCount,
+        clientX: p.position.x,
+        rtl: grid.state.rtl.get(),
+        xPositions: grid.state.xPositions.get(),
+      });
+      if (index == null) return;
+      const first = columns[0];
+      const currentIndex = grid.api.columnIndex(first);
+      const columnIndices = columns.map((c) => grid.api.columnIndex(c));
+      if (columnIndices.includes(index)) return;
+      const ignoreMove =
+        swapDirection.current === isForward.current &&
+        swapIndex.current === currentIndex &&
+        index === swapPrevIndex.current;
+      if (currentIndex === index || ignoreMove) return;
+      swapDirection.current = isForward.current;
+      swapIndex.current = index;
+      swapPrevIndex.current = currentIndex;
+      grid.api.columnMove({
+        moveColumns: columns,
+        moveTarget: index,
+        before: currentIndex > index,
+        updatePinState: true,
+      });
+    },
+  });
+  const finalProps = useMemo(() => {
+    if (cell.kind === "floating" || !isMovable) return {};
+    return {
+      draggable: true,
+      onDragStart: (e) => {
+        onDragStart?.(e);
+        dragProps.onDragStart(e);
+      },
+      ref: dragProps.ref,
+    };
+  }, [cell.kind, dragProps, isMovable, onDragStart]);
+  return finalProps;
 }

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

@@ -1,4 +1,11 @@
 import type { HeaderCellFloating, HeaderCellLayout, HeaderCellRendererParams } from "../+types";
-declare function DefaultRenderer(p: HeaderCellRendererParams<any>): import("react/jsx-runtime").JSX.Element;
-export declare function useHeaderCellRenderer<T>(cell: HeaderCellLayout<T> | HeaderCellFloating<T>): import("../+types").HeaderFloatingCellRendererFn<any> | import("../+types").HeaderCellRendererFn<T> | typeof DefaultRenderer;
+declare function DefaultRenderer(
+  p: HeaderCellRendererParams<any>,
+): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderCellRenderer<T>(
+  cell: HeaderCellLayout<T> | HeaderCellFloating<T>,
+):
+  | import("../+types").HeaderFloatingCellRendererFn<any>
+  | import("../+types").HeaderCellRendererFn<T>
+  | typeof DefaultRenderer;
 export {};