@lensui/lens-table 0.1.87 → 0.1.89

package/dist/index.cjs

@@ -1176,6 +1176,41 @@ function getSelectionOutlineBounds({
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
 }
+function getAnimatedRowDragOffset(preview, rowIndex, rowHeight) {
+  if (!preview || rowIndex === preview.sourceIndex) return 0;
+  const targetOffset = preview.sourceIndex < preview.targetIndex ? rowIndex > preview.sourceIndex && rowIndex <= preview.targetIndex ? -rowHeight : 0 : rowIndex >= preview.targetIndex && rowIndex < preview.sourceIndex ? rowHeight : 0;
+  const startOffset = preview.fromOffsets?.[rowIndex] ?? 0;
+  const progress = Math.max(0, Math.min(1, preview.progress ?? 1));
+  return startOffset + (targetOffset - startOffset) * progress;
+}
+function getAnimatedRowDragGapRanges(preview, rowCount, rowHeight, bodyTop, scrollTop) {
+  if (!preview || rowCount <= 0 || rowHeight <= 0) return [];
+  const affectedIndices = [preview.sourceIndex, preview.targetIndex];
+  preview.fromOffsets?.forEach((offset, rowIndex) => {
+    if (Math.abs(offset) > 0.01) affectedIndices.push(rowIndex);
+  });
+  const startIndex = Math.max(0, Math.min(...affectedIndices));
+  const endIndex = Math.min(rowCount - 1, Math.max(...affectedIndices));
+  const regionTop = bodyTop + startIndex * rowHeight - scrollTop;
+  const regionBottom = bodyTop + (endIndex + 1) * rowHeight - scrollTop;
+  const occupied = [];
+  for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex += 1) {
+    if (rowIndex === preview.sourceIndex) continue;
+    const top = bodyTop + rowIndex * rowHeight - scrollTop + getAnimatedRowDragOffset(preview, rowIndex, rowHeight);
+    occupied.push({ top, bottom: top + rowHeight });
+  }
+  occupied.sort((left, right) => left.top - right.top);
+  const gaps = [];
+  let cursor = regionTop;
+  for (const interval of occupied) {
+    const top = Math.max(regionTop, interval.top);
+    const bottom = Math.min(regionBottom, interval.bottom);
+    if (top > cursor + 0.01) gaps.push({ top: cursor, bottom: top });
+    cursor = Math.max(cursor, bottom);
+  }
+  if (cursor < regionBottom - 0.01) gaps.push({ top: cursor, bottom: regionBottom });
+  return gaps;
+}
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
@@ -1228,13 +1263,7 @@ function paintGrid(options) {
   };
   const displayedContentRight = columns.reduce((right, _column, index) => Math.max(right, getColumnX(index) + metrics[index].width), 0);
   const trailingBlankStart = displayedContentRight > 0 && displayedContentRight < width ? displayedContentRight : null;
-  const getRowDragOffset = (rowIndex) => {
-    if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
-    if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
-      return rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0;
-    }
-    return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
-  };
+  const getRowDragOffset = (rowIndex) => getAnimatedRowDragOffset(rowDragPreview, rowIndex, rowHeight);
   const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
   if (trailingBlankStart !== null) {
     const rowStart = Math.max(0, range.rowStart);
@@ -1343,7 +1372,7 @@ function paintGrid(options) {
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
-        if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
+        if (!horizontalBorderless && rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
@@ -1477,6 +1506,26 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (rowDragPreview && !verticalBorderless) {
+    const gapRanges = getAnimatedRowDragGapRanges(
+      rowDragPreview,
+      rows.length,
+      rowHeight,
+      bodyTop,
+      scrollTop
+    );
+    ctx.fillStyle = colors.grid;
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+      if (frameBorderless && columnIndex === columns.length - 1) continue;
+      const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+      if (columns[columnIndex].fixed === void 0 && (x < leftFixedWidth || x >= rightFixedLeft)) continue;
+      for (const gap of gapRanges) {
+        const top = Math.max(bodyTop, gap.top);
+        const bottom = Math.min(height, gap.bottom);
+        if (bottom > top) ctx.fillRect(x, top, 1, bottom - top);
+      }
+    }
+  }
   if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
@@ -2181,6 +2230,24 @@ function TableInner({
   const [liftedRowPreview, setLiftedRowPreview] = (0, import_react8.useState)(null);
   const [columnDragPreview, setColumnDragPreview] = (0, import_react8.useState)(null);
   const [columnDropTarget, setColumnDropTarget] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!rowDragPreview || (rowDragPreview.progress ?? 1) >= 1) return;
+    const sourceIndex = rowDragPreview.sourceIndex;
+    const targetIndex = rowDragPreview.targetIndex;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? { ...current, progress: 1 } : current);
+      return;
+    }
+    const startedAt = performance.now();
+    let frame = 0;
+    const animate = (now) => {
+      const progress = Math.min(1, (now - startedAt) / 140);
+      setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? { ...current, progress } : current);
+      if (progress < 1) frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [rowDragPreview?.sourceIndex, rowDragPreview?.targetIndex]);
   (0, import_react8.useEffect)(() => {
     if (!loading) hasCompletedLoadRef.current = true;
   }, [loading]);
@@ -3427,9 +3494,10 @@ function TableInner({
   const setRowDragGuide = (0, import_react8.useCallback)((y) => {
     const guide = rowDragGuideRef.current;
     if (!guide) return;
-    guide.style.display = y === null ? "none" : "block";
-    if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
-  }, []);
+    const visibleY = horizontalBorderless ? null : y;
+    guide.style.display = visibleY === null ? "none" : "block";
+    if (visibleY !== null) guide.style.transform = `translateY(${Math.round(visibleY)}px)`;
+  }, [horizontalBorderless]);
   const locateRow = (0, import_react8.useCallback)((clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -3476,7 +3544,15 @@ function TableInner({
     if (drag.sourceIndex < targetIndex) targetIndex -= 1;
     targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
     drag.targetIndex = targetIndex;
-    setRowDragPreview(null);
+    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : {
+      sourceIndex: drag.sourceIndex,
+      targetIndex,
+      fromOffsets: Array.from(
+        { length: rows.length },
+        (_, rowIndex) => getAnimatedRowDragOffset(current, rowIndex, rowHeight)
+      ),
+      progress: 0
+    });
     setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
   }, [bodyTop, hideDragTooltips, locateRow, renderHeight, rowHeight, rows.length, setRowDragGuide]);
   const finishRowOrderPointerDrag = (0, import_react8.useCallback)((event, apply) => {
@@ -4415,13 +4491,7 @@ function TableInner({
       top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 68))
     });
   };
-  const getRowDragOffset = (rowIndex) => {
-    if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
-    if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
-      return rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0;
-    }
-    return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
-  };
+  const getRowDragOffset = (rowIndex) => getAnimatedRowDragOffset(rowDragPreview, rowIndex, rowHeight);
   const renderAnnotationControls = (targetCells) => {
     const getKey = (cell) => `${typeof cell.rowKey}:${String(cell.rowKey)}\0${cell.columnKey}`;
     const hasAnnotation = targetCells.some((cell) => cellAnnotations.has(getKey(cell)));
@@ -4731,7 +4801,7 @@ function TableInner({
   })();
   const selectionOutlineStyle = (() => {
     if (!selection || selectionRange) return null;
-    if (rowDragPreview?.sourceIndex === selection.rowIndex) return null;
+    if (liftedRowPreview?.sourceIndex === selection.rowIndex) return null;
     const row = rows[selection.rowIndex];
     const metric = metrics[selection.columnIndex];
     const column = columns[selection.columnIndex];
@@ -5011,7 +5081,12 @@ function TableInner({
   const draggingSelectedColumn = Boolean(
     columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  const liftedRow = liftedRowPreview ? rows[liftedRowPreview.sourceIndex] : void 0;
+  const liftedRowKey = liftedRow && liftedRowPreview ? getRowKey(liftedRow, liftedRowPreview.sourceIndex) : void 0;
+  const liftedRowAxisSelected = liftedRowKey !== void 0 && selectedRowKeySet.has(liftedRowKey);
+  const liftedRowCellFocused = liftedRowKey !== void 0 && selection?.rowKey === liftedRowKey;
+  const liftedRowStyle = liftedRow && liftedRowPreview && !liftedRowAxisSelected ? rowStyle?.(liftedRow, liftedRowPreview.sourceIndex) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""}${rowDragPreview ? " is-row-dragging" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "canvas",
@@ -5724,24 +5799,31 @@ function TableInner({
         ]
       }
     ),
-    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    liftedRowPreview && liftedRow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         "aria-hidden": "true",
-        className: `rvg-row-drag-preview${selectedRowKeySet.has(getRowKey(rows[liftedRowPreview.sourceIndex], liftedRowPreview.sourceIndex)) ? " is-selected" : ""}`,
-        style: { top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
-        children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
-          {
-            className: "rvg-row-drag-preview-cell",
-            style: {
-              left: getDisplayedColumnLeft(columnIndex),
-              width: metrics[columnIndex]?.width ?? 0
+        className: `rvg-row-drag-preview${liftedRowAxisSelected ? " is-selected is-axis-selected" : ""}${hasStripedRows && liftedRowPreview.sourceIndex % 2 === 1 ? " is-striped" : ""}`,
+        style: { ...liftedRowStyle, top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
+        children: columns.map((column, columnIndex) => {
+          const value = column.dataIndex === void 0 ? void 0 : liftedRow[column.dataIndex];
+          const cellStyle = liftedRowAxisSelected ? void 0 : column.cellStyle?.(value, liftedRow, liftedRowPreview.sourceIndex);
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: `rvg-row-drag-preview-cell${column.renderCell ? " is-custom" : ""}${liftedRowAxisSelected ? " is-axis-selected" : ""}${liftedRowCellFocused && selection?.columnKey === column.key ? " is-selected" : ""}`,
+              style: {
+                ...cellStyle,
+                left: getDisplayedColumnLeft(columnIndex),
+                width: metrics[columnIndex]?.width ?? 0,
+                justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+                color: cellStyle?.color ?? liftedRowStyle?.color
+              },
+              children: column.renderCell ? column.renderCell(value, liftedRow, liftedRowPreview.sourceIndex) : getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
             },
-            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
-          },
-          `row-preview:${column.key}`
-        ))
+            `row-preview:${column.key}`
+          );
+        })
       }
     ),
     resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(

package/dist/index.css

@@ -230,7 +230,12 @@
   font-size: var(--rvg-font-size-body);
   transition: transform 140ms ease, opacity 100ms ease;
 }
-.rvg-row-drop-settling .rvg-cell-text {
+.rvg-root.is-row-dragging .rvg-cell-text,
+.rvg-root.is-row-dragging .rvg-cell-render,
+.rvg-root.is-row-dragging .rvg-selection-focus,
+.rvg-row-drop-settling .rvg-cell-text,
+.rvg-row-drop-settling .rvg-cell-render,
+.rvg-row-drop-settling .rvg-selection-focus {
   transition: none;
 }
 .rvg-cell-text > span,
@@ -482,7 +487,6 @@
   border: 2px solid var(--rvg-color-primary);
   box-sizing: border-box;
   pointer-events: none;
-  transition: transform 140ms ease;
 }
 .rvg-selection-edge-target {
   position: absolute;
@@ -1638,17 +1642,28 @@
 }
 .rvg-row-drag-preview {
   position: absolute;
-  z-index: 6;
+  z-index: 8;
   left: 0;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid #8db8f3;
   background: var(--rvg-color-bg);
   box-shadow: 0 5px 14px rgba(32, 75, 135, 0.2);
   box-sizing: border-box;
-  opacity: 0.94;
+  opacity: 1;
   pointer-events: none;
   transform: translateY(-1px);
 }
+.rvg-root.is-horizontal-borderless .rvg-row-drag-preview {
+  border-top: 0;
+  border-bottom: 0;
+}
+.rvg-row-drag-preview.is-striped {
+  background: var(--rvg-color-stripe);
+}
+.rvg-row-drag-preview *,
+.rvg-row-drag-preview-cell > * {
+  pointer-events: none !important;
+}
 .rvg-row-drag-preview-cell {
   position: absolute;
   top: 0;
@@ -1670,7 +1685,7 @@
 }
 .rvg-row-drag-preview.is-selected {
   border-color: var(--rvg-color-primary);
-  background: var(--rvg-color-selection-fill);
+  background: var(--rvg-color-axis-selection-fill);
 }
 .rvg-row-drag-preview.is-selected .rvg-row-drag-preview-cell {
   border-right-color: color-mix(in srgb, var(--rvg-color-axis-selection-text) 34%, transparent);
@@ -1686,6 +1701,12 @@
   background: var(--rvg-color-selection-fill);
   box-shadow: 0 0 0 2px var(--rvg-color-primary);
 }
+@media (prefers-reduced-motion: reduce) {
+  .rvg-cell-text,
+  .rvg-cell-render {
+    transition: none;
+  }
+}
 .rvg-preview-checkbox {
   display: grid;
   width: 14px;

package/dist/index.js

@@ -1146,6 +1146,41 @@ function getSelectionOutlineBounds({
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
 }
+function getAnimatedRowDragOffset(preview, rowIndex, rowHeight) {
+  if (!preview || rowIndex === preview.sourceIndex) return 0;
+  const targetOffset = preview.sourceIndex < preview.targetIndex ? rowIndex > preview.sourceIndex && rowIndex <= preview.targetIndex ? -rowHeight : 0 : rowIndex >= preview.targetIndex && rowIndex < preview.sourceIndex ? rowHeight : 0;
+  const startOffset = preview.fromOffsets?.[rowIndex] ?? 0;
+  const progress = Math.max(0, Math.min(1, preview.progress ?? 1));
+  return startOffset + (targetOffset - startOffset) * progress;
+}
+function getAnimatedRowDragGapRanges(preview, rowCount, rowHeight, bodyTop, scrollTop) {
+  if (!preview || rowCount <= 0 || rowHeight <= 0) return [];
+  const affectedIndices = [preview.sourceIndex, preview.targetIndex];
+  preview.fromOffsets?.forEach((offset, rowIndex) => {
+    if (Math.abs(offset) > 0.01) affectedIndices.push(rowIndex);
+  });
+  const startIndex = Math.max(0, Math.min(...affectedIndices));
+  const endIndex = Math.min(rowCount - 1, Math.max(...affectedIndices));
+  const regionTop = bodyTop + startIndex * rowHeight - scrollTop;
+  const regionBottom = bodyTop + (endIndex + 1) * rowHeight - scrollTop;
+  const occupied = [];
+  for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex += 1) {
+    if (rowIndex === preview.sourceIndex) continue;
+    const top = bodyTop + rowIndex * rowHeight - scrollTop + getAnimatedRowDragOffset(preview, rowIndex, rowHeight);
+    occupied.push({ top, bottom: top + rowHeight });
+  }
+  occupied.sort((left, right) => left.top - right.top);
+  const gaps = [];
+  let cursor = regionTop;
+  for (const interval of occupied) {
+    const top = Math.max(regionTop, interval.top);
+    const bottom = Math.min(regionBottom, interval.bottom);
+    if (top > cursor + 0.01) gaps.push({ top: cursor, bottom: top });
+    cursor = Math.max(cursor, bottom);
+  }
+  if (cursor < regionBottom - 0.01) gaps.push({ top: cursor, bottom: regionBottom });
+  return gaps;
+}
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
@@ -1198,13 +1233,7 @@ function paintGrid(options) {
   };
   const displayedContentRight = columns.reduce((right, _column, index) => Math.max(right, getColumnX(index) + metrics[index].width), 0);
   const trailingBlankStart = displayedContentRight > 0 && displayedContentRight < width ? displayedContentRight : null;
-  const getRowDragOffset = (rowIndex) => {
-    if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
-    if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
-      return rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0;
-    }
-    return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
-  };
+  const getRowDragOffset = (rowIndex) => getAnimatedRowDragOffset(rowDragPreview, rowIndex, rowHeight);
   const rowBelowDragGap = rowDragPreview ? rowDragPreview.sourceIndex <= rowDragPreview.targetIndex ? rowDragPreview.targetIndex + 1 : rowDragPreview.targetIndex : -1;
   if (trailingBlankStart !== null) {
     const rowStart = Math.max(0, range.rowStart);
@@ -1313,7 +1342,7 @@ function paintGrid(options) {
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
-        if (rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
+        if (!horizontalBorderless && rowIndex === rowBelowDragGap) ctx.fillRect(x, y, cellWidth, 1);
         if (!horizontalBorderless && (!options.suppressLastRowBottomBorder || rowIndex !== rows.length - 1)) {
           ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
         }
@@ -1447,6 +1476,26 @@ function paintGrid(options) {
   paintBodyColumns("scroll");
   paintBodyColumns("left");
   paintBodyColumns("right");
+  if (rowDragPreview && !verticalBorderless) {
+    const gapRanges = getAnimatedRowDragGapRanges(
+      rowDragPreview,
+      rows.length,
+      rowHeight,
+      bodyTop,
+      scrollTop
+    );
+    ctx.fillStyle = colors.grid;
+    for (let columnIndex = 0; columnIndex < columns.length; columnIndex += 1) {
+      if (frameBorderless && columnIndex === columns.length - 1) continue;
+      const x = getColumnX(columnIndex) + metrics[columnIndex].width - 1;
+      if (columns[columnIndex].fixed === void 0 && (x < leftFixedWidth || x >= rightFixedLeft)) continue;
+      for (const gap of gapRanges) {
+        const top = Math.max(bodyTop, gap.top);
+        const bottom = Math.min(height, gap.bottom);
+        if (bottom > top) ctx.fillRect(x, top, 1, bottom - top);
+      }
+    }
+  }
   if (extendVerticalGridLines) {
     const extensionTop = Math.max(bodyTop, Math.min(height, bodyTop + rows.length * rowHeight - scrollTop));
     const extensionHeight = Math.max(0, height - extensionTop);
@@ -2151,6 +2200,24 @@ function TableInner({
   const [liftedRowPreview, setLiftedRowPreview] = useState6(null);
   const [columnDragPreview, setColumnDragPreview] = useState6(null);
   const [columnDropTarget, setColumnDropTarget] = useState6(null);
+  useEffect3(() => {
+    if (!rowDragPreview || (rowDragPreview.progress ?? 1) >= 1) return;
+    const sourceIndex = rowDragPreview.sourceIndex;
+    const targetIndex = rowDragPreview.targetIndex;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? { ...current, progress: 1 } : current);
+      return;
+    }
+    const startedAt = performance.now();
+    let frame = 0;
+    const animate = (now) => {
+      const progress = Math.min(1, (now - startedAt) / 140);
+      setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? { ...current, progress } : current);
+      if (progress < 1) frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [rowDragPreview?.sourceIndex, rowDragPreview?.targetIndex]);
   useEffect3(() => {
     if (!loading) hasCompletedLoadRef.current = true;
   }, [loading]);
@@ -3397,9 +3464,10 @@ function TableInner({
   const setRowDragGuide = useCallback3((y) => {
     const guide = rowDragGuideRef.current;
     if (!guide) return;
-    guide.style.display = y === null ? "none" : "block";
-    if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
-  }, []);
+    const visibleY = horizontalBorderless ? null : y;
+    guide.style.display = visibleY === null ? "none" : "block";
+    if (visibleY !== null) guide.style.transform = `translateY(${Math.round(visibleY)}px)`;
+  }, [horizontalBorderless]);
   const locateRow = useCallback3((clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -3446,7 +3514,15 @@ function TableInner({
     if (drag.sourceIndex < targetIndex) targetIndex -= 1;
     targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
     drag.targetIndex = targetIndex;
-    setRowDragPreview(null);
+    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : {
+      sourceIndex: drag.sourceIndex,
+      targetIndex,
+      fromOffsets: Array.from(
+        { length: rows.length },
+        (_, rowIndex) => getAnimatedRowDragOffset(current, rowIndex, rowHeight)
+      ),
+      progress: 0
+    });
     setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
   }, [bodyTop, hideDragTooltips, locateRow, renderHeight, rowHeight, rows.length, setRowDragGuide]);
   const finishRowOrderPointerDrag = useCallback3((event, apply) => {
@@ -4385,13 +4461,7 @@ function TableInner({
       top: Math.min(Math.max(0, clientY - root.top), Math.max(0, renderHeight - 68))
     });
   };
-  const getRowDragOffset = (rowIndex) => {
-    if (!rowDragPreview || rowIndex === rowDragPreview.sourceIndex) return 0;
-    if (rowDragPreview.sourceIndex < rowDragPreview.targetIndex) {
-      return rowIndex > rowDragPreview.sourceIndex && rowIndex <= rowDragPreview.targetIndex ? -rowHeight : 0;
-    }
-    return rowIndex >= rowDragPreview.targetIndex && rowIndex < rowDragPreview.sourceIndex ? rowHeight : 0;
-  };
+  const getRowDragOffset = (rowIndex) => getAnimatedRowDragOffset(rowDragPreview, rowIndex, rowHeight);
   const renderAnnotationControls = (targetCells) => {
     const getKey = (cell) => `${typeof cell.rowKey}:${String(cell.rowKey)}\0${cell.columnKey}`;
     const hasAnnotation = targetCells.some((cell) => cellAnnotations.has(getKey(cell)));
@@ -4701,7 +4771,7 @@ function TableInner({
   })();
   const selectionOutlineStyle = (() => {
     if (!selection || selectionRange) return null;
-    if (rowDragPreview?.sourceIndex === selection.rowIndex) return null;
+    if (liftedRowPreview?.sourceIndex === selection.rowIndex) return null;
     const row = rows[selection.rowIndex];
     const metric = metrics[selection.columnIndex];
     const column = columns[selection.columnIndex];
@@ -4981,7 +5051,12 @@ function TableInner({
   const draggingSelectedColumn = Boolean(
     columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
   );
-  return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
+  const liftedRow = liftedRowPreview ? rows[liftedRowPreview.sourceIndex] : void 0;
+  const liftedRowKey = liftedRow && liftedRowPreview ? getRowKey(liftedRow, liftedRowPreview.sourceIndex) : void 0;
+  const liftedRowAxisSelected = liftedRowKey !== void 0 && selectedRowKeySet.has(liftedRowKey);
+  const liftedRowCellFocused = liftedRowKey !== void 0 && selection?.rowKey === liftedRowKey;
+  const liftedRowStyle = liftedRow && liftedRowPreview && !liftedRowAxisSelected ? rowStyle?.(liftedRow, liftedRowPreview.sourceIndex) : void 0;
+  return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""}${rowDragPreview ? " is-row-dragging" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
     /* @__PURE__ */ jsxs8("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx8(
         "canvas",
@@ -5694,24 +5769,31 @@ function TableInner({
         ]
       }
     ),
-    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__PURE__ */ jsx8(
+    liftedRowPreview && liftedRow && /* @__PURE__ */ jsx8(
       "div",
       {
         "aria-hidden": "true",
-        className: `rvg-row-drag-preview${selectedRowKeySet.has(getRowKey(rows[liftedRowPreview.sourceIndex], liftedRowPreview.sourceIndex)) ? " is-selected" : ""}`,
-        style: { top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
-        children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx8(
-          "div",
-          {
-            className: "rvg-row-drag-preview-cell",
-            style: {
-              left: getDisplayedColumnLeft(columnIndex),
-              width: metrics[columnIndex]?.width ?? 0
+        className: `rvg-row-drag-preview${liftedRowAxisSelected ? " is-selected is-axis-selected" : ""}${hasStripedRows && liftedRowPreview.sourceIndex % 2 === 1 ? " is-striped" : ""}`,
+        style: { ...liftedRowStyle, top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
+        children: columns.map((column, columnIndex) => {
+          const value = column.dataIndex === void 0 ? void 0 : liftedRow[column.dataIndex];
+          const cellStyle = liftedRowAxisSelected ? void 0 : column.cellStyle?.(value, liftedRow, liftedRowPreview.sourceIndex);
+          return /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: `rvg-row-drag-preview-cell${column.renderCell ? " is-custom" : ""}${liftedRowAxisSelected ? " is-axis-selected" : ""}${liftedRowCellFocused && selection?.columnKey === column.key ? " is-selected" : ""}`,
+              style: {
+                ...cellStyle,
+                left: getDisplayedColumnLeft(columnIndex),
+                width: metrics[columnIndex]?.width ?? 0,
+                justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+                color: cellStyle?.color ?? liftedRowStyle?.color
+              },
+              children: column.renderCell ? column.renderCell(value, liftedRow, liftedRowPreview.sourceIndex) : getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
             },
-            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
-          },
-          `row-preview:${column.key}`
-        ))
+            `row-preview:${column.key}`
+          );
+        })
       }
     ),
     resizeGuideX !== null && /* @__PURE__ */ jsx8(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",