@svgrid/grid 2.6.5 → 2.6.7

package/dist/row-drag.js

@@ -31,7 +31,24 @@ export function createRowDrag(ctx) {
             return true;
         return bus.group != null && bus.group === group();
     }
+    // A `dragleave` is not proof the pointer left the drop area. With row
+    // virtualization, scrolling to the viewport edge UNMOUNTS the row under the
+    // pointer, which fires its `dragleave`; the replacement row does not fire
+    // `dragover` until the next frame. Clearing synchronously made the drop
+    // indicator flicker off and the target go missing mid-drag (#69).
+    //
+    // So a leave only schedules the clear, and any `dragover` on a real row
+    // cancels it. If the pointer genuinely left, no dragover arrives and the
+    // clear lands a frame later - invisible to the user.
+    let leaveFrame = null;
+    function cancelPendingLeave() {
+        if (leaveFrame === null)
+            return;
+        cancelAnimationFrame(leaveFrame);
+        leaveFrame = null;
+    }
     function clearIndicators() {
+        cancelPendingLeave();
         ctx.rowDragActive = false;
         ctx.rowDropIndex = null;
         ctx.rowDropSide = null;
@@ -74,6 +91,9 @@ export function createRowDrag(ctx) {
         if (!canAccept())
             return;
         e.preventDefault();
+        // We are demonstrably still over a row, so a leave queued by a row that
+        // just unmounted underneath us must not fire.
+        cancelPendingLeave();
         if (e.dataTransfer)
             e.dataTransfer.dropEffect = "move";
         const rect = e.currentTarget.getBoundingClientRect();
@@ -81,17 +101,37 @@ export function createRowDrag(ctx) {
         ctx.rowDropSide = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
     }
     function onRowDragLeave(rowIndex) {
-        if (ctx.rowDropIndex === rowIndex) {
+        // A leave from a row that is not the current target is already stale.
+        if (ctx.rowDropIndex !== rowIndex)
+            return;
+        cancelPendingLeave();
+        // No rAF (SSR, or a jsdom without one): fall back to the old synchronous
+        // clear rather than leaving a stale indicator forever.
+        if (typeof requestAnimationFrame !== "function") {
             ctx.rowDropIndex = null;
             ctx.rowDropSide = null;
+            return;
         }
+        leaveFrame = requestAnimationFrame(() => {
+            leaveFrame = null;
+            // Re-check: an intervening dragover may have moved the target to another
+            // row, in which case this leave is stale and must not clear it.
+            if (ctx.rowDropIndex !== rowIndex)
+                return;
+            ctx.rowDropIndex = null;
+            ctx.rowDropSide = null;
+        });
     }
-    function onRowDrop(e, rowIndex) {
+    /**
+     * Splice the dragged row into position, for a drop on `rowIndex`.
+     *
+     * Input-agnostic on purpose: HTML5 `drop` and the pointer/touch path (#66)
+     * both land here, so the reorder, the cross-grid hand-off and the
+     * `onRowDragEnd` payload have exactly one implementation.
+     */
+    function commitDropOnRow(rowIndex, side) {
         if (!canAccept() || !bus)
             return;
-        e.preventDefault();
-        e.stopPropagation(); // don't let the tbody handler also fire (end-append)
-        const side = ctx.rowDropSide ?? "before";
         const dragged = bus.row;
         const target = originalAt(rowIndex);
         const sourceGridId = bus.gridId;
@@ -118,6 +158,13 @@ export function createRowDrag(ctx) {
         emitEnd(dragged, to, sameGrid, sourceGridId);
         bus = null;
     }
+    function onRowDrop(e, rowIndex) {
+        if (!canAccept() || !bus)
+            return;
+        e.preventDefault();
+        e.stopPropagation(); // don't let the tbody handler also fire (end-append)
+        commitDropOnRow(rowIndex, ctx.rowDropSide ?? "before");
+    }
     // Dropping in the empty area below the last row, or into an empty target
     // grid, appends. Row-level drops call stopPropagation so this only fires for
     // genuine empty-space drops.
@@ -153,6 +200,101 @@ export function createRowDrag(ctx) {
         clearIndicators();
         bus = null;
     }
+    // Touch drag (#66) lives in its own module and is fetched on the first touch
+    // that lands on a draggable row, so desktop never downloads it. The 350 ms
+    // long press inside it more than covers the fetch - the drag cannot start
+    // before that elapses anyway.
+    let touchDrag = null;
+    let touchLoading = false;
+    function touchDeps() {
+        return {
+            ctx,
+            managed,
+            originalAt,
+            commitDropOnRow,
+            clearIndicators,
+            cancelPendingLeave,
+            openBus: (row) => {
+                bus = {
+                    group: group(),
+                    gridId,
+                    row,
+                    sourceProps: ctx.props,
+                    removeFromSource: () => {
+                        ctx.internalData = ctx.internalData.filter((r) => r !== row);
+                    },
+                };
+            },
+            closeBus: () => {
+                bus = null;
+            },
+        };
+    }
+    /**
+     * Start of a possible touch drag. Ignores mouse and pen so the HTML5 drag
+     * handlers above keep owning those inputs.
+     */
+    function onRowPointerDown(e, rowIndex) {
+        if (!managed() || e.pointerType !== "touch")
+            return;
+        if (touchDrag) {
+            touchDrag.start(e, rowIndex);
+            return;
+        }
+        if (touchLoading)
+            return;
+        touchLoading = true;
+        // The touch module is not here yet, so nothing is listening. Watch the
+        // gesture ourselves for the length of the fetch: if the finger moves (a
+        // scroll) or lifts (a tap) before the module lands, the drag must not start
+        // when it does - otherwise the fetch window silently swallows the user's
+        // scroll and we hijack it.
+        const pid = e.pointerId;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        let aborted = false;
+        function stopWatching() {
+            window.removeEventListener("pointermove", onEarlyMove);
+            window.removeEventListener("pointerup", onEarlyEnd);
+            window.removeEventListener("pointercancel", onEarlyEnd);
+        }
+        function onEarlyMove(ev) {
+            if (ev.pointerId !== pid)
+                return;
+            // Same slop the touch module uses once it owns the gesture.
+            if (Math.abs(ev.clientY - startY) + Math.abs(ev.clientX - startX) > 10) {
+                aborted = true;
+                stopWatching();
+            }
+        }
+        function onEarlyEnd(ev) {
+            if (ev.pointerId !== pid)
+                return;
+            aborted = true;
+            stopWatching();
+        }
+        window.addEventListener("pointermove", onEarlyMove, { passive: true });
+        window.addEventListener("pointerup", onEarlyEnd);
+        window.addEventListener("pointercancel", onEarlyEnd);
+        // The event object is pooled in some engines, so capture what start() needs
+        // before yielding to the import.
+        const snapshot = {
+            pointerId: e.pointerId,
+            pointerType: e.pointerType,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            currentTarget: e.currentTarget,
+            preventDefault: () => { },
+        };
+        void import("./row-drag-touch").then((m) => {
+            touchLoading = false;
+            stopWatching();
+            if (aborted || !managed())
+                return;
+            touchDrag = m.createTouchDrag(touchDeps());
+            touchDrag.start(snapshot, rowIndex);
+        });
+    }
     return {
         onRowDragStart,
         onRowDragOver,
@@ -161,6 +303,8 @@ export function createRowDrag(ctx) {
         onRowsContainerDragOver,
         onRowsContainerDrop,
         onRowDragEnd,
+        /** Touch entry point (#66) - see the pointer-drag block above. */
+        onRowPointerDown,
         rowDragGridId: gridId,
         /**
          * Clear any managed drag this grid currently owns. Call on unmount so an
@@ -170,6 +314,13 @@ export function createRowDrag(ctx) {
          * never disturbs a concurrent drag owned by another grid.
          */
         destroyRowDrag() {
+            // Also drop any deferred leave: it would otherwise fire a frame later and
+            // write indicator state into a controller whose grid is gone.
+            cancelPendingLeave();
+            // ...and tear down an in-flight touch drag, which owns window listeners,
+            // a long-press timer and an autoscroll frame.
+            touchDrag?.destroy();
+            touchDrag = null;
             if (bus?.gridId === gridId)
                 bus = null;
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -62,6 +62,11 @@
       "import": "./dist/cdn/svgrid.svelte-external.js",
       "default": "./dist/cdn/svgrid.svelte-external.js"
     },
+    "./core": {
+      "types": "./dist/headless.d.ts",
+      "svelte": "./dist/headless.js",
+      "import": "./dist/headless.js"
+    },
     "./static-functions": {
       "types": "./dist/static-functions.d.ts",
       "svelte": "./dist/static-functions.js",
@@ -96,17 +101,9 @@
   "files": [
     "dist",
     "src",
-    "themes"
+    "themes",
+    "CHANGELOG.md"
   ],
-  "scripts": {
-    "clean": "rimraf ./build && rimraf ./dist",
-    "test:eslint": "eslint ./src",
-    "test:types": "svelte-check --tsconfig ./tsconfig.json",
-    "test:lib": "vitest run --coverage",
-    "test:build": "publint --strict",
-    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
-    "lint": "eslint ./src"
-  },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -120,5 +117,14 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:lib": "vitest run --coverage",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist && node ../../tools/strip-dist-tests.mjs ./dist && node ./scripts/build-cdn.mjs && node ./scripts/build-themes.mjs",
+    "lint": "eslint ./src"
   }
-}
+}

package/src/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}