react-glide-table 1.1.4 → 1.1.6

package/dist/index.js

@@ -31,7 +31,7 @@ import {
   useCallback as useCallback3,
   useEffect as useEffect4,
   useMemo as useMemo2,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState3
 } from "react";
 
@@ -175,7 +175,7 @@ function useCellEdit({
 }
 
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
@@ -195,10 +195,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
+  if (rowSpan <= 1) return void 0;
+  const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
+  if (!tbody) return void 0;
+  const rows = tbody.querySelectorAll(":scope > tr");
+  if (rows.length < rowIndex + rowSpan) return void 0;
+  const heights = [];
+  for (let i = 0; i < rowSpan; i++) {
+    const row = rows[rowIndex + i];
+    const height = row?.getBoundingClientRect().height ?? 0;
+    if (height <= 0) return void 0;
+    heights.push(height);
+  }
+  return heights;
+}
 function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   if (rowSpan <= 1) return rowIndex;
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
+  const heights = measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement);
+  if (heights && heights.length === rowSpan) {
+    let accrued = 0;
+    for (let i = 0; i < rowSpan; i++) {
+      accrued += heights[i];
+      if (relativeY < accrued) {
+        return rowIndex + i;
+      }
+    }
+    return rowIndex + rowSpan - 1;
+  }
   const rowHeight = rect.height / rowSpan;
   const offset = Math.min(
     Math.max(Math.floor(relativeY / rowHeight), 0),
@@ -220,7 +246,35 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
 var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
-function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+function rowRangeToHeightRatios(rowIndex, span, fromRow, toRowExclusive, rowHeights) {
+  const clampedFrom = Math.max(fromRow, rowIndex);
+  const clampedTo = Math.min(toRowExclusive, rowIndex + span);
+  if (clampedTo <= clampedFrom) {
+    return { offsetRatio: 0, lengthRatio: 0 };
+  }
+  if (!rowHeights || rowHeights.length !== span) {
+    return {
+      offsetRatio: (clampedFrom - rowIndex) / span,
+      lengthRatio: (clampedTo - clampedFrom) / span
+    };
+  }
+  const total = rowHeights.reduce((sum, height) => sum + height, 0) || 1;
+  let offsetPx = 0;
+  for (let i = 0; i < clampedFrom - rowIndex; i++) {
+    offsetPx += rowHeights[i] ?? 0;
+  }
+  let lengthPx = 0;
+  for (let i = clampedFrom - rowIndex; i < clampedTo - rowIndex; i++) {
+    lengthPx += rowHeights[i] ?? 0;
+  }
+  return {
+    offsetRatio: offsetPx / total,
+    lengthRatio: lengthPx / total,
+    offsetPx,
+    lengthPx
+  };
+}
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt, rowHeights) {
   const cellEndRow = rowIndex + rowSpan - 1;
   const span = cellEndRow - rowIndex + 1;
   if (span <= 1) return [];
@@ -239,20 +293,30 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
         continue;
       }
       if (runStart !== null) {
-        edges.push({
-          side,
-          offsetRatio: (runStart - rowIndex) / span,
-          heightRatio: (row - runStart) / span
-        });
+        const ratios = rowRangeToHeightRatios(
+          rowIndex,
+          span,
+          runStart,
+          row,
+          rowHeights
+        );
+        if (ratios.lengthRatio > 0) {
+          edges.push({ side, ...ratios });
+        }
         runStart = null;
       }
     }
     if (runStart !== null) {
-      edges.push({
-        side,
-        offsetRatio: (runStart - rowIndex) / span,
-        heightRatio: (toRowExclusive - runStart) / span
-      });
+      const ratios = rowRangeToHeightRatios(
+        rowIndex,
+        span,
+        runStart,
+        toRowExclusive,
+        rowHeights
+      );
+      if (ratios.lengthRatio > 0) {
+        edges.push({ side, ...ratios });
+      }
     }
   };
   const collectSide = (side, neighborCol) => {
@@ -281,14 +345,17 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
   }
   return edges;
 }
-function buildPartialVerticalGradient(edge) {
+function buildPartialEdgeGradient(edge) {
+  const usePx = edge.offsetPx != null && edge.lengthPx != null;
   const startPct = edge.offsetRatio * 100;
-  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
-  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
-  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
-  const isBottomProtrusion = edge.offsetRatio > 0;
-  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
-  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const endPct = (edge.offsetRatio + edge.lengthRatio) * 100;
+  const startPx = edge.offsetPx ?? 0;
+  const endPx = (edge.offsetPx ?? 0) + (edge.lengthPx ?? 0);
+  const overlapPx = SELECTION_EDGE_WIDTH_PX;
+  const isTopProtrusion = (usePx ? startPx === 0 : edge.offsetRatio === 0) && edge.lengthRatio < 1;
+  const isBottomProtrusion = usePx ? startPx > 0 : edge.offsetRatio > 0;
+  const startStop = usePx ? isBottomProtrusion ? `${Math.max(0, startPx - overlapPx)}px` : `${startPx}px` : isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = usePx ? isTopProtrusion ? `${endPx + overlapPx}px` : `${endPx}px` : isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
   const xPos = edge.side === "left" ? "0" : "100%";
   const layers = [
     {
@@ -298,7 +365,7 @@ function buildPartialVerticalGradient(edge) {
     }
   ];
   if (isTopProtrusion || isBottomProtrusion) {
-    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    const capTop = usePx ? isTopProtrusion ? `${Math.max(0, endPx - SELECTION_EDGE_WIDTH_PX)}px` : `${Math.max(0, startPx - SELECTION_EDGE_WIDTH_PX)}px` : isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
     layers.push({
       image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
       size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
@@ -307,7 +374,7 @@ function buildPartialVerticalGradient(edge) {
   }
   return layers;
 }
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt, rowHeights) {
   if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
     return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
@@ -316,39 +383,47 @@ function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVi
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
   const selectionContinuesBelow = cellEndRow < bounds.endRow;
-  const shadows = [];
-  if (isTopEdge) {
-    shadows.push(
-      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isBottomEdge) {
-    shadows.push(
-      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isLeftEdge) {
-    shadows.push(
-      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isRightEdge) {
-    shadows.push(
-      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
   const stepEdges = getMergedCellStepEdges(
     rowIndex,
     colIndex,
     bounds,
     rowSpan,
-    isVisuallySelectedAt
+    isVisuallySelectedAt,
+    rowHeights
   );
+  const shadows = [];
+  const hasFullPerimeter = isTopEdge && isBottomEdge && isLeftEdge && isRightEdge && stepEdges.length === 0;
+  if (hasFullPerimeter) {
+    shadows.push(
+      `inset 0 0 0 ${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_COLOR}`
+    );
+  } else {
+    if (isTopEdge) {
+      shadows.push(
+        `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isBottomEdge) {
+      shadows.push(
+        `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isLeftEdge) {
+      shadows.push(
+        `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isRightEdge) {
+      shadows.push(
+        `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+  }
   const gradients = [];
   const sizes = [];
   const positions = [];
   for (const edge of stepEdges) {
-    for (const partial of buildPartialVerticalGradient(edge)) {
+    for (const partial of buildPartialEdgeGradient(edge)) {
       gradients.push(partial.image);
       sizes.push(partial.size);
       positions.push(partial.position);
@@ -377,6 +452,127 @@ function hasCellSelectionEdges(style) {
   );
 }
 
+// src/components/ui/table/features/cell-selection/copyData.ts
+function formatCellValue(value) {
+  if (value === null || value === void 0) return "";
+  return String(value);
+}
+function getNestedValue(row, path) {
+  if (!path.includes(".")) return row[path];
+  return path.split(".").reduce((current, key) => {
+    if (current === null || current === void 0 || typeof current !== "object") {
+      return void 0;
+    }
+    return current[key];
+  }, row);
+}
+function readRowColumnValue(rowData, columnDef) {
+  if ("accessorFn" in columnDef && typeof columnDef.accessorFn === "function") {
+    return columnDef.accessorFn(rowData, 0);
+  }
+  if ("accessorKey" in columnDef && columnDef.accessorKey != null && columnDef.accessorKey !== "") {
+    return getNestedValue(rowData, String(columnDef.accessorKey));
+  }
+  return void 0;
+}
+function flattenSubtreeRows(row) {
+  const children = row.children;
+  if (!Array.isArray(children) || children.length === 0) return [];
+  const result = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      result.push(node);
+      const nested = node.children;
+      if (Array.isArray(nested) && nested.length > 0) {
+        walk(nested);
+      }
+    }
+  };
+  walk(children);
+  return result;
+}
+function hasSubtree(row) {
+  const children = row.children;
+  return Array.isArray(children) && children.length > 0;
+}
+function getOriginalRowId(original) {
+  return String(original.id ?? original.uniqueId ?? "");
+}
+function getRowDepth(original) {
+  return typeof original.level === "number" ? original.level : 0;
+}
+function collectCopyRowEntries(visibleRows, bounds, mode = "visible") {
+  const { startRow, endRow } = bounds;
+  const result = [];
+  const includedOriginalIds = /* @__PURE__ */ new Set();
+  const appendSubtree = (node, depth) => {
+    const children = node.children;
+    if (!Array.isArray(children) || children.length === 0) return;
+    for (const child of children) {
+      const childId = getOriginalRowId(child);
+      if (!(childId && includedOriginalIds.has(childId))) {
+        result.push({ row: child, depth });
+        if (childId) includedOriginalIds.add(childId);
+      }
+      appendSubtree(child, depth + 1);
+    }
+  };
+  for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
+    const row = visibleRows[rowIndex];
+    if (!row) continue;
+    const originalId = getOriginalRowId(row.original);
+    if (originalId && includedOriginalIds.has(originalId)) continue;
+    const depth = getRowDepth(row.original);
+    result.push({ row: row.original, depth });
+    if (originalId) includedOriginalIds.add(originalId);
+    if (mode !== "subtree" || !hasSubtree(row.original)) continue;
+    appendSubtree(row.original, depth + 1);
+  }
+  return result;
+}
+function collectCopyRows(visibleRows, bounds, mode = "visible") {
+  return collectCopyRowEntries(visibleRows, bounds, mode).map((entry) => entry.row);
+}
+function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths) {
+  if (copyRows.length === 0) return "";
+  const { startCol, endCol } = bounds;
+  const columnCells = visibleRows[0]?.getVisibleCells().slice(startCol, endCol + 1) ?? [];
+  if (columnCells.length === 0) return "";
+  const resolvedDepths = depths && depths.length === copyRows.length ? depths : copyRows.map((row) => getRowDepth(row));
+  const minDepth = Math.min(...resolvedDepths);
+  return copyRows.map((rowData, index) => {
+    const relativeDepth = Math.max(0, (resolvedDepths[index] ?? 0) - minDepth);
+    const line = columnCells.map(
+      (cell) => formatCellValue(
+        readRowColumnValue(
+          rowData,
+          cell.column.columnDef
+        )
+      )
+    ).join("	");
+    return `${"	".repeat(relativeDepth)}${line}`;
+  }).join("\n");
+}
+function serializeSelectionToTSV(visibleRows, bounds, mode = "visible") {
+  const entries = collectCopyRowEntries(visibleRows, bounds, mode);
+  return serializeCopyRowsToTSV(
+    entries.map((entry) => entry.row),
+    visibleRows,
+    bounds,
+    entries.map((entry) => entry.depth)
+  );
+}
+async function writeSelectionToClipboard(visibleRows, bounds, mode = "visible") {
+  const text = serializeSelectionToTSV(visibleRows, bounds, mode);
+  if (!text) return false;
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    return false;
+  }
+  return true;
+}
+
 // src/components/ui/table/features/cell-selection/fillData.ts
 function getColumnAccessorKey2(columnDef) {
   if ("accessorKey" in columnDef && columnDef.accessorKey) {
@@ -433,15 +629,103 @@ function hasFillExtension(sourceBounds, fillBounds) {
   return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
 }
 
+// src/components/ui/table/features/cell-selection/pasteData.ts
+function countLeadingEmptyCells(cells) {
+  let depth = 0;
+  while (depth < cells.length && cells[depth] === "") {
+    depth += 1;
+  }
+  return depth;
+}
+function looksLikeSubtreeIndentation(leadingEmptyCounts) {
+  if (leadingEmptyCounts.length === 0) return false;
+  const firstDepth = leadingEmptyCounts[0] ?? 0;
+  if (firstDepth !== 0) return false;
+  return leadingEmptyCounts.some((depth) => depth > 0);
+}
+function parseClipboardTSV(text) {
+  return parseClipboardTSVWithDepths(text).values;
+}
+function parseClipboardTSVWithDepths(text) {
+  if (!text) return { values: [], depths: [] };
+  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const withoutTrailing = normalized.replace(/\n+$/, "");
+  if (!withoutTrailing) return { values: [], depths: [] };
+  const rows = withoutTrailing.split("\n").map((line) => line.split("	"));
+  const leadingEmptyCounts = rows.map(countLeadingEmptyCells);
+  const treatAsDepth = looksLikeSubtreeIndentation(leadingEmptyCounts);
+  const values = [];
+  const depths = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const cells = rows[index] ?? [];
+    const depth = leadingEmptyCounts[index] ?? 0;
+    if (treatAsDepth) {
+      values.push(cells.slice(depth));
+      depths.push(depth);
+    } else {
+      values.push(cells);
+      depths.push(0);
+    }
+  }
+  return { values, depths };
+}
+function resolvePasteColumnIds(rows, startCol, width) {
+  if (width <= 0) return [];
+  const cells = rows[0]?.getVisibleCells() ?? [];
+  const columnIds = [];
+  for (let offset = 0; offset < width; offset += 1) {
+    const cell = cells[startCol + offset];
+    if (!cell) break;
+    columnIds.push(cell.column.id);
+  }
+  return columnIds;
+}
+function buildRowsPastePayload(rows, startRow, startCol, text, mode, endRow = startRow) {
+  const { values, depths } = parseClipboardTSVWithDepths(text);
+  if (values.length === 0) return null;
+  const width = Math.max(...values.map((row) => row.length), 0);
+  if (width === 0) return null;
+  const columnIds = resolvePasteColumnIds(rows, startCol, width);
+  if (columnIds.length === 0) return null;
+  const rowIds = [];
+  for (let offset = 0; offset < values.length; offset += 1) {
+    const row = rows[startRow + offset];
+    if (!row) break;
+    rowIds.push(row.id);
+  }
+  const anchorRow = rows[endRow] ?? rows[startRow];
+  return {
+    mode,
+    startRow,
+    startCol,
+    endRow,
+    rowIds,
+    anchorRowId: anchorRow?.id ?? "",
+    columnIds,
+    values,
+    depths
+  };
+}
+function isEditablePasteTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return Boolean(target.isContentEditable);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 function useCellSelection({
   data,
   rows,
   enabled = true,
+  enableSubtreeCopy = false,
+  enableInsertPaste = true,
   onDataChange,
-  onBatchChange
+  onBatchChange,
+  onRowsPaste
 }) {
   const [dragState, setDragState] = useState2(INITIAL_DRAG_STATE);
+  const pendingPasteModeRef = useRef2(null);
   const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
   const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
   const handleCellMouseDown = useCallback2(
@@ -495,21 +779,113 @@ function useCellSelection({
       setDragState(INITIAL_DRAG_STATE);
     }
   }, [enabled]);
+  const copySelection = useCallback2(
+    async (options) => {
+      if (!enabled || !activeSelectionBounds) return false;
+      const mode = options?.includeDescendants && enableSubtreeCopy ? "subtree" : "visible";
+      return writeSelectionToClipboard(rows, activeSelectionBounds, mode);
+    },
+    [activeSelectionBounds, enableSubtreeCopy, enabled, rows]
+  );
   useEffect2(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "c" && activeSelectionBounds) {
-        const { startRow, endRow, startCol, endCol } = activeSelectionBounds;
-        const selectedData = rows.slice(startRow, endRow + 1).map((row) => {
-          const cells = row.getVisibleCells();
-          return cells.slice(startCol, endCol + 1).map((cell) => cell.getValue()).join("	");
-        }).join("\n");
-        navigator.clipboard.writeText(selectedData);
-      }
+      if (!activeSelectionBounds) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const isSubtreeShortcut = enableSubtreeCopy && e.shiftKey && e.key.toLowerCase() === "c";
+      const isVisibleCopyShortcut = !e.shiftKey && e.key.toLowerCase() === "c";
+      if (!isSubtreeShortcut && !isVisibleCopyShortcut) return;
+      e.preventDefault();
+      void copySelection({ includeDescendants: isSubtreeShortcut });
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [activeSelectionBounds, enabled, rows]);
+  }, [activeSelectionBounds, copySelection, enableSubtreeCopy, enabled]);
+  const emitRowsPaste = useCallback2(
+    (text, mode) => {
+      if (!onRowsPaste || !activeSelectionBounds) return false;
+      const payload = buildRowsPastePayload(
+        rows,
+        activeSelectionBounds.startRow,
+        activeSelectionBounds.startCol,
+        text,
+        mode,
+        activeSelectionBounds.endRow
+      );
+      if (!payload) return false;
+      onRowsPaste(payload);
+      return true;
+    },
+    [activeSelectionBounds, onRowsPaste, rows]
+  );
+  useEffect2(() => {
+    if (!enabled || !onRowsPaste) return;
+    const pasteHandledRef = { current: false };
+    const ignoreNextPasteRef = { current: false };
+    const handleKeyDown = (e) => {
+      if (!activeSelectionBounds) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      if (e.key.toLowerCase() !== "v") return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      if (e.shiftKey && !enableInsertPaste) {
+        ignoreNextPasteRef.current = true;
+        pendingPasteModeRef.current = null;
+        return;
+      }
+      const mode = e.shiftKey ? "insert" : "overwrite";
+      pasteHandledRef.current = false;
+      ignoreNextPasteRef.current = false;
+      pendingPasteModeRef.current = mode;
+      void (async () => {
+        try {
+          const text = await navigator.clipboard.readText();
+          if (pasteHandledRef.current) return;
+          if (pendingPasteModeRef.current !== mode) return;
+          if (!text) return;
+          pasteHandledRef.current = true;
+          emitRowsPaste(text, mode);
+          pendingPasteModeRef.current = null;
+        } catch {
+        }
+      })();
+    };
+    const handlePaste = (e) => {
+      if (!activeSelectionBounds) return;
+      if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      if (ignoreNextPasteRef.current) {
+        ignoreNextPasteRef.current = false;
+        pendingPasteModeRef.current = null;
+        return;
+      }
+      const mode = pendingPasteModeRef.current ?? "overwrite";
+      if (pasteHandledRef.current) {
+        e.preventDefault();
+        return;
+      }
+      const text = e.clipboardData?.getData("text/plain");
+      if (text == null || text === "") return;
+      pasteHandledRef.current = true;
+      e.preventDefault();
+      emitRowsPaste(text, mode);
+      pendingPasteModeRef.current = null;
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("paste", handlePaste);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("paste", handlePaste);
+    };
+  }, [
+    activeSelectionBounds,
+    emitRowsPaste,
+    enableInsertPaste,
+    enabled,
+    onRowsPaste
+  ]);
   useEffect2(() => {
     if (!enabled) return;
     const handleMouseUp = () => {
@@ -555,12 +931,13 @@ function useCellSelection({
     activeSelectionBounds,
     handleCellMouseDown,
     handleCellMouseEnter,
-    handleFillHandleMouseDown
+    handleFillHandleMouseDown,
+    copySelection
   };
 }
 
 // src/components/ui/table/features/row-expand/row-expand.ts
-import { useEffect as useEffect3, useMemo, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 function getFieldValue(row, key) {
   return row[key];
 }
@@ -590,8 +967,8 @@ var useConvertTreeData = ({
   expandedRows,
   onExpandedRowsChange
 }) => {
-  const onExpandedRowsChangeRef = useRef2(onExpandedRowsChange);
-  const hasInitializedRef = useRef2(false);
+  const onExpandedRowsChangeRef = useRef3(onExpandedRowsChange);
+  const hasInitializedRef = useRef3(false);
   useEffect3(() => {
     onExpandedRowsChangeRef.current = onExpandedRowsChange;
   }, [onExpandedRowsChange]);
@@ -637,15 +1014,16 @@ var useConvertTreeData = ({
       children: [],
       processed: false
     }));
-    const itemMap = /* @__PURE__ */ new Map();
-    dataWithLevels.forEach((item) => {
-      const key = getFieldValue(item, toggleField);
-      if (typeof key !== "string" || !key) return;
-      if (!itemMap.has(key)) {
-        itemMap.set(key, []);
+    const findNearestPrecedingParent = (index, parentKey) => {
+      for (let i = index - 1; i >= 0; i -= 1) {
+        const candidate = dataWithLevels[i];
+        if (!candidate) continue;
+        if (getFieldValue(candidate, toggleField) === parentKey) {
+          return candidate;
+        }
       }
-      itemMap.get(key)?.push(item);
-    });
+      return void 0;
+    };
     const rootItems = [];
     dataWithLevels.forEach((item) => {
       if (!getFieldValue(item, childField)) {
@@ -653,29 +1031,18 @@ var useConvertTreeData = ({
         item.processed = true;
       }
     });
-    dataWithLevels.forEach((item) => {
+    dataWithLevels.forEach((item, index) => {
       const parentKey = getFieldValue(item, childField);
       if (!parentKey || item.processed) return;
-      const parentItems = dataWithLevels.filter(
-        (parent) => getFieldValue(parent, toggleField) === parentKey && !getFieldValue(parent, childField)
-      );
-      if (parentItems.length > 0) {
-        const parent = parentItems[0];
+      const parent = findNearestPrecedingParent(index, parentKey);
+      if (parent) {
         item.level = parent.level + 1;
         parent.children.push(item);
         item.processed = true;
-      } else {
-        const otherParents = itemMap.get(String(parentKey)) || [];
-        if (otherParents.length > 0) {
-          const parent = otherParents[0];
-          item.level = parent.level + 1;
-          parent.children.push(item);
-          item.processed = true;
-        } else {
-          rootItems.push(item);
-          item.processed = true;
-        }
+        return;
       }
+      rootItems.push(item);
+      item.processed = true;
     });
     return rootItems;
   }, [enabled, data, toggleField, childField, flattenField]);
@@ -700,16 +1067,23 @@ var useConvertTreeData = ({
       return result;
     };
     const flattenedData = flatten(processedData, [], 0);
-    flattenedData.forEach((item) => {
-      if (getFieldValue(item, childField)) {
-        const parentItem = flattenedData.find(
-          (parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
-        );
-        const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
-        item.parentCount = parentAmount || 1;
-      } else {
+    flattenedData.forEach((item, index) => {
+      const parentKey = getFieldValue(item, childField);
+      if (!parentKey) {
         item.parentCount = 1;
+        return;
       }
+      let parentItem;
+      for (let i = index - 1; i >= 0; i -= 1) {
+        const candidate = flattenedData[i];
+        if (!candidate) continue;
+        if (getFieldValue(candidate, toggleField) === parentKey) {
+          parentItem = candidate;
+          break;
+        }
+      }
+      const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
+      item.parentCount = parentAmount || 1;
     });
     return flattenedData;
   }, [
@@ -856,6 +1230,10 @@ function useGlideTable(options) {
     expandedRows: controlledExpandedRows,
     onExpandedRowsChange,
     preventExpand = false,
+    enableSubtreeCopy,
+    onCopyActionsReady,
+    onRowsPaste,
+    enableInsertPaste,
     enableVirtualization = true,
     estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
     virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
@@ -870,13 +1248,13 @@ function useGlideTable(options) {
     };
   }, [labelsProp, emptyText, loadingText, selectionLabel]);
   const enableExpand = Boolean(toggleField);
+  const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
   const [internalRowSelection, setInternalRowSelection] = useState3({});
   const [internalExpandedRows, setInternalExpandedRows] = useState3(
     () => /* @__PURE__ */ new Set()
   );
   const [hoveredRowIndex, setHoveredRowIndex] = useState3(null);
-  const [hoveredGroupKey, setHoveredGroupKey] = useState3(null);
-  const scrollRef = useRef3(null);
+  const scrollRef = useRef4(null);
   const shouldVirtualize = enableVirtualization && !enableRowSpan;
   useEffect4(() => {
     if (enableVirtualization && enableRowSpan) {
@@ -939,6 +1317,7 @@ function useGlideTable(options) {
     return collectRowSpanColumns(columns);
   }, [enableRowSpan, columns]);
   const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
+  const primaryRowSpanColumnId = rowSpanColumnKeys[0]?.columnId;
   const columnRowSpanMap = useMemo2(
     () => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
     [tableData, rowSpanColumnKeys]
@@ -957,27 +1336,29 @@ function useGlideTable(options) {
   const totalSize = rowVirtualizer.getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
-  const selectedGroupKeys = useMemo2(() => {
-    if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
-    const keys = /* @__PURE__ */ new Set();
+  const selectedRowIndices = useMemo2(() => {
+    const indices = /* @__PURE__ */ new Set();
     for (const selectedRow of selectedRows) {
-      const value = selectedRow.original[primaryRowSpanKey];
-      if (value !== null && value !== void 0) keys.add(String(value));
+      indices.add(selectedRow.index);
     }
-    return keys;
-  }, [enableRowSpan, primaryRowSpanKey, selectedRows]);
+    return indices;
+  }, [selectedRows]);
   const {
     dragState,
     activeSelectionBounds,
     handleCellMouseDown,
     handleCellMouseEnter,
-    handleFillHandleMouseDown
+    handleFillHandleMouseDown,
+    copySelection
   } = useCellSelection({
     data: tableData,
     rows,
     enabled: enableCellSelection,
+    enableSubtreeCopy: resolvedEnableSubtreeCopy,
+    enableInsertPaste: enableInsertPaste ?? true,
     onDataChange,
-    onBatchChange
+    onBatchChange,
+    onRowsPaste
   });
   const {
     editingCell,
@@ -999,22 +1380,10 @@ function useGlideTable(options) {
   );
   const clearHover = useCallback3(() => {
     setHoveredRowIndex(null);
-    setHoveredGroupKey(null);
   }, []);
-  const handleRowHover = useCallback3(
-    (rowIndex, rowData) => {
-      setHoveredRowIndex(rowIndex);
-      if (!primaryRowSpanKey) {
-        setHoveredGroupKey(null);
-        return;
-      }
-      const groupValue = rowData[primaryRowSpanKey];
-      setHoveredGroupKey(
-        groupValue === null || groupValue === void 0 ? null : String(groupValue)
-      );
-    },
-    [primaryRowSpanKey]
-  );
+  const handleRowHover = useCallback3((rowIndex, _rowData) => {
+    setHoveredRowIndex(rowIndex);
+  }, []);
   const handleToggleSelect = useCallback3(
     (row) => {
       if (!row.getCanSelect()) return;
@@ -1037,10 +1406,10 @@ function useGlideTable(options) {
       rowSpan: {
         enableRowSpan,
         primaryRowSpanKey,
+        primaryRowSpanColumnId,
         columnRowSpanMap,
         hoveredRowIndex,
-        hoveredGroupKey,
-        selectedGroupKeys,
+        selectedRowIndices,
         onRowHover: handleRowHover
       },
       selection: {
@@ -1078,10 +1447,10 @@ function useGlideTable(options) {
   }, [
     enableRowSpan,
     primaryRowSpanKey,
+    primaryRowSpanColumnId,
     columnRowSpanMap,
     hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
+    selectedRowIndices,
     handleRowHover,
     rowSelectionMode,
     selectOnRowClick,
@@ -1107,6 +1476,14 @@ function useGlideTable(options) {
     labels.expandRow,
     labels.collapseRow
   ]);
+  const copySelectionRef = useRef4(copySelection);
+  useEffect4(() => {
+    copySelectionRef.current = copySelection;
+  }, [copySelection]);
+  const stableCopySelection = useCallback3((options2) => copySelectionRef.current(options2), []);
+  useEffect4(() => {
+    onCopyActionsReady?.({ copySelection: stableCopySelection });
+  }, [onCopyActionsReady, stableCopySelection]);
   return {
     table,
     tableData,
@@ -1126,7 +1503,8 @@ function useGlideTable(options) {
     paddingBottom,
     rowContextValue,
     handleToggleSelect,
-    clearHover
+    clearHover,
+    copySelection: stableCopySelection
   };
 }
 
@@ -1136,7 +1514,7 @@ import { useMemo as useMemo3 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
 
 // src/components/ui/table/DataTableContext.tsx
 import { createContext, use } from "react";
@@ -1326,11 +1704,10 @@ function DataTableRow({
   const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
   const {
     enableRowSpan,
-    primaryRowSpanKey,
+    primaryRowSpanColumnId,
     columnRowSpanMap,
     hoveredRowIndex,
-    hoveredGroupKey,
-    selectedGroupKeys,
+    selectedRowIndices,
     onRowHover
   } = rowSpan;
   const { rowSelectionMode, selectOnRowClick, onRowClick, getRowClassName } = selection;
@@ -1363,9 +1740,11 @@ function DataTableRow({
   const rowData = row.original;
   const isRowHovered = hoveredRowIndex === rowIndex;
   const isRowSelected = row.getIsSelected();
-  const rowGroupKey = primaryRowSpanKey !== void 0 && rowData[primaryRowSpanKey] !== null && rowData[primaryRowSpanKey] !== void 0 ? String(rowData[primaryRowSpanKey]) : null;
-  const isGroupHovered = enableRowSpan && hoveredGroupKey !== null && rowGroupKey === hoveredGroupKey;
-  const isGroupSelected = enableRowSpan && rowGroupKey !== null && selectedGroupKeys.has(rowGroupKey);
+  const { startRow: primaryGroupStart, rowSpan: primaryGroupSpan } = resolveRowSpanAt(
+    primaryRowSpanColumnId ? columnRowSpanMap.get(primaryRowSpanColumnId) : void 0,
+    rowIndex
+  );
+  const isGroupHovered = enableRowSpan && hoveredRowIndex !== null && hoveredRowIndex >= primaryGroupStart && hoveredRowIndex <= primaryGroupStart + primaryGroupSpan - 1;
   const visibleCells = row.getVisibleCells();
   const columnIdsByIndex = visibleCells.map((cell) => cell.column.id);
   const isVisuallySelectedAt = activeSelectionBounds ? (targetRow, targetCol) => {
@@ -1389,7 +1768,7 @@ function DataTableRow({
   const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
   const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
   const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
-  const editInputRef = useRef4(null);
+  const editInputRef = useRef5(null);
   const isRowEditing = editingCell?.rowIndex === rowIndex;
   useEffect5(() => {
     if (!isRowEditing) return;
@@ -1439,9 +1818,19 @@ function DataTableRow({
           }
         }
         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
+        const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
+        let isMergedCellSelected = false;
+        if (isRowSpanColumn) {
+          for (let r = rowIndex; r < rowIndex + cellRowSpan; r += 1) {
+            if (selectedRowIndices.has(r)) {
+              isMergedCellSelected = true;
+              break;
+            }
+          }
+        }
+        const showCellSelected = isRowSpanColumn ? isMergedCellSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -1454,12 +1843,14 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const spanRowHeights = enableCellSelection && activeSelectionBounds && isCellDragSelected && cellRowSpan > 1 ? measureMergedSpanRowHeights(rowIndex, cellRowSpan) : void 0;
         const selectionEdgeStyle = getCellSelectionEdgeStyle(
           rowIndex,
           cellIndex,
           activeSelectionBounds,
           cellRowSpan,
-          isVisuallySelectedAt
+          isVisuallySelectedAt,
+          spanRowHeights
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
@@ -1469,6 +1860,7 @@ function DataTableRow({
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
             "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
@@ -1513,7 +1905,8 @@ function DataTableRow({
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
-              isMerged && cellIndex > 0 && "is-merged",
+              isMerged && "is-merged",
+              isMerged && cellIndex === 0 && showMergedRightEdge && "is-merged-row-first",
               showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
@@ -1970,7 +2363,7 @@ function buildColumnDef(props, sort, onSort) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-import { Children } from "react";
+import { Children, isValidElement as isValidElement2 } from "react";
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
 import { isValidElement } from "react";
@@ -2019,10 +2412,26 @@ function parseTableChildren(children) {
   }
   return slots;
 }
+function flattenColumnElements(children) {
+  const result = [];
+  for (const child of Children.toArray(children)) {
+    if (isTableColumnElement(child)) {
+      result.push(child);
+      continue;
+    }
+    if (isValidElement2(child)) {
+      const nested = child.props.children;
+      if (nested != null) {
+        result.push(...flattenColumnElements(nested));
+      }
+    }
+  }
+  return result;
+}
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return Children.toArray(children).filter(isTableColumnElement);
+  return flattenColumnElements(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -2223,10 +2632,14 @@ export {
   applyFillData,
   applySelectionUpdater,
   buildColumnRowSpanMap,
+  buildRowsPastePayload,
   canExpandRow,
+  collectCopyRowEntries,
+  collectCopyRows,
   collectFillChanges,
   collectRowSpanColumns,
   createTable,
+  flattenSubtreeRows,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
   getColumnEditType,
@@ -2234,13 +2647,22 @@ export {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  isEditablePasteTarget,
+  measureMergedSpanRowHeights,
   parseCellEditValue,
+  parseClipboardTSV,
+  parseClipboardTSVWithDepths,
   resolveDataTableLabels,
+  resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
+  rowRangeToHeightRatios,
+  serializeCopyRowsToTSV,
+  serializeSelectionToTSV,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,
   useConvertTreeData,
-  useGlideTable
+  useGlideTable,
+  writeSelectionToClipboard
 };