@lensui/lens-table 0.1.78 → 0.1.80

package/dist/index.cjs

@@ -907,7 +907,11 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
           if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
           onChange(next);
         },
-        onBlur: commitValue,
+        onBlur: (event) => {
+          const nextTarget = event.relatedTarget;
+          if (nextTarget instanceof Element && nextTarget.closest("[data-rvg-preserve-edit]")) return;
+          commitValue();
+        },
         onKeyDown: handleKeyDown
       }
     ),
@@ -1276,6 +1280,7 @@ function paintGrid(options) {
         const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
         const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
         const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
+        const cellGridColor = cellStyle?.gridColor ? resolveColor(cellStyle.gridColor) : void 0;
         if (!isSelectedCell && !isRangeCell && cellStyle?.backgroundColor) {
           const cellBackground = resolveColor(cellStyle.backgroundColor);
           if (cellBackground) {
@@ -1302,7 +1307,7 @@ function paintGrid(options) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
+        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : isRangeCell ? colors.selectionFill : cellGridColor ?? colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
@@ -2127,6 +2132,7 @@ function TableInner({
   const [editing, setEditing] = (0, import_react8.useState)(null);
   const [draft, setDraft] = (0, import_react8.useState)("");
   const [rowDragPreview, setRowDragPreview] = (0, import_react8.useState)(null);
+  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)(() => {
@@ -3399,24 +3405,29 @@ function TableInner({
       event.currentTarget.style.cursor = "move";
     }
     event.preventDefault();
+    const canvasTop = event.currentTarget.getBoundingClientRect().top;
+    setLiftedRowPreview({
+      sourceIndex: drag.sourceIndex,
+      top: Math.max(bodyTop, Math.min(renderHeight - rowHeight, event.clientY - canvasTop - rowHeight / 2))
+    });
     const rawTargetIndex = locateRow(event.clientY);
     if (rawTargetIndex < 0) return;
-    const canvasTop = event.currentTarget.getBoundingClientRect().top;
     const rowTop = bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top;
     const edge = event.clientY - canvasTop < rowTop + rowHeight / 2 ? "top" : "bottom";
     let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
     if (drag.sourceIndex < targetIndex) targetIndex -= 1;
     targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
     drag.targetIndex = targetIndex;
-    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex: drag.sourceIndex, targetIndex });
+    setRowDragPreview(null);
     setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
-  }, [bodyTop, hideDragTooltips, locateRow, rowHeight, rows.length, setRowDragGuide]);
+  }, [bodyTop, hideDragTooltips, locateRow, renderHeight, rowHeight, rows.length, setRowDragGuide]);
   const finishRowOrderPointerDrag = (0, import_react8.useCallback)((event, apply) => {
     const drag = rowOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture?.(event.pointerId);
     rowOrderDragRef.current = null;
     setRowDragPreview(null);
+    setLiftedRowPreview(null);
     setRowDragGuide(null);
     document.documentElement.classList.remove("rvg-is-dragging");
     event.currentTarget.style.cursor = "default";
@@ -5628,6 +5639,26 @@ function TableInner({
         ]
       }
     ),
+    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__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
+            },
+            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
+          },
+          `row-preview:${column.key}`
+        ))
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {

package/dist/index.css

@@ -1638,13 +1638,16 @@
 }
 .rvg-row-drag-preview {
   position: absolute;
-  top: 2px;
-  left: 2px;
-  overflow: visible;
-  border: 1px solid #a9c8f5;
-  background: #fff;
-  box-shadow: 0 2px 6px rgba(5, 5, 5, 0.08);
+  z-index: 6;
+  left: 0;
+  overflow: hidden;
+  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;
+  pointer-events: none;
+  transform: translateY(-1px);
 }
 .rvg-row-drag-preview-cell {
   position: absolute;
@@ -1665,6 +1668,14 @@
   text-overflow: ellipsis;
   box-sizing: border-box;
 }
+.rvg-row-drag-preview.is-selected {
+  border-color: var(--rvg-color-primary);
+  background: var(--rvg-color-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);
+  color: var(--rvg-color-axis-selection-text);
+}
 .rvg-row-drag-preview-cell svg {
   width: 16px;
   height: 16px;

package/dist/index.d.cts

@@ -230,10 +230,12 @@ interface GridColumn<Row> {
     renderCell?: (value: unknown, row: Row, rowIndex: number) => ReactNode;
     /** Show this column in the summary row. true sums numeric values; a function can return custom content. */
     summary?: boolean | ((rows: Row[], column: GridColumn<Row>) => ReactNode);
-    /** Custom cell paint style. Supports text color and background color in canvas rendering. */
+    /** Custom cell paint style used by canvas rendering. */
     cellStyle?: (value: unknown, row: Row, rowIndex: number) => {
         color?: string;
         backgroundColor?: string;
+        /** Override this cell's right and bottom grid separators without changing their geometry. */
+        gridColor?: string;
     };
 }
 /** Zero-based row/column coordinates inside the current row and column arrays. */

package/dist/index.d.ts

@@ -230,10 +230,12 @@ interface GridColumn<Row> {
     renderCell?: (value: unknown, row: Row, rowIndex: number) => ReactNode;
     /** Show this column in the summary row. true sums numeric values; a function can return custom content. */
     summary?: boolean | ((rows: Row[], column: GridColumn<Row>) => ReactNode);
-    /** Custom cell paint style. Supports text color and background color in canvas rendering. */
+    /** Custom cell paint style used by canvas rendering. */
     cellStyle?: (value: unknown, row: Row, rowIndex: number) => {
         color?: string;
         backgroundColor?: string;
+        /** Override this cell's right and bottom grid separators without changing their geometry. */
+        gridColor?: string;
     };
 }
 /** Zero-based row/column coordinates inside the current row and column arrays. */

package/dist/index.js

@@ -877,7 +877,11 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
           if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
           onChange(next);
         },
-        onBlur: commitValue,
+        onBlur: (event) => {
+          const nextTarget = event.relatedTarget;
+          if (nextTarget instanceof Element && nextTarget.closest("[data-rvg-preserve-edit]")) return;
+          commitValue();
+        },
         onKeyDown: handleKeyDown
       }
     ),
@@ -1246,6 +1250,7 @@ function paintGrid(options) {
         const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
         const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
         const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
+        const cellGridColor = cellStyle?.gridColor ? resolveColor(cellStyle.gridColor) : void 0;
         if (!isSelectedCell && !isRangeCell && cellStyle?.backgroundColor) {
           const cellBackground = resolveColor(cellStyle.backgroundColor);
           if (cellBackground) {
@@ -1272,7 +1277,7 @@ function paintGrid(options) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
+        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : isRangeCell ? colors.selectionFill : cellGridColor ?? colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
@@ -2097,6 +2102,7 @@ function TableInner({
   const [editing, setEditing] = useState6(null);
   const [draft, setDraft] = useState6("");
   const [rowDragPreview, setRowDragPreview] = useState6(null);
+  const [liftedRowPreview, setLiftedRowPreview] = useState6(null);
   const [columnDragPreview, setColumnDragPreview] = useState6(null);
   const [columnDropTarget, setColumnDropTarget] = useState6(null);
   useEffect3(() => {
@@ -3369,24 +3375,29 @@ function TableInner({
       event.currentTarget.style.cursor = "move";
     }
     event.preventDefault();
+    const canvasTop = event.currentTarget.getBoundingClientRect().top;
+    setLiftedRowPreview({
+      sourceIndex: drag.sourceIndex,
+      top: Math.max(bodyTop, Math.min(renderHeight - rowHeight, event.clientY - canvasTop - rowHeight / 2))
+    });
     const rawTargetIndex = locateRow(event.clientY);
     if (rawTargetIndex < 0) return;
-    const canvasTop = event.currentTarget.getBoundingClientRect().top;
     const rowTop = bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top;
     const edge = event.clientY - canvasTop < rowTop + rowHeight / 2 ? "top" : "bottom";
     let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
     if (drag.sourceIndex < targetIndex) targetIndex -= 1;
     targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
     drag.targetIndex = targetIndex;
-    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex: drag.sourceIndex, targetIndex });
+    setRowDragPreview(null);
     setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
-  }, [bodyTop, hideDragTooltips, locateRow, rowHeight, rows.length, setRowDragGuide]);
+  }, [bodyTop, hideDragTooltips, locateRow, renderHeight, rowHeight, rows.length, setRowDragGuide]);
   const finishRowOrderPointerDrag = useCallback2((event, apply) => {
     const drag = rowOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture?.(event.pointerId);
     rowOrderDragRef.current = null;
     setRowDragPreview(null);
+    setLiftedRowPreview(null);
     setRowDragGuide(null);
     document.documentElement.classList.remove("rvg-is-dragging");
     event.currentTarget.style.cursor = "default";
@@ -5598,6 +5609,26 @@ function TableInner({
         ]
       }
     ),
+    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__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
+            },
+            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
+          },
+          `row-preview:${column.key}`
+        ))
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ jsx8(
       "div",
       {

package/package.json

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