react-glide-table 2.3.0 → 2.3.2

package/README.md

@@ -75,6 +75,7 @@ export function Products({ data }: { data: Product[] }) {
 | `className` / column `className` / `headerClassName` | Extra class hooks                                                                 |
 | `labels` / `summary` / `toolbar`                     | Copy and slot nodes                                                               |
 | `Column.render` / `ColumnDef.cell`                   | Cell content custom render (prefer `update` via context)                          |
+| `Column.copyValue`                                   | Clipboard: `"display"` (default) / `"value"` / `"omit"` / `(ctx) => string`       |
 | `Column.kind` / `cellRenderers`                      | Built-in or custom cell kinds (override / add via registry)                       |
 
 Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
@@ -240,6 +241,32 @@ Cell selection ships with clipboard shortcuts. The table parses TSV and emits st
 
 Subtree copy encodes relative tree depth as leading tabs in the TSV so paste can rebuild parent/child nesting via `payload.depths`. Depth is only inferred when the clipboard looks like subtree indentation (first row unindented, at least one later row indented). Otherwise leading empty cells are kept as real values (e.g. Excel/Sheets blank first column) and `depths` stay `0`.
 
+Per-column `copyValue` controls what lands on the clipboard when a custom `render` / `kind` is present:
+
+- (default) / `"display"` — text from the rendered cell (buttons stay empty)
+- `"value"` — raw accessor / field value (e.g. a count behind a button)
+- `"omit"` — drop the column from the TSV entirely (neighbors shift left; same-table paste may misalign)
+- `(ctx) => string` — fully custom clipboard string
+
+```tsx
+<ProductTable.Column
+  field="partCount"
+  copyValue="value"
+  render={({ value }) => <button type="button">{value}개 보기</button>}
+>
+  Part No
+</ProductTable.Column>
+
+<ProductTable.Column
+  field="actions"
+  virtual
+  copyValue="omit"
+  render={() => <button type="button">Edit</button>}
+>
+  Actions
+</ProductTable.Column>
+```
+
 ```tsx
 import type { RowsPastePayload } from "react-glide-table/compound";
 

package/dist/compound.cjs

@@ -2658,9 +2658,123 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// 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 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
 var import_react7 = require("react");
 
+// src/components/ui/table/features/cell-selection/activeCellSelectionOwner.ts
+var activeOwner = null;
+var clearByOwner = /* @__PURE__ */ new Map();
+function createCellSelectionOwner() {
+  return /* @__PURE__ */ Symbol("cell-selection-owner");
+}
+function registerCellSelectionOwner(owner, clearSelection) {
+  clearByOwner.set(owner, clearSelection);
+  return () => {
+    clearByOwner.delete(owner);
+    if (activeOwner === owner) {
+      activeOwner = null;
+    }
+  };
+}
+function claimCellSelectionOwner(owner) {
+  if (activeOwner === owner) return;
+  activeOwner = owner;
+  for (const [id, clearSelection] of clearByOwner) {
+    if (id !== owner) {
+      clearSelection();
+    }
+  }
+}
+function isActiveCellSelectionOwner(owner) {
+  return activeOwner === owner;
+}
+function releaseCellSelectionOwner(owner) {
+  if (activeOwner === owner) {
+    activeOwner = null;
+  }
+}
+
 // src/components/ui/table/features/cell-selection/copyData.ts
 var import_react6 = require("react");
 function isReactNodeIterable(node) {
@@ -2833,19 +2947,31 @@ function extractRenderedCopyText(node, value, cellPosition, root) {
 function formatCopyCellText(rowData, columnDef, columnId, visibleRow, fallbackIndex, sourceCell, cellPosition, options) {
   const meta = columnDef.meta;
   const value = sourceCell ? sourceCell.getValue() : readRowColumnValue(rowData, columnDef);
+  const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
+  const ctx = {
+    value,
+    row,
+    index: row.index,
+    columnId,
+    cellProps: meta?.cellProps,
+    update: () => {
+    }
+  };
+  const copyValue = meta?.copyValue;
+  if (typeof copyValue === "function") {
+    try {
+      return sanitizeClipboardCell(copyValue(ctx));
+    } catch {
+      return formatCellValue(value);
+    }
+  }
+  if (copyValue === "value") {
+    return formatCellValue(value);
+  }
   const cellRender = meta?.cellRender;
   if (typeof cellRender === "function") {
     try {
-      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
-      const node = cellRender({
-        value,
-        row,
-        index: row.index,
-        columnId,
-        cellProps: meta?.cellProps,
-        update: () => {
-        }
-      });
+      const node = cellRender(ctx);
       return extractRenderedCopyText(node, value, cellPosition, options?.root);
     } catch {
       return formatCellValue(value);
@@ -2853,16 +2979,6 @@ function formatCopyCellText(rowData, columnDef, columnId, visibleRow, fallbackIn
   }
   if (options?.registry && meta?.kind && isPrimitiveCopyValue(value)) {
     try {
-      const row = visibleRow ?? createCopyRenderRow(rowData, fallbackIndex);
-      const ctx = {
-        value,
-        row,
-        index: row.index,
-        columnId,
-        cellProps: meta.cellProps,
-        update: () => {
-        }
-      };
       const renderer = resolveCellRenderer(options.registry, meta.kind, ctx);
       if (renderer) {
         const node = renderer.render(ctx);
@@ -2969,11 +3085,16 @@ function serializeCopyRowsToTSV(copyRows, visibleRows, bounds, depths, options)
   const resolvedDepths = depths && depths.length === copyRows.length ? depths : copyRows.map((row) => getRowDepth(row));
   const minDepth = Math.min(...resolvedDepths);
   const visibleRowByOriginal = buildVisibleRowLookup(visibleRows);
+  const copyableColumns = columnCells.flatMap((templateCell, colOffset) => {
+    const meta = templateCell.column.columnDef.meta;
+    if (meta?.copyValue === "omit") return [];
+    return [{ templateCell, colOffset }];
+  });
   return copyRows.map((rowData, index) => {
     const relativeDepth = Math.max(0, (resolvedDepths[index] ?? 0) - minDepth);
     const visibleRow = visibleRowByOriginal.get(rowData);
     const matchingCells = visibleRow?.getVisibleCells().slice(startCol, endCol + 1);
-    const line = columnCells.map((templateCell, colOffset) => {
+    const line = copyableColumns.map(({ templateCell, colOffset }) => {
       const sourceCell = matchingCells?.[colOffset];
       const column = sourceCell?.column ?? templateCell.column;
       return formatCopyCellText(
@@ -3067,87 +3188,6 @@ 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 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,
@@ -3163,6 +3203,7 @@ function useCellSelection({
   cellRendererRegistry,
   rootRef
 }) {
+  const ownerRef = (0, import_react7.useRef)(createCellSelectionOwner());
   const [dragState, setDragState] = (0, import_react7.useState)(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = (0, import_react7.useRef)(null);
   const dragStateRef = (0, import_react7.useRef)(dragState);
@@ -3174,6 +3215,7 @@ function useCellSelection({
   const handleCellMouseDown = (0, import_react7.useCallback)(
     (rowIndex, colIndex, options) => {
       if (!enabled) return;
+      claimCellSelectionOwner(ownerRef.current);
       setDragState((prev) => {
         if (options?.shiftKey && prev.start) {
           return {
@@ -3215,6 +3257,7 @@ function useCellSelection({
   const handleFillHandleMouseDown = (0, import_react7.useCallback)(
     (rowIndex, colIndex) => {
       if (!enabled) return;
+      claimCellSelectionOwner(ownerRef.current);
       setDragState((prev) => {
         const bounds = getCellSelectionBounds(prev.start, prev.end);
         if (!bounds) return prev;
@@ -3229,14 +3272,27 @@ function useCellSelection({
     },
     [enabled]
   );
+  const clearSelection = (0, import_react7.useCallback)(() => {
+    const prev = dragStateRef.current;
+    if (prev.start === null && prev.end === null && !prev.isSelecting && !prev.isFillDragging) {
+      return;
+    }
+    releaseCellSelectionOwner(ownerRef.current);
+    dragStateRef.current = INITIAL_DRAG_STATE;
+    setDragState(INITIAL_DRAG_STATE);
+  }, []);
   (0, import_react7.useEffect)(() => {
     if (!enabled) {
-      setDragState(INITIAL_DRAG_STATE);
+      clearSelection();
     }
-  }, [enabled]);
+  }, [clearSelection, enabled]);
+  (0, import_react7.useEffect)(() => {
+    return registerCellSelectionOwner(ownerRef.current, clearSelection);
+  }, [clearSelection]);
   (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
+      if (!isActiveCellSelectionOwner(ownerRef.current)) return;
       if (e.ctrlKey || e.metaKey || e.altKey) return;
       if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
         return;
@@ -3302,6 +3358,7 @@ function useCellSelection({
   (0, import_react7.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
+      if (!isActiveCellSelectionOwner(ownerRef.current)) return;
       if (!activeSelectionBounds) return;
       if (!(e.ctrlKey || e.metaKey)) return;
       if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
@@ -3338,6 +3395,7 @@ function useCellSelection({
     const pasteHandledRef = { current: false };
     const ignoreNextPasteRef = { current: false };
     const handleKeyDown = (e) => {
+      if (!isActiveCellSelectionOwner(ownerRef.current)) return;
       if (!activeSelectionBounds) return;
       if (!(e.ctrlKey || e.metaKey)) return;
       if (e.key.toLowerCase() !== "v") return;
@@ -3358,6 +3416,7 @@ function useCellSelection({
           const text = await navigator.clipboard.readText();
           if (pasteHandledRef.current) return;
           if (pendingPasteModeRef.current !== mode) return;
+          if (!isActiveCellSelectionOwner(ownerRef.current)) return;
           if (!text) return;
           pasteHandledRef.current = true;
           emitRowsPaste(text, mode);
@@ -3367,6 +3426,7 @@ function useCellSelection({
       })();
     };
     const handlePaste = (e) => {
+      if (!isActiveCellSelectionOwner(ownerRef.current)) return;
       if (!activeSelectionBounds) return;
       if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
         return;
@@ -3447,10 +3507,30 @@ function useCellSelection({
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection,
     copySelection
   };
 }
 
+// src/components/ui/table/features/selection-dismiss/isOutsideDismissTarget.ts
+var OVERLAY_DISMISS_IGNORE_SELECTOR = [
+  '[role="dialog"]',
+  '[role="alertdialog"]',
+  '[role="menu"]',
+  '[role="listbox"]',
+  '[role="tooltip"]',
+  '[aria-modal="true"]',
+  "[data-radix-portal]",
+  "[data-radix-popper-content-wrapper]",
+  "[data-floating-ui-portal]",
+  "[data-table-ignore-outside-dismiss]"
+].join(",");
+function isOverlayDismissIgnoreTarget(target) {
+  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  if (!element) return false;
+  return element.closest(OVERLAY_DISMISS_IGNORE_SELECTOR) !== null;
+}
+
 // src/components/ui/table/features/inline-search/useInlineSearch.ts
 var import_react8 = require("react");
 var EMPTY_MATCH_KEYS = /* @__PURE__ */ new Set();
@@ -4038,6 +4118,7 @@ function useGlideTable(options) {
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection: clearCellSelection,
     copySelection
   } = useCellSelection({
     data: tableData,
@@ -4053,6 +4134,37 @@ function useGlideTable(options) {
     cellRendererRegistry,
     rootRef
   });
+  const clearRowSelection = (0, import_react9.useCallback)(() => {
+    if (rowSelectionMode === "none") return;
+    const hasSelection = Object.values(rowSelection).some(Boolean);
+    if (!hasSelection) return;
+    if (onRowSelectionChange) {
+      onRowSelectionChange(() => ({}));
+      return;
+    }
+    setInternalRowSelection({});
+  }, [onRowSelectionChange, rowSelection, rowSelectionMode]);
+  (0, import_react9.useEffect)(() => {
+    const clearAllSelections = () => {
+      clearCellSelection();
+      clearRowSelection();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (event.defaultPrevented) return;
+      if (isEditablePasteTarget(event.target) || isEditablePasteTarget(document.activeElement)) {
+        return;
+      }
+      if (isOverlayDismissIgnoreTarget(event.target) || isOverlayDismissIgnoreTarget(document.activeElement)) {
+        return;
+      }
+      clearAllSelections();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [clearCellSelection, clearRowSelection]);
   const {
     editingCell,
     draftValue,
@@ -4925,7 +5037,8 @@ function buildColumnDef(props, sort, onSort) {
     cellProps,
     className,
     headerClassName,
-    render
+    render,
+    copyValue
   } = props;
   return {
     id: field,
@@ -4959,6 +5072,7 @@ function buildColumnDef(props, sort, onSort) {
       kind,
       cellProps,
       cellRender: render,
+      copyValue,
       frozen,
       reorderable,
       width,

package/dist/compound.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-DdeVn-9s.cjs';
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-DdeVn-9s.cjs';
+import { m as DataTableProps, s as TableColumnProps, T as TableColumnGroupProps, t as TableProps } from './types-hf2ruVdu.cjs';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnCopyValue, g as ColumnFreezeMeta, i as ColumnFreezeSide, j as DataTableClassNames, l as DataTableLabels, n as DataTableScrollSlotProps, o as DataTableSlots, P as PasteMode, R as RowSelectionMode, p as RowsPastePayload, q as SearchResultItem } from './types-hf2ruVdu.cjs';
 export { ColumnDef, ColumnOrderState, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**

package/dist/compound.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-DdeVn-9s.js';
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-DdeVn-9s.js';
+import { m as DataTableProps, s as TableColumnProps, T as TableColumnGroupProps, t as TableProps } from './types-hf2ruVdu.js';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnCopyValue, g as ColumnFreezeMeta, i as ColumnFreezeSide, j as DataTableClassNames, l as DataTableLabels, n as DataTableScrollSlotProps, o as DataTableSlots, P as PasteMode, R as RowSelectionMode, p as RowsPastePayload, q as SearchResultItem } from './types-hf2ruVdu.js';
 export { ColumnDef, ColumnOrderState, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**