react-glide-table 2.3.0 → 2.3.2

package/dist/compound.js

@@ -2646,9 +2646,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
 import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "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
 import { isValidElement } from "react";
 function isReactNodeIterable(node) {
@@ -2821,19 +2935,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);
@@ -2841,16 +2967,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);
@@ -2957,11 +3073,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(
@@ -3055,87 +3176,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,
@@ -3151,6 +3191,7 @@ function useCellSelection({
   cellRendererRegistry,
   rootRef
 }) {
+  const ownerRef = useRef5(createCellSelectionOwner());
   const [dragState, setDragState] = useState3(INITIAL_DRAG_STATE);
   const pendingPasteModeRef = useRef5(null);
   const dragStateRef = useRef5(dragState);
@@ -3162,6 +3203,7 @@ function useCellSelection({
   const handleCellMouseDown = useCallback3(
     (rowIndex, colIndex, options) => {
       if (!enabled) return;
+      claimCellSelectionOwner(ownerRef.current);
       setDragState((prev) => {
         if (options?.shiftKey && prev.start) {
           return {
@@ -3203,6 +3245,7 @@ function useCellSelection({
   const handleFillHandleMouseDown = useCallback3(
     (rowIndex, colIndex) => {
       if (!enabled) return;
+      claimCellSelectionOwner(ownerRef.current);
       setDragState((prev) => {
         const bounds = getCellSelectionBounds(prev.start, prev.end);
         if (!bounds) return prev;
@@ -3217,14 +3260,27 @@ function useCellSelection({
     },
     [enabled]
   );
+  const clearSelection = useCallback3(() => {
+    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);
+  }, []);
   useEffect5(() => {
     if (!enabled) {
-      setDragState(INITIAL_DRAG_STATE);
+      clearSelection();
     }
-  }, [enabled]);
+  }, [clearSelection, enabled]);
+  useEffect5(() => {
+    return registerCellSelectionOwner(ownerRef.current, clearSelection);
+  }, [clearSelection]);
   useEffect5(() => {
     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;
@@ -3290,6 +3346,7 @@ function useCellSelection({
   useEffect5(() => {
     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)) {
@@ -3326,6 +3383,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;
@@ -3346,6 +3404,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);
@@ -3355,6 +3414,7 @@ function useCellSelection({
       })();
     };
     const handlePaste = (e) => {
+      if (!isActiveCellSelectionOwner(ownerRef.current)) return;
       if (!activeSelectionBounds) return;
       if (isEditablePasteTarget(e.target) || isEditablePasteTarget(document.activeElement)) {
         return;
@@ -3435,10 +3495,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
 import {
   useCallback as useCallback4,
@@ -4033,6 +4113,7 @@ function useGlideTable(options) {
     handleCellMouseDown,
     handleCellMouseEnter,
     handleFillHandleMouseDown,
+    clearSelection: clearCellSelection,
     copySelection
   } = useCellSelection({
     data: tableData,
@@ -4048,6 +4129,37 @@ function useGlideTable(options) {
     cellRendererRegistry,
     rootRef
   });
+  const clearRowSelection = useCallback5(() => {
+    if (rowSelectionMode === "none") return;
+    const hasSelection = Object.values(rowSelection).some(Boolean);
+    if (!hasSelection) return;
+    if (onRowSelectionChange) {
+      onRowSelectionChange(() => ({}));
+      return;
+    }
+    setInternalRowSelection({});
+  }, [onRowSelectionChange, rowSelection, rowSelectionMode]);
+  useEffect7(() => {
+    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,
@@ -4920,7 +5032,8 @@ function buildColumnDef(props, sort, onSort) {
     cellProps,
     className,
     headerClassName,
-    render
+    render,
+    copyValue
   } = props;
   return {
     id: field,
@@ -4954,6 +5067,7 @@ function buildColumnDef(props, sort, onSort) {
       kind,
       cellProps,
       cellRender: render,
+      copyValue,
       frozen,
       reorderable,
       width,